Seed: photography template (19 files)

src/pages/Services.tsx

@@ -0,0 +1,80 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Heart, User, Building, Sparkles, TreePine, ArrowRight } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const services = [
+  { icon: Heart, title: "Wedding Photography", desc: "Full-day coverage of your ceremony and reception. Includes engagement session, two photographers, and a curated online gallery.", starting: "$3,500" },
+  { icon: User, title: "Portrait Sessions", desc: "Individual, couple, or family portraits in studio or on location. Includes styling consultation and 25+ retouched images.", starting: "$450" },
+  { icon: Building, title: "Commercial & Brand", desc: "Product photography, brand campaigns, and lifestyle shoots. Includes art direction, retouching, and commercial licensing.", starting: "$2,000" },
+  { icon: Sparkles, title: "Fashion Editorial", desc: "High-end editorial and lookbook photography. Studio or on-location with full creative direction and post-production.", starting: "$1,800" },
+  { icon: TreePine, title: "Fine Art & Nature", desc: "Limited edition prints and commissioned landscape work. Available as gallery-quality archival prints in various sizes.", starting: "$300" },
+];
+
+export default function ServicesPage() {
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white antialiased">
+      <Header />
+
+      <section className="pt-32 pb-16 px-6">
+        <div className="mx-auto max-w-7xl">
+          <h1 className="text-4xl md:text-6xl font-serif font-light tracking-tight mb-4 animate-fade-up">Services</h1>
+          <p className="text-zinc-500 max-w-xl">Every project is unique. Here is what I offer, tailored to your vision.</p>
+        </div>
+      </section>
+
+      <section className="pb-24 px-6">
+        <div className="mx-auto max-w-7xl grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+          {services.map((svc, i) => (
+            <Card key={i} className="backdrop-blur-sm bg-card/80 border-zinc-800 hover:border-zinc-600 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 group">
+              <CardHeader className="pb-2">
+                <svc.icon className="h-6 w-6 text-zinc-500 group-hover:text-white transition-colors mb-3" />
+                <CardTitle className="text-xl font-light tracking-tight text-white">{svc.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-zinc-400 text-sm leading-relaxed mb-5">{svc.desc}</p>
+                <Badge variant="outline" className="border-zinc-700 text-zinc-400 text-xs">Starting at {svc.starting}</Badge>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* ── PROCESS ── */}
+      <section className="py-24 px-6 bg-zinc-900/40">
+        <div className="mx-auto max-w-4xl text-center">
+          <h2 className="text-3xl font-serif font-light tracking-tight mb-16 animate-fade-up">How It Works</h2>
+          <div className="grid md:grid-cols-3 gap-12">
+            <div>
+              <div className="text-4xl font-serif text-zinc-700 mb-4">01</div>
+              <h3 className="text-white font-light text-lg mb-2">Consultation</h3>
+              <p className="text-zinc-500 text-sm">We discuss your vision, timeline, and creative direction over a relaxed call or coffee.</p>
+            </div>
+            <div>
+              <div className="text-4xl font-serif text-zinc-700 mb-4">02</div>
+              <h3 className="text-white font-light text-lg mb-2">The Session</h3>
+              <p className="text-zinc-500 text-sm">I bring my full creative attention to capturing authentic, beautiful moments.</p>
+            </div>
+            <div>
+              <div className="text-4xl font-serif text-zinc-700 mb-4">03</div>
+              <h3 className="text-white font-light text-lg mb-2">Delivery</h3>
+              <p className="text-zinc-500 text-sm">Your curated gallery is delivered within two weeks, with prints available on request.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-24 px-6 text-center">
+        <h2 className="text-3xl font-serif font-light tracking-tight mb-6 animate-fade-up">Ready to Book?</h2>
+        <Button asChild size="lg" className="rounded-none bg-white text-zinc-900 hover:bg-zinc-200 px-10 tracking-wider">
+          <Link to="/contact">Contact Me <ArrowRight className="ml-2 h-4 w-4" /></Link>
+        </Button>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}