Update src/app/page.tsx

Merge version_15 into main

src/app/page.tsx

@@ -3,15 +3,129 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Star, Heart, Users, Camera, Sparkles, Crown } from "lucide-react";
+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, ArrowUp } 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 = [
+    {
+      id: "dress-1",      name: "Classic Elegance",      price: "Starting at $1,200",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=1",      imageAlt: "Elegant white wedding dress"
+    },
+    {
+      id: "dress-2",      name: "Blush Romance",      price: "Starting at $1,400",      variant: "Blush Pink",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=1",      imageAlt: "Beautiful blush pink wedding gown"
+    },
+    {
+      id: "dress-3",      name: "Modern Sophistication",      price: "Starting at $1,300",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=1",      imageAlt: "Modern off-shoulder wedding dress"
+    },
+    {
+      id: "dress-4",      name: "Intricate Lace",      price: "Starting at $1,500",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=1",      imageAlt: "Detailed lace wedding dress"
+    },
+    {
+      id: "dress-5",      name: "Minimalist Chic",      price: "Starting at $1,100",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=1",      imageAlt: "Sleek minimalist wedding dress"
+    },
+    {
+      id: "dress-6",      name: "Royal Drama",      price: "Starting at $1,600",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=1",      imageAlt: "Dramatic train wedding dress"
+    },
+    {
+      id: "dress-7",      name: "Ethereal Layers",      price: "Starting at $1,350",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=2",      imageAlt: "Layered tulle ethereal wedding dress"
+    },
+    {
+      id: "dress-8",      name: "Vintage Inspired",      price: "Starting at $1,450",      variant: "Champagne",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=2",      imageAlt: "Vintage champagne wedding gown"
+    },
+    {
+      id: "dress-9",      name: "Modern Asymmetric",      price: "Starting at $1,550",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=2",      imageAlt: "Asymmetric modern wedding dress"
+    },
+    {
+      id: "dress-10",      name: "Beaded Elegance",      price: "Starting at $1,700",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=2",      imageAlt: "Beaded white wedding dress"
+    },
+    {
+      id: "dress-11",      name: "Sleek Minimalist",      price: "Starting at $1,150",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=2",      imageAlt: "Sleek off-white minimalist dress"
+    },
+    {
+      id: "dress-12",      name: "Princess Ball Gown",      price: "Starting at $1,800",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=2",      imageAlt: "Princess ball gown wedding dress"
+    },
+    {
+      id: "dress-13",      name: "Romantic Lace",      price: "Starting at $1,400",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=3",      imageAlt: "Romantic lace wedding dress"
+    },
+    {
+      id: "dress-14",      name: "Blush Elegance",      price: "Starting at $1,480",      variant: "Blush",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=3",      imageAlt: "Blush elegance wedding gown"
+    },
+    {
+      id: "dress-15",      name: "Modern Drape",      price: "Starting at $1,320",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=3",      imageAlt: "Modern drape wedding dress"
+    },
+    {
+      id: "dress-16",      name: "Lace Detail",      price: "Starting at $1,520",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=3",      imageAlt: "Lace detail wedding dress"
+    },
+    {
+      id: "dress-17",      name: "Minimal Chic",      price: "Starting at $1,120",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=3",      imageAlt: "Minimal chic wedding dress"
+    },
+    {
+      id: "dress-18",      name: "Dramatic Train",      price: "Starting at $1,650",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=3",      imageAlt: "Dramatic train dress"
+    },
+    {
+      id: "dress-19",      name: "Sophisticated Ivory",      price: "Starting at $1,380",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=4",      imageAlt: "Sophisticated ivory wedding dress"
+    },
+    {
+      id: "dress-20",      name: "Blush Romance Premium",      price: "Starting at $1,550",      variant: "Blush Pink",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=4",      imageAlt: "Premium blush pink wedding gown"
+    },
+    {
+      id: "dress-21",      name: "Contemporary Cut",      price: "Starting at $1,420",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=4",      imageAlt: "Contemporary cut wedding dress"
+    },
+    {
+      id: "dress-22",      name: "Intricate Beading",      price: "Starting at $1,720",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=4",      imageAlt: "Intricate beading wedding dress"
+    },
+    {
+      id: "dress-23",      name: "Elegant Minimalist",      price: "Starting at $1,180",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=4",      imageAlt: "Elegant minimalist wedding dress"
+    },
+    {
+      id: "dress-24",      name: "Royal Gown",      price: "Starting at $1,850",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=4",      imageAlt: "Royal wedding gown"
+    },
+    {
+      id: "dress-25",      name: "Timeless Beauty",      price: "Starting at $1,440",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=5",      imageAlt: "Timeless beauty wedding dress"
+    }
+  ];
+
+  const initialDresses = allDresses.slice(0, 6);
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -25,7 +139,49 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="light"
     >
