Merge version_3 into main

Merge version_3 into main

src/app/blog/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function BlogPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered
+                    brandName="Luminé Skincare"
+                    navItems={[
+                        { name: "Products", id: "products" },
+                        { name: "New", id: "new-arrivals" },
+                        { name: "Best Sellers", id: "best-sellers" },
+                        { name: "Trending", id: "trending" },
+                        { name: "Blog", id: "blog" },
+                        { name: "Gallery", id: "gallery" },
+                        { name: "About", id: "about" }
+                    ]}
+                    button={{ text: "Shop Now", href: "#products" }}
+                />
+            </div>
+
+            <div id="blog" data-section="blog">
+                <BlogCardThree
+                    title="Beauty Tips & Insights"
+                    description="Expert advice for your skincare journey."
+                    blogs={[]}
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+
+            <div id="footer" data-section="footer">
+                <FooterBaseCard
+                    logoText="Luminé"
+                    columns={[]}
+                    copyrightText="© 2025 Luminé Skincare. All rights reserved."
+                />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/eyeshadow/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function EyeshadowPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
+            <div className="pt-32 pb-16">
+                <h1 className="text-center text-4xl font-bold">Eyeshadow Collection</h1>
+                <p className="text-center mt-4 text-lg">Stunning palettes for every look.</p>
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/foundation/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function FoundationPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
+            <div className="pt-32 pb-16">
+                <h1 className="text-center text-4xl font-bold">Foundation Collection</h1>
+                <p className="text-center mt-4 text-lg">Achieve the perfect base with our premium foundations.</p>
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/lipstick/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function LipstickPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
+            <div className="pt-32 pb-16">
+                <h1 className="text-center text-4xl font-bold">Lipstick Collection</h1>
+                <p className="text-center mt-4 text-lg">Discover our range of vibrant lip colors.</p>
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -6,6 +6,7 @@ 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 BlogCardThree from "@/components/sections/blog/BlogCardThree";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { Camera } from "lucide-react";
 
@@ -15,13 +16,13 @@ export default function SkincareTemplatePage() {
             defaultButtonVariant="hover-bubble"
             defaultTextAnimation="reveal-blur"
             borderRadius="rounded"
-            contentWidth="small"
+            contentWidth="medium"
-            sizing="largeSmallSizeLargeTitles"
+            sizing="medium"
-            background="aurora"
+            background="circleGradient"
-            cardStyle="gradient-bordered"
+            cardStyle="glass-elevated"
-            primaryButtonStyle="double-inset"
+            primaryButtonStyle="gradient"
-            secondaryButtonStyle="solid"
+            secondaryButtonStyle="glass"
-            headingFontWeight="extrabold"
+            headingFontWeight="normal"
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleCentered
@@ -31,6 +32,7 @@ export default function SkincareTemplatePage() {
                         { name: "New", id: "new-arrivals" },
                         { name: "Best Sellers", id: "best-sellers" },
                         { name: "Trending", id: "trending" },
+                        { name: "Blog", id: "blog" },
                         { name: "Gallery", id: "gallery" },
                         { name: "About", id: "about" }
                     ]}
@@ -89,6 +91,17 @@ export default function SkincareTemplatePage() {
                 />
             </div>
 
+            <div id="blog" data-section="blog">
+                <BlogCardThree
+                    title="Beauty Tips & Insights"
+                    description="Expert advice for your skincare journey."
+                    blogs={[]}
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={true}
+                />
+            </div>
+
             <div id="gallery" data-section="gallery">
                 <FeatureBento
                     title="Luminé Moments"

src/app/skincare/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function SkincarePage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered 
+                    brandName="Luminé Skincare" 
+                    navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", id: "/lipstick" }, { name: "Foundation", id: "/foundation" }, { name: "Eyeshadow", id: "/eyeshadow" }, { name: "Skincare", id: "/skincare" }]} 
+                />
+            </div>
+            <div className="pt-32 pb-16">
+                <h1 className="text-center text-4xl font-bold">Skincare Essentials</h1>
+                <p className="text-center mt-4 text-lg">Pure, natural products for glowing skin.</p>
+            </div>
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
+        </ThemeProvider>
+    );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #fdf6f6;
-  --card: #ffffff;
+  --card: #fcecea;
-  --foreground: #251919;
+  --foreground: #4a3b3b;
-  --primary-cta: #1b0c0c;
+  --primary-cta: #d69f9f;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #f0e8e8;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #2e2521;
-  --accent: #e8a8a8;
+  --accent: #e6c3c3;
-  --background-accent: #f7dada;
+  --background-accent: #f3e0e0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);