forked from emre/www_projectmycelium_com
sasha-astiadi
26ae2f156a
- Added new app UI screenshots for cloud features (connector, billing, kubeconfig, reserve) - Added new hero image (cloudhero3.webp) for cloud section - Enhanced Texts component with new cyan color variant and default props support - Updated Eyebrow component to use consistent styling with accent color and tracking - Simplified CloudArchitecture component by removing redundant style props - Completely rebuilt CloudFeatures component with
83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
import { CircleBackground } from '../../components/CircleBackground'
|
|
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
|
|
|
|
const focusAreas = [
|
|
{
|
|
label: 'Overview',
|
|
title: 'Decentralized Kubernetes on the ThreeFold Grid',
|
|
description:
|
|
'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
|
|
},
|
|
{
|
|
label: 'Core Concept',
|
|
title: 'Sovereign, self-managing operations',
|
|
description:
|
|
'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
|
|
},
|
|
{
|
|
label: 'Developer Experience',
|
|
title: 'K3s-native workflows with full control',
|
|
description:
|
|
'Provision multi-master clusters, govern residency, and observe node health from a single programmable control plane.',
|
|
},
|
|
]
|
|
|
|
export function CloudOverview() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<CircleBackground
|
|
color="#06b6d4"
|
|
className="absolute left-1/2 top-full h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 opacity-30 blur-3xl"
|
|
/>
|
|
<CircleBackground
|
|
color="#22d3ee"
|
|
className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
|
|
/>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.18),_transparent_55%)]" />
|
|
</div>
|
|
<Container className="relative">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>
|
|
Platform Overview
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
|
|
A decentralized cloud that operates itself.
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold
|
|
Grid with cryptographic certainty. Networking, storage, and
|
|
orchestration are all built-in so developers can deploy critical
|
|
workloads without wrestling infrastructure.
|
|
</P>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Declarative, sovereign, and ready for production workloads anywhere.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
|
{focusAreas.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/15 opacity-0 transition group-hover:opacity-100" />
|
|
<div className="relative">
|
|
<Small className="text-xs uppercase tracking-[0.35em] text-cyan-300">
|
|
{item.label}
|
|
</Small>
|
|
<div className="mt-4 text-lg font-semibold text-white">
|
|
{item.title}
|
|
</div>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|