Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,11 +9,41 @@ import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwen
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Heart, Sparkles, MapPin, Utensils, Calendar, Clock, Zap, Image as ImageIcon, Play, Mail } from "lucide-react";
+import { Heart, Sparkles, MapPin, Utensils, Calendar, Clock, Zap, Image as ImageIcon, Play, Music, Gift, Users } from "lucide-react";
+import { useEffect, useState } from "react";
 
 export default function LandingPage() {
+  const [timeLeft, setTimeLeft] = useState<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const weddingDate = new Date("2025-10-18T14:00:00").getTime();
+      const now = new Date().getTime();
+      const difference = weddingDate - now;
+
+      if (difference > 0) {
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        });
+      } else {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+      }
+    };
+
+    calculateTimeLeft();
+    const timer = setInterval(calculateTimeLeft, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -36,8 +66,8 @@ export default function LandingPage() {
             { name: "Gallery", id: "gallery" },
             { name: "Schedule", id: "schedule" },
           ]}
-          button={{ text: "RSVP Now", href: "#rsvp" }}
           animateOnLoad={true}
+          button={{ text: "RSVP", href: "#contact" }}
         />
       </div>
 
@@ -59,7 +89,7 @@ export default function LandingPage() {
             {
               id: "2",              imageSrc: "http://img.b2bpic.net/free-photo/lovely-couple-spring-field_1157-32888.jpg"},
             {
-              id: "3",              imageSrc: "http://img.b2bpic.net/free-photo/wedding-bride-groom_1303-11471.jpg"},
+              id: "3",              imageSrc: "http://img.b2bpic.net/free-photo/wedding-bride-groom_1303-11471.jpg?_wi=1"},
             {
               id: "4",              imageSrc: "http://img.b2bpic.net/free-photo/white-chairs-stand-rows-green-lawn_1304-3719.jpg?_wi=1"},
             {
@@ -100,10 +130,45 @@ export default function LandingPage() {
           useInvertedBackground={false}
           animationType="slide-up"
           metrics={[
-            { id: "1", icon: Calendar, title: "Days", value: "42" },
-            { id: "2", icon: Clock, title: "Hours", value: "18" },
-            { id: "3", icon: Zap, title: "Minutes", value: "36" },
-            { id: "4", icon: Heart, title: "Seconds", value: "09" },
+            { id: "1", icon: Calendar, title: "Days", value: timeLeft?.days.toString() || "0" },
+            { id: "2", icon: Clock, title: "Hours", value: timeLeft?.hours.toString().padStart(2, "0") || "00" },
+            { id: "3", icon: Zap, title: "Minutes", value: timeLeft?.minutes.toString().padStart(2, "0") || "00" },
+            { id: "4", icon: Heart, title: "Seconds", value: timeLeft?.seconds.toString().padStart(2, "0") || "00" },
+          ]}
+        />
+      </div>
+
+      <div id="invitation" data-section="invitation">
+        <FeatureCardTwentyFive
+          title="You're Invited"
+          description="We've created special invitations to welcome you to our celebration."
+          tag="Wedding Invitation"
+          tagIcon={Gift}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          features={[
+            {
+              title: "Save the Date",              description:
+                "October 18, 2025 at 2:00 PM. Join us for the ceremony at the Oak Garden Pavilion, followed by celebration and dinner.",              icon: Calendar,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/wedding-bride-groom_1303-11471.jpg?_wi=2",                  imageAlt: "Wedding invitation card"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-newlyweds-smiling-with-closed-eyes-enjoying_176420-2235.jpg?_wi=2",                  imageAlt: "Celebration moments"},
+              ],
+            },
+            {
+              title: "Dress Code",              description:
+                "Black tie optional. We want you to feel elegant and comfortable. Think festive and fabulous! Celebrate in style with us.",              icon: Users,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/lovely-couple-enjoying-free-time-park-sitting-bench_342744-873.jpg?_wi=1",                  imageAlt: "Formal attire"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/party-outdoors-pillow-hand-wedding_1153-2205.jpg?_wi=1",                  imageAlt: "Wedding celebration"},
+              ],
+            },
           ]}
         />
       </div>
