Template from v0.app

app/gallery/page.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link"
+import { Navigation } from "@/components/navigation"
+
+const photoshoots = [
+  {
+    id: "urban-portraits",
+    title: "Urban Portraits",
+    description: "City life through intimate moments",
+    imageCount: 24,
+    date: "December 2024",
+    coverImage: "/urban-portrait-photography-street.jpg"
+  },
+  {
+    id: "natural-landscapes",
+    title: "Natural Landscapes",
+    description: "The raw beauty of untouched earth",
+    imageCount: 18,
+    date: "November 2024",
+    coverImage: "/mountain-landscape-photography-nature.jpg"
+  },
+  {
+    id: "wedding-moments",
+    title: "Wedding Moments",
+    description: "Love stories beautifully preserved",
+    imageCount: 42,
+    date: "October 2024",
+    coverImage: "/wedding-photography-couple-ceremony.jpg"
+  },
+  {
+    id: "editorial-fashion",
+    title: "Editorial Fashion",
+    description: "Bold statements through style",
+    imageCount: 16,
+    date: "September 2024",
+    coverImage: "/fashion-editorial-photography-studio.jpg"
+  },
+  {
+    id: "architectural-spaces",
+    title: "Architectural Spaces",
+    description: "Form and function in modern design",
+    imageCount: 28,
+    date: "August 2024",
+    coverImage: "/modern-building-architecture.png"
+  },
+  {
+    id: "intimate-portraits",
+    title: "Intimate Portraits",
+    description: "Personal stories, authentic expressions",
+    imageCount: 20,
+    date: "July 2024",
+    coverImage: "/intimate-portrait-photography-natural-light.jpg"
+  }
+]
+
+export default function GalleryPage() {
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      
+      <main className="pt-24 pb-16 px-6">
+        <div className="container mx-auto max-w-7xl">
+          {/* Header */}
+          <div className="mb-16">
+            <h1 className="font-sans text-5xl md:text-6xl mb-4 tracking-tight">Gallery</h1>
+            <p className="text-muted-foreground text-lg max-w-2xl">
+              Explore a curated collection of photoshoots spanning diverse styles and subjects. Each project tells its own unique story.
+            </p>
+          </div>
+
+          {/* Gallery Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {photoshoots.map((shoot) => (
+              <Link 
+                key={shoot.id}
+                href={`/gallery/${shoot.id}`}
+                className="group"
+              >
+                <div className="relative aspect-[3/4] overflow-hidden mb-4">
+                  <img
+                    src={shoot.coverImage || "/placeholder.svg"}
+                    alt={shoot.title}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-500" />
+                </div>
+                
+                <div>
+                  <h3 className="font-sans text-2xl mb-2 group-hover:text-accent transition-colors">
+                    {shoot.title}
+                  </h3>
+                  <p className="text-muted-foreground mb-1">{shoot.description}</p>
+                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                    <span>{shoot.imageCount} images</span>
+                    <span>•</span>
+                    <span>{shoot.date}</span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}