From d23777cd3208d42467ea87df3d212abbb6cf2262 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:13:16 +0000
Subject: [PATCH] Seed: photography template (19 files)

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

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..74d5dd9
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,99 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Camera, Award, BookOpen } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const equipment = [
+  "Sony A7R V", "Sony 24-70mm f/2.8 GM II", "Sony 85mm f/1.4 GM", "Profoto B10 Plus", "DJI Mavic 3 Pro", "Capture One Pro",
+];
+
+const awards = [
+  { title: "Best Wedding Photography", org: "International Photography Awards", year: "2025" },
+  { title: "Featured Photographer", org: "Vogue Italia", year: "2024" },
+  { title: "Portrait Series of the Year", org: "LensCulture", year: "2024" },
+];
+
+const clients = ["Vogue", "The Ritz-Carlton", "Net-a-Porter", "Dior Beauty", "Four Seasons", "Harper Bazaar"];
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white antialiased">
+      <Header />
+
+      {/* ── BIO ── */}
+      <section className="pt-32 pb-24 px-6">
+        <div className="mx-auto max-w-7xl grid md:grid-cols-2 gap-16 items-start">
+          <div className="aspect-[3/4] bg-zinc-800 rounded-sm overflow-hidden sticky top-32">
+            <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=600&h=800&fit=crop" alt="Elena Torres" className="w-full h-full object-cover" />
+          </div>
+          <div className="pt-8">
+            <h1 className="text-4xl md:text-5xl font-serif font-light tracking-tight mb-8 animate-fade-up">About Me</h1>
+            <div className="space-y-6 text-zinc-400 leading-relaxed">
+              <p>Photography found me before I found it. Growing up in Barcelona, I was surrounded by light, architecture, and color that shaped how I see the world through a lens.</p>
+              <p>After studying fine art photography in New York, I spent five years assisting some of the most respected names in editorial and wedding photography. That mentorship taught me the importance of patience, composition, and connection.</p>
+              <p>Today, I bring that same intentionality to every shoot. Whether it is a wedding, a brand campaign, or a quiet portrait session, my goal is always the same: to create images that feel true.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── EQUIPMENT ── */}
+      <section className="py-24 px-6 bg-zinc-900/40">
+        <div className="mx-auto max-w-7xl">
+          <div className="flex items-center gap-3 mb-10">
+            <Camera className="h-5 w-5 text-zinc-500" />
+            <h2 className="text-2xl font-serif font-light tracking-tight animate-fade-up">Equipment</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 stagger">
+            {equipment.map((item, i) => (
+              <div key={i} className="border border-zinc-800 rounded-sm px-5 py-4 text-zinc-300 text-sm font-light tracking-wide hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── AWARDS ── */}
+      <section className="py-24 px-6">
+        <div className="mx-auto max-w-7xl">
+          <div className="flex items-center gap-3 mb-10">
+            <Award className="h-5 w-5 text-zinc-500" />
+            <h2 className="text-2xl font-serif font-light tracking-tight animate-fade-up">Awards & Publications</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6 stagger">
+            {awards.map((a, i) => (
+              <Card key={i} className="backdrop-blur-sm bg-card/80 border-zinc-800 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
+                <CardContent className="pt-6 pb-5 px-6">
+                  <p className="text-white font-light text-lg mb-2">{a.title}</p>
+                  <p className="text-zinc-500 text-sm">{a.org}</p>
+                  <Badge variant="outline" className="mt-3 border-zinc-700 text-zinc-400 text-xs">{a.year}</Badge>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CLIENTS ── */}
+      <section className="py-24 px-6 bg-zinc-900/40">
+        <div className="mx-auto max-w-7xl">
+          <div className="flex items-center gap-3 mb-10">
+            <BookOpen className="h-5 w-5 text-zinc-500" />
+            <h2 className="text-2xl font-serif font-light tracking-tight animate-fade-up">Clients</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+            {clients.map((name, i) => (
+              <div key={i} className="text-center py-8 border border-zinc-800 rounded-sm">
+                <span className="text-zinc-400 font-light tracking-wider text-sm">{name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file