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

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

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..c577224
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,141 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { ArrowRight, Camera } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categories = ["Wedding", "Portrait", "Commercial", "Fashion", "Nature"];
+
+const featured = [
+  { title: "The Golden Hour", category: "Wedding", img: "https://images.unsplash.com/photo-1519741497674-611481863552?w=800&h=600&fit=crop", large: true },
+  { title: "Quiet Strength", category: "Portrait", img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=400&fit=crop", large: false },
+  { title: "Urban Canvas", category: "Commercial", img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop", large: false },
+  { title: "Runway Noir", category: "Fashion", img: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=800&h=600&fit=crop", large: true },
+  { title: "Pacific Dawn", category: "Nature", img: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop", large: false },
+  { title: "Luminance", category: "Portrait", img: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&h=400&fit=crop", large: false },
+];
+
+const testimonials = [
+  { quote: "Elena captured our wedding day in a way that still takes our breath away. Every photo tells a piece of our story.", name: "Sarah & James", event: "Wedding, Napa Valley" },
+  { quote: "The portraits exceeded every expectation. She has this incredible ability to make you feel comfortable and look your best.", name: "Marcus Chen", event: "Portrait Session" },
+  { quote: "Working with Elena on our brand campaign was seamless. The images elevated our entire visual identity.", name: "Olivia Reed", event: "Commercial Campaign" },
+];
+
+export default function IndexPage() {
+  const [lightbox, setLightbox] = useState<string | null>(null);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-zinc-900/50 via-zinc-950 to-zinc-950" />
+        <div className="relative z-10 text-center max-w-4xl">
+          <h1 className="font-serif text-6xl md:text-8xl lg:text-9xl font-light tracking-tight leading-[0.95]">
+            Elena Torres
+          </h1>
+          <p className="mt-6 text-lg md:text-xl text-zinc-400 font-light tracking-wide">Capturing light, emotion, and the moments in between</p>
+          <Button asChild size="lg" variant="outline" className="mt-10 rounded-none border-white/30 text-white hover:bg-white hover:text-zinc-900 px-8 tracking-wider">
+            <Link to="/portfolio">View Portfolio <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </div>
+      </section>
+
+      {/* ── FEATURED WORK ── */}
+      <section className="py-24 px-6">
+        <div className="mx-auto max-w-7xl">
+          <h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight mb-4 animate-fade-up">Selected Work</h2>
+          <p className="text-zinc-500 mb-12 max-w-xl">A curated selection from recent sessions and personal projects.</p>
+
+          <div className="columns-1 md:columns-2 gap-4 space-y-4 stagger">
+            {featured.map((item, i) => (
+              <Dialog key={i}>
+                <DialogTrigger asChild>
+                  <div className={`group relative overflow-hidden cursor-pointer break-inside-avoid \${item.large ? "aspect-[4/3]" : "aspect-square"}`}>
+                    <img src={item.img} alt={item.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 flex items-end p-6 opacity-0 group-hover:opacity-100">
+                      <div>
+                        <Badge variant="secondary" className="bg-white/20 text-white border-0 backdrop-blur-sm mb-2">{item.category}</Badge>
+                        <p className="text-white text-lg font-light">{item.title}</p>
+                      </div>
+                    </div>
+                  </div>
+                </DialogTrigger>
+                <DialogContent className="max-w-4xl p-0 bg-transparent border-0">
+                  <img src={item.img} alt={item.title} className="w-full rounded-lg" />
+                </DialogContent>
+              </Dialog>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CATEGORIES ── */}
+      <section className="py-16 px-6">
+        <div className="mx-auto max-w-7xl flex flex-wrap justify-center gap-3">
+          {categories.map((cat) => (
+            <Link key={cat} to="/portfolio">
+              <Badge variant="outline" className="px-5 py-2 text-sm rounded-full border-zinc-700 text-zinc-300 hover:bg-white hover:text-zinc-900 hover:border-white transition-all cursor-pointer">
+                {cat}
+              </Badge>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* ── ABOUT PREVIEW ── */}
+      <section className="py-24 px-6">
+        <div className="mx-auto max-w-7xl grid md:grid-cols-2 gap-16 items-center">
+          <div className="aspect-[3/4] bg-zinc-800 rounded-sm overflow-hidden">
+            <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=600&h=800&fit=crop" alt="Photographer" className="w-full h-full object-cover" />
+          </div>
+          <div>
+            <h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight mb-6 animate-fade-up">The Eye Behind the Lens</h2>
+            <p className="text-zinc-400 leading-relaxed mb-8">With over a decade of experience, I specialize in telling stories through imagery. Every session is an opportunity to capture something authentic and timeless.</p>
+            <Button asChild variant="link" className="text-white p-0 tracking-wider">
+              <Link to="/about">Learn More <ArrowRight className="ml-2 h-4 w-4" /></Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* ── TESTIMONIALS ── */}
+      <section className="py-24 px-6 bg-zinc-900/50">
+        <div className="mx-auto max-w-7xl">
+          <h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight text-center mb-16 animate-fade-up">Kind Words</h2>
+          <div className="grid md:grid-cols-3 gap-8 stagger">
+            {testimonials.map((t, 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-8 pb-6 px-6">
+                  <p className="text-zinc-300 italic leading-relaxed mb-6">&ldquo;{t.quote}&rdquo;</p>
+                  <div>
+                    <p className="text-white font-medium text-sm">{t.name}</p>
+                    <p className="text-zinc-500 text-xs mt-1">{t.event}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-32 px-6 text-center">
+        <div className="mx-auto max-w-2xl">
+          <Camera className="h-8 w-8 text-zinc-600 mx-auto mb-6" />
+          <h2 className="text-4xl md:text-5xl font-serif font-light tracking-tight mb-6 animate-fade-up">Lets Create Something Beautiful</h2>
+          <Button asChild size="lg" className="rounded-none bg-white text-zinc-900 hover:bg-zinc-200 px-10 tracking-wider">
+            <Link to="/contact">Get in Touch</Link>
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file