Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -6,10 +6,11 @@ import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react";
 
 export default function SkincareTemplatePage() {
@@ -34,6 +35,7 @@ export default function SkincareTemplatePage() {
                         { name: "About", id: "about" },
                         { name: "Benefits", id: "benefits" },
                         { name: "Reviews", id: "reviews" },
+                        { name: "Depoiments", id: "client-depoiments" },
                         { name: "Contact", id: "contact" }
                     ]}
                     button={{ text: "Shop Now", href: "products" }}
@@ -77,25 +79,13 @@ export default function SkincareTemplatePage() {
                     description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
                     products={[
                         {
-                            id: "1",
+                            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"
-                            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",
+                            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"
-                            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",
+                            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"
-                            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"
@@ -111,20 +101,13 @@ export default function SkincareTemplatePage() {
                     description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
                     features={[
                         {
-                            title: "Worldwide Shipping",
+                            title: "Worldwide Shipping",                            description: "Fast and reliable delivery to over 150 countries worldwide",                            bentoComponent: "globe"
-                            description: "Fast and reliable delivery to over 150 countries worldwide",
-                            bentoComponent: "globe"
                         },
                         {
-                            title: "Clinically Proven",
+                            title: "Clinically Proven",                            description: "Dermatologist-tested and proven effective in clinical trials",                            bentoComponent: "line-chart"
-                            description: "Dermatologist-tested and proven effective in clinical trials",
-                            bentoComponent: "line-chart"
                         },
                         {
-                            title: "Sustainable",
+                            title: "Sustainable",                            description: "Eco-conscious packaging and ethical sourcing practices",                            bentoComponent: "orbiting-icons",                            centerIcon: Leaf,
-                            description: "Eco-conscious packaging and ethical sourcing practices",
-                            bentoComponent: "orbiting-icons",
-                            centerIcon: Leaf,
                             items: [
                                 { icon: Droplet, ring: 1 },
                                 { icon: Sprout, ring: 2 },
@@ -139,117 +122,93 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="reviews" data-section="reviews">
-                <TestimonialCardFifteen
+                <TestimonialCardSix
-                    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."
+                    title="What Our Customers Say"
-                    rating={5}
+                    description="Real feedback from our happy clients around the world."
-                    author="Sarah Mitchell, Beauty Editor"
+                    testimonials={[
-                    avatars={[
+                        {
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "Sarah Mitchell" },
+                            id: "1",                            name: "Sarah Mitchell",                            handle: "@sarah_beauty",                            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.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",                            imageAlt: "Sarah Mitchell"
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", alt: "Customer testimonial" },
+                        },
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", alt: "Customer testimonial" },
+                        {
-                        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "Customer testimonial" }
+                            id: "2",                            name: "David Lee",                            handle: "@david_skincare",                            testimonial: "I've struggled with sensitive skin for years, but Luminé products have been a game-changer. No irritation, just clear, smooth skin. Highly recommend!",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",                            imageAlt: "David Lee"
+                        },
+                        {
+                            id: "3",                            name: "Jessica Wong",                            handle: "@jwong_glows",                            testimonial: "The Radiance Serum is my new holy grail! My complexion has never looked better. Thank you, Luminé, for these incredible products.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",                            imageAlt: "Jessica Wong"
+                        },
+                        {
+                            id: "4",                            name: "Michael Chen",                            handle: "@m_chen_skin",                            testimonial: "Finally, a skincare line that truly delivers on its promises. Sustainable, effective, and luxurious. I'm a customer for life.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif",                            imageAlt: "Michael Chen"
+                        }
                     ]}
-                    ratingAnimation="slide-up"
+                    animationType="slide-up"
-                    avatarsAnimation="slide-up"
+                    textboxLayout="default"
                     useInvertedBackground={false}
                 />
             </div>
 
+            <div id="client-depoiments" data-section="client-depoiments">
+                <TestimonialCardFive
+                    title="Client Success Stories"
+                    description="Hear directly from our satisfied customers who have experienced the Luminé difference."
+                    testimonials={[
+                        {
+                            id: "1",                            name: "Olivia Rodriguez",                            date: "2023-11-01",                            title: "Absolutely love the results!",                            quote: "Luminé's products have transformed my skin. It's never felt so smooth and looked so radiant. Highly recommend to everyone looking for a true glow-up!",                            tag: "Verified Purchase",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",                            avatarAlt: "Olivia Rodriguez"
+                        },
+                        {
+                            id: "2",                            name: "Marcus Thorne",                            date: "2023-10-25",                            title: "Game-changer for sensitive skin",                            quote: "As someone with very sensitive skin, finding effective products is a challenge. Luminé has been gentle yet incredibly effective. My skin barrier feels stronger and looks healthier.",                            tag: "Sensitive Skin User",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",                            avatarAlt: "Marcus Thorne"
+                        },
+                        {
+                            id: "3",                            name: "Sophia Chang",                            date: "2023-09-15",                            title: "My new skincare obsession!",                            quote: "The Hydrating Moisturizer is a dream! It's lightweight, deeply moisturizing, and gives my skin a dewy finish. I can't imagine my routine without it now.",                            tag: "Beauty Enthusiast",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",                            avatarAlt: "Sophia Chang"
+                        }
+                    ]}
+                    textboxLayout="default"
+                    useInvertedBackground={true}
+                />
+            </div>
+
             <div id="faq" data-section="faq">
-                <FaqSplitMedia
+                <FaqDouble
-                    title="Frequently Asked Questions"
+                    title="Got Questions? We Have Answers."
                     description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
                     faqs={[
                         {
-                            id: "1",
+                            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. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks."
-                            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. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks."
                         },
                         {
-                            id: "2",
+                            id: "2",                            title: "Are your products suitable for sensitive skin?",                            content: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin."
-                            title: "Are your products suitable for sensitive skin?",
-                            content: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin."
                         },
                         {
-                            id: "3",
+                            id: "3",                            title: "Do you offer worldwide shipping?",                            content: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery."
-                            title: "Do you offer worldwide shipping?",
-                            content: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery."
                         },
                         {
-                            id: "4",
+                            id: "4",                            title: "What is your return policy?",                            content: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners."
-                            title: "What is your return policy?",
-                            content: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners."
                         }
                     ]}
-                    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={false}
-                    useInvertedBackground={true}
                     animationType="smooth"
                 />
             </div>
 
             <div id="contact" data-section="contact">
-                <ContactCenter
+                <ContactText
-                    tag="Newsletter"
+                    text="Get Your Glow On! Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox. We respect your privacy. Unsubscribe anytime."
-                    title="Get Your Glow On"
+                    buttons={[
-                    description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox."
+                        { text: "Subscribe" }
-                    tagIcon={Mail}
+                    ]}
                     background={{ variant: "plain" }}
                     useInvertedBackground={false}
-                    inputPlaceholder="Enter your email"
+                    animationType="reveal-blur"
-                    buttonText="Subscribe"
-                    termsText="We respect your privacy. Unsubscribe anytime."
                 />
             </div>
 
             <div id="footer" data-section="footer">
-                <FooterBaseCard
+                <FooterLogoReveal
                     logoText="Luminé"
-                    columns={[
+                    leftLink={{ text: "Moisturizers", href: "#products" }}
-                        {
+                    rightLink={{ text: "Contact Us", href: "#contact" }}
-                            title: "Product",
-                            items: [
-                                { label: "Moisturizers", href: "#products" },
-                                { label: "Serums", href: "#products" },
-                                { label: "Masks", href: "#products" },
-                                { label: "Bundles", href: "#products" }
-                            ]
-                        },
-                        {
-                            title: "Company",
-                            items: [
-                                { label: "About Us", href: "#about" },
-                                { label: "Sustainability", href: "#about" },
-                                { label: "Blog", href: "#" },
-                                { label: "Careers", href: "#" }
-                            ]
-                        },
-                        {
-                            title: "Support",
-                            items: [
-                                { label: "Contact Us", href: "#contact" },
-                                { label: "FAQ", href: "#faq" },
-                                { label: "Worldwide Shipping", href: "#" },
-                                { label: "Returns", href: "#" }
-                            ]
-                        },
-                        {
-                            title: "Connect",
-                            items: [
-                                { label: "Instagram", href: "#" },
-                                { label: "Facebook", href: "#" },
-                                { label: "Pinterest", href: "#" },
-                                { label: "TikTok", href: "#" }
-                            ]
-                        }
-                    ]}
-                    copyrightText="© 2025 Luminé Skincare. All rights reserved."
                 />
             </div>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #f7f6f7;
-  --card: #f3ede2;
+  --card: #ffffff;
-  --foreground: #2e2521;
+  --foreground: #1b0c25;
-  --primary-cta: #2e2521;
+  --primary-cta: #1b0c25;
-  --primary-cta-text: #fcf6ec;
+  --primary-cta-text: #0a0a0a;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #2e2521;
+  --secondary-cta-text: #ffffff;
-  --accent: #b2a28b;
+  --accent: #ff93e4;
-  --background-accent: #b2a28b;
+  --background-accent: #e8a8c3;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);