Seed: photography template (19 files)
This commit is contained in:
@@ -0,0 +1,141 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import { ArrowRight, Camera } from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const categories = ["Wedding", "Portrait", "Commercial", "Fashion", "Nature"];
|
||||||
|
|
||||||
|
const featured = [
|
||||||
|
{ title: "The Golden Hour", category: "Wedding", img: "https://images.unsplash.com/photo-1519741497674-611481863552?w=800&h=600&fit=crop", large: true },
|
||||||
|
{ title: "Quiet Strength", category: "Portrait", img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=400&fit=crop", large: false },
|
||||||
|
{ title: "Urban Canvas", category: "Commercial", img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop", large: false },
|
||||||
|
{ title: "Runway Noir", category: "Fashion", img: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=800&h=600&fit=crop", large: true },
|
||||||
|
{ title: "Pacific Dawn", category: "Nature", img: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop", large: false },
|
||||||
|
{ title: "Luminance", category: "Portrait", img: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&h=400&fit=crop", large: false },
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ quote: "Elena captured our wedding day in a way that still takes our breath away. Every photo tells a piece of our story.", name: "Sarah & James", event: "Wedding, Napa Valley" },
|
||||||
|
{ quote: "The portraits exceeded every expectation. She has this incredible ability to make you feel comfortable and look your best.", name: "Marcus Chen", event: "Portrait Session" },
|
||||||
|
{ quote: "Working with Elena on our brand campaign was seamless. The images elevated our entire visual identity.", name: "Olivia Reed", event: "Commercial Campaign" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
const [lightbox, setLightbox] = useState<string | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-zinc-950 text-white antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-zinc-900/50 via-zinc-950 to-zinc-950" />
|
||||||
|
<div className="relative z-10 text-center max-w-4xl">
|
||||||
|
<h1 className="font-serif text-6xl md:text-8xl lg:text-9xl font-light tracking-tight leading-[0.95]">
|
||||||
|
Elena Torres
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg md:text-xl text-zinc-400 font-light tracking-wide">Capturing light, emotion, and the moments in between</p>
|
||||||
|
<Button asChild size="lg" variant="outline" className="mt-10 rounded-none border-white/30 text-white hover:bg-white hover:text-zinc-900 px-8 tracking-wider">
|
||||||
|
<Link to="/portfolio">View Portfolio <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FEATURED WORK ── */}
|
||||||
|
<section className="py-24 px-6">
|
||||||
|
<div className="mx-auto max-w-7xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight mb-4 animate-fade-up">Selected Work</h2>
|
||||||
|
<p className="text-zinc-500 mb-12 max-w-xl">A curated selection from recent sessions and personal projects.</p>
|
||||||
|
|
||||||
|
<div className="columns-1 md:columns-2 gap-4 space-y-4 stagger">
|
||||||
|
{featured.map((item, i) => (
|
||||||
|
<Dialog key={i}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<div className={`group relative overflow-hidden cursor-pointer break-inside-avoid \${item.large ? "aspect-[4/3]" : "aspect-square"}`}>
|
||||||
|
<img src={item.img} alt={item.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 flex items-end p-6 opacity-0 group-hover:opacity-100">
|
||||||
|
<div>
|
||||||
|
<Badge variant="secondary" className="bg-white/20 text-white border-0 backdrop-blur-sm mb-2">{item.category}</Badge>
|
||||||
|
<p className="text-white text-lg font-light">{item.title}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl p-0 bg-transparent border-0">
|
||||||
|
<img src={item.img} alt={item.title} className="w-full rounded-lg" />
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CATEGORIES ── */}
|
||||||
|
<section className="py-16 px-6">
|
||||||
|
<div className="mx-auto max-w-7xl flex flex-wrap justify-center gap-3">
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<Link key={cat} to="/portfolio">
|
||||||
|
<Badge variant="outline" className="px-5 py-2 text-sm rounded-full border-zinc-700 text-zinc-300 hover:bg-white hover:text-zinc-900 hover:border-white transition-all cursor-pointer">
|
||||||
|
{cat}
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── ABOUT PREVIEW ── */}
|
||||||
|
<section className="py-24 px-6">
|
||||||
|
<div className="mx-auto max-w-7xl grid md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="aspect-[3/4] bg-zinc-800 rounded-sm overflow-hidden">
|
||||||
|
<img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=600&h=800&fit=crop" alt="Photographer" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight mb-6 animate-fade-up">The Eye Behind the Lens</h2>
|
||||||
|
<p className="text-zinc-400 leading-relaxed mb-8">With over a decade of experience, I specialize in telling stories through imagery. Every session is an opportunity to capture something authentic and timeless.</p>
|
||||||
|
<Button asChild variant="link" className="text-white p-0 tracking-wider">
|
||||||
|
<Link to="/about">Learn More <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TESTIMONIALS ── */}
|
||||||
|
<section className="py-24 px-6 bg-zinc-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-serif font-light tracking-tight text-center mb-16 animate-fade-up">Kind Words</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<Card key={i} className="backdrop-blur-sm bg-card/80 border-zinc-800 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
||||||
|
<CardContent className="pt-8 pb-6 px-6">
|
||||||
|
<p className="text-zinc-300 italic leading-relaxed mb-6">“{t.quote}”</p>
|
||||||
|
<div>
|
||||||
|
<p className="text-white font-medium text-sm">{t.name}</p>
|
||||||
|
<p className="text-zinc-500 text-xs mt-1">{t.event}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section className="py-32 px-6 text-center">
|
||||||
|
<div className="mx-auto max-w-2xl">
|
||||||
|
<Camera className="h-8 w-8 text-zinc-600 mx-auto mb-6" />
|
||||||
|
<h2 className="text-4xl md:text-5xl font-serif font-light tracking-tight mb-6 animate-fade-up">Lets Create Something Beautiful</h2>
|
||||||
|
<Button asChild size="lg" className="rounded-none bg-white text-zinc-900 hover:bg-zinc-200 px-10 tracking-wider">
|
||||||
|
<Link to="/contact">Get in Touch</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user