Update src/app/page.tsx

src/app/cart/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+
+export default function CartPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="small"
+            sizing="largeSmallSizeLargeTitles"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="solid"
+            headingFontWeight="extrabold"
+        >
+            <NavbarStyleCentered
+                brandName="Luminé Skincare"
+                navItems={[
+                    { name: "Products", id: "/" },
+                    { name: "About", id: "/" },
+                    { name: "Benefits", id: "/" },
+                    { name: "Cart", id: "/cart" },
+                    { name: "Checkout", id: "/checkout" }
+                ]}
+            />
+            <main className="container mx-auto py-20">
+                <h1 className="text-4xl font-bold mb-8">Your Shopping Cart</h1>
+                <div className="grid gap-8">
+                    <div className="p-8 bg-card rounded-lg border">Your cart is currently empty.</div>
+                </div>
+            </main>
+        </ThemeProvider>
+    );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+
+export default function CheckoutPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="small"
+            sizing="largeSmallSizeLargeTitles"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="solid"
+            headingFontWeight="extrabold"
+        >
+            <NavbarStyleCentered
+                brandName="Luminé Skincare"
+                navItems={[
+                    { name: "Products", id: "/" },
+                    { name: "About", id: "/" },
+                    { name: "Benefits", id: "/" },
+                    { name: "Cart", id: "/cart" },
+                    { name: "Checkout", id: "/checkout" }
+                ]}
+            />
+            <main className="container mx-auto py-20">
+                <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+                    <div className="p-8 bg-card rounded-lg border">
+                        <h2 className="text-2xl mb-4 font-semibold">Shipping Information</h2>
+                        <div className="space-y-4">
+                            <input type="text" placeholder="Full Name" className="w-full p-3 border rounded" />
+                            <input type="email" placeholder="Email Address" className="w-full p-3 border rounded" />
+                        </div>
+                    </div>
+                    <div className="p-8 bg-card rounded-lg border">
+                        <h2 className="text-2xl mb-4 font-semibold">Order Summary</h2>
+                        <div className="border-t pt-4 mt-4">
+                            <p className="text-lg font-bold">Total: $0.00</p>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </ThemeProvider>
+    );
+}

src/app/login/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function LoginPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="small"
+            sizing="largeSmallSizeLargeTitles"
+            background="aurora"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="solid"
+            headingFontWeight="extrabold"
+        >
+            <NavbarStyleCentered
+                brandName="Luminé Skincare"
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Login", id: "/login" },
+                    { name: "Contact", id: "/#contact" }
+                ]}
+            />
+            <div className="pt-32 pb-20">
+                <ContactSplitForm
+                    title="Welcome Back"
+                    description="Login to your account to manage your orders, preferences, and saved items."
+                    inputs={[
+                        { name: "email", type: "email", placeholder: "Email Address", required: true },
+                        { name: "password", type: "password", placeholder: "Password", required: true }
+                    ]}
+                    buttonText="Login"
+                    useInvertedBackground={false}
+                    onSubmit={(data) => console.log("Login data:", data)}
+                />
+            </div>
+            <FooterBaseCard
+                logoText="Luminé"
+                columns={[]}
+            />
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -6,11 +6,8 @@ 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 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";
+import { Camera } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -31,12 +28,13 @@ export default function SkincareTemplatePage() {
                     brandName="Luminé Skincare"
                     navItems={[
                         { name: "Products", id: "products" },
-                        { name: "About", id: "about" },
-                        { name: "Benefits", id: "benefits" },
-                        { name: "Reviews", id: "reviews" },
-                        { name: "Contact", id: "contact" }
+                        { name: "New", id: "new-arrivals" },
+                        { name: "Best Sellers", id: "best-sellers" },
+                        { name: "Trending", id: "trending" },
+                        { name: "Gallery", id: "gallery" },
+                        { name: "About", id: "about" }
                     ]}
-                    button={{ text: "Shop Now", href: "products" }}
+                    button={{ text: "Shop Now", href: "#products" }}
                 />
             </div>
 
@@ -44,60 +42,22 @@ 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: "sparkles-gradient" }}
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
-                    imageAlt="Luxury skincare products with natural ingredients"
-                    frameStyle="card"
                     buttons={[
                         { text: "Shop Now", href: "#products" },
                         { text: "Learn More", href: "#about" }
                     ]}
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
+                    imageAlt="Luxury skincare products with natural ingredients"
                     mediaAnimation="slide-up"
+                    background={{ variant: "glowing-orb" }}
                 />
             </div>
 
-            <div id="about" data-section="about">
-                <InlineImageSplitTextAbout
-                    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={[
-                        { text: "Learn More", href: "#benefits" }
-                    ]}
-                />
-            </div>
-
-            <div id="products" data-section="products">
+            <div id="new-arrivals" data-section="new-arrivals">
                 <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",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp",
-                            imageAlt: "Hydrating Moisturizer bottle"
-                        },
-                        {
-                            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"
-                        },
-                        {
-                            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"
-                        }
-                    ]}
+                    title="New Arrivals"
+                    description="Explore our latest additions to the Luminé collection."
+                    products={[]}
                     gridVariant="three-columns-all-equal-width"
                     animationType="slide-up"
                     textboxLayout="default"
@@ -105,151 +65,57 @@ export default function SkincareTemplatePage() {
                 />
             </div>
 
-            <div id="benefits" data-section="benefits">
+            <div id="best-sellers" data-section="best-sellers">
+                <ProductCardOne
+                    title="Best Sellers"
+                    description="Our community's most loved skincare essentials."
+                    products={[]}
+                    gridVariant="three-columns-all-equal-width"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+
+            <div id="trending" data-section="trending">
+                <ProductCardOne
+                    title="Trending Now"
+                    description="Top products currently making waves."
+                    products={[]}
+                    gridVariant="three-columns-all-equal-width"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+
+            <div id="gallery" data-section="gallery">
                 <FeatureBento
-                    title="Why Choose Luminé"
-                    description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
+                    title="Luminé Moments"
+                    description="Follow our journey and tag us on Instagram."
                     features={[
-                        {
-                            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 }
-                            ]
-                        }
+                        { title: "View Gallery", description: "See our products in action", bentoComponent: "reveal-icon", icon: Camera }
                     ]}
                     animationType="slide-up"
                     textboxLayout="default"
-                    useInvertedBackground={true}
-                />
-            </div>
-
-            <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. 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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "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" }
-                    ]}
-                    ratingAnimation="slide-up"
-                    avatarsAnimation="slide-up"
                     useInvertedBackground={false}
                 />
             </div>
 
-            <div id="faq" data-section="faq">
-                <FaqSplitMedia
-                    title="Frequently Asked Questions"
-                    description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
-                    faqs={[
-                        {
-                            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."
-                        }
-                    ]}
-                    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"
+            <div id="about" data-section="about">
+                <InlineImageSplitTextAbout
+                    heading={[{ type: "text", content: "Crafted with care and precision using nature's finest elements." }]}
                     useInvertedBackground={true}
-                    animationType="smooth"
-                />
-            </div>
-
-            <div id="contact" data-section="contact">
-                <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">
                 <FooterBaseCard
                     logoText="Luminé"
-                    columns={[
-                        {
-                            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: "#" }
-                            ]
-                        }
-                    ]}
+                    columns={[]}
                     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;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #251919;
+  --primary-cta: #1b0c0c;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f0e8e8;
   --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --accent: #e8a8a8;
+  --background-accent: #f7dada;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);