127 lines
6.3 KiB
TypeScript
127 lines
6.3 KiB
TypeScript
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>
|
|
)
|
|
}
|