@@ -111,7 +176,7 @@ export default function LandingPage() {
       <div id="venue" data-section="venue">
         <FeatureCardTwentyFive
           title="Venue Details & Logistics"
-          description="Everything you need to know about our wedding venue, parking, and how to get there."
+          description="Everything you need to know about our wedding venue, parking, and how to get there. Including our wedding venue location on Google Maps."
           tag="Wedding Venue"
           tagIcon={MapPin}
           tagAnimation="slide-up"
@@ -121,7 +186,7 @@ export default function LandingPage() {
           features={[
             {
               title: "Ceremony Location",              description:
-                "The Oak Garden Pavilion at Riverside Estate. Beautiful outdoor ceremony with an elegant covered backup area. Seating for 150 guests.",              icon: MapPin,
+                "The Oak Garden Pavilion at Riverside Estate. Beautiful outdoor ceremony with an elegant covered backup area. Seating for 150 guests. Located at 1234 Riverside Drive, Venue City, ST 12345.",              icon: MapPin,
               mediaItems: [
                 {
                   imageSrc: "http://img.b2bpic.net/free-photo/white-chairs-stand-rows-green-lawn_1304-3719.jpg?_wi=2",                  imageAlt: "Venue ceremony pavilion"},
@@ -131,7 +196,7 @@ export default function LandingPage() {
             },
             {
               title: "Reception Details",              description:
-                "Elegant ballroom reception with panoramic windows overlooking the gardens. Four-course dinner, dancing, and celebration from 6 PM to midnight.",              icon: Utensils,
+                "Elegant ballroom reception with panoramic windows overlooking the gardens. Four-course dinner, dancing, and celebration from 6 PM to midnight. Valet parking available on-site.",              icon: Utensils,
               mediaItems: [
                 {
                   imageSrc: "http://img.b2bpic.net/free-photo/luxurious-dinner-hall-with-large-crystal-chandelier_8353-565.jpg",                  imageAlt: "Reception venue ballroom"},
@@ -161,7 +226,7 @@ export default function LandingPage() {
             {
               id: "2",              name: "Garden Moments",              price: "Pure Joy",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-nature_23-2149042184.jpg?_wi=2",              imageAlt: "Engagement photo 2"},
             {
-              id: "3",              name: "Nature & Love",              price: "Timeless",              imageSrc: "http://img.b2bpic.net/free-photo/lovely-couple-enjoying-free-time-park-sitting-bench_342744-873.jpg",              imageAlt: "Engagement photo 3"},
+              id: "3",              name: "Nature & Love",              price: "Timeless",              imageSrc: "http://img.b2bpic.net/free-photo/lovely-couple-enjoying-free-time-park-sitting-bench_342744-873.jpg?_wi=2",              imageAlt: "Engagement photo 3"},
             {
               id: "4",              name: "Celebration",              price: "The Journey",              imageSrc: "http://img.b2bpic.net/free-photo/party-outdoors-pillow-hand-wedding_1153-2205.jpg?_wi=2",              imageAlt: "Engagement photo 4"},
           ]}
@@ -201,57 +266,36 @@ export default function LandingPage() {
           showCard={true}
           faqs={[
             {
-              id: "1",              title: "Ceremony - 2:00 PM",              content:
-                "Join us at the Oak Garden Pavilion for our ceremony. Doors open at 1:30 PM. Please be seated by 1:55 PM. The ceremony will last approximately 30 minutes."},
+              id: "1",              title: "Mehndi Ceremony - 11:00 AM",              content:
+                "Join us for the traditional Mehndi celebration. Henna artists will be available, and we'll enjoy traditional music, dance, and festive treats. Semi-formal attire recommended. Light refreshments served."},
             {
-              id: "2",              title: "Cocktail Hour - 3:00 PM to 4:00 PM",              content:
-                "Enjoy refreshments and appetizers on the terrace while we take photos. This is a perfect time to mingle with our guests and celebrate."},
+              id: "2",              title: "Haldi Ceremony - 12:30 PM",              content:
+                "A sacred pre-wedding ritual with turmeric paste, blessings, and joy. Family and close friends gather to celebrate. Bright yellow colors encouraged! Traditional snacks and sweets will be served."},
             {
-              id: "3",              title: "Reception & Dinner - 4:00 PM to 10:00 PM",              content:
-                "Welcome remarks, toasts, and a delicious four-course dinner. Dancing begins at 6:00 PM. Last call for drinks at 11:00 PM."},
+              id: "3",              title: "Sangeet Night - 1:00 PM",              content:
+                "Our musical celebration featuring live performances, dancing, and singing. Friends and family will perform special acts. This is a festive and fun gathering with music, laughter, and love. Refreshments available."},
             {
-              id: "4",              title: "Send Off - 10:00 PM",              content:
-                "Join us as we bid farewell under a canopy of sparklers. A perfect ending to an unforgettable day."},
+              id: "4",              title: "Ceremony - 2:00 PM",              content:
+                "Join us at the Oak Garden Pavilion for our ceremony. Doors open at 1:30 PM. Please be seated by 1:55 PM. The ceremony will last approximately 30 minutes. Elegant formal attire requested."},
             {
-              id: "5",              title: "Parking & Transportation",              content:
-                "Complimentary parking is available on-site with valet service. Designated driver area available. Uber/Lyft pickup location at main entrance."},
+              id: "5",              title: "Cocktail Hour - 3:00 PM to 4:00 PM",              content:
+                "Enjoy refreshments and appetizers on the terrace while we take photos. This is a perfect time to mingle with our guests and celebrate the union. Signature cocktails and mocktails available."},
             {
-              id: "6",              title: "Accessibility Information",              content:
-                "The venue is fully ADA accessible with wheelchair accessible restrooms. Service animals are welcome. Please let us know if you need any accommodations."},
+              id: "6",              title: "Reception & Dinner - 4:00 PM to 10:00 PM",              content:
+                "Welcome remarks, toasts, and a delicious four-course dinner. Dancing begins at 6:00 PM. Last call for drinks at 11:00 PM. DJ will play a mix of classics and current hits throughout the evening."},
+            {
+              id: "7",              title: "Send Off - 10:00 PM",              content:
+                "Join us as we bid farewell under a canopy of sparklers. A perfect ending to an unforgettable day. Complimentary sparklers and party favors for all guests."},
+            {
+              id: "8",              title: "Parking & Transportation",              content:
+                "Complimentary parking is available on-site with valet service. Designated driver area available. Uber/Lyft pickup location at main entrance. Accessible parking for guests with disabilities."},
+            {
+              id: "9",              title: "Accessibility Information",              content:
+                "The venue is fully ADA accessible with wheelchair accessible restrooms. Service animals are welcome. Please let us know if you need any accommodations well in advance."},
           ]}
         />
       </div>
 
-      <div id="rsvp" data-section="rsvp">
-        <ContactFaq
-          faqs={[
-            {
-              id: "1",              title: "How do I RSVP?",              content:
-                "Please RSVP by September 15, 2025 via email to rsvp@sarahndmichael.com or fill out the online form. We need a headcount for catering purposes."},
-            {
-              id: "2",              title: "What is the dress code?",              content:
-                "Black tie optional. Think elegant, comfortable, and festive! We want you to feel your best while celebrating with us."},
-            {
-              id: "3",              title: "Can I bring a plus one?",              content:
-                "Yes! Each invitation includes one additional guest. Please specify their name when you RSVP. Children are welcome at the ceremony and reception."},
-            {
-              id: "4",              title: "Are there accommodations nearby?",              content:
-                "Yes! We've arranged special rates at nearby hotels. Check the accommodations page for partner hotels and booking information."},
-            {
-              id: "5",              title: "What about dietary restrictions?",              content:
-                "Please let us know about any dietary requirements when you RSVP. We'll ensure there are delicious options for everyone."},
-          ]}
-          ctaTitle="RSVP & Questions"
-          ctaDescription="Let us know you're coming! We'd love to have you celebrate with us."
-          ctaButton={{
-            text: "RSVP by September 15",            href: "mailto:rsvp@sarahndmichael.com"}}
-          ctaIcon={Mail}
-          useInvertedBackground={false}
-          animationType="slide-up"
-          showCard={true}
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="http://img.b2bpic.net/free-photo/white-chairs-stand-rows-green-lawn_1304-3719.jpg?_wi=3"
@@ -275,7 +319,7 @@ export default function LandingPage() {
             },
             {
               title: "Connect",              items: [
-                { label: "RSVP", href: "#rsvp" },
+                { label: "Our Story", href: "#couple" },
                 { label: "Contact Us", href: "mailto:hello@sarahndmichael.com" },
                 { label: "Gift Registry", href: "#" },
               ],
@@ -285,4 +329,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}