Seed: editorial template (15 files)

2026-07-23 22:14:24 +00:00
parent 2567752a43
commit a637042390
1 changed files with 60 additions and 0 deletions
@@ -0,0 +1,60 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Twitter, Instagram, Globe, BookOpen } from "lucide-react";
+
+const contributors = [
+  { name: "Elena Vasquez", role: "Senior Correspondent", bio: "Covers culture, design, and the built environment. Former editor at Dwell. Based in Barcelona.", initials: "EV", articles: 42, social: { twitter: "#", site: "#" } },
+  { name: "Soren Blake", role: "Technology Editor", bio: "Writes about AI, digital ethics, and the intersection of humanity and machines. Based in Copenhagen.", initials: "SB", articles: 38, social: { twitter: "#", instagram: "#" } },
+  { name: "Amara Diallo", role: "Culture Writer", bio: "Explores music, art, and identity through longform narrative. Contributor to The New Yorker.", initials: "AD", articles: 31, social: { instagram: "#", site: "#" } },
+  { name: "Kai Mendez", role: "Features Writer", bio: "Tells stories about communities, cities, and the people who shape them. Based in Mexico City.", initials: "KM", articles: 27, social: { twitter: "#" } },
+  { name: "Nadia Park", role: "Food and Travel", bio: "Chronicles culinary traditions and the journeys behind them. James Beard Award nominee.", initials: "NP", articles: 24, social: { instagram: "#", site: "#" } },
+  { name: "Ines Moreau", role: "Style Columnist", bio: "Writes about fashion, craft, and material culture with a focus on sustainability. Based in Paris.", initials: "IM", articles: 19, social: { twitter: "#", instagram: "#", site: "#" } },
+];
+
+export default function Contributors() {
+  return (
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950">
+      <Header />
+      <main className="pt-24">
+
+        {/* Hero */}
+        <section className="mx-auto max-w-6xl px-6 mb-12 text-center">
+          <h1 className="font-serif text-4xl md:text-5xl font-bold text-stone-800 dark:text-stone-100 animate-fade-up">Our Contributors</h1>
+          <p className="mt-4 text-stone-500 dark:text-stone-400 max-w-xl mx-auto leading-relaxed">The writers, thinkers, and storytellers behind every page.</p>
+        </section>
+
+        {/* Contributors Grid */}
+        <section className="mx-auto max-w-6xl px-6 mb-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {contributors.map((c, i) => (
+              <Card key={i} className="group backdrop-blur-sm bg-card/80 border-stone-200 dark:border-stone-800 hover:shadow-xl hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
+                <CardContent className="p-8 text-center">
+                  <Avatar className="h-20 w-20 mx-auto mb-4 ring-2 ring-stone-200 dark:ring-stone-700">
+                    <AvatarFallback className="bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 font-serif text-xl">{c.initials}</AvatarFallback>
+                  </Avatar>
+                  <h3 className="font-serif text-xl font-bold text-stone-800 dark:text-stone-100">{c.name}</h3>
+                  <Badge variant="outline" className="mt-2 border-stone-300 dark:border-stone-700 text-stone-500 dark:text-stone-400 text-xs">{c.role}</Badge>
+                  <p className="mt-4 text-sm text-stone-500 dark:text-stone-400 leading-relaxed">{c.bio}</p>
+                  <div className="mt-4 flex items-center justify-center gap-1 text-xs text-stone-400 dark:text-stone-500">
+                    <BookOpen className="h-3.5 w-3.5" />
+                    <span>{c.articles} articles</span>
+                  </div>
+                  <div className="mt-4 flex justify-center gap-3">
+                    {c.social.twitter && <a href={c.social.twitter} className="text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 transition-colors"><Twitter className="h-4 w-4" /></a>}
+                    {c.social.instagram && <a href={c.social.instagram} className="text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 transition-colors"><Instagram className="h-4 w-4" /></a>}
+                    {c.social.site && <a href={c.social.site} className="text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 transition-colors"><Globe className="h-4 w-4" /></a>}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+      </main>
+      <Footer />
+    </div>
+  );
+}