emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into development

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-23 16:01:30 +02:00
parent a3cd28fc6b 4c30524504
commit dfb469e7f7
14 changed files with 415 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.tsx
View File

@@ -10,8 +10,8 @@ export function Footer() {
<div className="flex items-center text-gray-900"> <div className="flex items-center text-gray-900">
<img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" /> <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
<div className="ml-4"> <div className="ml-4">
<p className="text-base font-semibold">Mycelium</p> <p className="text-base font-semibold">Project Mycelium</p>
<p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p> <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
</div> </div>
</div> </div>
<nav className="mt-10 flex gap-8"> <nav className="mt-10 flex gap-8">

BIN
src/images/desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

50
src/pages/cloud/CloudCTA.tsx
View File

@@ -1,35 +1,35 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { Button } from '../../components/Button' import { Button } from '../../components/Button'
import { CircleBackground } from '../../components/CircleBackground'
export function CloudCTA() { export function CloudCTA() {
return ( return (
<section className="relative bg-white py-20 lg:py-32 overflow-hidden"> <section className="relative overflow-hidden py-24 lg:py-32">
<CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
<Container className="relative"> <Container className="relative">
<motion.div <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-gray-200/60 bg-white/90 px-10 py-16 text-center shadow-[0_30px_120px_-70px_rgba(6,182,212,0.65)] backdrop-blur lg:px-16 lg:py-20">
initial={{ opacity: 0, y: 20 }} <div className="max-w-3xl mx-auto">
whileInView={{ opacity: 1, y: 0 }} <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
viewport={{ once: true }} Ready Today
transition={{ duration: 0.8 }} </p>
className="mx-auto max-w-3xl text-center" <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
> Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
<h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900"> </h2>
Ready to Transform Your Kubernetes Experience? <p className="mt-6 text-lg text-gray-600">
</h2> Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
<p className="mt-6 text-lg lg:text-xl text-gray-600"> </p>
Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads. <div className="mt-10 flex justify-center">
</p> <Button
<div className="mt-10 flex flex-wrap gap-4 justify-center"> to="https://myceliumcloud.tf"
<Button to="/download" variant="solid" color="cyan"> as="a"
Start Your Free Trial variant="solid"
</Button> color="cyan"
<Button to="https://manual.grid.tf" variant="outline" color="gray"> target="_blank"
Read Documentation rel="noreferrer"
</Button> >
Start Deploying
</Button>
</div>
</div> </div>
</motion.div> </div>
</Container> </Container>
</section> </section>
) )

159
src/pages/cloud/CloudHero.tsx
View File

@@ -1,65 +1,122 @@
import { motion } from 'framer-motion' import { useId } from 'react'
import { Globe } from '../../components/ui/Globe2'
import { CountUpNumber } from '../../components/CountUpNumber' import { Button } from '../../components/Button'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
const stats = [ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
{ value: 54958, label: 'CPU Cores' }, const id = useId()
{ value: 1493, label: 'Nodes' },
{ value: 5388956, label: 'GB Storage' }, return (
{ value: 44, label: 'Countries' }, <div {...props}>
] <svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-slow"
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M513 1025C230.23 1025 1 795.77 1 513"
stroke={`url(#${id}-gradient-1)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-1`}
x1="1"
y1="513"
x2="1"
y2="1025"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M913 513c0 220.914-179.086 400-400 400"
stroke={`url(#${id}-gradient-2)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-2`}
x1="913"
y1="513"
x2="913"
y2="913"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
)
}
export function CloudHero() { export function CloudHero() {
return ( return (
<section className="relative bg-white py-20 lg:py-32"> <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
{/* Text Content */} <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<motion.div <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
Mycelium Cloud Mycelium Cloud
</h1> </h1>
<p className="mt-6 text-lg lg:text-xl text-gray-600"> <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale Own every workload with certainty.
</h2>
<p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
</p> </p>
</motion.div> <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="cyan">
{/* Globe */} Start Deploying
<motion.div </Button>
initial={{ opacity: 0, scale: 0.9 }} <Button
animate={{ opacity: 1, scale: 1 }} to="https://manual.grid.tf"
transition={{ duration: 0.8, delay: 0.2 }} as="a"
className="flex items-center justify-center" variant="outline"
> color="gray"
<div className="relative w-full max-w-[500px] aspect-square"> target="_blank"
<Globe className="w-full h-full" /> rel="noreferrer"
>
View Documentation
</Button>
</div> </div>
</motion.div> </div>
</div> <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
{/* Stats */} <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6"> <img
{stats.map((stat, index) => ( src="/src/images/desktop.png"
<motion.div alt="Mycelium Cloud dashboard preview"
key={stat.label} className="mx-auto w-full max-w-[640px]"
initial={{ opacity: 0, y: 20 }} width={1366}
animate={{ opacity: 1, y: 0 }} height={768}
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }} />
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow" </div>
> </div>
<div className="text-2xl lg:text-3xl font-bold text-cyan-500">
<CountUpNumber end={stat.value} />
</div>
<p className="mt-2 text-sm text-gray-600">{stat.label}</p>
</motion.div>
))}
</div> </div>
</Container> </Container>
</section> </div>
) )
} }

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

