2026-04-26 18:37:29 +00:00
6 changed files with 102 additions and 29 deletions
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -11,13 +11,13 @@ export default function BlogPage() {
            defaultButtonVariant="hover-bubble"
            defaultTextAnimation="reveal-blur"
            borderRadius="rounded"
-            contentWidth="small"
-            sizing="largeSmallSizeLargeTitles"
-            background="aurora"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="double-inset"
-            secondaryButtonStyle="solid"
-            headingFontWeight="extrabold"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
        >
            <div id="nav" data-section="nav">
                <NavbarStyleCentered
@@ -39,6 +39,7 @@ export default function BlogPage() {
                <BlogCardThree
                    title="Beauty Tips & Insights"
                    description="Expert advice for your skincare journey."
+                    blogs={[]}
                    animationType="slide-up"
                    textboxLayout="default"
                    useInvertedBackground={false}
@@ -54,4 +55,4 @@ export default function BlogPage() {
            </div>
        </ThemeProvider>
    );
-}
+}
--- a/src/app/eyeshadow/page.tsx
+++ b/src/app/eyeshadow/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

 export default function EyeshadowPage() {
    return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
        </ThemeProvider>
    );
 }
--- a/src/app/foundation/page.tsx
+++ b/src/app/foundation/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

 export default function FoundationPage() {
    return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
        </ThemeProvider>
    );
 }
--- a/src/app/lipstick/page.tsx
+++ b/src/app/lipstick/page.tsx
@@ -2,18 +2,35 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import ProductCardThree from "@/components/ecommerce/productDetail/ProductDetailCard";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

 export default function LipstickPage() {
    return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
        </ThemeProvider>
    );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,13 +16,13 @@ export default function SkincareTemplatePage() {
            defaultButtonVariant="hover-bubble"
            defaultTextAnimation="reveal-blur"
            borderRadius="rounded"
-            contentWidth="small"
-            sizing="largeSmallSizeLargeTitles"
-            background="aurora"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="double-inset"
-            secondaryButtonStyle="solid"
-            headingFontWeight="extrabold"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
        >
            <div id="nav" data-section="nav">
                <NavbarStyleCentered
@@ -95,6 +95,7 @@ export default function SkincareTemplatePage() {
                <BlogCardThree
                    title="Beauty Tips & Insights"
                    description="Expert advice for your skincare journey."
+                    blogs={[]}
                    animationType="slide-up"
                    textboxLayout="default"
                    useInvertedBackground={true}
@@ -130,4 +131,4 @@ export default function SkincareTemplatePage() {
            </div>
        </ThemeProvider>
    );
-}
+}
--- a/src/app/skincare/page.tsx
+++ b/src/app/skincare/page.tsx
@@ -6,13 +6,31 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

 export default function SkincarePage() {
    return (
-        <ThemeProvider>
-            <NavbarStyleCentered brandName="Luminé Skincare" navItems={[{ name: "Home", id: "/" }, { name: "Lipstick", href: "/lipstick" }, { name: "Foundation", href: "/foundation" }, { name: "Eyeshadow", href: "/eyeshadow" }, { name: "Skincare", href: "/skincare" }]} />
+        <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>
-            <FooterBaseCard logoText="Luminé" columns={[]} />
+            <div id="footer" data-section="footer">
+                <FooterBaseCard logoText="Luminé" columns={[]} />
+            </div>
        </ThemeProvider>
    );
 }