forked from emre/www_projectmycelium_com
refactor: consolidate cloud and agents page components
- Removed duplicate hero component variations (AgentsHero/AgentsHeroAlt, CloudHero/CloudHeroAlt) - Deleted unused CloudCTA, CloudGettingStarted, and CloudDesign components - Cleaned up empty files and legacy page structure
This commit is contained in:
65
src/pages/home/archive/HomeAgent.tsx
Normal file
65
src/pages/home/archive/HomeAgent.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { H2, P } from '@/components/Texts'
|
||||
import { Button } from '@/components/Button'
|
||||
import { LayoutTextFlip } from '@/components/ui/layout-text-flip' // make sure this import path is correct
|
||||
|
||||
export function HomeAgent() {
|
||||
return (
|
||||
<div className="relative isolate overflow-hidden bg-white">
|
||||
<div className="px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<H2>
|
||||
Deploy your own{" "}
|
||||
<span className="text-left text-black font-medium text-7xl bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
|
||||
<LayoutTextFlip
|
||||
text=""
|
||||
words={[
|
||||
"GPT-5",
|
||||
"Claude 3.5",
|
||||
"Gemini 1.5",
|
||||
"Mistral 7B",
|
||||
"Llama 3.1",
|
||||
|
||||
"AI Agents",
|
||||
]}
|
||||
/>
|
||||
</span>
|
||||
</H2>
|
||||
|
||||
<P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
|
||||
Mycelium delivers enterprise-grade AI experiences that run on sovereign compute and the Mycelium Network, so production agents can reason over private data, collaborate across sites, and stay fully under your governance.
|
||||
</P>
|
||||
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Button variant="solid" color="cyan" href="/signup">
|
||||
Get started
|
||||
</Button>
|
||||
<a href="/agents" className="text-sm/6 font-semibold text-gray-900 hover:text-gray-600">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
aria-hidden="true"
|
||||
className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
|
||||
>
|
||||
<circle
|
||||
r={512}
|
||||
cx={512}
|
||||
cy={512}
|
||||
fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
<defs>
|
||||
<radialGradient id="8d958450-c69f-4251-94bc-4e091a323369" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#60A5FA" /> {/* blue-400 */}
|
||||
<stop offset="50%" stopColor="#06B6D4" /> {/* cyan-500 */}
|
||||
<stop offset="100%" stopColor="#A78BFA" /> {/* violet-400 */}
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
43
src/pages/home/archive/HomeAuroraedt.tsx
Normal file
43
src/pages/home/archive/HomeAuroraedt.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
export function HomeAurora() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 -z-10 h-full w-full"
|
||||
style={{
|
||||
backgroundImage: "url('/images/cloud.png')",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<div className="relative isolate px-6 lg:px-8">
|
||||
{/* Top cyan soft blob */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom cyan soft blob */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/pages/home/archive/HomeCTA.tsx
Normal file
40
src/pages/home/archive/HomeCTA.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowRightIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
export function HomeCTA() {
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">
|
||||
|
||||
{/* LEFT: Big CTA Button */}
|
||||
<button className="w-full lg:col-span-2 flex items-center justify-between bg-white border items-left border-gray-300 rounded-full px-8 py-5 shadow-sm hover:border-cyan-500 transition">
|
||||
<span className="text-2xl lg:text-3xl font-semibold text-gray-900">
|
||||
Start Your Mycelium Journey
|
||||
</span>
|
||||
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500">
|
||||
<ArrowRightIcon className="h-6 w-6 text-white" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* RIGHT: Two small CTAs */}
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
{/* Button 1 */}
|
||||
<button className="inline-flex items-center justify-between bg-cyan-500 text-white rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:bg-cyan-600 transition">
|
||||
Get Started
|
||||
<ArrowRightIcon className="h-4 w-4 ml-2" />
|
||||
</button>
|
||||
|
||||
{/* Button 2 */}
|
||||
<button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
|
||||
Explore Docs
|
||||
<ArrowRightIcon className="h-4 w-4 ml-2 text-gray-700" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
66
src/pages/home/archive/HomeCloud.tsx
Normal file
66
src/pages/home/archive/HomeCloud.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { CheckCircleIcon } from '@heroicons/react/20/solid'
|
||||
import { H2, P } from '@/components/Texts'
|
||||
|
||||
const benefits = [
|
||||
'Decentralized Infrastructure',
|
||||
'End-to-End Encryption',
|
||||
'Sovereign Data Control',
|
||||
'Scalable Kubernetes Clusters',
|
||||
'Censorship-Resistant',
|
||||
'Peer-to-Peer Networking',
|
||||
]
|
||||
|
||||
export function HomeCloud() {
|
||||
return (
|
||||
<div className="overflow-hidden bg-white py-24">
|
||||
<div className="relative isolate">
|
||||
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div className="mx-auto flex max-w-2xl flex-col gap-16 bg-white px-6 py-16 shadow-lg ring-1 ring-gray-200/5 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/kubernetes.png"
|
||||
className="h-96 w-full flex-none rounded-2xl object-cover lg:aspect-square lg:h-auto lg:max-w-sm"
|
||||
/>
|
||||
<div className="w-full flex-auto">
|
||||
<H2 className="">
|
||||
Mycelium <span className="font-medium text-7xl">Cloud</span>
|
||||
</H2>
|
||||
<P className="mt-6 text-lg/8 text-pretty text-gray-600">
|
||||
A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure
|
||||
</P>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 text-gray-950 sm:grid-cols-2"
|
||||
>
|
||||
{benefits.map((benefit) => (
|
||||
<li key={benefit} className="flex gap-x-3">
|
||||
<CheckCircleIcon aria-hidden="true" className="h-7 w-5 flex-none text-cyan-500" />
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-10 flex">
|
||||
<a href="/cloud" className="text-sm/6 font-semibold text-cyan-600 hover:text-cyan-500">
|
||||
Learn more
|
||||
<span aria-hidden="true"> →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||
}}
|
||||
className="aspect-1318/752 w-329.5 flex-none bg-linear-to-r from-[#9fe8fc] to-[#c6c4fa] opacity-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
60
src/pages/home/archive/HomeComparisonTable.tsx
Normal file
60
src/pages/home/archive/HomeComparisonTable.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import { Eyebrow, H3, P, CT } from '../../../components/Texts'
|
||||
|
||||
const features = [
|
||||
{ name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
{ name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
|
||||
{ name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
]
|
||||
|
||||
export function HomeComparisonTable() {
|
||||
return (
|
||||
<div className="relative bg-white py-24 lg:py-32">
|
||||
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-6xl lg:px-8">
|
||||
<Eyebrow>COMPARISON</Eyebrow>
|
||||
<H3 className="mt-2">Why People Choose Mycelium</H3>
|
||||
<P className="mx-auto mt-5 max-w-prose">
|
||||
Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
|
||||
or uptime to centralized platforms.
|
||||
</P>
|
||||
|
||||
<div className="mt-16 overflow-x-auto">
|
||||
<table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
|
||||
<thead className="bg-cyan-50/60">
|
||||
<tr className="text-base font-semibold text-slate-700">
|
||||
<th className="py-4 pl-3 text-left">Capability</th>
|
||||
<th className="py-4 pl-3 text-left">Traditional Cloud</th>
|
||||
<th className="py-4 pl-3 text-left">Mycelium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="divide-y divide-slate-200">
|
||||
{features.map((feature) => (
|
||||
<tr key={feature.name}>
|
||||
<td className="py-3 pl-3">
|
||||
<CT>{feature.name}</CT>
|
||||
</td>
|
||||
|
||||
<td className="py-3 pl-3">
|
||||
{feature.cloud}
|
||||
</td>
|
||||
|
||||
<td className="py-3 pl-3">
|
||||
{feature.mycelium}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
63
src/pages/home/archive/HomeFeatures.tsx
Normal file
63
src/pages/home/archive/HomeFeatures.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { InboxIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
|
||||
import { H2, P } from '@/components/Texts'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Mycelium Network',
|
||||
description:
|
||||
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
||||
href: '/network',
|
||||
icon: UsersIcon,
|
||||
image: '/images/network_icon.png',
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Cloud',
|
||||
description:
|
||||
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
||||
href: '/cloud',
|
||||
icon: TrashIcon,
|
||||
image: '/images/cloud_icon.png',
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Agents',
|
||||
description:
|
||||
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
||||
href: '/agents',
|
||||
icon: InboxIcon,
|
||||
image: '/images/agent_icon.png',
|
||||
},
|
||||
]
|
||||
|
||||
export function HomeFeatures() {
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<H2 className="">
|
||||
The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
|
||||
</H2>
|
||||
<P className="mt-6 ">
|
||||
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-100 bg-white backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
||||
<div className="w-30 h-30 bg-white/80 rounded-full flex items-center justify-center">
|
||||
<img src={feature.image} alt="" className="w-25 h-25" />
|
||||
</div>
|
||||
<h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
|
||||
<p className="mt-4 text-base text-gray-800">{feature.description}</p>
|
||||
<a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> →</span></a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
60
src/pages/home/archive/HomeFeaturesDark.tsx
Normal file
60
src/pages/home/archive/HomeFeaturesDark.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
|
||||
import { H2, P } from '@/components/Texts'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Mycelium Network',
|
||||
description:
|
||||
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
||||
href: '/network',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Cloud',
|
||||
description:
|
||||
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
||||
href: '/cloud',
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Agents',
|
||||
description:
|
||||
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
||||
href: '/agents',
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function HomeFeaturesDark() {
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="relative bg-black py-24 overflow-hidden">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<H2 className="text-white">
|
||||
The Building Blocks of Decentralized Future
|
||||
</H2>
|
||||
<P className="mt-6 text-gray-300">
|
||||
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
||||
<div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
|
||||
<feature.icon className="h-12 w-12 text-cyan-500" />
|
||||
</div>
|
||||
<h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
|
||||
<p className="mt-4 text-base text-gray-300">{feature.description}</p>
|
||||
<a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> →</span></a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
36
src/pages/home/archive/HomeGlobeNew.tsx
Normal file
36
src/pages/home/archive/HomeGlobeNew.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { Globe } from "@/components/ui/Globe";
|
||||
|
||||
export function HomeGlobeNew() {
|
||||
return (
|
||||
<section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-200">
|
||||
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
|
||||
|
||||
{/* Column 1 */}
|
||||
<div className="px-6 lg:px-24 py-16 flex flex-col items-start text-left">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
|
||||
Decentralized Network
|
||||
</span>
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 lg:text-4xl">
|
||||
Project Mycelium is Live.
|
||||
</h2>
|
||||
|
||||
<p className="mt-4 text-lg text-gray-500 max-w-lg leading-relaxed">
|
||||
Project Mycelium enables anyone to deploy their own Internet infrastructure, anywhere.
|
||||
</p>
|
||||
|
||||
<button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 text-sm font-semibold text-gray-600 bg-white/90 hover:bg-gray-50">
|
||||
Explore Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Column 2 */}
|
||||
<div className="flex items-center justify-center relative">
|
||||
<Globe className="relative w-full max-w-[320px] lg:max-w-[420px]" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
30
src/pages/home/archive/HomeHero.tsx
Normal file
30
src/pages/home/archive/HomeHero.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Button } from '@/components/Button'
|
||||
|
||||
export function HomeHero() {
|
||||
return (
|
||||
<section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
|
||||
<div className="px-6 py-12 lg:px-8 lg:py-24">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
|
||||
The Sovereign Agentic Cloud
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 text-lg text-gray-500 sm:text-xl max-w-prose mx-auto tracking-normal leading-tight lg:leading-relaxed">
|
||||
Host nodes, deploy workloads, or build private AI systems —
|
||||
all on infrastructure you own and control.
|
||||
</p>
|
||||
|
||||
<div className="mt-10 flex flex-col sm:flex-row sm:items-center sm:justify-center gap-4">
|
||||
<Button variant="solid" color="cyan" href="#">
|
||||
Start Hosting
|
||||
</Button>
|
||||
|
||||
<Button href="#" variant="outline" color="gray">
|
||||
Deploy in Cloud <span aria-hidden="true">→</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
64
src/pages/home/archive/HomeHostingDark.tsx
Normal file
64
src/pages/home/archive/HomeHostingDark.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import {
|
||||
CpuChipIcon,
|
||||
CubeIcon,
|
||||
CircleStackIcon,
|
||||
LockClosedIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
|
||||
import { DarkCard } from '../../components/ui/cards'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Kubernetes Clusters',
|
||||
description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
|
||||
icon: CubeIcon,
|
||||
},
|
||||
{
|
||||
name: 'AI Agents & LLM Runtimes',
|
||||
description: 'Run open-source models locally, securely, and offline.',
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
{
|
||||
name: 'S3-Compatible Storage',
|
||||
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
|
||||
icon: CircleStackIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mesh VPN & Zero-Trust Networking',
|
||||
description: 'Securely connect all your devices and remote locations.',
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function HomeHostingDark() {
|
||||
return (
|
||||
<div className="relative py-24 bg-[#111111] lg:py-32">
|
||||
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
||||
<Eyebrow>DEPLOY</Eyebrow>
|
||||
<H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
|
||||
<P className="mx-auto mt-5 max-w-prose text-gray-400">
|
||||
Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
|
||||
</P>
|
||||
<div className="mt-16">
|
||||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative">
|
||||
<DarkCard className="flex h-full flex-col pt-16">
|
||||
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-600 hover:bg-cyan-500 p-3 shadow-lg">
|
||||
<feature.icon aria-hidden="true" className="size-8 text-white" />
|
||||
</span>
|
||||
<CT as="h3" className="mt-4 text-gray-200">
|
||||
{feature.name}
|
||||
</CT>
|
||||
<CP color="secondary" className="mt-4 text-gray-400">
|
||||
{feature.description}
|
||||
</CP>
|
||||
</DarkCard>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
69
src/pages/home/archive/HomeMap.tsx
Normal file
69
src/pages/home/archive/HomeMap.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
import WorldMap from "@/components/ui/world-map";
|
||||
import { motion } from "motion/react";
|
||||
import { H2, P } from "@/components/Texts";
|
||||
|
||||
export function HomeMapSection() {
|
||||
return (
|
||||
<div className=" py-24 dark:bg-black bg-tra w-full">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
|
||||
Mycelium Network is{" "}
|
||||
<span className="text-black text-bold">
|
||||
{"Live.".split("").map((word, idx) => (
|
||||
<motion.span
|
||||
key={idx}
|
||||
className="inline-block"
|
||||
initial={{ x: -10, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.04 }}
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
</H2>
|
||||
<P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
|
||||
Mycelium Network's advancement technology enables anyone to deploy
|
||||
their own Internet infrastructure, anywhere.
|
||||
</P>
|
||||
</div>
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<WorldMap
|
||||
dots={[
|
||||
{
|
||||
start: {
|
||||
lat: 64.2008,
|
||||
lng: -149.4937,
|
||||
}, // Alaska (Fairbanks)
|
||||
end: {
|
||||
lat: 34.0522,
|
||||
lng: -118.2437,
|
||||
}, // Los Angeles
|
||||
},
|
||||
{
|
||||
start: { lat: 64.2008, lng: -149.4937 }, // Alaska (Fairbanks)
|
||||
end: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||
},
|
||||
{
|
||||
start: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||
end: { lat: 38.7223, lng: -9.1393 }, // Lisbon
|
||||
},
|
||||
{
|
||||
start: { lat: 51.5074, lng: -0.1278 }, // London
|
||||
end: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
},
|
||||
{
|
||||
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
end: { lat: 43.1332, lng: 131.9113 }, // Vladivostok
|
||||
},
|
||||
{
|
||||
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||
end: { lat: -1.2921, lng: 36.8219 }, // Nairobi
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
63
src/pages/home/archive/HomeProductsA.tsx
Normal file
63
src/pages/home/archive/HomeProductsA.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
export function HomeProductsA() {
|
||||
return (
|
||||
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
|
||||
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
|
||||
|
||||
{/* Product 1 */}
|
||||
<div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
|
||||
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
|
||||
Mycelium Cloud
|
||||
</h2>
|
||||
<p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
|
||||
Deploy K8s clusters on sovereign infrastructure.
|
||||
</p>
|
||||
<button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90bg-white/90 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product 2 */}
|
||||
<div className="px-6 lg:px-24 py-16 flex flex-col items-center text-center">
|
||||
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
|
||||
Mycelium Network
|
||||
</h2>
|
||||
<p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
|
||||
Encrypted peer-to-peer mesh networking across the globe.
|
||||
</p>
|
||||
<button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product 3 */}
|
||||
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
|
||||
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
|
||||
Mycelium Agents
|
||||
</h2>
|
||||
<p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
|
||||
Programmable AI systems that run on your hardware.
|
||||
</p>
|
||||
<button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Product 4 */}
|
||||
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
|
||||
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
|
||||
Compute / Storage / GPU
|
||||
</h2>
|
||||
<p className="mt-4 text-3xl font-semibold text-gray-900 max-w-lg leading-10">
|
||||
The 3 powerful resource layers powering the stack.
|
||||
</p>
|
||||
<button className="mt-6 inline-flex items-center justify-center rounded-full border px-5 py-2 hover:border-cyan-500 bg-white/90 text-sm font-semibold text-gray-600 hover:bg-gray-50">
|
||||
Learn more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
76
src/pages/home/archive/HomeStack.tsx
Normal file
76
src/pages/home/archive/HomeStack.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const layers = [
|
||||
{
|
||||
id: "agent",
|
||||
label: "Agent Layer",
|
||||
description: `
|
||||
Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval. It coordinates across people, apps, and other agents to plan, create, and execute. It operates inside a compliant legal sandbox, ready for real-world transactions and operations.
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: "network",
|
||||
label: "Network Layer",
|
||||
description: `
|
||||
A global, end-to-end encrypted overlay that simply doesn’t break. Shortest-path routing moves your traffic the fastest way, every time. Instant discovery with integrated DNS, semantic search, and indexing. A distributed CDN and edge delivery keep content available and tamper-resistant worldwide. Built-in tools and secure coding sandboxes—seamless on phones, desktops, and edge.
|
||||
`,
|
||||
},
|
||||
{
|
||||
id: "cloud",
|
||||
label: "Cloud Layer",
|
||||
description: `
|
||||
An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours. No cloud vendor or middleman in the path: end-to-end ownership and isolation by default. Geo-aware placement delivers locality, compliance, and ultra-low latency where it matters.
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeStack() {
|
||||
const [active, setActive] = useState("agent");
|
||||
const current = layers.find((l) => l.id === active)!;
|
||||
|
||||
return (
|
||||
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
|
||||
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-5 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
|
||||
|
||||
{/* LEFT COLUMN (2 COLS) */}
|
||||
<div className="lg:col-span-1 px-6 lg:px-8 py-12 flex flex-col items-start text-left">
|
||||
<h2 className="mt-4 text-3xl text-center leading-tight font-semibold tracking-tight text-gray-900">
|
||||
The Mycelium Stack
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* MIDDLE COLUMN (1 COL) */}
|
||||
<div className="lg:col-span-1 px-6 lg:px-12 py-12 flex flex-col space-y-6 text-left">
|
||||
{layers.map((layer) => (
|
||||
<button
|
||||
key={layer.id}
|
||||
onClick={() => setActive(layer.id)}
|
||||
className={`transition-all ${
|
||||
active === layer.id
|
||||
? "text-gray-900 font-semibold"
|
||||
: "text-gray-400 hover:text-gray-600"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium uppercase tracking-wide">
|
||||
{layer.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN (2 COLS) */}
|
||||
<div className="lg:col-span-3 px-6 lg:px-12 py-12 flex flex-col text-left space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
|
||||
{current.label}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed whitespace-pre-line">
|
||||
{current.description.trim()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
61
src/pages/home/archive/HomeStat.tsx
Normal file
61
src/pages/home/archive/HomeStat.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
export function HomeStat() {
|
||||
return (
|
||||
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
|
||||
<div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
|
||||
|
||||
{/* CORES */}
|
||||
<div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
|
||||
CORES
|
||||
</span>
|
||||
<h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
|
||||
54,958
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
|
||||
Total Central Processing Unit cores available on the grid.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* NODES */}
|
||||
<div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
|
||||
NODES
|
||||
</span>
|
||||
<h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
|
||||
1,493
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
|
||||
Total number of nodes on the grid.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* SSD CAPACITY */}
|
||||
<div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
|
||||
SSD CAPACITY
|
||||
</span>
|
||||
<h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
|
||||
5,388,956
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
|
||||
Total GB amount of storage (SSD, HDD, and RAM) on the grid.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* COUNTRIES */}
|
||||
<div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
|
||||
COUNTRIES
|
||||
</span>
|
||||
<h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
|
||||
44
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-gray-500 leading-relaxed">
|
||||
Total number of countries with active nodes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
119
src/pages/home/archive/HomeTabs.tsx
Normal file
119
src/pages/home/archive/HomeTabs.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// ✅ IMPORT HEROICONS
|
||||
import {
|
||||
CubeIcon,
|
||||
SparklesIcon,
|
||||
ServerStackIcon,
|
||||
ShieldCheckIcon,
|
||||
} from "@heroicons/react/20/solid";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "ai",
|
||||
label: "K8s Clusters",
|
||||
title: "K8s Clusters",
|
||||
description:
|
||||
"Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
|
||||
link: "#",
|
||||
icon: CubeIcon,
|
||||
},
|
||||
{
|
||||
id: "web",
|
||||
label: "AI Agents",
|
||||
title: "AI Agents",
|
||||
description: "Run open-source models locally, securely, and offline.",
|
||||
link: "#",
|
||||
icon: SparklesIcon,
|
||||
},
|
||||
{
|
||||
id: "ecommerce",
|
||||
label: "S3-Compatible Storage",
|
||||
title: "S3-Compatible Storage",
|
||||
description:
|
||||
"Your own personal over-the-network drive, encrypted end-to-end.",
|
||||
link: "#",
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
{
|
||||
id: "platforms",
|
||||
label: "Mesh VPN & 0-Trust Networking",
|
||||
title: "Mesh VPN & 0-Trust Networking",
|
||||
description:
|
||||
"Securely connect all your devices and remote locations.",
|
||||
link: "#",
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeApplication() {
|
||||
const [active, setActive] = useState("ai");
|
||||
const current = tabs.find((t) => t.id === active)!;
|
||||
const Icon = current.icon; // ✅ dynamic icon
|
||||
|
||||
return (
|
||||
<section className="mx-4 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
|
||||
|
||||
{/* ✅ VERTICAL DIVIDER ON DESKTOP */}
|
||||
<div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>
|
||||
|
||||
{/* LEFT COLUMN */}
|
||||
<div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
|
||||
<h1 className="text-3xl lg:text-3xl font-semibold tracking-tight text-gray-900 leading-tight">
|
||||
Run Real Infrastructure on Your Own Hardware
|
||||
</h1>
|
||||
|
||||
<p className="text-sm text-gray-500 leading-relaxed max-w-2xl">
|
||||
Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
|
||||
</p>
|
||||
|
||||
{/* TABS */}
|
||||
<div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActive(tab.id)}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all
|
||||
${
|
||||
active === tab.id
|
||||
? "bg-white border border-gray-300 shadow-sm"
|
||||
: "text-gray-500 hover:text-cyan-500"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
|
||||
<div className="space-y-3 lg:pr-6 py-12">
|
||||
|
||||
{/* ✅ ICON WITH BLACK BG */}
|
||||
<div className="h-10 w-10 flex items-center justify-center rounded-full bg-black">
|
||||
<Icon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
|
||||
<h4 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
|
||||
{current.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-gray-500 leading-tight">
|
||||
{current.description}
|
||||
</p>
|
||||
|
||||
<a
|
||||
href={current.link}
|
||||
className="text-gray-700 font-semibold hover:text-cyan-600 text-sm"
|
||||
>
|
||||
Learn more →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
22
src/pages/home/archive/HomeUniverse.tsx
Normal file
22
src/pages/home/archive/HomeUniverse.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { GlobeAltIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
export function HomeUniverse() {
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-8 text-center">
|
||||
<h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 flex flex-wrap items-center justify-center gap-3">
|
||||
|
||||
{/* left text */}
|
||||
<span>Explore the Mycelium</span>
|
||||
|
||||
{/* optional end pill */}
|
||||
<span className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-2xl font-medium shadow-sm">
|
||||
<GlobeAltIcon className="h-5 w-5 text-gray-900" />
|
||||
Universe
|
||||
</span>
|
||||
|
||||
</h2>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
33
src/pages/home/archive/HomeWhy.tsx
Normal file
33
src/pages/home/archive/HomeWhy.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ShieldCheckIcon,
|
||||
KeyIcon,
|
||||
CodeBracketIcon,
|
||||
BoltIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export function HomeWhy() {
|
||||
const items = [
|
||||
{ label: "Unbreakable by Design", icon: ShieldCheckIcon },
|
||||
{ label: "Sovereign by Default", icon: KeyIcon },
|
||||
{ label: "Hackable & Open", icon: CodeBracketIcon },
|
||||
{ label: "Cost & Energy Efficient", icon: BoltIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-12 px-6 text-center">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 place-items-center">
|
||||
{items.map(({ label, icon: Icon }) => (
|
||||
<span
|
||||
key={label}
|
||||
className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-sm font-medium text-gray-900 shadow-sm"
|
||||
>
|
||||
<Icon className="h-5 w-5 text-gray-900" />
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user