67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { Usb, Wifi, Share2 } from "lucide-react"
|
|
|
|
const steps = [
|
|
{
|
|
icon: Usb,
|
|
number: "01",
|
|
title: "Get Your USB Key",
|
|
description:
|
|
"A physical device that contains your identity, encryption keys, and access credentials. Your sovereignty in hardware form.",
|
|
},
|
|
{
|
|
icon: Wifi,
|
|
number: "02",
|
|
title: "Connect to the Mesh",
|
|
description:
|
|
"Plug in anywhere there's a local alltor node. Instantly access the distributed network without corporate gatekeepers.",
|
|
},
|
|
{
|
|
icon: Share2,
|
|
number: "03",
|
|
title: "Collaborate Freely",
|
|
description: "Share files, compute, and ideas. Contribute to the commons. Build the future together.",
|
|
},
|
|
]
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section className="py-32 bg-black text-white relative overflow-hidden">
|
|
{/* Subtle pattern */}
|
|
<div className="absolute inset-0 opacity-5">
|
|
<div className="absolute inset-0 bg-[linear-gradient(45deg,#ffffff_25%,transparent_25%,transparent_75%,#ffffff_75%),linear-gradient(45deg,#ffffff_25%,transparent_25%,transparent_75%,#ffffff_75%)] bg-[size:2rem_2rem] bg-[0_0,1rem_1rem]" />
|
|
</div>
|
|
|
|
<div className="container px-4 relative z-10">
|
|
<div className="max-w-3xl mx-auto text-center mb-20">
|
|
<h2 className="text-5xl md:text-6xl font-bold mb-6 text-balance">How It Works</h2>
|
|
<p className="text-xl text-white/70 text-balance leading-relaxed">
|
|
Three simple steps to break free from the legacy internet
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-5xl mx-auto space-y-16">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="flex flex-col md:flex-row gap-8 items-start group">
|
|
<div className="flex-shrink-0">
|
|
<div className="relative">
|
|
<div className="text-8xl md:text-9xl font-bold text-white/5 select-none">{step.number}</div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<div className="p-6 bg-white text-black">
|
|
<step.icon className="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4 pt-4">
|
|
<h3 className="text-3xl font-bold">{step.title}</h3>
|
|
<p className="text-xl text-white/70 leading-relaxed">{step.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|