From 499d2f3a47c8f342f523a219edccb31db54696c0 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:11:01 +0000
Subject: [PATCH] Seed: event template (15 files)

---
 src/pages/Speakers.tsx | 74 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/pages/Speakers.tsx

diff --git a/src/pages/Speakers.tsx b/src/pages/Speakers.tsx
new file mode 100644
index 0000000..3b1d490
--- /dev/null
+++ b/src/pages/Speakers.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Search, Twitter, Linkedin, Github } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const speakers = [
+  { id: "speaker-1", initials: "SK", name: "Sarah Kim", role: "VP Engineering", company: "Vercel", tags: ["React", "Performance", "SSR"], gradient: "from-indigo-500 to-cyan-500" },
+  { id: "speaker-2", initials: "AM", name: "Alex Morgan", role: "CTO", company: "Supabase", tags: ["TypeScript", "APIs", "Open Source"], gradient: "from-purple-500 to-pink-500" },
+  { id: "speaker-3", initials: "RJ", name: "Raj Joshi", role: "Staff Engineer", company: "Google", tags: ["Backend", "GraphQL", "AI"], gradient: "from-cyan-500 to-emerald-500" },
+  { id: "speaker-4", initials: "LP", name: "Lisa Park", role: "Design Lead", company: "Figma", tags: ["Design Systems", "Figma", "UX"], gradient: "from-amber-500 to-red-500" },
+  { id: "speaker-5", initials: "TW", name: "Tom Walsh", role: "Creator", company: "Bun", tags: ["Runtimes", "Tooling", "Bun"], gradient: "from-pink-500 to-violet-500" },
+  { id: "speaker-6", initials: "DN", name: "Diana Nguyen", role: "SRE Lead", company: "Netflix", tags: ["DevOps", "SRE", "Kubernetes"], gradient: "from-emerald-500 to-indigo-500" },
+  { id: "speaker-7", initials: "JC", name: "James Chen", role: "Principal Eng", company: "Cloudflare", tags: ["WebAssembly", "Rust", "Edge"], gradient: "from-rose-500 to-amber-500" },
+  { id: "speaker-8", initials: "MH", name: "Maya Hassan", role: "A11y Lead", company: "Mozilla", tags: ["Accessibility", "CSS", "HTML"], gradient: "from-violet-500 to-cyan-500" },
+  { id: "speaker-9", initials: "KL", name: "Kevin Lee", role: "Security Eng", company: "Auth0", tags: ["Security", "Auth", "Crypto"], gradient: "from-indigo-500 to-pink-500" },
+];
+
+export default function SpeakersPage() {
+  const [search, setSearch] = useState("");
+  const filtered = speakers.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.tags.some((t) => t.toLowerCase().includes(search.toLowerCase())));
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white">
+      <Header />
+
+      <section className="pt-32 pb-24 text-center px-6">
+        <h1 className="text-5xl font-black tracking-tight mb-4 animate-fade-up">Speakers</h1>
+        <p className="text-slate-400 max-w-xl mx-auto mb-8">Meet the brilliant minds shaping the future of technology.</p>
+        <div className="max-w-md mx-auto relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Input placeholder="Search speakers or topics..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-10 bg-slate-900 border-slate-700 text-white placeholder:text-slate-500" />
+        </div>
+      </section>
+
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-6xl grid md:grid-cols-3 gap-6 stagger">
+          {filtered.map((sp) => (
+            <Card key={sp.id} className="backdrop-blur-sm bg-slate-900/80 border-slate-700/50 hover:border-indigo-500/50 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group">
+              <CardContent className="p-6 text-center">
+                <div className={`w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br \${sp.gradient} flex items-center justify-center text-lg font-bold text-white ring-2 ring-offset-2 ring-offset-slate-950 ring-indigo-500/50 group-hover:scale-110 transition-transform`}>
+                  {sp.initials}
+                </div>
+                <div className="font-semibold text-white mb-1">{sp.name}</div>
+                <div className="text-sm text-slate-400 mb-1">{sp.role}, {sp.company}</div>
+                <Badge className="mb-2 text-[10px] bg-indigo-500/20 text-indigo-300 border-0">2 talks</Badge>
+                <div className="flex flex-wrap gap-1 justify-center mb-4">
+                  {sp.tags.map((tag) => (
+                    <Badge key={tag} variant="outline" className="border-slate-700 text-slate-400 text-xs">{tag}</Badge>
+                  ))}
+                </div>
+                <div className="flex justify-center gap-2 mb-4">
+                  {[Twitter, Linkedin, Github].map((Icon, i) => (
+                    <Button key={i} variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-indigo-400"><Icon className="h-4 w-4" /></Button>
+                  ))}
+                </div>
+                <Button asChild variant="outline" size="sm" className="border-slate-700 text-slate-300 hover:bg-slate-800 active:scale-[0.98] w-full">
+                  <Link to={`/speakers/\${sp.id}`}>View Profile</Link>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        {filtered.length === 0 && <p className="text-center text-slate-500 mt-12">No speakers found matching your search.</p>}
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file