Update src/app/page.tsx

Merge version_44 into main

src/app/layout.tsx

@@ -9,8 +9,8 @@ import { Lato } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Irentall - Bridal Styling Los Angeles',
-  description: 'Find your perfect wedding dress in Los Angeles with our personalized bridal styling services.',
+  title: 'Irentall Bridal Boutique | Wedding Dresses Los Angeles',
+  description: 'Find your perfect wedding dress at Irentall, a luxury bridal boutique in Los Feliz, Los Angeles. Personalized styling, curated gowns, and 5-star service.',
 };
 
 const lato = Lato({

src/app/page.tsx

@@ -5,47 +5,137 @@ import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleC
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import { Instagram, Phone, MapPin } from "lucide-react";
-import { useState, useRef } from "react";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+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 allDresses = Array.from({ length: 6 }, (_, i) => ({ id: `dress-${i + 1}`, name: "Wedding Dress", price: "$1,200+", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg", imageAlt: "Wedding gown" }));
+  const [showModal, setShowModal] = useState(false);
+  const [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
+  const galleryButtonContainerRef = useRef<HTMLDivElement>(null);
+
+  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);
+  }, []);
+
+  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="medium" sizing="medium" background="grid" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-      <div id="nav" data-section="nav" className="fixed top-0 left-0 w-full z-50 bg-[var(--background)]/90 backdrop-blur-md flex flex-col items-center py-2 gap-2 border-b border-[var(--accent)]/20">
-        <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1777252323498-sec9a8v5.png" alt="Logo" className="h-12 w-auto object-contain" />
-        <div className="flex items-center gap-6">
-          <a href="https://instagram.com/irentall.usa" target="_blank" rel="noopener noreferrer" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><Instagram className="w-5 h-5" /></a>
-          <a href="tel:747-800-7770" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><Phone className="w-5 h-5" /></a>
-          <a href="https://www.google.com/maps/search/Irentall" target="_blank" rel="noopener noreferrer" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><MapPin className="w-5 h-5" /></a>
-        </div>
+    <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>
       </div>
 
-      <div id="hero" data-section="hero" className="pt-32">
-        <HeroSplitDoubleCarousel title="Find Your Perfect Wedding Dress in Los Angeles" description="Personalized bridal styling with a curated collection of stunning gowns." background={{ variant: "plain" }} leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg" }]} rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg" }]} />
+      <div id="hero" data-section="hero" className="mt-16">
+        <HeroSplitDoubleCarousel
+          title="Find Your Perfect Wedding Dress in Los Angeles"
+          description="Personalized bridal styling with a curated collection of stunning gowns."
+          background={{ variant: "plain" }}
+          tag="5.0 ★ Loved by Local Brides"
+          tagIcon={Star}
+          buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]}
+          leftCarouselItems={[]}
+          rightCarouselItems={[]}
+        />
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardSixteen title="What Makes Us Different" description="Personalized service for your big day." negativeCard={{ items: ["Impersonal shopping"] }} positiveCard={{ items: ["One-on-one attention"] }} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
-      </div>
-
-      <div id="about" data-section="about">
-        <InlineImageSplitTextAbout heading={[{ type: 'text', content: "Iren Ulikhanova" }]} useInvertedBackground={false} />
+        <FeatureCardSixteen
+          title="What Makes Irentall Different"
+          description="At Irentall, we believe every bride deserves a personalized experience."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          negativeCard={{ items: ["Impersonal experience", "Limited selection"] }}
+          positiveCard={{ items: ["Personalized attention", "Curated collection"] }}
+          animationType="slide-up"
+        />
       </div>
 
       <div id="gallery" data-section="gallery">
-        <ProductCardFour title="Our Collection" description="Explore our latest gowns." textboxLayout="default" useInvertedBackground={false} gridVariant="bento-grid" animationType="slide-up" products={allDresses} />
+        <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 background={{ variant: "plain" }} useInvertedBackground={false} tag="Contact" title="Book Your Appointment" description="Call 747-800-7770 to get started." buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]} />
+        <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">
-        <FooterBaseCard logoText="Irentall" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} copyrightText="© 2024 Irentall." />
+        <FooterSimple
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+          bottomLeftText="© 2024 Irentall"
+          bottomRightText="All rights reserved"
+        />
       </div>
     </ThemeProvider>
   );