From 567283af64aa0cd294e4fc011c4f7f131269c3f8 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:10:02 +0000
Subject: [PATCH] Seed: blog template (17 files)

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

diff --git a/src/pages/Author.tsx b/src/pages/Author.tsx
new file mode 100644
index 0000000..4fecb7f
--- /dev/null
+++ b/src/pages/Author.tsx
@@ -0,0 +1,150 @@
+import { Link, useParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import {
+  ArrowRight, Twitter, Github, Linkedin, Globe, Clock,
+  FileText, Users, CalendarDays, ChevronLeft, ChevronRight
+} from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categoryColors: Record<string, string> = {
+  Technology: "bg-emerald-100 text-emerald-700",
+  Design: "bg-amber-100 text-amber-700",
+  Business: "bg-stone-200 text-stone-700",
+  Lifestyle: "bg-teal-100 text-teal-700",
+};
+
+const authorArticles = [
+  { id: 1, title: "The Future of Web Development: What Comes After the JavaScript Era", category: "Technology", date: "Mar 15, 2025", gradient: "from-emerald-400 to-teal-500", slug: "future-of-web-development" },
+  { id: 2, title: "Understanding React Server Components in Production", category: "Technology", date: "Mar 12, 2025", gradient: "from-amber-200 to-orange-300", slug: "react-server-components" },
+  { id: 3, title: "Edge Functions: A Practical Introduction", category: "Technology", date: "Mar 1, 2025", gradient: "from-stone-200 to-stone-400", slug: "edge-functions-intro" },
+  { id: 4, title: "Design Principles Every Developer Should Know", category: "Design", date: "Feb 20, 2025", gradient: "from-amber-100 to-amber-300", slug: "design-for-developers" },
+  { id: 5, title: "Why Rust is the Future of WebAssembly", category: "Technology", date: "Feb 10, 2025", gradient: "from-emerald-100 to-emerald-300", slug: "rust-for-web" },
+  { id: 6, title: "Navigating Your Career as a Senior Developer", category: "Lifestyle", date: "Jan 28, 2025", gradient: "from-stone-100 to-amber-200", slug: "dev-career-growth" },
+];
+
+export default function AuthorPage() {
+  const { slug } = useParams();
+
+  return (
+    <div className="min-h-screen bg-stone-50 text-stone-900 antialiased">
+      <Header />
+
+      {/* Author Hero */}
+      <section className="py-24 pb-0">
+        <div className="mx-auto max-w-4xl px-6 pt-12 pb-12 text-center animate-fade-up">
+          <Avatar className="h-28 w-28 mx-auto mb-6 ring-4 ring-emerald-100">
+            <AvatarFallback className="bg-emerald-600 text-white text-3xl font-bold">SC</AvatarFallback>
+          </Avatar>
+          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Sarah Chen</h1>
+          <p className="mt-4 text-lg text-stone-500 max-w-xl mx-auto leading-relaxed">
+            Senior software engineer and technical writer specializing in frontend architecture. Building for the web for over 10 years, exploring the intersection of developer experience and user experience. Previously at Stripe, Vercel, and Mozilla.
+          </p>
+
+          {/* Social Links */}
+          <div className="mt-6 flex items-center justify-center gap-2">
+            <Button variant="outline" size="icon" className="h-10 w-10 rounded-full border-stone-200 text-stone-500 hover:text-emerald-600 hover:border-emerald-300">
+              <Twitter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" className="h-10 w-10 rounded-full border-stone-200 text-stone-500 hover:text-emerald-600 hover:border-emerald-300">
+              <Github className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" className="h-10 w-10 rounded-full border-stone-200 text-stone-500 hover:text-emerald-600 hover:border-emerald-300">
+              <Linkedin className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" className="h-10 w-10 rounded-full border-stone-200 text-stone-500 hover:text-emerald-600 hover:border-emerald-300">
+              <Globe className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Stats */}
+          <div className="mt-10 flex items-center justify-center gap-8">
+            <div className="text-center">
+              <div className="flex items-center gap-2 text-emerald-600 mb-1">
+                <FileText className="h-5 w-5" />
+                <span className="text-2xl font-bold">42</span>
+              </div>
+              <p className="text-sm text-stone-400">Articles</p>
+            </div>
+            <Separator orientation="vertical" className="h-12" />
+            <div className="text-center">
+              <div className="flex items-center gap-2 text-emerald-600 mb-1">
+                <Users className="h-5 w-5" />
+                <span className="text-2xl font-bold">12K</span>
+              </div>
+              <p className="text-sm text-stone-400">Readers</p>
+            </div>
+            <Separator orientation="vertical" className="h-12" />
+            <div className="text-center">
+              <div className="flex items-center gap-2 text-emerald-600 mb-1">
+                <CalendarDays className="h-5 w-5" />
+                <span className="text-2xl font-bold">2024</span>
+              </div>
+              <p className="text-sm text-stone-400">Member since</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Separator className="max-w-7xl mx-auto" />
+
+      {/* Author Articles */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12 animate-fade-up">Articles by Sarah Chen</h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {authorArticles.map((article) => (
+              <Link to={`/article/\${article.slug}`} key={article.id} className="group">
+                <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-white">
+                  <div className={`relative aspect-video bg-gradient-to-br \${article.gradient}`}>
+                    <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+                    <div className="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
+                  </div>
+                  <CardContent className="p-5">
+                    <Badge className={`mb-2 border-0 text-xs hover:bg-primary hover:text-primary-foreground transition-colors \${categoryColors[article.category] || "bg-emerald-100 text-emerald-700"}`}>
+                      {article.category}
+                    </Badge>
+                    <h3 className="font-semibold text-stone-900 group-hover:text-emerald-600 transition-colors leading-snug line-clamp-2">
+                      {article.title}
+                    </h3>
+                    <div className="mt-3 flex items-center text-xs text-stone-400">
+                      <span>{article.date}</span>
+                      <span className="mx-1.5">&middot;</span>
+                      <span className="flex items-center gap-1"><Clock className="h-3 w-3" /> 5 min read</span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <div className="mt-12 flex items-center justify-center gap-2">
+            <Button variant="outline" size="icon" className="h-9 w-9 rounded-full">
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            {[1, 2, 3].map((page) => (
+              <Button
+                key={page}
+                variant={page === 1 ? "default" : "outline"}
+                size="icon"
+                className={`h-9 w-9 rounded-full \${page === 1 ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
+              >
+                {page}
+              </Button>
+            ))}
+            <Button variant="outline" size="icon" className="h-9 w-9 rounded-full">
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}