@@ -0,0 +1,65 @@
import { CircleBackground } from '../../components/CircleBackground'
import { Container } from '../../components/Container'
const focusAreas = [
{
title: 'Sovereign by Design',
description:
'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
},
{
title: 'Secure by Default',
description:
'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
},
{
title: 'Ready to Scale',
description:
'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
},
]
export function CloudOverview() {
return (
<section className="relative overflow-hidden bg-gray-900 py-24 lg: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"
/>
<CircleBackground
color="#22d3ee"
className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
/>
</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>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-3">
{focusAreas.map((item) => (
<div
key={item.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-[0_20px_60px_-40px_rgba(6,182,212,0.6)] backdrop-blur"
>
<div className="text-base font-semibold text-cyan-200">
{item.title}
</div>
<p className="mt-4 text-sm leading-relaxed text-gray-200">
{item.description}
</p>
</div>
))}
</div>
</Container>
</section>
)
}

30
src/pages/cloud/CloudPage.tsx
View File

@@ -1,42 +1,28 @@
import { AnimatedSection } from '../../components/AnimatedSection' import { AnimatedSection } from '../../components/AnimatedSection'
import { CloudHero } from './CloudHero' import { CloudHero } from './CloudHero'
import { FeaturesSection } from './FeaturesSection' import { CloudOverview } from './CloudOverview'
import { MyceliumNetworking } from './MyceliumNetworking' import { ComputeStorageSplit } from './ComputeStorageSplit'
import { WebGateway } from './WebGateway' import { SecurityPillars } from './SecurityPillars'
import { MultiMaster } from './MultiMaster'
import { LoadBalancing } from './LoadBalancing'
import { CloudCTA } from './CloudCTA' import { CloudCTA } from './CloudCTA'
export default function CloudPage() { export default function CloudPage() {
return ( return (
<div> <>
<AnimatedSection> <AnimatedSection>
<CloudHero /> <CloudHero />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<FeaturesSection /> <CloudOverview />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<MyceliumNetworking /> <ComputeStorageSplit />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<WebGateway /> <SecurityPillars />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<MultiMaster />
</AnimatedSection>
<AnimatedSection>
<LoadBalancing />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<CloudCTA /> <CloudCTA />
</AnimatedSection> </AnimatedSection>
</div> </>
) )
} }

144
src/pages/cloud/ComputeStorageSplit.tsx Normal file
View File

@@ -0,0 +1,144 @@
import { Container } from '../../components/Container'
const computeFeatures = [
{
title: 'Deterministic Deployments',
description:
'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
},
{
title: 'Self-Managing & Stateless Infrastructure',
description:
'Fully autonomous infrastructure that scales globally without manual intervention.',
},
{
title: 'Zero-Image Technology (100x Compression)',
description:
'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
},
{
title: 'Smart Contract-Based Deployment',
description:
'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
},
{
title: 'Multi-Workload Compatibility with Secure Boot',
description:
'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
},
]
const storageFeatures = [
{
title: 'Quantum-Safe Storage (QSS)',
description:
'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
},
{
title: 'Self-Healing Storage System',
description:
'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
},
{
title: 'Multi-Protocol Data Access',
description:
'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
},
{
title: 'Geo-Aware Data Placement & Replication',
description:
'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
},
{
title: 'Ultra-Efficient Zero-Images (Flists)',
description:
'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
},
]
export function ComputeStorageSplit() {
return (
<section className="relative overflow-hidden bg-white">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
<Container className="relative py-24 lg:py-32">
<div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
<div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
<div className="max-w-xs">
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
Compute
</p>
<h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
Deterministic compute fabric.
</h2>
<p className="mt-4 text-sm text-gray-500">
Launch workloads with cryptographic certainty and autonomous operations.
</p>
</div>
<ul className="grid w-full gap-4">
{computeFeatures.map((item) => (
<li
key={item.title}
className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
>
<span className="text-sm font-semibold text-gray-900">
{item.title}
</span>
<span
className="text-xs text-gray-500 leading-relaxed"
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}}
>
{item.description}
</span>
</li>
))}
</ul>
</div>
<div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
<span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
</div>
<div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
<div className="max-w-xs">
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
Storage
</p>
<h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
Quantum-safe, sovereign data plane.
</h2>
<p className="mt-4 text-sm text-gray-500">
Protect and place data precisely while keeping access effortless.
</p>
</div>
<ul className="grid w-full gap-4">
{storageFeatures.map((item) => (
<li
key={item.title}
className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
>
<span className="text-sm font-semibold text-gray-900">
{item.title}
</span>
<span
className="text-xs text-gray-500 leading-relaxed"
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}}
>
{item.description}
</span>
</li>
))}
</ul>
</div>
</div>
</Container>
</section>
)
}

