Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,15 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import TextAbout from "@/components/sections/about/TextAbout";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Mail, Leaf, Droplet, Sprout, Wind, MessageSquare } from "lucide-react";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import { MessageSquare } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -31,6 +30,7 @@ export default function SkincareTemplatePage() {
                     navItems={[
                         { name: "Story", id: "about" },
                         { name: "Collection", id: "products" },
+                        { name: "Gallery", id: "gallery" },
                         { name: "Results", id: "reviews" },
                         { name: "Contact", id: "contact" }
                     ]}
@@ -39,15 +39,17 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="hero" data-section="hero">
-                <HeroLogoBillboard
+                <HeroBillboardCarousel
-                    logoText="Luminé Coastal"
+                    title="Luminé Coastal"
                     description="Sophisticated skincare inspired by the tranquility of the coast. Pure, botanical, and deeply restorative."
                     background={{ variant: "sparkles-gradient" }}
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
+                    mediaItems={[
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp", imageAlt: "Coastal Skincare" },
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=1", imageAlt: "Coastal Collection" }
+                    ]}
                     buttons={[
                         { text: "View Collection", href: "#products" }
                     ]}
-                    mediaAnimation="slide-up"
                 />
             </div>
 
@@ -64,16 +66,32 @@ export default function SkincareTemplatePage() {
                     title="Coastal Essentials"
                     description="Curated beauty rituals designed to elevate your daily routine."
                     products={[
-                        { id: "1", brand: "Luminé", name: "Hydrating Mist", price: "$68", rating: 5, reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp" },
+                        { id: "1", brand: "Luminé", name: "Hydrating Mist", price: "$68", rating: 5, reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=2" },
                         { id: "2", brand: "Luminé", name: "Restorative Oil", price: "$85", rating: 5, reviewCount: "96", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp" }
                     ]}
                     gridVariant="two-columns-alternating-heights"
-                    animationType="slide-up"
+                    animationType="scale-rotate"
                     textboxLayout="split-description"
                     useInvertedBackground={true}
                 />
             </div>
 
+            <div id="gallery" data-section="gallery">
+                <FeatureCardTwentyFour
+                    title="Coastal Moments"
+                    description="A visual journey through our inspiration."
+                    textboxLayout="default"
+                    animationType="blur-reveal"
+                    useInvertedBackground={false}
+                    features={Array.from({ length: 15 }).map((_, i) => ({
+                        id: `img-${i}`,
+                        title: `Atmosphere ${i + 1}`,
+                        author: "Coastal Lens",                        description: "Capture of local coastal essence.",                        tags: ["Nature", "Clean"],
+                        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp"
+                    }))}
+                />
+            </div>
+
             <div id="reviews" data-section="reviews">
                 <TestimonialCardFive
                     title="Client Reflections"
@@ -83,6 +101,7 @@ export default function SkincareTemplatePage() {
                     ]}
                     textboxLayout="split"
                     useInvertedBackground={false}
+                    cardClassName="bg-white/80 backdrop-blur-md border border-white/20 shadow-2xl transition-transform hover:scale-[1.02] duration-300"
                 />
             </div>
 

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #fcf8f3;
-  --card: #ffffff70;
+  --card: #f3eee5;
-  --foreground: #2c3e50;
+  --foreground: #2e2521;
   --primary-cta: #2a5d67;
   --primary-cta-text: #fcf6ec;
   --secondary-cta: #f1e9d2;
   --secondary-cta-text: #2e2521;
   --accent: #b8c9d0;
-  --background-accent: #e0dcd5;
+  --background-accent: #e1b875;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);