Switch to version 1: modified src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -4,13 +4,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Mail, Leaf, Droplet, Sprout, Wind, Info, HelpCircle, MessageCircle } from "lucide-react";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -20,11 +20,11 @@ export default function SkincareTemplatePage() {
             borderRadius="rounded"
             contentWidth="small"
             sizing="largeSmallSizeLargeTitles"
-            background="noise"
-            cardStyle="solid"
-            primaryButtonStyle="flat"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
             secondaryButtonStyle="solid"
-            headingFontWeight="medium"
+            headingFontWeight="extrabold"
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleCentered
@@ -32,10 +32,11 @@ export default function SkincareTemplatePage() {
                     navItems={[
                         { name: "Products", id: "products" },
                         { name: "About", id: "about" },
-                        { name: "FAQ", id: "faq" },
+                        { name: "Benefits", id: "benefits" },
+                        { name: "Reviews", id: "reviews" },
                         { name: "Contact", id: "contact" }
                     ]}
-                    button={{ text: "Shop Now", href: "#products" }}
+                    button={{ text: "Shop Now", href: "products" }}
                 />
             </div>
 
@@ -43,7 +44,7 @@ export default function SkincareTemplatePage() {
                 <HeroLogoBillboard
                     logoText="Luminé"
                     description="Pure, natural skincare formulated for radiant, healthy skin. Discover the power of botanical ingredients and scientific innovation."
-                    background={{ variant: "plain" }}
+                    background={{ variant: "sparkles-gradient" }}
                     imageSrc="/templates/skincare/hero.webp"
                     imageAlt="Luxury skincare products with natural ingredients"
                     frameStyle="card"
@@ -57,8 +58,11 @@ export default function SkincareTemplatePage() {
 
             <div id="about" data-section="about">
                 <InlineImageSplitTextAbout
-                    title="Pure Botanical Beauty"
-                    description="Crafted with care and precision using nature's finest elements and cutting-edge skincare science to deliver exceptional results for your skin."
+                    heading={[
+                        { 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" },
+                        { type: "image", src: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg", alt: "Natural ingredients" },
+                        { type: "text", content: "" }
+                    ]}
                     buttonAnimation="blur-reveal"
                     useInvertedBackground={true}
                     buttons={[
@@ -68,13 +72,31 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="products" data-section="products">
-                <ProductCardFour
-                    title="Signature Collection"
-                    description="Discover our carefully curated skincare and detergent essentials designed for your daily routine."
+                <ProductCardOne
+                    title="Our Signature Collection"
+                    description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
                     products={[
-                        { id: "1", name: "Hydrating Moisturizer", price: "$68", variant: "50ml", imageSrc: "/templates/skincare/image2.webp" },
-                        { id: "2", name: "Radiance Serum", price: "$85", variant: "30ml", imageSrc: "/templates/skincare/image3.webp" },
-                        { id: "3", name: "Gentle Detergent", price: "$42", variant: "1L", imageSrc: "/templates/skincare/image1.webp" }
+                        {
+                            id: "1",
+                            name: "Hydrating Moisturizer",
+                            price: "$68",
+                            imageSrc: "/templates/skincare/image2.webp",
+                            imageAlt: "Hydrating Moisturizer bottle"
+                        },
+                        {
+                            id: "2",
+                            name: "Radiance Serum",
+                            price: "$85",
+                            imageSrc: "/templates/skincare/image3.webp",
+                            imageAlt: "Radiance Serum bottle"
+                        },
+                        {
+                            id: "3",
+                            name: "Purifying Face Mask",
+                            price: "$52",
+                            imageSrc: "/templates/skincare/image1.webp",
+                            imageAlt: "Purifying Face Mask jar"
+                        }
                     ]}
                     gridVariant="three-columns-all-equal-width"
                     animationType="slide-up"
@@ -84,13 +106,31 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="benefits" data-section="benefits">
-                <FeatureBorderGlow
-                    title="Quality Standards"
-                    description="Our commitment to purity, sustainability, and scientific excellence in every drop."
+                <FeatureBento
+                    title="Why Choose Luminé"
+                    description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
                     features={[
-                        { icon: Leaf, title: "Ethically Sourced", description: "Ingredients harvested with respect for nature." },
-                        { icon: Droplet, title: "Gentle Formulation", description: "Perfect for all skin types, even the most sensitive." },
-                        { icon: Wind, title: "Eco-Friendly", description: "Sustainable packaging for a cleaner future." }
+                        {
+                            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"
@@ -100,10 +140,15 @@ export default function SkincareTemplatePage() {
 
             <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."
+                    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."
                     rating={5}
                     author="Sarah Mitchell, Beauty Editor"
-                    avatars={[{ src: "/templates/skincare/image5.avif", alt: "Sarah Mitchell" }]}
+                    avatars={[
+                        { src: "/templates/skincare/image5.avif", alt: "Sarah Mitchell" },
+                        { src: "/templates/skincare/image6.avif", alt: "Customer testimonial" },
+                        { src: "/templates/skincare/image7.avif", alt: "Customer testimonial" },
+                        { src: "/templates/skincare/image8.avif", alt: "Customer testimonial" }
+                    ]}
                     ratingAnimation="slide-up"
                     avatarsAnimation="slide-up"
                     useInvertedBackground={false}
@@ -111,43 +156,100 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="faq" data-section="faq">
-                <FaqBase
+                <FaqSplitMedia
                     title="Frequently Asked Questions"
-                    description="Answers to common questions about our skincare and gentle detergent range."
+                    description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
                     faqs={[
-                        { id: "1", title: "Is the detergent safe for delicate fabrics?", content: "Yes, our botanical detergent is formulated to be gentle on both skin and fabrics, including silk and lace." },
-                        { id: "2", title: "Can I use the moisturizer daily?", content: "Absolutely, our hydrating moisturizer is designed for twice-daily use for optimal results." }
+                        {
+                            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."
+                        },
+                        {
+                            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."
+                        },
+                        {
+                            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."
+                        },
+                        {
+                            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."
+                        }
                     ]}
-                    faqsAnimation="slide-up"
+                    imageSrc="/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">
-                <ContactFaq
-                    ctaTitle="Contact Us"
-                    ctaDescription="Need personalized assistance with your order or skincare routine? Our team is here to help."
-                    ctaButton={{ text: "Email Support", href: "mailto:support@lumine.com" }}
-                    ctaIcon={MessageCircle}
-                    faqs={[
-                        { id: "1", title: "Tracking my order", content: "You'll receive an email with your tracking number once your order ships." },
-                        { id: "2", title: "Returns and Refunds", content: "We offer a 60-day satisfaction guarantee on all products." }
-                    ]}
-                    animationType="slide-up"
+                <ContactCenter
+                    tag="Newsletter"
+                    title="Get Your Glow On"
+                    description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox."
+                    tagIcon={Mail}
+                    background={{ variant: "plain" }}
                     useInvertedBackground={false}
+                    inputPlaceholder="Enter your email"
+                    buttonText="Subscribe"
+                    termsText="We respect your privacy. Unsubscribe anytime."
                 />
             </div>
 
             <div id="footer" data-section="footer">
-                <FooterBaseReveal
+                <FooterBaseCard
+                    logoText="Luminé"
                     columns={[
-                        { title: "Product", items: [{ label: "Skincare", href: "#products" }, { label: "Detergent", href: "#products" }] },
-                        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", 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: #efebe5;
-  --card: #f7f2ea;
-  --foreground: #000000;
-  --primary-cta: #000000;
+  --background: #fcf6ec;
+  --card: #f3ede2;
+  --foreground: #2e2521;
+  --primary-cta: #2e2521;
   --primary-cta-text: #fcf6ec;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #2e2521;
-  --accent: #ffffff;
-  --background-accent: #e1b875;
+  --accent: #b2a28b;
+  --background-accent: #b2a28b;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);