forked from emre/www_projectmycelium_com
feat: add breadcrumb navigation and redesign GPU page sections
- Implemented breadcrumb-style navigation in header dropdown showing "Cloud > [Section]" for compute, storage, and GPU pages - Redesigned GPU page components with dark theme, horizontal card sliders, and improved visual hierarchy - Updated CallToAction components across multiple pages with consistent background colors and border styling
This commit is contained in:
@@ -24,7 +24,6 @@ export function Header() {
|
||||
if (currentPath.startsWith('/compute')) return 'Compute';
|
||||
if (currentPath.startsWith('/storage')) return 'Storage';
|
||||
if (currentPath.startsWith('/gpu')) return 'GPU';
|
||||
if (currentPath.startsWith('/cloud')) return 'Cloud';
|
||||
return 'Cloud';
|
||||
};
|
||||
|
||||
@@ -40,7 +39,14 @@ export function Header() {
|
||||
<Dropdown
|
||||
buttonContent={
|
||||
<>
|
||||
{getCurrentPageName()}
|
||||
{['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
|
||||
<>
|
||||
<span className="text-gray-500">Cloud {' >'} </span>
|
||||
<span>{getCurrentPageName()}</span>
|
||||
</>
|
||||
) : (
|
||||
'Cloud'
|
||||
)}
|
||||
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export function CallToAction() {
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
|
||||
@@ -7,13 +7,13 @@ export function CallToAction() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gray-900">
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ export function CallToAction() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gray-900">
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
|
||||
|
||||
|
||||
@@ -1,48 +1,67 @@
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Button } from '@/components/Button'
|
||||
"use client";
|
||||
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export function CallToAction() {
|
||||
return (
|
||||
<section
|
||||
id="get-started"
|
||||
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
|
||||
>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
|
||||
</div>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Choose How You Want to Start
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Use GPUs through Mycelium Cloud,
|
||||
or contribute GPU nodes to the mesh and run your own workloads.
|
||||
<section className="relative overflow-hidden bg-[#121212]">
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||
<Button
|
||||
to="https://myceliumcloud.tf"
|
||||
as="a"
|
||||
variant="solid"
|
||||
color="white"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Deploy GPU Workloads
|
||||
</Button>
|
||||
<Button
|
||||
to="#gpu-architecture"
|
||||
as="a"
|
||||
variant="outline"
|
||||
color="white"
|
||||
>
|
||||
Host A GPU Node
|
||||
</Button>
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
|
||||
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Choose How You Want to Start
|
||||
</h2>
|
||||
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Use GPUs through Mycelium Cloud, or contribute GPU nodes to the mesh and run your own workloads.
|
||||
</p>
|
||||
|
||||
{/* ✅ Two cards, stacked center with spacing */}
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
|
||||
<div className="flex flex-col items-center text-center max-w-xs">
|
||||
<Button
|
||||
to="https://myceliumcloud.tf"
|
||||
as="a"
|
||||
variant="solid"
|
||||
color="cyan"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="mt-4"
|
||||
>
|
||||
Deploy GPU Workloads
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center max-w-xs">
|
||||
<Button
|
||||
to="#gpu-architecture"
|
||||
as="a"
|
||||
variant="outline"
|
||||
color="white"
|
||||
className="mt-4"
|
||||
>
|
||||
Host a GPU Node
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-800" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,48 +1,79 @@
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, SectionHeader } from '@/components/Texts'
|
||||
|
||||
const architecture = [
|
||||
{
|
||||
title: 'Sovereign Compute Nodes',
|
||||
description: 'GPUs hosted on hardware you trust.',
|
||||
},
|
||||
{
|
||||
title: 'Encrypted Mesh Networking',
|
||||
description: 'Secure, private connectivity to workloads.',
|
||||
},
|
||||
{
|
||||
title: 'Reservation & Verification Layer',
|
||||
description: 'Guarantees GPU access and consistency.',
|
||||
},
|
||||
]
|
||||
import { Eyebrow, H3, P } from '@/components/Texts'
|
||||
import {
|
||||
CpuChipIcon,
|
||||
LockClosedIcon,
|
||||
ShieldCheckIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
|
||||
export function GpuArchitecture() {
|
||||
return (
|
||||
<section id="gpu-architecture" className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<section id="gpu-architecture" className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-100">
|
||||
|
||||
{/* ✅ LEFT — Title + Intro text */}
|
||||
<div className="max-w-xl">
|
||||
<Eyebrow>ARCHITECTURE</Eyebrow>
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
HOW IT WORKS
|
||||
</SectionHeader>
|
||||
|
||||
<H3 className="mt-6">
|
||||
How It Works
|
||||
</H3>
|
||||
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
Mycelium GPU architecture ensures secure, sovereign computation using
|
||||
hardware you trust. Nodes communicate through encrypted mesh networking,
|
||||
and access is guaranteed through verifiable reservations.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
{architecture.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
{/* ✅ RIGHT — items stacked with cyan dividers */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* 1 — Sovereign Compute Nodes */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
||||
<CpuChipIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
Sovereign Compute Nodes
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-600 max-w-2xl">
|
||||
GPUs run only on hardware you control — eliminating reliance on centralized clouds.
|
||||
</p>
|
||||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||||
</div>
|
||||
|
||||
{/* 2 — Encrypted Mesh Networking */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
||||
<LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
Encrypted Mesh Networking
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-600 max-w-2xl">
|
||||
Nodes form private, encrypted tunnels to workloads — no public exposure required.
|
||||
</p>
|
||||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||||
</div>
|
||||
|
||||
{/* 3 — Reservation & Verification Layer */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
||||
<ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
Reservation & Verification Layer
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-600 max-w-2xl">
|
||||
Cryptographically enforced reservations guarantee GPU availability
|
||||
with deterministic behavior across workloads.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-100" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,58 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
|
||||
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
|
||||
|
||||
import {
|
||||
SparklesIcon,
|
||||
Cog6ToothIcon,
|
||||
CubeTransparentIcon,
|
||||
CpuChipIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
import { Eyebrow, H3, CT, CP } from '@/components/Texts'
|
||||
import { Container } from '@/components/Container'
|
||||
} from "@heroicons/react/24/solid";
|
||||
|
||||
const capabilities = [
|
||||
const gpuCapabilities = [
|
||||
{
|
||||
name: 'AI / ML Inference & Training',
|
||||
description: 'LLMs, embeddings, transformers, fine-tuning',
|
||||
isIntro: true,
|
||||
eyebrow: "CAPABILITIES",
|
||||
title: "What You Can Run on Mycelium Cloud",
|
||||
description:
|
||||
"GPU acceleration for inference, training, rendering, and agent workloads — on sovereign hardware.",
|
||||
},
|
||||
{
|
||||
name: "AI / ML Inference & Training",
|
||||
description: "LLMs, embeddings, transformers, fine-tuning",
|
||||
icon: SparklesIcon,
|
||||
},
|
||||
{
|
||||
name: 'Acceleration in Kubernetes Workloads',
|
||||
description: 'GPU-backed deployments on Mycelium Cloud',
|
||||
name: "Acceleration in Kubernetes Workloads",
|
||||
description: "GPU-backed deployments on Mycelium Cloud",
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
{
|
||||
name: 'Rendering & Simulation',
|
||||
description: 'Scientific visualization, VFX, real-time 3D',
|
||||
name: "Rendering & Simulation",
|
||||
description: "Scientific visualization, VFX, real-time 3D",
|
||||
icon: CubeTransparentIcon,
|
||||
},
|
||||
{
|
||||
name: 'Agent Compute & RAG Pipelines',
|
||||
description: 'Vector memory + model execution on sovereign hardware',
|
||||
name: "Agent Compute & RAG Pipelines",
|
||||
description:
|
||||
"Vector memory + model execution on sovereign hardware",
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
export function GpuCapabilities() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow>CAPABILITIES</Eyebrow>
|
||||
<H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
|
||||
</div>
|
||||
const sliderRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{capabilities.map((feature) => (
|
||||
<div key={feature.name} className="flex flex-col text-center">
|
||||
<div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
|
||||
<feature.icon className="size-6 text-cyan-600" aria-hidden="true" />
|
||||
const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
|
||||
const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
|
||||
|
||||
return (
|
||||
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
|
||||
|
||||
{/* ✅ Horizontal Slider */}
|
||||
<ul
|
||||
ref={sliderRef}
|
||||
className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
|
||||
>
|
||||
{gpuCapabilities.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 p-10 relative ${
|
||||
item.isIntro ? "bg-[#1b1b1b]" : "bg-[#111]/60"
|
||||
}`}
|
||||
>
|
||||
{/* ✅ First intro card with arrows */}
|
||||
{item.isIntro ? (
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<Eyebrow>{item.eyebrow}</Eyebrow>
|
||||
<H5 className="text-white mt-4 lg:text-2xl text-xl">{item.title}</H5>
|
||||
<p className="mt-4 text-gray-400 lg:text-lg text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-x-4 mt-3">
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-1 text-cyan-400 hover:text-cyan-300 text-sm font-medium mr-auto"
|
||||
>
|
||||
Learn more →
|
||||
</a>
|
||||
|
||||
<button
|
||||
onClick={scrollLeft}
|
||||
className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
|
||||
>
|
||||
<IoArrowBackOutline className="text-gray-300" size={16} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={scrollRight}
|
||||
className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
|
||||
>
|
||||
<IoArrowForwardOutline className="text-gray-300" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<CT className="mt-6 text-gray-900">{feature.name}</CT>
|
||||
<CP className="mt-2 text-gray-600">{feature.description}</CP>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</Container>
|
||||
) : (
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="flex items-center justify-center h-12 w-12 rounded-xl bg-[#1d1d1d] border border-gray-800">
|
||||
<item.icon className="h-6 w-6 text-cyan-400" />
|
||||
</div>
|
||||
|
||||
<CT className="text-lg font-semibold text-white mt-4">{item.name}</CT>
|
||||
<CP className="mt-2 text-gray-400 leading-snug">{item.description}</CP>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="w-full border-b border-gray-800" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,51 +9,55 @@ import {
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
|
||||
id: 1,
|
||||
title: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
|
||||
icon: BoltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Transparent cost (no markup, no surprise billing)',
|
||||
id: 2,
|
||||
title: 'Transparent cost (no markup, no surprise billing)',
|
||||
icon: BanknotesIcon,
|
||||
},
|
||||
{
|
||||
name: 'Run anywhere – cloud, on-prem, edge, home lab',
|
||||
id: 3,
|
||||
title: 'Run anywhere – cloud, on-prem, edge, home lab',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Your data never leaves your control',
|
||||
id: 4,
|
||||
title: 'Your data never leaves your control',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function GpuDesign() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
{/* Header */}
|
||||
<div className="mx-auto max-w-3xl sm:text-center">
|
||||
<Eyebrow>CORE VALUE</Eyebrow>
|
||||
<H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
</div>
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border border-l border-r border-gray-100" />
|
||||
|
||||
{/* Key Benefits */}
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
|
||||
{benefits.map((benefit) => (
|
||||
<div key={benefit.name} className="relative pl-12">
|
||||
<benefit.icon
|
||||
className="absolute left-0 top-1 size-6 text-cyan-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<CT className="font-semibold text-gray-900">
|
||||
{benefit.name}
|
||||
</CT>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</Container>
|
||||
{/* ✅ Main content */}
|
||||
<div className="mx-auto max-w-7xl border-gray-100 ">
|
||||
<dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center ">
|
||||
{benefits.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
|
||||
>
|
||||
<item.icon className="h-10 w-10 text-cyan-500 mb-4" />
|
||||
<h3 className="text-base font-medium text-black dark:text-white max-w-xs">
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border border-gray-100" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-0 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
AdjustmentsHorizontalIcon,
|
||||
GlobeAltIcon,
|
||||
@@ -6,6 +8,7 @@ import {
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
|
||||
import { Button } from '@/components/Button'
|
||||
|
||||
const coreFeatures = [
|
||||
{
|
||||
@@ -30,40 +33,66 @@ const coreFeatures = [
|
||||
|
||||
export function GpuOverview() {
|
||||
return (
|
||||
<section className="bg-gray-950 py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
|
||||
PLATFORM OVERVIEW
|
||||
</Eyebrow>
|
||||
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
|
||||
Core Features
|
||||
</SectionHeader>
|
||||
<P color="lightSecondary" className="mt-6">
|
||||
The Mycelium GPU layer provides predictable, sovereign acceleration
|
||||
— without arbitrary limits or hidden economics.
|
||||
</P>
|
||||
</div>
|
||||
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
||||
|
||||
<div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{coreFeatures.map((feature) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
|
||||
{/* ✅ Top spacer */}
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
{/* ✅ Boxed container */}
|
||||
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow className="text-cyan-400 tracking-[0.32em] uppercase">
|
||||
PLATFORM OVERVIEW
|
||||
</Eyebrow>
|
||||
|
||||
<SectionHeader
|
||||
as="h2"
|
||||
className="mt-6 text-3xl lg:text-4xl font-medium tracking-tight text-white"
|
||||
>
|
||||
<div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
|
||||
<feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{feature.name}
|
||||
</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-300">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
Core GPU Features
|
||||
</SectionHeader>
|
||||
|
||||
<P className="mt-6 text-lg text-gray-300">
|
||||
The Mycelium GPU fabric provides predictable, sovereign acceleration —
|
||||
without arbitrary limits or hidden economics.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ Grid matching CloudArchitecture card layout */}
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
|
||||
sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10 "
|
||||
>
|
||||
{coreFeatures.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 hover:transform-[scale(1.05)] transition"
|
||||
>
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500/15">
|
||||
<feature.icon className="h-6 w-6 text-cyan-300" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{feature.name}
|
||||
</h3>
|
||||
|
||||
<p className="mt-2 text-gray-400 leading-snug">
|
||||
{feature.description}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom border + spacer */}
|
||||
<div className="w-full border-b border-gray-800" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
|
||||
|
||||
const gpuUseCases = [
|
||||
@@ -18,35 +17,52 @@ const gpuUseCases = [
|
||||
|
||||
export function GpuUseCases() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<section className="w-full max-w-8xl mx-auto bg-white">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-slate-200"></div>
|
||||
<div className="w-full border-t border-l border-r border-slate-200" />
|
||||
|
||||
{/* ✅ Main boxed content */}
|
||||
<div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-slate-200">
|
||||
|
||||
{/* ✅ LEFT SIDE — Title + Intro */}
|
||||
<div className="max-w-xl">
|
||||
<Eyebrow>USE CASES</Eyebrow>
|
||||
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
Built for Intelligent Workloads
|
||||
</SectionHeader>
|
||||
|
||||
<P className="mt-6 text-gray-600">
|
||||
From sovereign AI execution to real-time rendering and edge inference,
|
||||
Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
|
||||
Mycelium GPU ensures predictable acceleration with full ownership —
|
||||
no centralized control.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
{/* ✅ RIGHT SIDE — 3 stacked features */}
|
||||
<div className="space-y-8">
|
||||
{gpuUseCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
<div key={useCase.title}>
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
||||
<p className="mt-2 text-gray-600 max-w-2xl">
|
||||
{useCase.description}
|
||||
</p>
|
||||
{/* ✅ divider except last item */}
|
||||
{useCase.title !== 'Distributed & Edge Compute' && (
|
||||
<div className="mt-8 h-px w-full bg-cyan-300/40" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-slate-200" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-slate-200"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export function CallToAction() {
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export function CallToAction() {
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
|
||||
>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
|
||||
Reference in New Issue
Block a user