Compare commits
1 Commits
main_sasha
...
main_backu
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c30524504 |
@@ -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
BIN
src/images/desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,65 +1,122 @@
|
|||||||
import { motion } from 'framer-motion'
|
import { useId } from 'react'
|
||||||
import { Globe } from '../../components/ui/Globe'
|
|
||||||
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
65
src/pages/cloud/CloudOverview.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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
144
src/pages/cloud/ComputeStorageSplit.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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
62
src/pages/cloud/SecurityPillars.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user