50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Landmark, Infinity, Key } from "lucide-react";
|
|
|
|
const CARDS = [
|
|
{
|
|
icon: Landmark,
|
|
title: "Money without banks",
|
|
description:
|
|
"Operate outside the legacy financial system with peer-to-peer digital sound money.",
|
|
},
|
|
{
|
|
icon: Infinity,
|
|
title: "Scarcity: 21 million",
|
|
description:
|
|
"A mathematical certainty of fixed supply. No inflation, no dilution, ever.",
|
|
},
|
|
{
|
|
icon: Key,
|
|
title: "Self-custody",
|
|
description:
|
|
"True ownership. Your keys, your bitcoin. No counterparty risk, absolute freedom.",
|
|
},
|
|
];
|
|
|
|
export function KnowledgeCards() {
|
|
return (
|
|
<section className="py-16 px-8 border-t border-zinc-800/50">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{CARDS.map((card) => (
|
|
<div
|
|
key={card.title}
|
|
className="flex gap-4 p-6 rounded-xl bg-zinc-900/60 border border-zinc-800/60"
|
|
>
|
|
<div className="mt-0.5 shrink-0 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<card.icon size={16} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold mb-1.5 text-sm">{card.title}</h4>
|
|
<p className="text-on-surface-variant text-sm leading-relaxed">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|