Seed: wedding template (15 files)

src/pages/Gallery.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Camera, X } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const categories = ["All", "Engagement", "Pre-Wedding", "Venue"];
+
+const photos = [
+  { id: 1, cat: "Engagement", h: "h-64", gradient: "from-rose-300 to-pink-200" },
+  { id: 2, cat: "Engagement", h: "h-80", gradient: "from-pink-200 to-rose-300" },
+  { id: 3, cat: "Pre-Wedding", h: "h-72", gradient: "from-amber-200 to-rose-200" },
+  { id: 4, cat: "Venue", h: "h-64", gradient: "from-rose-200 to-pink-300" },
+  { id: 5, cat: "Engagement", h: "h-80", gradient: "from-pink-300 to-amber-200" },
+  { id: 6, cat: "Pre-Wedding", h: "h-64", gradient: "from-rose-300 to-amber-100" },
+  { id: 7, cat: "Venue", h: "h-72", gradient: "from-amber-100 to-rose-300" },
+  { id: 8, cat: "Pre-Wedding", h: "h-80", gradient: "from-rose-400 to-pink-200" },
+  { id: 9, cat: "Engagement", h: "h-64", gradient: "from-pink-200 to-amber-200" },
+  { id: 10, cat: "Venue", h: "h-80", gradient: "from-rose-200 to-rose-400" },
+  { id: 11, cat: "Pre-Wedding", h: "h-72", gradient: "from-amber-200 to-pink-300" },
+  { id: 12, cat: "Venue", h: "h-64", gradient: "from-pink-300 to-rose-200" },
+];
+
+export default function GalleryPage() {
+  const [active, setActive] = useState("All");
+  const [lightbox, setLightbox] = useState<number | null>(null);
+
+  const filtered = active === "All" ? photos : photos.filter((p) => p.cat === active);
+  const selected = photos.find((p) => p.id === lightbox);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-stone-950">
+      <Header />
+
+      <section className="pt-32 pb-24">
+        <div className="mx-auto max-w-6xl px-6">
+          <p className="text-rose-400 text-sm uppercase tracking-[0.2em] text-center mb-2">Our Moments</p>
+          <h1 className="font-serif text-4xl sm:text-5xl text-center text-stone-800 dark:text-white mb-10 animate-fade-up">Photo Gallery</h1>
+
+          {/* Category Filter */}
+          <div className="flex justify-center gap-2 mb-12 flex-wrap">
+            {categories.map((cat) => (
+              <Button key={cat} variant={active === cat ? "default" : "outline"} size="sm" onClick={() => setActive(cat)} className={`rounded-full text-xs \${active === cat ? "bg-rose-400 hover:bg-rose-500 text-white" : "border-rose-200 text-rose-500 hover:bg-rose-50 dark:border-stone-600 dark:text-rose-400 dark:hover:bg-stone-800"}`}>
+                {cat}
+              </Button>
+            ))}
+          </div>
+
+          {/* Photo Grid */}
+          <div className="columns-2 md:columns-3 gap-4 space-y-4 stagger">
+            {filtered.map((photo) => (
+              <div key={photo.id} onClick={() => setLightbox(photo.id)} className={`\${photo.h} rounded-xl bg-gradient-to-br \${photo.gradient} overflow-hidden group cursor-pointer relative break-inside-avoid hover:-translate-y-1 hover:shadow-lg transition-all duration-300`}>
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                  <Camera className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Lightbox Dialog */}
+      <Dialog open={lightbox !== null} onOpenChange={() => setLightbox(null)}>
+        <DialogContent className="max-w-3xl bg-white dark:bg-stone-900 border-rose-100 dark:border-stone-700 p-2">
+          {selected && (
+            <div className="aspect-[4/3] rounded-lg bg-gradient-to-br from-rose-300 to-pink-200 flex items-center justify-center">
+              <Camera className="h-16 w-16 text-white/60" />
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <Footer />
+    </div>
+  );
+}