69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { Code2, Database, Cpu } from "lucide-react"
|
|
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
icon: Code2,
|
|
title: "Built on folkjs",
|
|
description:
|
|
"HTML as a computing substrate. Interactive, reactive interfaces using familiar web technologies - no complex frameworks required.",
|
|
},
|
|
{
|
|
number: "02",
|
|
icon: Database,
|
|
title: "Local-First Storage",
|
|
description:
|
|
"Your data lives on your device. Distributed sync protocols keep your rspace updated across the mesh without centralized servers.",
|
|
},
|
|
{
|
|
number: "03",
|
|
icon: Cpu,
|
|
title: "Zero-Knowledge Architecture",
|
|
description:
|
|
"All encryption happens on your device. Share selectively through cryptographic proofs. Nobody can access what they shouldn't see.",
|
|
},
|
|
]
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section className="border-b border-border bg-card/30 py-24">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Built Different</h2>
|
|
<p className="mt-4 text-lg text-muted-foreground">A new substrate for digital collaboration</p>
|
|
</div>
|
|
|
|
<div className="mt-16 grid gap-8 md:grid-cols-3">
|
|
{steps.map((step, index) => {
|
|
const Icon = step.icon
|
|
return (
|
|
<div key={index} className="relative">
|
|
<div className="flex flex-col items-start">
|
|
<div className="mb-4 text-7xl font-bold text-primary/10">{step.number}</div>
|
|
<div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3 text-primary">
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<h3 className="mb-3 text-xl font-semibold text-foreground">{step.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">{step.description}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-16 rounded-lg border border-border bg-card p-8">
|
|
<div className="text-center">
|
|
<p className="text-lg font-medium text-foreground">
|
|
Powered by <span className="font-mono text-primary">folkjs</span> - bringing the internet back to what it
|
|
was always meant to be
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
A basic HTML computing substrate for building truly interactive, local-first applications
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|