-      <div id="nav" data-section="nav">
+      {/* Decorative Vertical Border/Divider with Gold Accents */}
+      <div className="fixed left-1/2 transform -translate-x-1/2 top-0 w-px h-screen pointer-events-none z-0">
+        {/* Main vertical line with gradient */}
+        <div className="absolute left-0 top-0 w-full h-full bg-gradient-to-b from-transparent via-[#D4AF37] to-transparent opacity-40" />
+        
+        {/* Gold accent dots distributed throughout */}
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[10%] w-1.5 h-1.5 rounded-full bg-[#D4AF37] opacity-60" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[20%] w-1 h-1 rounded-full bg-[#D4AF37] opacity-50" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[30%] w-2 h-2 rounded-full bg-[#D4AF37] opacity-45" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[40%] w-1 h-1 rounded-full bg-[#D4AF37] opacity-55" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[50%] w-1.5 h-1.5 rounded-full bg-[#D4AF37] opacity-50" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[60%] w-1 h-1 rounded-full bg-[#D4AF37] opacity-55" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[70%] w-2 h-2 rounded-full bg-[#D4AF37] opacity-45" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[80%] w-1 h-1 rounded-full bg-[#D4AF37] opacity-60" />
+        <div className="absolute left-1/2 transform -translate-x-1/2 top-[90%] w-1.5 h-1.5 rounded-full bg-[#D4AF37] opacity-50" />
+      </div>
+
+      {/* 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>
+      )}
+
+      <div id="nav" data-section="nav" className="relative z-20">
         <NavbarStyleCentered
           brandName="Irentall"
           navItems={[
@@ -35,12 +191,12 @@ export default function LandingPage() {
             { name: "Contact", id: "contact" }
           ]}
           button={{
-            text: "Call Now",            href: "tel:(747)800-7770"
+            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."
@@ -49,8 +205,8 @@ export default function LandingPage() {
           tagIcon={Star}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Call Now", href: "tel:(747)800-7770" },
+            { text: "Call Now", href: "tel:747-800-7770" },
-            { text: "Book Appointment", href: "#appointment" }
+            { text: "Browse Dresses", onClick: scrollToGallery }
           ]}
           buttonAnimation="slide-up"
           leftCarouselItems={[
@@ -79,20 +235,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="features" data-section="features" className="relative z-10">
-        <InlineImageSplitTextAbout
-          heading={[
-            { type: "text", content: "Why Irentall Stands Out" }
-          ]}
-          buttons={[
-            { text: "Schedule Consultation", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="features" data-section="features">
         <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."
@@ -115,7 +258,23 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="about" data-section="about" className="relative z-10">
+        <TestimonialAboutCard
+          tag="Meet Our Founder"
+          tagIcon={User}
+          tagAnimation="slide-up"
+          title="Iren Ulikhanova  "
+          description="Iren Ulikhanova is an accomplished professional in the wedding and dance industry, with years of experience as a dancer, choreographer, and wedding coach. As the owner of a refined wedding dress rental boutique, she combines artistic vision with deep understanding of bridal elegance, delivering a polished and personalized experience for every client.  Known for her professionalism and attention to detail, Iren has helped countless couples bring their wedding visions to life, both through exquisite bridal styling and beautifully choreographed first dances."
+          subdescription=""
+          icon={Heart}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg"
+          imageAlt="Irentall owner with bride"
+          mediaAnimation="slide-up"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <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."
@@ -131,7 +290,7 @@ export default function LandingPage() {
           ]}
           testimonials={[
             {
-              id: "1",              name: "Sarah Johnson",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
+              id: "1",              name: "Marina Farhardyan ",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
               imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2",              imageAlt: "Sarah Johnson - Happy bride"
             },
             {
@@ -147,53 +306,133 @@ export default function LandingPage() {
               imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",              imageAlt: "Michelle Rodriguez - Happy bride moment"
             }
           ]}
-          buttons={[
-            { text: "See More Reviews", href: "#" }
-          ]}
-          buttonAnimation="slide-up"
           animationType="slide-up"
         />
       </div>
 
-      <div id="gallery" data-section="gallery">
+      <div id="gallery" data-section="gallery" className="relative z-10">
-        <ProductCardFour
+        <div className="relative">
-          title="Our Dress Collection"
+          <ProductCardFour
-          description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism."
+            title="Our Dress Collection"
+            description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism. Some of these dresses are exquisitely and elegantly sewed and crafted by MARAL."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            tag="Gallery"
+            tagIcon={Camera}
+            tagAnimation="slide-up"
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            products={initialDresses}
+          />
+
+          {/* View More Button Positioned on Right */}
+          <div className="flex justify-end px-4 md:px-8 lg:px-16 py-6 md:py-10">
+            <button
+              onClick={() => setShowModal(true)}
+              className="group relative inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out"
+              aria-label="View More Dresses"
+            >
+              <span className="text-sm md:text-base">View More Dresses</span>
+              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-1 transition-transform" />
+            </button>
+          </div>
+        </div>
+
+        {/* Modal Gallery */}
+        {showModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+            <div className="relative w-full max-w-6xl max-h-[90vh] bg-[var(--background)] rounded-2xl shadow-2xl overflow-hidden flex flex-col">
+              {/* Modal Header */}
+              <div className="flex items-center justify-between p-4 md:p-6 border-b border-[var(--accent)]/20">
+                <h2 className="text-xl md:text-2xl font-semibold text-[var(--foreground)]">Complete Dress Gallery</h2>
+                <button
+                  onClick={() => setShowModal(false)}
+                  className="p-2 hover:bg-[var(--accent)]/10 rounded-lg transition-colors"
+                  aria-label="Close gallery"
+                >
+                  <X className="w-6 h-6 text-[var(--foreground)]" />
+                </button>
+              </div>
+
+              {/* Modal Gallery Grid */}
+              <div className="overflow-y-auto flex-1 p-4 md:p-6">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+                  {allDresses.map((dress) => (
+                    <div
+                      key={dress.id}
+                      className="group relative overflow-hidden rounded-lg bg-[var(--card)] shadow-md hover:shadow-xl transition-all duration-500 ease-out"
+                    >
+                      {/* Image Container */}
+                      <div className="relative h-64 md:h-72 overflow-hidden bg-[var(--accent)]/5">
+                        <img
+                          src={dress.imageSrc}
+                          alt={dress.imageAlt}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+                        />
+                        {/* Hover Overlay */}
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                      </div>
+
+                      {/* Content */}
+                      <div className="p-3 md:p-4">
+                        <h3 className="text-sm md:text-base font-semibold text-[var(--foreground)] line-clamp-2">
+                          {dress.name}
+                        </h3>
+                        <p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
+                          {dress.variant}
+                        </p>
+                        <p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
+                          {dress.price}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Modal Footer */}
+              <div className="flex items-center justify-end gap-3 p-4 md:p-6 border-t border-[var(--accent)]/20 bg-[var(--card)]/50">
+                <button
+                  onClick={() => setShowModal(false)}
+                  className="px-4 md:px-6 py-2 md:py-3 rounded-lg border border-[var(--accent)] text-[var(--foreground)] hover:bg-[var(--accent)]/10 transition-colors"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div id="reels" data-section="reels" className="relative z-10">
+        <BlogCardThree
+          title="Behind the Beauty"
+          description=""
           textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
-          tag="Gallery"
+          tag="Featured Content"
-          tagIcon={Camera}
+          tagIcon={Play}
           tagAnimation="slide-up"
-          buttons={[
-            { text: "Book Your Fitting", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
-          gridVariant="bento-grid"
           animationType="slide-up"
-          products={[
+          blogs={[
             {
-              id: "dress-1",              name: "Classic Elegance",              price: "Starting at $1,200",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",              imageAlt: "Elegant white wedding dress"
+              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: "dress-2",              name: "Blush Romance",              price: "Starting at $1,400",              variant: "Blush Pink",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=1",              imageAlt: "Beautiful blush pink wedding gown"
+              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: "dress-3",              name: "Modern Sophistication",              price: "Starting at $1,300",              variant: "Off-White",              imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-wedding-clothes-collection_1236-88.jpg",              imageAlt: "Modern off-shoulder wedding dress"
+              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: "dress-4",              name: "Intricate Lace",              price: "Starting at $1,500",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=1",              imageAlt: "Detailed lace wedding dress"
+              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: "dress-5",              name: "Minimalist Chic",              price: "Starting at $1,100",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=1",              imageAlt: "Sleek minimalist wedding dress"
-            },
-            {
-              id: "dress-6",              name: "Royal Drama",              price: "Starting at $1,600",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=1",              imageAlt: "Dramatic train wedding dress"
             }
           ]}
+          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."
@@ -202,10 +441,6 @@ export default function LandingPage() {
           tag="Accessory Collection"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          buttons={[
-            { text: "Explore Shoes", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           products={[
@@ -231,7 +466,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."
@@ -240,10 +475,6 @@ export default function LandingPage() {
           tag="Veil Collection"
           tagIcon={Crown}
           tagAnimation="slide-up"
-          buttons={[
-            { text: "Shop Veils", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           products={[
@@ -269,77 +500,32 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="crowns" data-section="crowns">
+      <div id="contact" data-section="contact" className="relative z-10">
-        <ProductCardFour
+        <ContactCTA
-          title="Crowns & Tiaras"
+          tag="Get in Touch"
-          description="Add a touch of royalty to your bridal look with our stunning selection of crowns and tiaras. Each piece is designed to make you feel like a queen."
+          tagIcon={Phone}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          tag="Crown Collection"
-          tagIcon={Crown}
           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."
           buttons={[
-            { text: "Discover Crowns", href: "#appointment" }
+            { text: "Call (747) 800-7770", href: "tel:747-800-7770" },
+            { text: "Text (747) 800-7770", href: "sms:747-800-7770" }
           ]}
           buttonAnimation="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={[
-            {
-              id: "crown-1",              name: "Classic Pearl Tiara",              price: "Starting at $350",              variant: "Silver with Pearls",              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=3",              imageAlt: "Classic pearl tiara for brides"
-            },
-            {
-              id: "crown-2",              name: "Royal Crystal Crown",              price: "Starting at $450",              variant: "Gold with Crystals",              imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=3",              imageAlt: "Royal crystal studded crown"
-            },
-            {
-              id: "crown-3",              name: "Vintage Style Tiara",              price: "Starting at $380",              variant: "Antique Gold",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",              imageAlt: "Vintage style bridal tiara"
-            },
-            {
-              id: "crown-4",              name: "Modern Geometric Crown",              price: "Starting at $420",              variant: "White Gold",              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",              imageAlt: "Modern geometric bridal crown"
-            },
-            {
-              id: "crown-5",              name: "Delicate Rhinestone Tiara",              price: "Starting at $320",              variant: "Silver Rhinestones",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",              imageAlt: "Delicate rhinestone tiara"
-            },
-            {
-              id: "crown-6",              name: "Boho Flower Crown",              price: "Starting at $280",              variant: "Gold with Florals",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",              imageAlt: "Bohemian flower crown for brides"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="appointment" data-section="appointment">
-        <ContactCenter
-          tag="Limited Appointments"
-          title="Book Your Bridal Appointment Today"
-          description="Schedule your private fitting and let our expert team help you find your dream dress. Join 500+ happy brides who found their perfect gown at Irentall."
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Your name"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-3 justify-center"
-          buttonText="Book Now"
+          buttonClassName="first:order-first second:order-last"
-          termsText="By booking an appointment, you agree to our appointment policy. We look forward to seeing you soon!"
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="footer" data-section="footer" className="relative z-10">
-        <ContactCenter
-          tag="Visit Us"
-          title="Location & Hours"
-          description="Visit Irentall Bridal Boutique in the heart of Los Feliz. We're open 6 days a week and ready to help you find your perfect dress."
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Your phone number"
-          buttonText="Get Directions"
-          termsText="📍 3106 Los Feliz Blvd, Los Angeles, CA 90039 | ☎️ (747) 800-7770"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
         <FooterSimple
           columns={[
             {
               title: "Irentall",              items: [
                 { label: "Home", href: "#home" },
-                { label: "About Us", href: "#about" },
+                { label: "About", href: "#about" },
                 { label: "Gallery", href: "#gallery" },
                 { label: "Contact", href: "#contact" }
               ]
@@ -356,13 +542,12 @@ export default function LandingPage() {
               title: "Accessories",              items: [
                 { label: "Shoes", href: "#shoes" },
                 { label: "Veils & Headpieces", href: "#veils" },
-                { label: "Crowns & Tiaras", href: "#crowns" },
                 { label: "Complete Looks", href: "#appointment" }
               ]
             },
             {
               title: "Contact",              items: [
-                { label: "Phone", href: "tel:(747)800-7770" },
+                { label: "Phone", href: "tel:747-800-7770" },
                 { label: "Email", href: "mailto:info@irentall.com" },
                 { label: "Address", href: "#contact" },
                 { label: "Book Online", href: "#appointment" }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #f6f0e9;
-  --card: #ffffff;
+  --card: #efe7dd;
-  --foreground: #1c1c1c;
+  --foreground: #2b180a;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #2b180a;
-  --primary-cta-text: #f5f5f5;
+  --primary-cta-text: #f6f0e9;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #efe7dd;
-  --secondary-cta-text: #1c1c1c;
+  --secondary-cta-text: #2b180a;
-  --accent: #159c49;
+  --accent: #94877c;
-  --background-accent: #a8e8ba;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);