Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -2,12 +2,13 @@
 
 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 TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
 import { MessageSquare } from "lucide-react";
 
 export default function SkincareTemplatePage() {
@@ -29,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" }
                     ]}
@@ -37,15 +39,17 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="hero" data-section="hero">
-                <HeroLogoBillboard
-                    logoText="Luminé Coastal"
+                <HeroBillboardCarousel
+                    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>
 
@@ -62,7 +66,7 @@ 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"
@@ -72,6 +76,22 @@ export default function SkincareTemplatePage() {
                 />
             </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"