75
src/pages/cloud/FeaturesSection.tsx
View File

@@ -1,75 +0,0 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container'
const features = [
{
icon: '☁️',
title: 'Cloud-Native Architecture',
description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
},
{
icon: '🛡️',
title: 'Enterprise Security',
description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
},
{
icon: '📊',
title: 'Real-time Monitoring',
description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
},
{
icon: '🚀',
title: 'One-Click Deployments',
description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
},
{
icon: '👥',
title: 'Team Collaboration',
description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
},
{
icon: '⚙️',
title: 'Advanced Configuration',
description: 'Flexible configuration management with support for Helm charts and custom resources.',
},
]
export function FeaturesSection() {
return (
<section className="bg-gray-50 py-20 lg:py-32">
<Container>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Everything You Need to Succeed
</h2>
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
Powerful tools and features designed for modern cloud-native applications
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<motion.div
key={feature.title}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
>
<div className="text-4xl mb-4">{feature.icon}</div>
<h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
<p className="text-gray-600">{feature.description}</p>
</motion.div>
))}
</div>
</Container>
</section>
)
}

52
src/pages/cloud/LoadBalancing.tsx
View File

@@ -1,52 +0,0 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container'
export function LoadBalancing() {
return (
<section className="bg-gray-50 py-20 lg:py-32">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Visual Placeholder */}
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
>
<div className="text-center p-8">
<div className="text-6xl mb-4">⚖️</div>
<p className="text-gray-600">Auto-scaling & Load Balancing</p>
</div>
</motion.div>
{/* Content */}
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Effortless Load Balancing & Scaling
</h2>
<p className="mt-6 text-lg text-gray-600">
Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Auto-scaling
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Built-in load balancing
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
High availability
</span>
</div>
</motion.div>
</div>
</Container>
</section>
)
}

