Update src/app/page.tsx

Merge version_22 into main

src/app/page.tsx

@@ -10,11 +10,41 @@ import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import BlogCardThree from "@/components/sections/blog/BlogCardThree";
-import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown } from "lucide-react";
-import { useState } from "react";
+import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown, ArrowUp, Instagram, MapPin } from "lucide-react";
+import { useState, useEffect } from "react";
 
 export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
+  const [showBackToTop, setShowBackToTop] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowBackToTop(window.scrollY > 300);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToGallery = () => {
+    const gallerySectionElement = document.getElementById('gallery');
+    if (gallerySectionElement) {
+      gallerySectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
+  const scrollToTop = () => {
+    const heroSectionElement = document.getElementById('hero');
+    if (heroSectionElement) {
+      heroSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
 
   const allDresses = [
     {
@@ -96,16 +126,6 @@ export default function LandingPage() {
 
   const initialDresses = allDresses.slice(0, 6);
 
-  const handleScrollToDresses = () => {
-    const gallerySectionElement = document.getElementById('gallery');
-    if (gallerySectionElement) {
-      gallerySectionElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start'
-      });
-    }
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -119,22 +139,145 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="light"
     >
-      <div id="nav" data-section="nav">
+      {/* Decorative Squiggly Curved Lines with Gold Accents */}
+      <svg
+        className="fixed inset-0 pointer-events-none z-0 w-full h-full"
+        viewBox="0 0 1920 1080"
+        preserveAspectRatio="none"
+        style={{
+          opacity: 0.6,
+        }}
+      >
+        {/* Multiple squiggly curved lines flowing diagonally from top-left to bottom-right */}
+        
+        {/* Line 1 - Main centerline */}
+        <path
+          d="M 0 0 Q 200 150, 300 250 T 600 500 T 900 700 T 1200 850 T 1920 1080"
+          stroke="#D4AF37"
+          strokeWidth="3"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        
+        {/* Line 2 - Left offset */}
+        <path
+          d="M -150 50 Q 100 180, 200 300 T 500 550 T 800 750 T 1100 900 T 1700 1050"
+          stroke="#D4AF37"
+          strokeWidth="2.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.7"
+        />
+        
+        {/* Line 3 - Right offset */}
+        <path
+          d="M 150 -20 Q 350 120, 480 220 T 800 480 T 1100 680 T 1350 850 T 1920 1000"
+          stroke="#D4AF37"
+          strokeWidth="2"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.65"
+        />
+        
+        {/* Line 4 - Far left */}
+        <path
+          d="M -300 100 Q -50 250, 80 350 T 400 600 T 700 800 T 950 950 T 1450 1080"
+          stroke="#D4AF37"
+          strokeWidth="2"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.55"
+        />
+        
+        {/* Line 5 - Far right */}
+        <path
+          d="M 300 20 Q 500 160, 650 280 T 950 520 T 1250 720 T 1550 900 T 1920 1080"
+          stroke="#D4AF37"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.5"
+        />
+      </svg>
+
+      {/* Fixed "Go to Dresses" Button */}
+      <button
+        onClick={scrollToGallery}
+        className="fixed right-6 bottom-32 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
+        aria-label="Go to Dresses"
+        title="Go to Dresses"
+      >
+        <div className="flex flex-col items-center justify-center gap-1">
+          <ArrowDown className="w-5 h-5" />
+          <span className="text-xs font-semibold text-center leading-tight">Dresses</span>
+        </div>
+      </button>
+
+      {/* Fixed Back-to-Top Button */}
+      {showBackToTop && (
+        <button
+          onClick={scrollToTop}
+          className="fixed right-6 bottom-6 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--secondary-cta)] to-[var(--secondary-cta)] text-[var(--secondary-cta-text)] shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95 animate-in fade-in-0 duration-300"
+          aria-label="Back to Top"
+          title="Back to Top"
+        >
+          <ArrowUp className="w-5 h-5" />
+        </button>
+      )}
+
+      {/* Fixed Top Social & Contact Bar */}
+      <div className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] py-3 px-4 flex items-center justify-center gap-6">
+        {/* Instagram */}
+        <a
+          href="https://instagram.com/irentall.usa"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="Follow us on Instagram"
+          title="Follow us on Instagram @irentall.usa"
+        >
+          <Instagram className="w-6 h-6" />
+        </a>
+
+        {/* Phone */}
+        <a
+          href="tel:747-800-7770"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="Call us"
+          title="Call (747) 800-7770"
+        >
+          <Phone className="w-6 h-6" />
+        </a>
+
+        {/* Google Maps */}
+        <a
+          href="https://www.google.com/maps/search/3106+Los+Feliz+Blvd,+Los+Angeles,+CA+90039"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="View our location"
+          title="3106 Los Feliz Blvd, Los Angeles, CA 90039"
+        >
+          <MapPin className="w-6 h-6" />
+        </a>
+      </div>
+
+      <div id="nav" data-section="nav" className="relative z-20 mt-16">
         <NavbarStyleCentered
-          brandName="Irentall"
-          navItems={[
-            { name: "Home", id: "home" },
-            { name: "About", id: "about" },
-            { name: "Gallery", id: "gallery" },
-            { name: "Contact", id: "contact" }
-          ]}
+          brandName=""
+          navItems={[]}
           button={{
             text: "Call Now",            href: "tel:747-800-7770"
           }}
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" className="relative z-10">
         <HeroSplitDoubleCarousel
           title="Find Your Perfect Wedding Dress in Los Angeles"
           description="Personalized bridal styling with a curated collection of stunning gowns. Our expert team will guide you through every moment of your journey to find the dress of your dreams."
@@ -144,7 +287,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "Call Now", href: "tel:747-800-7770" },
-            { text: "Browse Dresses", onClick: handleScrollToDresses }
+            { text: "Browse Dresses", onClick: scrollToGallery }
           ]}
           buttonAnimation="slide-up"
           leftCarouselItems={[
@@ -173,7 +316,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="features" data-section="features" className="relative z-10">
         <FeatureCardSixteen
           title="What Makes Us Different"
           description="At Irentall, we believe every bride deserves a personalized, stress-free experience. Here's what sets us apart from other boutiques."
@@ -196,7 +339,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" className="relative z-10">
         <TestimonialAboutCard
           tag="Meet Our Founder"
           tagIcon={User}
@@ -212,7 +355,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" className="relative z-10">
         <TestimonialCardSixteen
           title="Real Brides, Real Love"
           description="See what brides in Los Angeles are saying about their Irentall experience."
@@ -248,7 +391,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="gallery" data-section="gallery">
+      <div id="gallery" data-section="gallery" className="relative z-10">
         <div className="relative">
           <ProductCardFour
             title="Our Dress Collection"
@@ -342,7 +485,7 @@ export default function LandingPage() {
         )}
       </div>
 
-      <div id="reels" data-section="reels">
+      <div id="reels" data-section="reels" className="relative z-10">
         <BlogCardThree
           title="Behind the Beauty"
           description=""
@@ -354,23 +497,23 @@ export default function LandingPage() {
           animationType="slide-up"
           blogs={[
             {
-              id: "reel-1",              category: "",              title: "",              excerpt: "",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2",              imageAlt: "Bride and groom first look moment",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+              id: "reel-1",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=1",              imageAlt: "Bride and groom first look moment",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
             },
             {
-              id: "reel-2",              category: "",              title: "",              excerpt: "",              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=2",              imageAlt: "Bride twirling in wedding dress",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+              id: "reel-2",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=2",              imageAlt: "Bride twirling in wedding dress",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
             },
             {
-              id: "reel-3",              category: "",              title: "",              excerpt: "",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",              imageAlt: "Bride with complete bridal accessories",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+              id: "reel-3",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=3",              imageAlt: "Bride with complete bridal accessories",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
             },
             {
-              id: "reel-4",              category: "",              title: "",              excerpt: "",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",              imageAlt: "Close-up of wedding dress lace details",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+              id: "reel-4",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=4",              imageAlt: "Close-up of wedding dress lace details",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
             }
           ]}
           uniformGridCustomHeightClasses="min-h-120 2xl:min-h-150"
         />
       </div>
 
-      <div id="shoes" data-section="shoes">
+      <div id="shoes" data-section="shoes" className="relative z-10">
         <ProductCardFour
           title="Bridal Shoes"
           description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
@@ -404,7 +547,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="veils" data-section="veils">
+      <div id="veils" data-section="veils" className="relative z-10">
         <ProductCardFour
           title="Veils & Crowns"
           description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
@@ -438,13 +581,13 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" className="relative z-10">
         <ContactCTA
           tag="Get in Touch"
           tagIcon={Phone}
           tagAnimation="slide-up"
           title="Ready to Find Your Dream Dress?"
-          description="Call or text us at 747-800-7770 to schedule your personal styling appointment. Our team is here to make your bridal journey unforgettable."
+          description="Book your free 30-minute styling session with limited availability! Our bridal experts will work with you one-on-one to find the perfect gown. Call or text (747) 800-7770 to secure your appointment today."
           buttons={[
             { text: "Call (747) 800-7770", href: "tel:747-800-7770" },
             { text: "Text (747) 800-7770", href: "sms:747-800-7770" }
@@ -452,12 +595,11 @@ export default function LandingPage() {
           buttonAnimation="slide-up"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          buttonContainerClassName="flex flex-col sm:flex-row gap-3 justify-center"
-          buttonClassName="first:order-first second:order-last"
+          buttonContainerClassName="flex flex-col-reverse sm:flex-row gap-3 justify-center"
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="relative z-10">
         <FooterSimple
           columns={[
             {