Template from v0.app

app/gallery/[slug]/page.tsx

@@ -0,0 +1,146 @@
+import Link from "next/link"
+import { Navigation } from "@/components/navigation"
+import { ArrowLeft, Calendar, Camera } from 'lucide-react'
+
+// This would typically come from a database or CMS
+const photoshootData: Record<string, any> = {
+  "urban-portraits": {
+    title: "Urban Portraits",
+    description: "A visual exploration of city dwellers in their natural habitat. These portraits capture the essence of urban life—raw, authentic, and beautifully complex.",
+    date: "December 2024",
+    location: "New York City",
+    camera: "Canon EOS R5, 85mm f/1.2",
+    images: Array.from({ length: 12 }, (_, i) => ({
+      id: i + 1,
+      url: `/placeholder.svg?height=1200&width=800&query=urban+portrait+photography+candid+street+${i + 1}`,
+      alt: `Urban portrait ${i + 1}`
+    }))
+  },
+  "natural-landscapes": {
+    title: "Natural Landscapes",
+    description: "Journey through untouched wilderness where mountains meet sky and valleys cradle ancient forests. These landscapes remind us of nature's timeless grandeur.",
+    date: "November 2024",
+    location: "Pacific Northwest",
+    camera: "Sony A7R V, 24-70mm f/2.8",
+    images: Array.from({ length: 12 }, (_, i) => ({
+      id: i + 1,
+      url: `/placeholder.svg?height=1200&width=1600&query=landscape+nature+photography+mountains+forests+${i + 1}`,
+      alt: `Landscape ${i + 1}`
+    }))
+  }
+}
+
+export default async function PhotoshootPage({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}) {
+  const { slug } = await params
+  const photoshoot = photoshootData[slug] || photoshootData["urban-portraits"]
+
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      
+      <main className="pt-24 pb-16 px-6">
+        <div className="container mx-auto max-w-7xl">
+          {/* Back Button */}
+          <Link 
+            href="/gallery"
+            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-8"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Gallery
+          </Link>
+
+          {/* Header */}
+          <div className="mb-16 max-w-3xl">
+            <h1 className="font-sans text-5xl md:text-6xl mb-6 tracking-tight">
+              {photoshoot.title}
+            </h1>
+            <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
+              {photoshoot.description}
+            </p>
+            
+            {/* Metadata */}
+            <div className="flex flex-wrap gap-6 text-sm">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-4 h-4 text-muted-foreground" />
+                <span>{photoshoot.date}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Camera className="w-4 h-4 text-muted-foreground" />
+                <span>{photoshoot.camera}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">📍</span>
+                <span>{photoshoot.location}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Image Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {photoshoot.images.map((image: any) => (
+              <div 
+                key={image.id}
+                className="relative aspect-[4/5] overflow-hidden group cursor-pointer"
+              >
+                <img
+                  src={image.url || "/placeholder.svg"}
+                  alt={image.alt}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                />
+              </div>
+            ))}
+          </div>
+
+          {/* Navigation to other shoots */}
+          <div className="mt-24 pt-16 border-t border-border">
+            <h3 className="font-sans text-2xl mb-8">More Projects</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Link href="/gallery/wedding-moments" className="group">
+                <div className="relative aspect-[4/5] overflow-hidden mb-4">
+                  <img
+                    src="/wedding-photography-romantic.jpg"
+                    alt="Wedding Moments"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                </div>
+                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
+                  Wedding Moments
+                </h4>
+              </Link>
+              
+              <Link href="/gallery/editorial-fashion" className="group">
+                <div className="relative aspect-[4/5] overflow-hidden mb-4">
+                  <img
+                    src="/fashion-editorial-photography.jpg"
+                    alt="Editorial Fashion"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                </div>
+                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
+                  Editorial Fashion
+                </h4>
+              </Link>
+              
+              <Link href="/gallery/architectural-spaces" className="group">
+                <div className="relative aspect-[4/5] overflow-hidden mb-4">
+                  <img
+                    src="/modern-architecture-photo.png"
+                    alt="Architectural Spaces"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                  />
+                </div>
+                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
+                  Architectural Spaces
+                </h4>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

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>
+  )
+}