diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..46e5601 --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,204 @@ +import { useState, useEffect } from "react"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Heart, Calendar, Clock, MapPin, ArrowRight, Camera } from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const storyTimeline = [ + { year: "2020", title: "How We Met", desc: "A chance encounter at a mutual friends birthday party changed everything. One conversation turned into hours of laughter.", gradient: "from-rose-400 to-pink-300" }, + { year: "2020", title: "First Date", desc: "Our first official date was at a cozy Italian restaurant downtown. We closed the place down talking until midnight.", gradient: "from-pink-300 to-rose-200" }, + { year: "2025", title: "The Proposal", desc: "A magical sunset proposal on the beach with family hiding behind the dunes, ready to celebrate with champagne.", gradient: "from-rose-300 to-amber-200" }, + { year: "2026", title: "The Big Day", desc: "The day we have been dreaming of. Surrounded by our favorite people in our favorite place.", gradient: "from-amber-200 to-rose-300" }, +]; + +const bridesmaids = [ + { name: "Emma Wilson", role: "Maid of Honor", initials: "EW", gradient: "from-rose-300 to-pink-200" }, + { name: "Lucy Martin", role: "Bridesmaid", initials: "LM", gradient: "from-pink-300 to-rose-200" }, + { name: "Julia Chen", role: "Bridesmaid", initials: "JC", gradient: "from-rose-200 to-pink-300" }, + { name: "Kate Ross", role: "Bridesmaid", initials: "KR", gradient: "from-pink-200 to-rose-300" }, +]; + +const groomsmen = [ + { name: "Mike Torres", role: "Best Man", initials: "MT", gradient: "from-stone-400 to-stone-300" }, + { name: "David Park", role: "Groomsman", initials: "DP", gradient: "from-stone-300 to-stone-400" }, + { name: "Ryan Kim", role: "Groomsman", initials: "RK", gradient: "from-stone-400 to-stone-300" }, + { name: "Ben Hayes", role: "Groomsman", initials: "BH", gradient: "from-stone-300 to-stone-400" }, +]; + +export default function IndexPage() { + const [countdown, setCountdown] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const target = new Date("2026-06-15T16:00:00").getTime(); + const tick = () => { + const now = Date.now(); + const diff = Math.max(0, target - now); + setCountdown({ + days: Math.floor(diff / (1000 * 60 * 60 * 24)), + hours: Math.floor((diff / (1000 * 60 * 60)) % 24), + minutes: Math.floor((diff / (1000 * 60)) % 60), + seconds: Math.floor((diff / 1000) % 60), + }); + }; + tick(); + const id = setInterval(tick, 1000); + return () => clearInterval(id); + }, []); + + return ( +
+
+ + {/* ── Hero ─────────────────────────────────────── */} +
+
+
+
+
+
+
+

We are getting married

+

Sarah & James

+
+

June 15, 2026 · Rosewood Manor

+
+ {[{ label: "Days", value: countdown.days }, { label: "Hours", value: countdown.hours }, { label: "Mins", value: countdown.minutes }, { label: "Secs", value: countdown.seconds }].map((unit) => ( +
+
{String(unit.value).padStart(2, "0")}
+
{unit.label}
+
+ ))} +
+ +
+
+ + {/* ── Our Story ────────────────────────────────── */} +
+
+

Our Journey

+

Our Love Story

+
+
+ {storyTimeline.map((item, i) => ( +
+
+ {item.year} +

{item.title}

+

{item.desc}

+
+
+ +
+
+
+ ))} +
+
+
+ + {/* ── Wedding Party ────────────────────────────── */} +
+
+

The Wedding Party

+

Our Closest People

+
+
+

Bridesmaids

+
+ {bridesmaids.map((p, i) => ( + + +
{p.initials}
+
{p.name}
+
{p.role}
+ + + ))} +
+
+
+

Groomsmen

+
+ {groomsmen.map((p, i) => ( + + +
{p.initials}
+
{p.name}
+
{p.role}
+ + + ))} +
+
+
+
+
+ + {/* ── Gallery Preview ──────────────────────────── */} +
+
+

Captured Moments

+

Photo Gallery

+
+ {[ + { h: "h-64", gradient: "from-rose-300 to-pink-200" }, + { h: "h-80", gradient: "from-pink-200 to-rose-300" }, + { h: "h-64", gradient: "from-amber-200 to-rose-200" }, + { h: "h-80", gradient: "from-rose-200 to-pink-300" }, + { h: "h-64", gradient: "from-pink-300 to-amber-200" }, + { h: "h-80", gradient: "from-rose-300 to-amber-100" }, + ].map((item, i) => ( +
+
+ +
+
+ ))} +
+
+ +
+
+
+ + {/* ── Details Preview ──────────────────────────── */} +
+
+

Save the Date

+

Wedding Details

+
+ {[ + { icon: Calendar, label: "Date", value: "June 15, 2026" }, + { icon: Clock, label: "Time", value: "4:00 PM" }, + { icon: MapPin, label: "Venue", value: "Rosewood Manor" }, + ].map((item, i) => ( + + +
+ +
+
{item.label}
+
{item.value}
+ + + ))} +
+
+ +
+
+
+ +
+ ); +} \ No newline at end of file