52
src/pages/cloud/MultiMaster.tsx
View File

@@ -1,52 +0,0 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container'
export function MultiMaster() {
return (
<section className="bg-white py-20 lg:py-32">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Content */}
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Multi-Master Clusters
</h2>
<p className="mt-6 text-lg text-gray-600">
High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
HA Control Plane
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Automatic Failover
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Zero-downtime Upgrades
</span>
</div>
</motion.div>
{/* Visual Placeholder */}
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
>
<div className="text-center p-8">
<div className="text-6xl mb-4">⚡</div>
<p className="text-gray-600">High Availability Clusters</p>
</div>
</motion.div>
</div>
</Container>
</section>
)
}

49
src/pages/cloud/MyceliumNetworking.tsx
View File

@@ -1,49 +0,0 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container'
export function MyceliumNetworking() {
return (
<section className="bg-white py-20 lg:py-32">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Content */}
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Mycelium Networking
</h2>
<p className="mt-6 text-lg text-gray-600">
Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
End-to-end encrypted
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Nature-inspired
</span>
</div>
</motion.div>
{/* Visual Placeholder */}
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
>
<div className="text-center p-8">
<div className="text-6xl mb-4">🕸️</div>
<p className="text-gray-600">Decentralized Mesh Network</p>
</div>
</motion.div>
</div>
</Container>
</section>
)
}

62
src/pages/cloud/SecurityPillars.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { CircleBackground } from '../../components/CircleBackground'
import { Container } from '../../components/Container'
const pillars = [
{
title: 'Provable Sovereignty',
description:
'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
},
{
title: 'Autonomous Zero-Trust',
description:
'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
},
{
title: 'Planetary-Scale Resilience',
description:
'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
},
]
export function SecurityPillars() {
return (
<section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
<div className="pointer-events-none absolute inset-0">
<CircleBackground
color="#22d3ee"
className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
/>
<div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
</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">
Sovereign Architecture
</p>
<h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
Built for security, trust, and unstoppable continuity.
</h2>
<p className="mt-6 text-lg text-gray-300">
Every control surface is auditable and automated, enabling critical workloads to run with confidence.
</p>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-3">
{pillars.map((pillar) => (
<div
key={pillar.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-400/60"
>
<div className="text-lg font-semibold text-white">
{pillar.title}
</div>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
{pillar.description}
</p>
</div>
))}
</div>
</Container>
</section>
)
}

52
src/pages/cloud/WebGateway.tsx
View File

@@ -1,52 +0,0 @@
import { motion } from 'framer-motion'
import { Container } from '../../components/Container'
export function WebGateway() {
return (
<section className="bg-gray-50 py-20 lg:py-32">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Visual Placeholder */}
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
>
<div className="text-center p-8">
<div className="text-6xl mb-4">🌐</div>
<p className="text-gray-600">Simple Web Gateway</p>
</div>
</motion.div>
{/* Content */}
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Simple Web Gateway Access
</h2>
<p className="mt-6 text-lg text-gray-600">
Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Simple configuration
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
Built-in routing
</span>
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
No ingress controllers
</span>
</div>
</motion.div>
</div>
</Container>
</section>
)
}

5
src/pages/network/Hero.tsx
View File

@@ -78,7 +78,7 @@ export function Hero() {
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20"> <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6"> <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900"> <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
Mycelium Mycelium Network
</h1> </h1>
<h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600"> <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
Unleashing the Power of Decentralized Networks Unleashing the Power of Decentralized Networks
@@ -86,9 +86,6 @@ export function Hero() {
<p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight"> <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking. Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
</p> </p>
<p className="mt-6 text-lg text-gray-600">
Coming Soon: New Decentralized Features
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4"> <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="cyan"> <Button to="/download" variant="solid" color="cyan">
Get Mycelium Get Mycelium