Update src/app/page.tsx

Merge version_44 into main

src/app/page.tsx

@@ -2,96 +2,141 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
+import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Phone, Instagram, MapPin, X } from "lucide-react";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
+import { Star, Heart, User, ChevronRight, Instagram, Phone, MapPin } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 
 export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
-  const [modalType, setModalType] = useState<'gallery' | null>(null);
-  const galleryRef = useRef<HTMLDivElement>(null);
+  const [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
+  const galleryButtonContainerRef = useRef<HTMLDivElement>(null);
 
-  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" }
-  ];
+  useEffect(() => {
+    const handleScroll = () => {
+      if (galleryButtonContainerRef.current) {
+        const rect = galleryButtonContainerRef.current.getBoundingClientRect();
+        setShowGalleryViewMore(rect.top < window.innerHeight && rect.bottom > 0);
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
-  const renderModal = () => {
-    if (!showModal || !modalType) return null;
-    return (
-      <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-        <div className="relative w-full max-w-4xl max-h-[80vh] bg-[var(--background)] rounded-2xl p-6 shadow-2xl flex flex-col">
-          <button onClick={() => setShowModal(false)} className="absolute top-4 right-4 p-2 bg-[var(--card)] rounded-full"><X /></button>
-          <h2 className="text-2xl font-bold mb-6">Dress Details</h2>
-          <div className="grid grid-cols-2 gap-4 overflow-y-auto">
-            {allDresses.map((item) => (
-              <img key={item.id} src={item.imageSrc} alt={item.imageAlt} className="rounded-lg shadow-sm w-full h-auto" />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  };
+  useEffect(() => {
+    document.body.style.overflow = showModal ? 'hidden' : 'unset';
+    return () => { document.body.style.overflow = 'unset'; };
+  }, [showModal]);
+
+  const allDresses = [{id: "d1", name: "Classic Elegance", price: "$1,200", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg"}];
+  const allShoes = [{id: "s1", name: "Classic Heels", price: "$250", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg"}];
+  const allVeils = [{id: "v1", name: "Cathedral Veil", price: "$180", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg"}];
 
   return (
-    <ThemeProvider 
-        defaultButtonVariant="shift-hover" 
-        defaultTextAnimation="background-highlight" 
-        borderRadius="rounded" 
-        contentWidth="small" 
-        sizing="medium" 
-        background="grid" 
-        cardStyle="inset" 
-        primaryButtonStyle="radial-glow" 
-        secondaryButtonStyle="glass" 
-        headingFontWeight="light">
-        
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="small" sizing="medium" background="grid" cardStyle="inset" primaryButtonStyle="radial-glow" secondaryButtonStyle="glass" headingFontWeight="light">
       <div className="fixed top-0 left-0 right-0 z-50 bg-[#D4AF37] text-black py-3 px-4 flex items-center justify-center gap-6">
-         <a href="#"><Instagram className="w-6 h-6" /></a>
-         <a href="tel:747-800-7770"><Phone className="w-6 h-6" /></a>
-         <a href="#"><MapPin className="w-6 h-6" /></a>
+        <a href="#"><Instagram className="w-6 h-6" /></a>
+        <a href="tel:747-800-7770"><Phone className="w-6 h-6" /></a>
+        <a href="#"><MapPin className="w-6 h-6" /></a>
       </div>
 
       <div id="hero" data-section="hero" className="mt-16">
         <HeroSplitDoubleCarousel
           title="Find Your Perfect Wedding Dress in Los Angeles"
-          description="Expert bridal styling for your dream day."
+          description="Personalized bridal styling with a curated collection of stunning gowns."
           background={{ variant: "plain" }}
-          leftCarouselItems={allDresses.slice(0, 3).map(d => ({ imageSrc: d.imageSrc, imageAlt: d.imageAlt }))}
-          rightCarouselItems={allDresses.slice(3, 6).map(d => ({ imageSrc: d.imageSrc, imageAlt: d.imageAlt }))}
+          tag="5.0 ★ Loved by Local Brides"
+          tagIcon={Star}
+          buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]}
+          leftCarouselItems={[]}
+          rightCarouselItems={[]}
         />
       </div>
 
-      <div id="gallery" data-section="gallery" ref={galleryRef}>
-        <ProductCardFour
-          title="Our Dress Collection"
-          description="Handpicked designs by Maral."
+      <div id="features" data-section="features">
+        <FeatureCardSixteen
+          title="What Makes Irentall Different"
+          description="At Irentall, we believe every bride deserves a personalized experience."
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="bento-grid"
+          negativeCard={{ items: ["Impersonal experience", "Limited selection"] }}
+          positiveCard={{ items: ["Personalized attention", "Curated collection"] }}
           animationType="slide-up"
-          products={allDresses.slice(0, 4).map((dress) => ({
-            ...dress,
-            onProductClick: () => {
-                setModalType('gallery');
-                setShowModal(true);
-            }
-          }))}
+        />
+      </div>
+
+      <div id="gallery" data-section="gallery">
+        <ProductCardFour
+          title="Our Dress Collection"
+          description="Handpicked dresses for every bride."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          products={allDresses}
+        />
+        <div ref={galleryButtonContainerRef} className="flex justify-end p-8">
+          {showGalleryViewMore && <button onClick={() => setShowModal(true)} className="flex items-center gap-2 bg-[#D4AF37] text-black px-6 py-3 rounded-lg">View More <ChevronRight /></button>}
+        </div>
+      </div>
+
+      <div id="reels" data-section="reels">
+        <BlogCardThree
+          title="Behind the Beauty"
+          description="See our latest collections in motion."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          blogs={[]}
+        />
+      </div>
+
+      <div id="shoes" data-section="shoes">
+        <ProductCardFour
+          title="Bridal Shoes"
+          description="Complete your look with comfort and elegance."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          products={allShoes}
+        />
+      </div>
+
+      <div id="veils" data-section="veils">
+        <ProductCardFour
+          title="Veils & Crowns"
+          description="Exquisite headpieces."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          products={allVeils}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Get in Touch"
+          title="Ready to Find Your Dream Dress?"
+          description="Book your free 30-minute session today."
+          buttons={[{ text: "Call (747) 800-7770", href: "tel:747-800-7770" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterSimple 
-          columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }] }]} 
-          bottomLeftText="© 2025 Maral Bridal"
-          bottomRightText="All rights reserved."
+        <FooterSimple
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+          bottomLeftText="© 2024 Irentall"
+          bottomRightText="All rights reserved"
         />
       </div>
-
-      {renderModal()}
     </ThemeProvider>
   );
 }