src/app/about/page.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+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 FeatureBento from '@/components/sections/feature/FeatureBento';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Award, Shield, Lock, CheckCircle, Globe, Heart } from 'lucide-react';
+
+export default function AboutPage() {
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Benefits", id: "features" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="About Lumière Skincare"
+          description="Dedicated to revolutionizing skincare through science-backed formulations and unwavering commitment to security, transparency, and your skin's wellbeing."
+          buttons={[
+            { text: "Explore Our Values", href: "#features" },
+            { text: "Back to Shop", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/different-natural-self-care-products-composition_23-2148989967.jpg"
+          imageAlt="Lumière Skincare team and laboratory"
+          mediaAnimation="blur-reveal"
+          frameStyle="card"
+          ariaLabel="About page hero section - Lumière mission and values"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "Security First, Beauty Second" }
+          ]}
+          buttons={[
+            { text: "Learn About Our Security", href: "#features" }
+          ]}
+          buttonAnimation="slide-up"
+          useInvertedBackground={false}
+          ariaLabel="About section - Our security-focused philosophy"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureBento
+          title="Our Core Values & Security Commitment"
+          description="We prioritize your trust through transparent practices, rigorous security measures, and unwavering commitment to product integrity and data protection."
+          tag="Security & Trust"
+          tagIcon={Shield}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          buttons={[
+            { text: "View Security Details", href: "#" }
+          ]}
+          buttonAnimation="slide-up"
+          features={[
+            {
+              title: "Data Protection & Privacy",              description: "Your personal information is encrypted and protected with enterprise-grade security protocols.",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Lock, label: "Encryption", value: "Military-Grade" },
+                { icon: Shield, label: "Compliance", value: "GDPR/CCPA" },
+                { icon: CheckCircle, label: "Audits", value: "Annual" }
+              ]
+            },
+            {
+              title: "Transparent Sourcing",              description: "Every ingredient is traceable, tested, and verified for purity and safety.",              bentoComponent: "reveal-icon",              icon: Globe
+            },
+            {
+              title: "Certified & Trusted",              description: "Rigorous third-party testing ensures every product meets the highest safety standards.",              bentoComponent: "reveal-icon",              icon: Award
+            },
+            {
+              title: "Customer Trust",              description: "Your satisfaction and security are our top priorities. We stand behind every product with a 60-day guarantee.",              bentoComponent: "reveal-icon",              icon: Heart
+            }
+          ]}
+          ariaLabel="Features section - Security and core values"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/" },
+                { label: "Serums", href: "/" },
+                { label: "Moisturizers", href: "/" },
+                { label: "Masks", href: "/" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Our Story", href: "/about" },
+                { label: "Sustainability", href: "/about" },
+                { label: "Careers", href: "/" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/contact" },
+                { label: "FAQ", href: "/" },
+                { label: "Shipping Info", href: "/" },
+                { label: "Returns", href: "/" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "/" },
+                { label: "Terms of Service", href: "/" },
+                { label: "Cookie Policy", href: "/" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import { ShoppingCart, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState([
+    {
+      id: "serum-01",      name: "Radiant Serum",      price: "$65",      rating: 5,
+      imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg",      imageAlt: "Radiant Serum - vitamin-infused brightening serum"
+    },
+    {
+      id: "moisturizer-01",      name: "Hydration Cream",      price: "$58",      rating: 5,
+      imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg",      imageAlt: "Hydration Cream - luxurious moisturizing cream"
+    }
+  ]);
+
+  const handleRemoveItem = (itemId: string) => {
+    setCartItems(cartItems.filter(item => item.id !== itemId));
+  };
+
+  const cartTotal = cartItems.reduce((total, item) => {
+    const price = parseFloat(item.price.replace('$', ''));
+    return total + price;
+  }, 0);
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Benefits", id: "features" },
+            { name: "Contact", id: "contact" },
+            { name: "Cart", id: "cart" },
+            { name: "Login", id: "login" }
+          ]}
+          button={{ text: "Checkout", href: "/checkout" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Shopping Cart"
+          description="Review your selected products and proceed to checkout when ready."
+          imageSrc="http://img.b2bpic.net/free-photo/shopping-bags-on-white-background_23-2147898507.jpg"
+          imageAlt="Shopping cart checkout"
+          showDimOverlay={true}
+          showBlur={true}
+          ariaLabel="Cart page - Review your items"
+        />
+      </div>
+
+      <div id="cart-content" data-section="cart-content" className="min-h-screen bg-gradient-to-b from-background via-background to-card py-20">
+        <div className="max-w-6xl mx-auto px-4 md:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Cart Items */}
+            <div className="lg:col-span-2">
+              <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8">
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
+                  <ShoppingCart className="w-6 h-6" />
+                  Cart Items ({cartItems.length})
+                </h2>
+
+                {cartItems.length === 0 ? (
+                  <p className="text-foreground/60 py-8 text-center">Your cart is empty. Continue shopping to add items.</p>
+                ) : (
+                  <div className="space-y-4">
+                    {cartItems.map((item) => (
+                      <div key={item.id} className="flex items-center gap-4 p-4 bg-background/50 rounded-lg border border-background-accent/20 hover:border-primary-cta/30 transition-colors">
+                        <img src={item.imageSrc} alt={item.imageAlt} className="w-20 h-20 rounded object-cover" />
+                        <div className="flex-1">
+                          <h3 className="font-semibold text-foreground">{item.name}</h3>
+                          <p className="text-primary-cta font-bold">{item.price}</p>
+                        </div>
+                        <button
+                          onClick={() => handleRemoveItem(item.id)}
+                          className="p-2 hover:bg-red-500/20 rounded-lg transition-colors text-red-500"
+                          aria-label={`Remove ${item.name} from cart`}
+                        >
+                          <Trash2 className="w-5 h-5" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Order Summary */}
+            <div className="lg:col-span-1">
+              <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8 sticky top-20">
+                <h2 className="text-xl font-bold mb-6">Order Summary</h2>
+                <div className="space-y-3 mb-6 pb-6 border-b border-background-accent/20">
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Subtotal</span>
+                    <span>${cartTotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Shipping</span>
+                    <span>Free</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Tax</span>
+                    <span>${(cartTotal * 0.1).toFixed(2)}</span>
+                  </div>
+                </div>
+                <div className="flex justify-between text-lg font-bold mb-6">
+                  <span>Total</span>
+                  <span className="text-primary-cta">${(cartTotal + cartTotal * 0.1).toFixed(2)}</span>
+                </div>
+                <a
+                  href="/checkout"
+                  className="block w-full bg-primary-cta text-background font-semibold py-3 rounded-lg text-center hover:opacity-90 transition-opacity"
+                >
+                  Proceed to Checkout
+                </a>
+                <a
+                  href="/#products"
+                  className="block w-full mt-3 border border-primary-cta text-primary-cta font-semibold py-3 rounded-lg text-center hover:bg-primary-cta/5 transition-colors"
+                >
+                  Continue Shopping
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/#products" },
+                { label: "Serums", href: "#" },
+                { label: "Moisturizers", href: "#" },
+                { label: "Masks", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Our Story", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/#contact" },
+                { label: "FAQ", href: "/#faq" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Returns", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Input from '@/components/form/Input';
+import { CreditCard, Lock } from 'lucide-react';
+import { useState } from 'react';
+
+export default function CheckoutPage() {
+  const [formData, setFormData] = useState({
+    email: '',
+    firstName: '',
+    lastName: '',
+    address: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    cardNumber: '',
+    cardExpiry: '',
+    cardCVC: ''
+  });
+
+  const cartTotal = 123.00; // Example total from cart
+  const tax = cartTotal * 0.1;
+  const finalTotal = cartTotal + tax;
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle payment processing
+    alert('Order placed successfully!');
+  };
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Benefits", id: "features" },
+            { name: "Contact", id: "contact" },
+            { name: "Cart", id: "cart" },
+            { name: "Login", id: "login" }
+          ]}
+          button={{ text: "Return to Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Secure Checkout"
+          description="Complete your purchase with our secure payment process."
+          imageSrc="http://img.b2bpic.net/free-photo/e-commerce-concept-with-shopping-bags_23-2147898789.jpg"
+          imageAlt="Secure checkout process"
+          showDimOverlay={true}
+          showBlur={true}
+          ariaLabel="Checkout page - Secure payment"
+        />
+      </div>
+
+      <div id="checkout-content" data-section="checkout-content" className="min-h-screen bg-gradient-to-b from-background via-background to-card py-20">
+        <div className="max-w-6xl mx-auto px-4 md:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Checkout Form */}
+            <div className="lg:col-span-2">
+              <form onSubmit={handleSubmit} className="space-y-8">
+                {/* Shipping Information */}
+                <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8">
+                  <h2 className="text-xl font-bold mb-6">Shipping Information</h2>
+                  <div className="space-y-4">
+                    <Input
+                      value={formData.email}
+                      onChange={(value) => handleInputChange('email', value)}
+                      type="email"
+                      placeholder="Email address"
+                      required
+                    />
+                    <div className="grid grid-cols-2 gap-4">
+                      <Input
+                        value={formData.firstName}
+                        onChange={(value) => handleInputChange('firstName', value)}
+                        type="text"
+                        placeholder="First Name"
+                        required
+                      />
+                      <Input
+                        value={formData.lastName}
+                        onChange={(value) => handleInputChange('lastName', value)}
+                        type="text"
+                        placeholder="Last Name"
+                        required
+                      />
+                    </div>
+                    <Input
+                      value={formData.address}
+                      onChange={(value) => handleInputChange('address', value)}
+                      type="text"
+                      placeholder="Street Address"
+                      required
+                    />
+                    <div className="grid grid-cols-2 gap-4">
+                      <Input
+                        value={formData.city}
+                        onChange={(value) => handleInputChange('city', value)}
+                        type="text"
+                        placeholder="City"
+                        required
+                      />
+                      <Input
+                        value={formData.state}
+                        onChange={(value) => handleInputChange('state', value)}
+                        type="text"
+                        placeholder="State"
+                        required
+                      />
+                    </div>
+                    <Input
+                      value={formData.zipCode}
+                      onChange={(value) => handleInputChange('zipCode', value)}
+                      type="text"
+                      placeholder="ZIP Code"
+                      required
+                    />
+                  </div>
+                </div>
+
+                {/* Payment Information */}
+                <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8">
+                  <div className="flex items-center gap-2 mb-6">
+                    <Lock className="w-5 h-5 text-primary-cta" />
+                    <h2 className="text-xl font-bold">Payment Information</h2>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-3 p-3 bg-primary-cta/10 rounded-lg border border-primary-cta/20">
+                      <CreditCard className="w-5 h-5 text-primary-cta" />
+                      <span className="text-sm text-foreground/80">Your payment is secure and encrypted</span>
+                    </div>
+                    <Input
+                      value={formData.cardNumber}
+                      onChange={(value) => handleInputChange('cardNumber', value)}
+                      type="text"
+                      placeholder="Card Number"
+                      required
+                    />
+                    <div className="grid grid-cols-2 gap-4">
+                      <Input
+                        value={formData.cardExpiry}
+                        onChange={(value) => handleInputChange('cardExpiry', value)}
+                        type="text"
+                        placeholder="MM/YY"
+                        required
+                      />
+                      <Input
+                        value={formData.cardCVC}
+                        onChange={(value) => handleInputChange('cardCVC', value)}
+                        type="text"
+                        placeholder="CVC"
+                        required
+                      />
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+
+            {/* Order Summary */}
+            <div className="lg:col-span-1">
+              <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8 sticky top-20">
+                <h2 className="text-xl font-bold mb-6">Order Summary</h2>
+                
+                <div className="space-y-3 mb-6 pb-6 border-b border-background-accent/20">
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Subtotal</span>
+                    <span>${cartTotal.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Shipping</span>
+                    <span>Free</span>
+                  </div>
+                  <div className="flex justify-between text-foreground/80">
+                    <span>Tax</span>
+                    <span>${tax.toFixed(2)}</span>
+                  </div>
+                </div>
+
+                <div className="flex justify-between text-lg font-bold mb-6">
+                  <span>Total</span>
+                  <span className="text-primary-cta">${finalTotal.toFixed(2)}</span>
+                </div>
+
+                <button
+                  onClick={handleSubmit}
+                  className="w-full bg-primary-cta text-background font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  Complete Purchase
+                </button>
+
+                <p className="text-xs text-foreground/60 text-center mt-4">
+                  By completing your purchase, you agree to our Terms of Service and Privacy Policy.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/#products" },
+                { label: "Serums", href: "#" },
+                { label: "Moisturizers", href: "#" },
+                { label: "Masks", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Our Story", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/#contact" },
+                { label: "FAQ", href: "/#faq" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Returns", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+const cartTotal = 123.00;

src/app/contact/page.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail } from 'lucide-react';
+import { useState } from 'react';
+
+export default function ContactPage() {
+  const [formSubmitted, setFormSubmitted] = useState(false);
+
+  const handleContactSubmit = (data: Record<string, string>) => {
+    console.log('Contact form submitted:', data);
+    setFormSubmitted(true);
+    setTimeout(() => setFormSubmitted(false), 3000);
+  };
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Benefits", id: "features" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="Contact Lumière Skincare"
+          description="Have questions about our products or security practices? Our dedicated support team is here to assist you with fast, secure responses."
+          buttons={[
+            { text: "Send a Message", href: "#contact" },
+            { text: "Back to Shop", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/customer-support-concept-with-young-man-headset_23-2147689330.jpg"
+          imageAlt="Lumière customer support team"
+          mediaAnimation="blur-reveal"
+          frameStyle="card"
+          ariaLabel="Contact page hero section - Reach out to Lumière"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We prioritize your privacy and security. All communication is encrypted and handled according to our strict data protection standards. Expect a response within 24-48 hours."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
+            },
+            {
+              name: "email",              type: "email",              placeholder: "Your Email Address",              required: true
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Phone Number (Optional)",              required: false
+            },
+            {
+              name: "subject",              type: "text",              placeholder: "Subject of Inquiry",              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Please share your message, question, or feedback. For security concerns, please mark as 'SECURITY' in the subject line.",            rows: 6,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-secured-padlock-with-digital-background_23-2149198355.jpg"
+          imageAlt="Secure communication with Lumière"
+          mediaAnimation="blur-reveal"
+          mediaPosition="right"
+          buttonText="Send Message"
+          onSubmit={handleContactSubmit}
+          ariaLabel="Contact form - Secure messaging"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/" },
+                { label: "Serums", href: "/" },
+                { label: "Moisturizers", href: "/" },
+                { label: "Masks", href: "/" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Our Story", href: "/about" },
+                { label: "Sustainability", href: "/about" },
+                { label: "Careers", href: "/" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/contact" },
+                { label: "FAQ", href: "/" },
+                { label: "Shipping Info", href: "/" },
+                { label: "Returns", href: "/" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "/" },
+                { label: "Terms of Service", href: "/" },
+                { label: "Cookie Policy", href: "/" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,344 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Input from '@/components/form/Input';
+import { User, Lock, Mail, LogOut, Settings } from 'lucide-react';
+import { useState } from 'react';
+
+export default function LoginPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [loginMode, setLoginMode] = useState<'login' | 'register'>('login');
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    fullName: ''
+  });
+
+  const [userProfile, setUserProfile] = useState({
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    joinDate: 'January 2024'
+  });
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (loginMode === 'login' && formData.email && formData.password) {
+      setIsLoggedIn(true);
+      setFormData({ email: '', password: '', confirmPassword: '', fullName: '' });
+    } else if (loginMode === 'register' && formData.email && formData.password && formData.fullName) {
+      setIsLoggedIn(true);
+      setUserProfile({
+        name: formData.fullName,
+        email: formData.email,
+        joinDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long' })
+      });
+      setFormData({ email: '', password: '', confirmPassword: '', fullName: '' });
+    }
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setLoginMode('login');
+  };
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Benefits", id: "features" },
+            { name: "Contact", id: "contact" },
+            { name: "Cart", id: "cart" },
+            { name: "Login", id: "login" }
+          ]}
+          button={{ text: "Shop", href: "/#products" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title={isLoggedIn ? "Account Management" : "Sign In to Your Account"}
+          description={isLoggedIn ? "Manage your profile and track your orders" : "Access your Lumière Skincare account"}
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-happy-woman-standing-kitchen-bathrobe-posing-smiling-camera_1258-197946.jpg"
+          imageAlt="User account"
+          showDimOverlay={true}
+          showBlur={true}
+          ariaLabel="Login page"
+        />
+      </div>
+
+      <div id="auth-content" data-section="auth-content" className="min-h-screen bg-gradient-to-b from-background via-background to-card py-20">
+        <div className="max-w-2xl mx-auto px-4 md:px-8">
+          {!isLoggedIn ? (
+            // Login / Register Form
+            <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8">
+              <div className="flex gap-4 mb-8">
+                <button
+                  onClick={() => setLoginMode('login')}
+                  className={`flex-1 py-2 px-4 rounded-lg font-semibold transition-all ${
+                    loginMode === 'login'
+                      ? 'bg-primary-cta text-background'
+                      : 'bg-background/50 text-foreground hover:bg-background'
+                  }`}
+                >
+                  Sign In
+                </button>
+                <button
+                  onClick={() => setLoginMode('register')}
+                  className={`flex-1 py-2 px-4 rounded-lg font-semibold transition-all ${
+                    loginMode === 'register'
+                      ? 'bg-primary-cta text-background'
+                      : 'bg-background/50 text-foreground hover:bg-background'
+                  }`}
+                >
+                  Create Account
+                </button>
+              </div>
+
+              <form onSubmit={handleLogin} className="space-y-4">
+                {loginMode === 'register' && (
+                  <Input
+                    value={formData.fullName}
+                    onChange={(value) => handleInputChange('fullName', value)}
+                    type="text"
+                    placeholder="Full Name"
+                    required
+                  />
+                )}
+
+                <div className="relative">
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-primary-cta/50" />
+                  <Input
+                    value={formData.email}
+                    onChange={(value) => handleInputChange('email', value)}
+                    type="email"
+                    placeholder="Email Address"
+                    required
+                  />
+                </div>
+
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-primary-cta/50" />
+                  <Input
+                    value={formData.password}
+                    onChange={(value) => handleInputChange('password', value)}
+                    type="password"
+                    placeholder="Password"
+                    required
+                  />
+                </div>
+
+                {loginMode === 'register' && (
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3 w-5 h-5 text-primary-cta/50" />
+                    <Input
+                      value={formData.confirmPassword}
+                      onChange={(value) => handleInputChange('confirmPassword', value)}
+                      type="password"
+                      placeholder="Confirm Password"
+                      required
+                    />
+                  </div>
+                )}
+
+                {loginMode === 'login' && (
+                  <div className="text-right">
+                    <a href="#" className="text-sm text-primary-cta hover:text-primary-cta/80 transition-colors">
+                      Forgot password?
+                    </a>
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  className="w-full bg-primary-cta text-background font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity mt-6"
+                >
+                  {loginMode === 'login' ? 'Sign In' : 'Create Account'}
+                </button>
+              </form>
+
+              <p className="text-center text-foreground/60 text-sm mt-6">
+                {loginMode === 'login'
+                  ? "Don't have an account? "
+                  : "Already have an account? "}
+                <button
+                  onClick={() => setLoginMode(loginMode === 'login' ? 'register' : 'login')}
+                  className="text-primary-cta hover:underline font-semibold"
+                >
+                  {loginMode === 'login' ? 'Create one' : 'Sign in'}
+                </button>
+              </p>
+            </div>
+          ) : (
+            // User Account Dashboard
+            <div className="space-y-6">
+              {/* Profile Card */}
+              <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6 md:p-8">
+                <div className="flex items-start justify-between mb-6">
+                  <div className="flex items-center gap-4">
+                    <div className="w-16 h-16 bg-gradient-to-br from-primary-cta to-secondary-cta rounded-full flex items-center justify-center">
+                      <User className="w-8 h-8 text-background" />
+                    </div>
+                    <div>
+                      <h2 className="text-2xl font-bold text-foreground">{userProfile.name}</h2>
+                      <p className="text-foreground/60">{userProfile.email}</p>
+                      <p className="text-sm text-foreground/50 mt-1">Member since {userProfile.joinDate}</p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => setIsLoggedIn(false)}
+                    className="flex items-center gap-2 px-4 py-2 bg-red-500/20 text-red-500 rounded-lg hover:bg-red-500/30 transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Logout
+                  </button>
+                </div>
+              </div>
+
+              {/* Account Sections */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Orders Section */}
+                <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6">
+                  <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
+                    <ShoppingBag className="w-5 h-5 text-primary-cta" />
+                    Recent Orders
+                  </h3>
+                  <div className="space-y-3">
+                    <div className="p-3 bg-background/50 rounded-lg border border-background-accent/20">
+                      <div className="flex justify-between items-center">
+                        <span className="font-semibold">Order #12345</span>
+                        <span className="text-sm text-green-500 font-semibold">Delivered</span>
+                      </div>
+                      <p className="text-sm text-foreground/60 mt-1">3 products - $123.00</p>
+                    </div>
+                    <div className="p-3 bg-background/50 rounded-lg border border-background-accent/20">
+                      <div className="flex justify-between items-center">
+                        <span className="font-semibold">Order #12344</span>
+                        <span className="text-sm text-blue-500 font-semibold">Processing</span>
+                      </div>
+                      <p className="text-sm text-foreground/60 mt-1">2 products - $98.00</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Account Settings Section */}
+                <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6">
+                  <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
+                    <Settings className="w-5 h-5 text-primary-cta" />
+                    Account Settings
+                  </h3>
+                  <div className="space-y-3">
+                    <button className="w-full p-3 bg-background/50 rounded-lg border border-background-accent/20 hover:border-primary-cta/30 transition-colors text-left">
+                      <p className="font-semibold text-foreground">Update Profile</p>
+                      <p className="text-sm text-foreground/60">Edit your personal information</p>
+                    </button>
+                    <button className="w-full p-3 bg-background/50 rounded-lg border border-background-accent/20 hover:border-primary-cta/30 transition-colors text-left">
+                      <p className="font-semibold text-foreground">Change Password</p>
+                      <p className="text-sm text-foreground/60">Update your security settings</p>
+                    </button>
+                    <button className="w-full p-3 bg-background/50 rounded-lg border border-background-accent/20 hover:border-primary-cta/30 transition-colors text-left">
+                      <p className="font-semibold text-foreground">Manage Addresses</p>
+                      <p className="text-sm text-foreground/60">View and edit saved addresses</p>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Preferences Section */}
+              <div className="bg-card/50 backdrop-blur-sm rounded-lg border border-primary-cta/10 p-6">
+                <h3 className="text-lg font-bold mb-4">Email Preferences</h3>
+                <div className="space-y-3">
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="w-4 h-4 rounded" />
+                    <span className="text-foreground">Receive product updates and new releases</span>
+                  </label>
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <input type="checkbox" defaultChecked className="w-4 h-4 rounded" />
+                    <span className="text-foreground">Receive special offers and promotions</span>
+                  </label>
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <input type="checkbox" className="w-4 h-4 rounded" />
+                    <span className="text-foreground">Receive skincare tips and advice</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/#products" },
+                { label: "Serums", href: "#" },
+                { label: "Moisturizers", href: "#" },
+                { label: "Masks", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Our Story", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/#contact" },
+                { label: "FAQ", href: "/#faq" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Returns", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+// Shopping Bag Icon (not from lucide-react, need to create)
+const ShoppingBag = ({ className }: { className: string }) => (
+  <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+  </svg>
+);

src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Award, CheckCircle, Droplets, Heart, HelpCircle, Leaf, Sparkles, Zap } from 'lucide-react';
+import { Award, CheckCircle, Droplets, Heart, HelpCircle, Leaf, Sparkles, Zap, Shield, Lock, AlertCircle, Eye } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -42,7 +42,7 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroLogoBillboard
           logoText="Lumière Skincare"
-          description="Discover the transformative power of nature's finest ingredients. Our premium skincare collection harnesses the essence of botanical wisdom to reveal your most radiant, luminous skin."
+          description="Discover the transformative power of nature's finest ingredients, backed by rigorous safety testing and dermatological expertise. Our premium skincare collection harnesses the essence of botanical wisdom to reveal your most radiant, luminous skin—with your health as our priority."
           buttons={[
             { text: "Explore Collection", href: "#products" },
             { text: "Learn More", href: "#about" }
@@ -59,7 +59,7 @@ export default function LandingPage() {
 
       <div id="about" data-section="about">
         <InlineImageSplitTextAbout
-          heading={[{ type: "text", content: "Crafted for Your Skin's Natural Beauty" }]}
+          heading={[{ type: "text", content: "Crafted for Your Skin's Natural Beauty—Safely Formulated, Dermatologist-Tested" }]}
           buttons={[{ text: "Discover Our Story", href: "#" }]}
           buttonAnimation="slide-up"
           useInvertedBackground={false}
@@ -70,9 +70,9 @@ export default function LandingPage() {
       <div id="products" data-section="products">
         <ProductCardOne
           title="Our Signature Collection"
-          description="Each product is meticulously formulated with pure, natural ingredients to deliver visible results. From hydrating serums to nourishing moisturizers, our range addresses every skin concern."
-          tag="Premium Ingredients"
-          tagIcon={Sparkles}
+          description="Each of our 8 signature products is meticulously formulated with pure, natural ingredients and rigorously safety-tested. From hydrating serums to nourishing moisturizers, our range addresses every skin concern with professional-grade efficacy and transparent ingredient sourcing."
+          tag="Clinically Tested & Safe"
+          tagIcon={Shield}
           tagAnimation="slide-up"
           products={[
             {
@@ -83,24 +83,39 @@ export default function LandingPage() {
             },
             {
               id: "mask-01",              name: "Renewal Mask",              price: "$48",              imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg",              imageAlt: "Renewal Mask - detoxifying treatment mask"
+            },
+            {
+              id: "oil-01",              name: "Luminous Oil",              price: "$72",              imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg",              imageAlt: "Luminous Oil - premium facial treatment oil"
+            },
+            {
+              id: "cleanser-01",              name: "Gentle Cleanser",              price: "$42",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg",              imageAlt: "Gentle Cleanser - purifying botanical cleanser"
+            },
+            {
+              id: "toner-01",              name: "Balance Toner",              price: "$52",              imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg",              imageAlt: "Balance Toner - pH-balancing hydrating toner"
+            },
+            {
+              id: "eye-cream-01",              name: "Eye Contour Cream",              price: "$68",              imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg",              imageAlt: "Eye Contour Cream - specialized eye area treatment"
+            },
+            {
+              id: "sunscreen-01",              name: "UV Protective Shield",              price: "$55",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg",              imageAlt: "UV Protective Shield - mineral sunscreen SPF 50"
             }
           ]}
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           buttons={[{ text: "Shop All Products", href: "#" }]}
           buttonAnimation="slide-up"
-          ariaLabel="Product showcase - Lumière skincare collection"
+          ariaLabel="Product showcase - Lumière skincare collection with 8 featured products"
         />
       </div>
 
       <div id="features" data-section="features">
         <FeatureBento
           title="Why Choose Lumière"
-          description="Our commitment to excellence means every product is formulated with science-backed ingredients and sustainable practices."
-          tag="Benefits"
-          tagIcon={Award}
+          description="Our commitment to excellence means every product is formulated with science-backed ingredients, security-verified sourcing, and sustainable practices. We prioritize your safety with rigorous testing and transparent formulation standards."
+          tag="Security & Safety"
+          tagIcon={Lock}
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -109,26 +124,29 @@ export default function LandingPage() {
           buttonAnimation="slide-up"
           features={[
             {
-              title: "Pure Hydration",              description: "Deeply moisturizing formulas that restore skin's natural water balance.",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Droplets, label: "Hydration Level", value: "98%" },
-                { icon: Leaf, label: "Natural Ingredients", value: "100%" },
-                { icon: Zap, label: "Fast Acting", value: "24hrs" }
+              title: "Verified Safety Standards",              description: "Every formulation undergoes rigorous dermatological testing and third-party security verification to ensure the highest safety standards.",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Shield, label: "Safety Certified", value: "100%" },
+                { icon: Lock, label: "Verified Source", value: "100%" },
+                { icon: CheckCircle, label: "Lab Tested", value: "99.9%" }
               ]
             },
             {
-              title: "Natural Ingredients",              description: "Sourced from the world's finest botanical sources.",              bentoComponent: "reveal-icon",              icon: Leaf
+              title: "Pure Hydration",              description: "Deeply moisturizing formulas that restore skin's natural water balance with clinically proven efficacy.",              bentoComponent: "reveal-icon",              icon: Droplets
             },
             {
-              title: "Visible Results",              description: "See transformation in your skin within weeks of consistent use.",              bentoComponent: "reveal-icon",              icon: CheckCircle
+              title: "Natural Ingredients",              description: "Sourced from the world's finest botanical sources with transparent supply chain verification.",              bentoComponent: "reveal-icon",              icon: Leaf
+            },
+            {
+              title: "Visible Results",              description: "See transformation in your skin within weeks of consistent use, backed by clinical studies.",              bentoComponent: "reveal-icon",              icon: CheckCircle
             }
           ]}
-          ariaLabel="Features section - Why Lumière skincare stands out"
+          ariaLabel="Features section - Why Lumière skincare stands out with security focus"
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen
-          testimonial="Lumière products transformed my skin completely. My complexion is clearer, more radiant, and I feel confident in my own skin again."
+          testimonial="Lumière products transformed my skin completely. My complexion is clearer, more radiant, and I feel confident in my own skin again. I trust their safety standards and ingredient transparency—it shows in the results."
           rating={5}
           author="Sarah"
           avatars={[
@@ -147,9 +165,9 @@ export default function LandingPage() {
       <div id="faq" data-section="faq">
         <FaqSplitMedia
           title="Frequently Asked Questions"
-          description="Everything you need to know about Lumière skincare products and our commitment to your skin's health."
-          tag="Support"
-          tagIcon={HelpCircle}
+          description="Everything you need to know about Lumière skincare products, our rigorous safety standards, ingredient transparency, and commitment to your skin's health and security."
+          tag="Support & Security"
+          tagIcon={Eye}
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -160,25 +178,31 @@ export default function LandingPage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "faq-01",              title: "How often should I use these products?",              content: "Most of our products are designed for daily use. We recommend using our serum and moisturizer twice daily - morning and night - for optimal results. Our masks can be used 2-3 times weekly."
+              id: "faq-01",              title: "How are your products safety tested?",              content: "All Lumière products undergo rigorous dermatological testing, allergen screening, and third-party security verification. We maintain complete transparency about our testing protocols and provide detailed safety documentation for every product."
             },
             {
-              id: "faq-02",              title: "Are your products suitable for sensitive skin?",              content: "Yes! All Lumière products are formulated to be gentle and effective. They're free from harsh chemicals, parabens, and synthetic fragrances. However, if you have extremely sensitive skin, we recommend doing a patch test first."
+              id: "faq-02",              title: "Are your ingredients verified and transparently sourced?",              content: "Yes. We maintain a verified supply chain for all botanical ingredients with full traceability documentation. Each ingredient is tested for purity and safety before inclusion in our formulations. We provide complete ingredient transparency on all product labels."
             },
             {
-              id: "faq-03",              title: "What makes Lumière different from other skincare brands?",              content: "We combine cutting-edge skincare science with nature's finest botanical ingredients. Every product is rigorously tested and formulated by dermatologists to deliver visible, long-lasting results."
+              id: "faq-03",              title: "How often should I use these products?",              content: "Most of our products are designed for daily use. We recommend using our serum and moisturizer twice daily - morning and night - for optimal results. Our masks can be used 2-3 times weekly. Each product includes detailed usage instructions for safety."
             },
             {
-              id: "faq-04",              title: "When will I see results?",              content: "Most customers notice improvements in skin hydration within 3-5 days. For more significant transformations like reduced fine lines or improved clarity, allow 4-6 weeks of consistent use."
+              id: "faq-04",              title: "Are your products suitable for sensitive skin?",              content: "Yes! All Lumière products are formulated to be gentle and effective. They're free from harsh chemicals, parabens, and synthetic fragrances. However, if you have extremely sensitive skin, we recommend doing a patch test first. Our customer support team can provide personalized recommendations."
             },
             {
-              id: "faq-05",              title: "Is your packaging eco-friendly?",              content: "Yes, we're committed to sustainability. Our packaging is made from recyclable materials, and we use minimal plastic. We also offer refill options for select products."
+              id: "faq-05",              title: "What makes Lumière different from other skincare brands?",              content: "We combine cutting-edge skincare science with nature's finest botanical ingredients, backed by rigorous safety testing and transparent practices. Every product is formulated by dermatologists and verified for security and efficacy to deliver visible, long-lasting results."
             },
             {
-              id: "faq-06",              title: "Do you offer a satisfaction guarantee?",              content: "Absolutely! We're confident in our products. If you're not completely satisfied within 60 days, we offer a full refund - no questions asked."
+              id: "faq-06",              title: "When will I see results?",              content: "Most customers notice improvements in skin hydration within 3-5 days. For more significant transformations like reduced fine lines or improved clarity, allow 4-6 weeks of consistent use. Our clinical studies document typical timeline expectations."
+            },
+            {
+              id: "faq-07",              title: "Is your packaging eco-friendly and secure?",              content: "Yes, we're committed to sustainability and security. Our packaging is made from recyclable materials with tamper-evident seals to ensure product integrity. We use minimal plastic and offer refill options for select products."
+            },
+            {
+              id: "faq-08",              title: "Do you offer a satisfaction guarantee?",              content: "Absolutely! We're confident in our products. If you're not completely satisfied within 60 days, we offer a full refund with no questions asked. Your trust in our safety and quality standards is our priority."
             }
           ]}
-          ariaLabel="FAQ section - Skincare questions answered"
+          ariaLabel="FAQ section - Skincare questions answered with security focus"
         />
       </div>
 
@@ -186,14 +210,14 @@ export default function LandingPage() {
         <ContactCenter
           tag="Stay Connected"
           title="Join Our Beauty Community"
-          description="Subscribe to receive exclusive skincare tips, new product launches, and special offers delivered directly to your inbox."
+          description="Subscribe to receive exclusive skincare tips, new product launches, verified safety updates, and special offers delivered directly to your inbox. We're committed to keeping you informed about our rigorous standards and innovations."
           tagIcon={Heart}
           tagAnimation="slide-up"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           inputPlaceholder="Enter your email"
           buttonText="Subscribe"
-          termsText="By subscribing, you agree to receive marketing emails from Lumière Skincare. You can unsubscribe at any time."
+          termsText="By subscribing, you agree to receive marketing emails from Lumière Skincare including safety updates and product information. You can unsubscribe at any time. We respect your privacy and comply with all data protection standards."
           ariaLabel="Newsletter signup - Join Lumière community"
         />
       </div>
@@ -214,8 +238,8 @@ export default function LandingPage() {
               title: "Company",              items: [
                 { label: "About Us", href: "#about" },
                 { label: "Our Story", href: "#" },
-                { label: "Sustainability", href: "#" },
-                { label: "Careers", href: "#" }
+                { label: "Safety Standards", href: "#" },
+                { label: "Sustainability", href: "#" }
               ]
             },
             {
@@ -234,10 +258,10 @@ export default function LandingPage() {
               ]
             }
           ]}
-          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          copyrightText="© 2025 Lumière Skincare. All rights reserved. Safety certified and dermatologist-tested."
           ariaLabel="Footer - Site navigation and information"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/product/[id]/page.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Heart, Star, ShoppingCart, Check } from 'lucide-react';
+
+interface ProductDetailProps {
+  params: { id: string };
+}
+
+export default function ProductDetailPage({ params }: ProductDetailProps) {
+  const [quantity, setQuantity] = useState(1);
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [isAddedToCart, setIsAddedToCart] = useState(false);
+
+  const productData: Record<string, any> = {
+    "serum-01": {
+      name: "Radiant Serum",      price: "$65",      rating: 4.8,
+      reviewCount: 245,
+      category: "Serums",      description: "Illuminate your complexion with our vitamin-infused brightening serum. Formulated with natural botanical extracts and powerful antioxidants, this lightweight serum penetrates deep into the skin to reveal a luminous, radiant glow.",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg",      imageAlt: "Radiant Serum bottle on elegant surface",      features: [
+        "98% natural ingredients",        "Brightens dull skin tone",        "Reduces appearance of dark spots",        "Lightweight and fast-absorbing",        "Suitable for all skin types",        "Cruelty-free and vegan"
+      ],
+      usage: "Apply 2-3 drops to clean, dry skin morning and night. Follow with your favorite moisturizer.",      ingredients: "Water, Vitamin C (5%), Jojoba Oil, Aloe Vera Extract, Green Tea Extract, Hyaluronic Acid, Vitamin E"
+    },
+    "moisturizer-01": {
+      name: "Hydration Cream",      price: "$58",      rating: 4.9,
+      reviewCount: 312,
+      category: "Moisturizers",      description: "Experience luxurious hydration with our intensely moisturizing cream. Enriched with botanical oils and nourishing compounds, this rich formula locks in moisture for soft, supple, glowing skin.",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg",      imageAlt: "Hydration Cream jar with natural ingredients",      features: [
+        "Deep hydration for 24 hours",        "Reduces fine lines and wrinkles",        "Rich, luxurious texture",        "Absorbs quickly without greasy residue",        "Hypoallergenic formula",        "Dermatologist tested"
+      ],
+      usage: "Apply a pea-sized amount to clean skin. Massage gently in upward strokes. Use morning and night.",      ingredients: "Shea Butter, Coconut Oil, Rose Hip Oil, Vitamin A, Ceramides, Squalane, Natural Fragrance"
+    },
+    "mask-01": {
+      name: "Renewal Mask",      price: "$48",      rating: 4.7,
+      reviewCount: 189,
+      category: "Masks",      description: "Revitalize your skin with our detoxifying renewal mask. This purifying treatment draws out impurities while infusing the skin with vital nutrients for a clearer, more radiant complexion.",      imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg",      imageAlt: "Renewal Mask applied on face",      features: [
+        "Deep cleansing and detoxifying",        "Reduces pore appearance",        "Improves skin texture",        "Removes dead skin cells",        "Calming and soothing",        "Gentle enough for sensitive skin"
+      ],
+      usage: "Apply thin layer to clean face, avoiding eye area. Leave on for 10-15 minutes. Rinse with warm water.",      ingredients: "Kaolin Clay, Activated Charcoal, Tea Tree Oil, Lavender Extract, Witch Hazel, Aloe Vera"
+    }
+  };
+
+  const product = productData[params.id] || productData["serum-01"];
+
+  const handleAddToCart = () => {
+    setIsAddedToCart(true);
+    setTimeout(() => setIsAddedToCart(false), 2000);
+  };
+
+  const handleFavorite = () => {
+    setIsFavorited(!isFavorited);
+  };
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "Products", id: "/" },
+            { name: "Contact", id: "/" }
+          ]}
+          button={{ text: "Cart", href: "#" }}
+        />
+      </div>
+
+      <div id="product-detail" data-section="product-detail" className="py-20">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            {/* Product Image Section */}
+            <div className="flex items-center justify-center">
+              <img
+                src={product.imageSrc}
+                alt={product.imageAlt}
+                className="w-full h-auto rounded-lg object-cover max-h-96"
+              />
+            </div>
+
+            {/* Product Information Section */}
+            <div className="flex flex-col justify-center space-y-6">
+              {/* Category and Title */}
+              <div>
+                <p className="text-sm font-medium text-opacity-70 mb-2">{product.category}</p>
+                <h1 className="text-4xl font-bold mb-4">{product.name}</h1>
+                <p className="text-lg text-opacity-80">{product.description}</p>
+              </div>
+
+              {/* Rating and Reviews */}
+              <div className="flex items-center space-x-4">
+                <div className="flex items-center space-x-1">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      size={20}
+                      className={i < Math.floor(product.rating) ? "fill-current" : "opacity-30"}
+                    />
+                  ))}
+                </div>
+                <span className="font-semibold">{product.rating}</span>
+                <span className="text-opacity-60">({product.reviewCount} reviews)</span>
+              </div>
+
+              {/* Price */}
+              <div className="border-t border-b py-4">
+                <p className="text-3xl font-bold">{product.price}</p>
+              </div>
+
+              {/* Features List */}
+              <div>
+                <h3 className="font-semibold mb-3">Key Features</h3>
+                <ul className="space-y-2">
+                  {product.features.map((feature: string, idx: number) => (
+                    <li key={idx} className="flex items-center space-x-2">
+                      <Check size={18} className="text-opacity-70" />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Quantity and Add to Cart */}
+              <div className="flex items-center space-x-4">
+                <div className="flex items-center border rounded-lg">
+                  <button
+                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                    className="px-4 py-2 hover:opacity-70"
+                  >
+                    −
+                  </button>
+                  <span className="px-6 py-2 font-semibold border-l border-r">{quantity}</span>
+                  <button
+                    onClick={() => setQuantity(quantity + 1)}
+                    className="px-4 py-2 hover:opacity-70"
+                  >
+                    +
+                  </button>
+                </div>
+                <button
+                  onClick={handleAddToCart}
+                  className="flex-1 bg-opacity-90 hover:bg-opacity-100 px-6 py-3 rounded-lg font-semibold flex items-center justify-center space-x-2 transition-all"
+                >
+                  <ShoppingCart size={20} />
+                  <span>{isAddedToCart ? "Added to Cart!" : "Add to Cart"}</span>
+                </button>
+                <button
+                  onClick={handleFavorite}
+                  className="px-6 py-3 border border-opacity-30 rounded-lg hover:bg-opacity-5 transition-all"
+                >
+                  <Heart
+                    size={20}
+                    className={isFavorited ? "fill-current" : ""}
+                  />
+                </button>
+              </div>
+
+              {/* Usage Instructions */}
+              <div className="space-y-3 border-t pt-6">
+                <h3 className="font-semibold">How to Use</h3>
+                <p className="text-opacity-80">{product.usage}</p>
+              </div>
+
+              {/* Ingredients */}
+              <div className="space-y-3">
+                <h3 className="font-semibold">Key Ingredients</h3>
+                <p className="text-opacity-80">{product.ingredients}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/shop" },
+                { label: "Serums", href: "#" },
+                { label: "Moisturizers", href: "#" },
+                { label: "Masks", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Our Story", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "#" },
+                { label: "FAQ", href: "#" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Returns", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Heart } from 'lucide-react';
+
+export default function ShopPage() {
+  const [searchValue, setSearchValue] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  const [selectedRating, setSelectedRating] = useState("all");
+
+  const allProducts = [
+    {
+      id: "serum-01",      category: "Serums",      name: "Radiant Serum",      price: "$65",      rating: 4.8,
+      reviewCount: "245",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-jojoba-oil-dropper_23-2149022358.jpg",      imageAlt: "Radiant Serum - vitamin-infused brightening serum"
+    },
+    {
+      id: "moisturizer-01",      category: "Moisturizers",      name: "Hydration Cream",      price: "$58",      rating: 4.9,
+      reviewCount: "312",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-cream-leaves-white-background_23-2148241835.jpg",      imageAlt: "Hydration Cream - luxurious moisturizing cream"
+    },
+    {
+      id: "mask-01",      category: "Masks",      name: "Renewal Mask",      price: "$48",      rating: 4.7,
+      reviewCount: "189",      imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-with-creme-face_23-2147817006.jpg",      imageAlt: "Renewal Mask - detoxifying treatment mask"
+    },
+    {
+      id: "cleanser-01",      category: "Cleansers",      name: "Gentle Cleanser",      price: "$35",      rating: 4.6,
+      reviewCount: "156",      imageSrc: "http://img.b2bpic.net/free-photo/skincare-spa-products-white-background_23-2148989970.jpg",      imageAlt: "Gentle Cleanser - mild daily facial cleanser"
+    },
+    {
+      id: "oil-01",      category: "Oils",      name: "Facial Oil Elixir",      price: "$72",      rating: 4.9,
+      reviewCount: "278",      imageSrc: "http://img.b2bpic.net/free-photo/bottle-with-oil-white-background_23-2148989968.jpg",      imageAlt: "Facial Oil Elixir - nourishing botanical oil blend"
+    },
+    {
+      id: "treatment-01",      category: "Treatments",      name: "Night Recovery Cream",      price: "$85",      rating: 5,
+      reviewCount: "334",      imageSrc: "http://img.b2bpic.net/free-photo/cream-jar-white-background_23-2148241838.jpg",      imageAlt: "Night Recovery Cream - intensive overnight treatment"
+    }
+  ];
+
+  const filteredProducts = allProducts.filter(product => {
+    const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase());
+    const matchesCategory = selectedCategory === "all" || product.category === selectedCategory;
+    const matchesRating = selectedRating === "all" || product.rating >= parseFloat(selectedRating);
+    return matchesSearch && matchesCategory && matchesRating;
+  });
+
+  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"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Lumière Skincare"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "Products", id: "/" },
+            { name: "Contact", id: "/" }
+          ]}
+          button={{ text: "Cart", href: "#" }}
+        />
+      </div>
+
+      <div id="shop" data-section="shop" className="py-20">
+        <ProductCatalog
+          layout="page"
+          products={filteredProducts}
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          searchPlaceholder="Search products..."
+          filters={[
+            {
+              label: "Category",              options: ["all", "Serums", "Moisturizers", "Masks", "Cleansers", "Oils", "Treatments"],
+              selected: selectedCategory,
+              onChange: setSelectedCategory
+            },
+            {
+              label: "Rating",              options: ["all", "4.5", "4.7", "4.9"],
+              selected: selectedRating,
+              onChange: setSelectedRating
+            }
+          ]}
+          emptyMessage="No products match your filters. Try adjusting your search."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Lumière Skincare"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/shop" },
+                { label: "Serums", href: "#" },
+                { label: "Moisturizers", href: "#" },
+                { label: "Masks", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Our Story", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "#" },
+                { label: "FAQ", href: "#" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Returns", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Lumière Skincare. All rights reserved."
+          ariaLabel="Footer - Site navigation and information"
+        />
+      </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: #0a1929;
+  --card: #132f4c;
+  --foreground: #e3f2fd;
+  --primary-cta: #00bfff;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a2f4a;
   --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --accent: #1e88e5;
+  --background-accent: #0288d1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);