ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Pull Requests Activity

new dropdown content from Mik

Browse Source
This commit is contained in:
Emre
2025-10-28 19:32:09 +03:00
parent 1260afdd82
commit 3c9823bf80
35 changed files with 2511 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/cloud/CloudOverview.tsx
View File

@@ -1,61 +1,78 @@
import { CircleBackground } from '../../components/CircleBackground'
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
const focusAreas = [
{
title: 'Sovereign by Design',
label: 'Overview',
title: 'Decentralized Kubernetes on the ThreeFold Grid',
description:
'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
},
{
title: 'Secure by Default',
label: 'Core Concept',
title: 'Sovereign, self-managing operations',
description:
'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
},
{
title: 'Ready to Scale',
label: 'Developer Experience',
title: 'K3s-native workflows with full control',
description:
'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
'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-900 py-24 lg:py-32">
<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 -translate-x-1/2 -translate-y-1/2 opacity-40"
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-30 sm:opacity-40"
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">
<p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
Mycelium Cloud
</p>
<h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
A sovereign, self-healing cloud built for trusted automation.
</h2>
<p className="mt-6 text-lg text-gray-300">
Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
</p>
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-400">
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 italic">
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="rounded-3xl p-8 text-left transition hover:-translate-y-1"
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="text-lg font-semibold text-white">
{item.title}
<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>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
{item.description}
</p>
</div>
))}
</div>