Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,139 +2,168 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { Sparkles, Leaf } from "lucide-react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 
-export default function LandingPage() {
+export default function SkincareLandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
-        contentWidth="mediumLarge"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
         sizing="large"
-        background="grid"
+        background="fluid"
         cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Shop", id: "products" },
-        { name: "Packages", id: "pricing" },
-        { name: "FAQ", id: "faq" }
-      ]}
-      brandName="LuxeSkin"
-      button={{ text: "Get Started" }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "hero" }, { name: "About", id: "about" }, { name: "Products", id: "products" }, { name: "Pricing", id: "pricing" }]}
+            brandName="PureGlow"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroPersonalLinks
-      background={{ variant: "sparkles-gradient" }}
-      title="Radiance in Every Drop"
-      linkCards={[
-        { title: "View Routine", description: "Start your glow journey", button: { text: "Shop Now" } },
-        { title: "Skin Quiz", description: "Find what works for you", button: { text: "Take Quiz" } }
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlayTestimonial
+            title="Radiance in Every Drop"
+            description="Discover scientifically formulated skincare designed to nourish, protect, and restore your natural glow."
+            testimonials={[{ name: "Sarah J.", handle: "@sarahglow", testimonial: "My skin has never felt this hydrated. Absolutely love these products!", rating: 5 }]}
+            imageSrc="http://img.b2bpic.net/free-photo/cosmetics-skin-care-routine-top-view_23-2148705031.jpg"
+            buttons={[{ text: "Explore Collection", href: "#products" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      title="Pure Ingredients, Proven Results"
-      description="Our science-backed formulas deliver visible radiance."
-      metrics={[{ value: "100%", title: "Vegan" }, { value: "50+", title: "Clinical Trials" }]}
-      useInvertedBackground={true}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
+            title="The Science of Nature"
+            description={["We blend botanical wisdom with clinical innovation to create clean, effective skincare.", "Our commitment is to transparency, sustainability, and your skin's long-term health."]}
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardMedia
-      animationType="slide-up"
-      title="Why LuxeSkin"
-      description="Tailored care for your unique skin barrier."
-      features={[
-        { id: "f1", title: "Hydration Focus", description: "Deep nourishment for all skin types.", tag: "Hydrate" },
-        { id: "f2", title: "Anti-Aging", description: "Potent antioxidants for firmness.", tag: "Refine" }
-      ]}
-      textboxLayout="split"
-      useInvertedBackground={true}
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            animationType="blur-reveal"
+            title="Pure Ingredients, Real Results"
+            description="Only the best for your skin."
+            features={[
+                { id: "f1", label: "Natural", title: "Sourced from Earth", items: ["Organic extracts", "Cold-pressed oils", "Vegan formula"], buttons: [{text: "Learn more"}] },
+                { id: "f2", label: "Clinical", title: "Scientifically Proven", items: ["Dermatologist tested", "Clinical trials", "Fragrance free"], buttons: [{text: "See data"}] }
+            ]}
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      gridVariant="three-columns-all-equal-width"
-      animationType="slide-up"
-      title="Featured Skincare"
-      description="Top-rated products for your daily routine."
-      textboxLayout="split-description"
-      useInvertedBackground={true}
-      products={[
-        { id: "1", name: "Vitamin C Serum", price: "$45", variant: "30ml", imageSrc: "https://img.b2bpic.net/free-photo/beauty-products-collection-with-copy-space_23-2147775986.jpg?_wi=1" },
-        { id: "2", name: "Hydrating Moisturizer", price: "$38", variant: "50ml", imageSrc: "https://img.b2bpic.net/free-photo/cream-jar-cosmetics-with-bottle-skincare_23-2148769315.jpg" },
-        { id: "3", name: "Face Oil", price: "$55", variant: "30ml", imageSrc: "https://img.b2bpic.net/free-photo/beauty-products-collection-with-copy-space_23-2147775986.jpg?_wi=2" }
-      ]}
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardTwo
+            title="Our Best Sellers"
+            description="Daily essentials curated for your unique skin journey."
+            products={[
+                { id: "p1", brand: "Glow Series", name: "Hydrating Serum", price: "$45", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-with-natural-ingredients_23-2148671234.jpg" },
+                { id: "p2", brand: "Glow Series", name: "Day Cream", price: "$55", rating: 4, reviewCount: "96", imageSrc: "http://img.b2bpic.net/free-photo/luxury-cosmetic-cream-packaging_23-2148671245.jpg" }
+            ]}
+            gridVariant="asymmetric-60-wide-40-narrow"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardFive
-      animationType="slide-up"
-      title="Skincare Routines"
-      description="Choose the perfect plan for your skin needs."
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        { id: "basic", tag: "Starter", price: "$60", period: "/mo", description: "Basic cleansing and moisturizing.", button: { text: "Select" }, featuresTitle: "Includes:", features: ["Cleanser", "Moisturizer"] },
-        { id: "pro", tag: "Pro", price: "$120", period: "/mo", description: "Advanced care for glowing skin.", button: { text: "Select" }, featuresTitle: "Includes:", features: ["Cleanser", "Moisturizer", "Serum", "Face Oil"] }
-      ]}
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardNine
+            title="Complete Regimen Kits"
+            description="Select the perfect kit for your skincare routine."
+            plans={[
+                { id: "starter", title: "Starter Kit", price: "$89", period: "/monthly", features: ["Cleanser", "Serum", "Day Cream"], button: { text: "Get Started" } },
+                { id: "pro", title: "Advanced Kit", price: "$149", period: "/monthly", features: ["Everything in Starter", "Night Cream", "Eye Gel", "Weekly Mask"], button: { text: "Upgrade Now" } }
+            ]}
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      title="Customer Glow"
-      description="Join thousands of happy users."
-      textboxLayout="split"
-      useInvertedBackground={true}
-      kpiItems={[{ value: "5k+", label: "Reviews" }, { value: "4.9", label: "Rating" }, { value: "98%", label: "Retention" }]}
-      testimonials={[{ id: "t1", name: "Jane Doe", role: "Artist", company: "Self-Employed", rating: 5 }, { id: "t2", name: "John Smith", role: "Designer", company: "Agency", rating: 5 }]}
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            title="Proven Impact"
+            description="Real results backed by science."
+            metrics={[
+                { id: "m1", value: "95%", title: "Skin Elasticity", description: "Reported improvement after 4 weeks.", icon: Sparkles },
+                { id: "m2", value: "80k+", title: "Happy Customers", description: "Joining our clean beauty movement.", icon: Leaf }
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      title="Frequently Asked"
-      description="Got questions? We have answers."
-      textboxLayout="split"
-      faqsAnimation="slide-up"
-      useInvertedBackground={true}
-      faqs={[{ id: "q1", title: "Are products vegan?", content: "Yes, 100% plant-based." }]}
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven
+            title="Our Experts"
+            description="Meet the team behind your glow."
+            groups={[{
+                id: "team-1", groupTitle: "Formulation Team", members: [{ id: "e1", title: "Dr. Elena Rose", subtitle: "Lead Chemist", detail: "15 years in skincare innovation.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-scientist-lab_23-2148671321.jpg" }]
+            }]}
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="LuxeSkin"
-      columns={[{ title: "Links", items: [{ label: "Home", href: "#hero" }] }]}
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            cardTitle="See Our Results"
+            cardTag="Reviews"
+            testimonials={[
+                { id: "t1", name: "Julia M.", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-with-natural-skin_23-2148671456.jpg" },
+                { id: "t2", name: "Chloe B.", imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling-natural-beauty_23-2148671489.jpg" }
+            ]}
+            cardAnimation="blur-reveal"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqDouble
+            title="Frequently Asked"
+            description="Answers to common skincare questions."
+            faqs={[
+                { id: "q1", title: "Is it safe for sensitive skin?", content: "Yes, all our products are dermatologically tested and fragrance-free." },
+                { id: "q2", title: "Do you ship internationally?", content: "We currently ship across the globe with local distribution partners." }
+            ]}
+            faqsAnimation="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            logoText="PureGlow"
+            imageSrc="http://img.b2bpic.net/free-photo/bottles-beauty-products_23-2148671567.jpg"
+            columns={[
+                { title: "Shop", items: [{ label: "Serums", href: "#products" }, { label: "Creams", href: "#products" }] },
+                { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
+  --background: #fbf8f5;
+  --card: #f4f1ed;
+  --foreground: #3d3630;
+  --primary-cta: #a89078;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #e8e1d9;
   --secondary-cta-text: #120006e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #d6c9bd;
+  --background-accent: #efeae5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);