Update src/app/page.tsx

Merge version_42 into main

src/app/layout.tsx

@@ -9,8 +9,8 @@ import { Lato } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  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.',
+  title: 'Irentall - Bridal Styling Los Angeles',
+  description: 'Find your perfect wedding dress in Los Angeles with our personalized bridal styling services.',
 };
 
 const lato = Lato({

src/app/page.tsx

@@ -2,96 +2,51 @@
 
 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 FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Phone, Instagram, MapPin, X } from "lucide-react";
-import { useState, useEffect, useRef } from "react";
+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";
 
 export default function LandingPage() {
-  const [showModal, setShowModal] = useState(false);
-  const [modalType, setModalType] = useState<'gallery' | null>(null);
-  const galleryRef = 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" }
-  ];
-
-  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>
-    );
-  };
+  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" }));
 
   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">
-        
-      <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>
+    <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>
       </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."
-          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 }))}
-        />
+      <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>
 
-      <div id="gallery" data-section="gallery" ref={galleryRef}>
-        <ProductCardFour
-          title="Our Dress Collection"
-          description="Handpicked designs by Maral."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          products={allDresses.slice(0, 4).map((dress) => ({
-            ...dress,
-            onProductClick: () => {
-                setModalType('gallery');
-                setShowModal(true);
-            }
-          }))}
-        />
+      <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} />
+      </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} />
+      </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" }]} />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterSimple 
-          columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }] }]} 
-          bottomLeftText="© 2025 Maral Bridal"
-          bottomRightText="All rights reserved."
-        />
+        <FooterBaseCard logoText="Irentall" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} copyrightText="© 2024 Irentall." />
       </div>
-
-      {renderModal()}
     </ThemeProvider>
   );
 }