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

app/globals.css

@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.15 0 0);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.95 0 0);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.92 0 0);
+  --muted-foreground: oklch(0.55 0 0);
+  --accent: oklch(0.45 0 0);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.88 0 0);
+  --input: oklch(0.88 0 0);
+  --ring: oklch(0.15 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.12 0 0);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.15 0 0);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.15 0 0);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.98 0 0);
+  --primary-foreground: oklch(0.12 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.25 0 0);
+  --muted-foreground: oklch(0.65 0 0);
+  --accent: oklch(0.75 0 0);
+  --accent-foreground: oklch(0.12 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.25 0 0);
+  --input: oklch(0.25 0 0);
+  --ring: oklch(0.75 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: 'Playfair Display', 'serif';
+  --font-mono: 'Inter', 'sans-serif';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from 'next'
+import { Playfair_Display, Inter } from 'next/font/google'
+import { Analytics } from '@vercel/analytics/next'
+import './globals.css'
+
+const _playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-sans' })
+const _inter = Inter({ subsets: ['latin'], variable: '--font-mono' })
+
+export const metadata: Metadata = {
+  title: 'Photography Portfolio | Visual Storytelling',
+  description: 'A curated collection of photographic moments capturing light, emotion, and beauty',
+  generator: 'v0.app',
+  icons: {
+    icon: [
+      {
+        url: '/icon-light-32x32.png',
+        media: '(prefers-color-scheme: light)',
+      },
+      {
+        url: '/icon-dark-32x32.png',
+        media: '(prefers-color-scheme: dark)',
+      },
+      {
+        url: '/icon.svg',
+        type: 'image/svg+xml',
+      },
+    ],
+    apple: '/apple-icon.png',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={`font-mono antialiased`}>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,126 @@
+import Link from "next/link"
+import { Navigation } from "@/components/navigation"
+import { ArrowRight } from 'lucide-react'
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      
+      {/* Hero Section */}
+      <section className="relative h-screen flex items-center justify-center">
+        <div className="absolute inset-0 z-0">
+          <img
+            src="/dramatic-landscape-photography-golden-hour.jpg"
+            alt="Hero image"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/60" />
+        </div>
+        
+        <div className="relative z-10 text-center px-6 text-white">
+          <h1 className="font-sans text-6xl md:text-8xl mb-6 tracking-tight text-balance">
+            Visual Storytelling
+          </h1>
+          <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto text-balance">
+            Capturing moments that transcend time, transforming light and emotion into lasting memories
+          </p>
+          <Link 
+            href="/gallery"
+            className="inline-flex items-center gap-2 bg-white text-primary px-8 py-4 hover:bg-white/90 transition-all"
+          >
+            View Portfolio
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+      </section>
+
+      {/* Featured Work */}
+      <section className="py-24 px-6">
+        <div className="container mx-auto max-w-7xl">
+          <div className="mb-16 text-center">
+            <h2 className="font-sans text-4xl md:text-5xl mb-4 tracking-tight">Featured Work</h2>
+            <p className="text-muted-foreground text-lg">Selected highlights from recent projects</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Featured Image 1 */}
+            <Link href="/gallery/urban-portraits" className="group relative aspect-[4/5] overflow-hidden">
+              <img
+                src="/urban-portrait-photography-dramatic-lighting.jpg"
+                alt="Urban Portraits"
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                <h3 className="font-sans text-3xl mb-2">Urban Portraits</h3>
+                <p className="text-white/80">City life through intimate moments</p>
+              </div>
+            </Link>
+
+            {/* Featured Image 2 */}
+            <Link href="/gallery/natural-landscapes" className="group relative aspect-[4/5] overflow-hidden">
+              <img
+                src="/mountain-sunset-landscape.png"
+                alt="Natural Landscapes"
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                <h3 className="font-sans text-3xl mb-2">Natural Landscapes</h3>
+                <p className="text-white/80">The raw beauty of untouched earth</p>
+              </div>
+            </Link>
+
+            {/* Featured Image 3 */}
+            <Link href="/gallery/wedding-moments" className="group relative aspect-[4/5] overflow-hidden">
+              <img
+                src="/wedding-photography-emotional-candid-moment.jpg"
+                alt="Wedding Moments"
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                <h3 className="font-sans text-3xl mb-2">Wedding Moments</h3>
+                <p className="text-white/80">Love stories beautifully preserved</p>
+              </div>
+            </Link>
+
+            {/* Featured Image 4 */}
+            <Link href="/gallery/editorial-fashion" className="group relative aspect-[4/5] overflow-hidden">
+              <img
+                src="/fashion-editorial-photography-high-contrast.jpg"
+                alt="Editorial Fashion"
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                <h3 className="font-sans text-3xl mb-2">Editorial Fashion</h3>
+                <p className="text-white/80">Bold statements through style</p>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Call to Action */}
+      <section className="py-24 px-6 bg-primary text-primary-foreground">
+        <div className="container mx-auto max-w-4xl text-center">
+          <h2 className="font-sans text-4xl md:text-5xl mb-6 tracking-tight">
+            Let's Create Together
+          </h2>
+          <p className="text-lg mb-8 text-primary-foreground/90 text-balance">
+            Available for commissions, collaborations, and creative projects worldwide
+          </p>
+          <Link 
+            href="/contact"
+            className="inline-flex items-center gap-2 bg-background text-foreground px-8 py-4 hover:bg-background/90 transition-all"
+          >
+            Get in Touch
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+      </section>
+    </div>
+  )
+}