Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import FeatureBento from "@/components/sections/feature/FeatureBento";
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react";
+import { Mail, Leaf, Droplet, Sprout, Wind, ArrowRight, Sparkles, ShieldCheck, Truck } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -41,92 +41,63 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="hero" data-section="hero">
-                <HeroLogoBillboard
+                <HeroCarouselLogo
                     logoText="Luminé"
-                    description="Pure, natural skincare formulated for radiant, healthy skin. Discover the power of botanical ingredients and scientific innovation."
+                    description="Experience the next generation of botanical beauty. Curated formulas that transform your skin naturally."
-                    background={{ variant: "sparkles-gradient" }}
+                    slides={[
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp", imageAlt: "Natural botanical extract" },
-                    imageAlt="Luxury skincare products with natural ingredients"
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=1", imageAlt: "Product showcase" }
-                    frameStyle="card"
-                    buttons={[
-                        { text: "Shop Now", href: "#products" },
-                        { text: "Learn More", href: "#about" }
                     ]}
-                    mediaAnimation="slide-up"
+                    buttons={[{ text: "Discover Range", href: "#products" }]}
                 />
             </div>
 
             <div id="about" data-section="about">
-                <InlineImageSplitTextAbout
+                <MediaAbout
-                    heading={[
+                    title="Pure Skincare, Defined"
-                        { type: "text", content: "Crafted with care and precision using nature's finest elements and cutting-edge skincare science to deliver exceptional results for your skin" },
+                    description="Luminé brings together traditional plant-based rituals with modern clinical research to provide holistic skin solutions."
-                        { type: "image", src: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg", alt: "Natural ingredients" }
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp"
-                    ]}
-                    buttonAnimation="blur-reveal"
                     useInvertedBackground={true}
-                    buttons={[
-                        { text: "Learn More", href: "#benefits" }
-                    ]}
                 />
             </div>
 
             <div id="products" data-section="products">
-                <ProductCardOne
+                <ProductCardThree
-                    title="Our Signature Collection"
+                    title="Curated Essentials"
-                    description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
+                    description="Our collection of high-performance skincare."
-                    products={[
+                    gridVariant="asymmetric-60-wide-40-narrow"
-                        {
-                            id: "1",                            name: "Hydrating Moisturizer",                            price: "$68",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp",                            imageAlt: "Hydrating Moisturizer bottle"
-                        },
-                        {
-                            id: "2",                            name: "Radiance Serum",                            price: "$85",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp",                            imageAlt: "Radiance Serum bottle"
-                        },
-                        {
-                            id: "3",                            name: "Purifying Face Mask",                            price: "$52",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp",                            imageAlt: "Purifying Face Mask jar"
-                        }
-                    ]}
-                    gridVariant="three-columns-all-equal-width"
                     animationType="slide-up"
                     textboxLayout="default"
                     useInvertedBackground={false}
+                    products={[
+                        { id: "1", name: "Hydrating Moisturizer", price: "$68", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=2", initialQuantity: 1 },
+                        { id: "2", name: "Radiance Serum", price: "$85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp", initialQuantity: 1 },
+                        { id: "3", name: "Purifying Face Mask", price: "$52", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp", initialQuantity: 1 }
+                    ]}
                 />
             </div>
 
             <div id="benefits" data-section="benefits">
-                <FeatureBento
+                <FeatureCardTwentySix
-                    title="Why Choose Luminé"
+                    title="The Luminé Difference"
-                    description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
+                    description="Engineered for efficacy, inspired by nature."
-                    features={[
-                        {
-                            title: "Worldwide Shipping",                            description: "Fast and reliable delivery to over 150 countries worldwide",                            bentoComponent: "globe"
-                        },
-                        {
-                            title: "Clinically Proven",                            description: "Dermatologist-tested and proven effective in clinical trials",                            bentoComponent: "line-chart"
-                        },
-                        {
-                            title: "Sustainable",                            description: "Eco-conscious packaging and ethical sourcing practices",                            bentoComponent: "orbiting-icons",                            centerIcon: Leaf,
-                            items: [
-                                { icon: Droplet, ring: 1 },
-                                { icon: Sprout, ring: 2 },
-                                { icon: Wind, ring: 3 }
-                            ]
-                        }
-                    ]}
-                    animationType="slide-up"
-                    textboxLayout="default"
                     useInvertedBackground={true}
+                    textboxLayout="default"
+                    features={[
+                        { title: "Ethical Sourcing", description: "Certified cruelty-free ingredients.", buttonIcon: Leaf, buttonHref: "#" },
+                        { title: "Dermatologist Approved", description: "Clinical testing at every stage.", buttonIcon: ShieldCheck, buttonHref: "#" },
+                        { title: "Global Logistics", description: "Delivered to your door worldwide.", buttonIcon: Truck, buttonHref: "#" },
+                        { title: "Active Botanicals", description: "Concentrated plant extracts for results.", buttonIcon: Sprout, buttonHref: "#" }
+                    ]}
                 />
             </div>
 
             <div id="reviews" data-section="reviews">
                 <TestimonialCardFifteen
-                    testimonial="Luminé skincare has completely transformed my routine. My skin feels more radiant and healthy than ever before. I love that it's made with natural ingredients I can trust. Plus, worldwide shipping made it so easy to get my products delivered wherever I am."
+                    testimonial="The best change I ever made to my routine. My skin is glowing again!"
                     rating={5}
-                    author="Sarah Mitchell, Beauty Editor"
+                    author="Elena R., Verified Customer"
-                    avatars={[
+                    avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", alt: "Customer" }]}
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "Sarah Mitchell" },
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", alt: "Customer testimonial" }
-                    ]}
                     ratingAnimation="slide-up"
                     avatarsAnimation="slide-up"
                     useInvertedBackground={false}
@@ -134,45 +105,39 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="faq" data-section="faq">
-                <FaqSplitMedia
+                <FaqSplitText
-                    title="Frequently Asked Questions"
+                    sideTitle="Need Assistance?"
-                    description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
+                    sideDescription="Our experts are here to help you build the perfect skincare routine."
                     faqs={[
-                        { id: "1", title: "How long does it take to see results?", content: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use." },
+                        { id: "1", title: "How do I choose the right product?", content: "Try our quick skin-type questionnaire for personalized recommendations." },
-                        { id: "2", title: "Are your products suitable for sensitive skin?", content: "Yes! All Luminé products are formulated to be gentle and non-irritating." }
+                        { id: "2", title: "Do you ship internationally?", content: "Yes, we ship to over 150+ countries worldwide." }
                     ]}
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp"
-                    imageAlt="Skincare routine and wellness"
-                    mediaPosition="left"
-                    textboxLayout="default"
                     faqsAnimation="slide-up"
-                    mediaAnimation="slide-up"
                     useInvertedBackground={true}
-                    animationType="smooth"
                 />
             </div>
 
             <div id="contact" data-section="contact">
-                <ContactCenter
+                <ContactSplitForm
-                    tag="Newsletter"
+                    title="Join the Circle"
-                    title="Get Your Glow On"
+                    description="Stay updated on new releases and exclusive skin tips."
-                    description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox."
-                    tagIcon={Mail}
-                    background={{ variant: "sparkles-gradient" }}
                     useInvertedBackground={false}
-                    inputPlaceholder="Enter your email"
+                    inputs={[
-                    buttonText="Subscribe"
+                        { name: "name", type: "text", placeholder: "Full Name" },
+                        { name: "email", type: "email", placeholder: "Email Address" }
+                    ]}
+                    textarea={{ name: "message", placeholder: "Questions about your routine?" }}
                 />
             </div>
 
             <div id="footer" data-section="footer">
-                <FooterBaseCard
+                <FooterSimple
-                    logoText="Luminé"
                     columns={[
-                        { title: "Product", items: [{ label: "Moisturizers", href: "#products" }] },
+                        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Best Sellers", href: "#products" }] },
-                        { title: "Company", items: [{ label: "About Us", href: "#about" }] }
+                        { title: "Help", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
                     ]}
-                    copyrightText="© 2025 Luminé Skincare. All rights reserved."
+                    bottomLeftText="© 2025 www.lumine.com"
+                    bottomRightText="Privacy Policy"
                 />
             </div>
         </ThemeProvider>