first commit

Made-with: Cursor

frontend/app/contact/page.tsx

@@ -0,0 +1,86 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Navbar } from "@/components/public/Navbar";
+import { Footer } from "@/components/public/Footer";
+import { Send, Zap, ExternalLink } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Contact Us",
+  description:
+    "Get in touch with the Belgian Bitcoin Embassy community through Telegram, Nostr, or X. Join our monthly Bitcoin meetups in Belgium.",
+  openGraph: {
+    title: "Contact the Belgian Bitcoin Embassy",
+    description:
+      "Reach the Belgian Bitcoin community through our decentralized channels.",
+  },
+  alternates: { canonical: "/contact" },
+};
+
+export default function ContactPage() {
+  return (
+    <>
+      <Navbar />
+      <div className="min-h-screen">
+        <div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
+          <h1 className="text-4xl font-black mb-4">Contact</h1>
+          <p className="text-on-surface-variant text-lg mb-12">
+            The best way to reach us is through our community channels. We are a
+            decentralized community — there is no central office or email inbox.
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            <a
+              href="https://t.me/belgianbitcoinembassy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-surface-container-low p-8 rounded-xl hover:bg-surface-container transition-colors group"
+            >
+              <Send size={28} className="text-primary mb-4" />
+              <h2 className="text-xl font-bold mb-2">Telegram</h2>
+              <p className="text-on-surface-variant text-sm">
+                Join our Telegram group for quick questions and community chat.
+              </p>
+            </a>
+
+            <a
+              href="#"
+              className="bg-surface-container-low p-8 rounded-xl hover:bg-surface-container transition-colors group"
+            >
+              <Zap size={28} className="text-primary mb-4" />
+              <h2 className="text-xl font-bold mb-2">Nostr</h2>
+              <p className="text-on-surface-variant text-sm">
+                Follow us on Nostr for censorship-resistant communication.
+              </p>
+            </a>
+
+            <a
+              href="#"
+              className="bg-surface-container-low p-8 rounded-xl hover:bg-surface-container transition-colors group"
+            >
+              <ExternalLink size={28} className="text-primary mb-4" />
+              <h2 className="text-xl font-bold mb-2">X (Twitter)</h2>
+              <p className="text-on-surface-variant text-sm">
+                Follow us on X for announcements and updates.
+              </p>
+            </a>
+
+            <div className="bg-surface-container-low p-8 rounded-xl">
+              <h2 className="text-xl font-bold mb-2">Meetups</h2>
+              <p className="text-on-surface-variant text-sm mb-4">
+                The best way to connect is in person. Come to our monthly meetup
+                in Brussels.
+              </p>
+              <Link
+                href="/#meetup"
+                className="text-primary font-bold text-sm hover:underline"
+              >
+                See next meetup →
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}