106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
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>
|
|
)
|
|
}
|