first commit

Made-with: Cursor

frontend/components/public/KnowledgeCards.tsx

@@ -0,0 +1,49 @@
+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>
+  );
+}