Update src/app/shop/page.tsx

Merge version_10 into main

src/app/about/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+      <MediaAbout 
+        title="Our Narrative"
+        description="Crafting legacy through minimalist design principles."
+        useInvertedBackground={false}
+        imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=2"
+      />
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+      <ProductCatalog layout="page" products={[]} />
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+      <ContactSplit
+        tag="Inquiries"
+        title="Luxurious Concierge"
+        description="We are at your service for any exclusive request."
+        background={{ variant: "sparkles-gradient" }}
+        useInvertedBackground={true}
+        mediaAnimation="none"
+      />
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+      <ContactForm 
+        title="Welcome Back"
+        description="Sign in to your luxury account."
+        tag="Authentication"
+        buttonText="Sign In"
+        useInvertedBackground={false}
+      />
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,22 +32,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "Products", id: "/products" },
+        { name: "About", id: "/about" },
+        { name: "Login", id: "/login" },
+        { name: "Cart", id: "/cart" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="LUXE"
     />
@@ -56,387 +46,11 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Timeless Elegance, Crafted for You"
       description="Discover our collection of hand-curated pieces that define modern luxury. Simple, refined, and made to last."
-      testimonials={[
-        {
-          name: "Elena R.",
-          handle: "@elena_luxury",
-          testimonial: "The attention to detail in every single piece is incredible. Truly elevated.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-skin-care-cream_23-2148761493.jpg?_wi=1",
-          imageAlt: "luxury lifestyle fashion photography",
-        },
-        {
-          name: "Marcus J.",
-          handle: "@mj_style",
-          testimonial: "Sophisticated designs that fit perfectly into my daily lifestyle.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=1",
-          imageAlt: "luxury lifestyle fashion photography",
-        },
-        {
-          name: "Sarah W.",
-          handle: "@sarah_w",
-          testimonial: "Exceptional quality and a seamless shopping experience.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/round-gold-podium-minimal-pedestal-product-display-background-3d-rendering_56104-1272.jpg?_wi=1",
-          imageAlt: "luxury lifestyle fashion photography",
-        },
-        {
-          name: "David L.",
-          handle: "@david_l",
-          testimonial: "Minimalist at its absolute best. Highly recommend.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beauty-products-flowers_23-2149353144.jpg?_wi=1",
-          imageAlt: "luxury lifestyle fashion photography",
-        },
-        {
-          name: "Chloe B.",
-          handle: "@chloe_b",
-          testimonial: "So soft, so beautiful. The luxury aesthetic is unmatched.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/apple-blue-table-isolated-orange_171337-13161.jpg?_wi=1",
-          imageAlt: "luxury lifestyle fashion photography",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/arrangement-skin-care-cream_23-2148761493.jpg?_wi=2"
-      imageAlt="luxury lifestyle fashion photography"
+      testimonials={[]}
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg",
-          alt: "Abstract minimal kitchen objects",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-floating-concrete-background_23-2150808029.jpg",
-          alt: "Modern round wireless speaker with slick design floating on concrete background",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
-          alt: "Close up on elegant beauty selfcare treatment",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/view-charcoal-different-forms_23-2149654126.jpg",
-          alt: "View of charcoal in different forms",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg",
-          alt: "Close up woman sitting on chair",
-        },
-      ]}
-      avatarText="Join 5,000+ luxury enthusiasts"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "100% Sustainable",
-        },
-        {
-          type: "text",
-          text: "Hand-Crafted Quality",
-        },
-        {
-          type: "text",
-          text: "Global Shipping",
-        },
-        {
-          type: "text",
-          text: "Timeless Design",
-        },
-        {
-          type: "text",
-          text: "Ethical Production",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Designed with Purpose"
-      description="We believe in less, but better. Our process balances artistic vision with sustainable, premium craftsmanship."
-      metrics={[
-        {
-          value: "100%",
-          title: "Premium Quality",
-        },
-        {
-          value: "15+",
-          title: "Artisanal Partners",
-        },
-        {
-          value: "24h",
-          title: "Support",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=2"
-      imageAlt="craftsmanship close up focus"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="split-description"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          brand: "LUXE",
-          name: "Silk Minimal Scarf",
-          price: "$120",
-          rating: 5,
-          reviewCount: "128",
-          imageSrc: "http://img.b2bpic.net/free-photo/round-gold-podium-minimal-pedestal-product-display-background-3d-rendering_56104-1272.jpg?_wi=2",
-        },
-        {
-          id: "p2",
-          brand: "LUXE",
-          name: "Leather Cardholder",
-          price: "$85",
-          rating: 5,
-          reviewCount: "92",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beauty-products-flowers_23-2149353144.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          brand: "LUXE",
-          name: "Canvas Tote Bag",
-          price: "$160",
-          rating: 4,
-          reviewCount: "75",
-          imageSrc: "http://img.b2bpic.net/free-photo/apple-blue-table-isolated-orange_171337-13161.jpg?_wi=2",
-        },
-        {
-          id: "p4",
-          brand: "LUXE",
-          name: "Gold Minimalist Ring",
-          price: "$250",
-          rating: 5,
-          reviewCount: "156",
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-looking-young-female-picking-design-magazines-vintage-store-standing-stylish-brown-dress_197531-23028.jpg",
-        },
-        {
-          id: "p5",
-          brand: "LUXE",
-          name: "Ceramic Tea Set",
-          price: "$180",
-          rating: 5,
-          reviewCount: "48",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-strong-independent-successful-businesswoman-wearing-smart-casual-clothing-glasses-working-laptop-cafe-black-white-photo_627829-9836.jpg",
-        },
-        {
-          id: "p6",
-          brand: "LUXE",
-          name: "Hand-dyed Throw",
-          price: "$320",
-          rating: 5,
-          reviewCount: "34",
-          imageSrc: "http://img.b2bpic.net/free-photo/apple-near-glass-with-juice-mirror-blue-table-isolated_171337-13154.jpg",
-        },
-      ]}
-      title="Featured Collections"
-      description="Explore our core lineup, curated for the refined minimalist."
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardTwentySeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Premium Materials",
-          descriptions: [
-            "Sourced responsibly from the finest suppliers across the globe.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-art-cover-collection_23-2148978362.jpg",
-        },
-        {
-          id: "f2",
-          title: "Timeless Design",
-          descriptions: [
-            "Created to outlast seasonal trends and remain elegant for decades.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/leaf-shield-set-four_78370-9083.jpg",
-        },
-        {
-          id: "f3",
-          title: "Ethical Making",
-          descriptions: [
-            "Supporting artisans with fair wages and safe working conditions.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/premium-quality_23-2147502658.jpg",
-        },
-      ]}
-      title="Why Choose Us"
-      description="Excellence in design and ethical standards drive our brand mission."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Alex B.",
-          role: "Collector",
-          company: "DesignCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
-        },
-        {
-          id: "t2",
-          name: "Jamie D.",
-          role: "Architect",
-          company: "ArchStudio",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-16454.jpg",
-        },
-        {
-          id: "t3",
-          name: "Riley P.",
-          role: "Designer",
-          company: "CreativeLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-lady-black-jacket-posing-isolated-background-happy-cheerful-woman-dark-suit-laughing-looking-into-camera_197531-18513.jpg",
-        },
-        {
-          id: "t4",
-          name: "Sam T.",
-          role: "Director",
-          company: "BrandFocus",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-reading-book-christmas-decorated-home-holiday-concept-christmas-holidays-people-concept_1391-902.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jordan M.",
-          role: "Founder",
-          company: "StyleHouse",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "5K+",
-          label: "Happy Clients",
-        },
-        {
-          value: "4.9/5",
-          label: "Avg Rating",
-        },
-        {
-          value: "95%",
-          label: "Referrals",
-        },
-      ]}
-      title="Client Experiences"
-      description="What our community says about their Luxe experience."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Do you ship worldwide?",
-          content: "Yes, we ship to over 50 countries globally with tracking.",
-        },
-        {
-          id: "q2",
-          title: "How is the quality ensured?",
-          content: "Every piece undergoes strict quality assurance before shipment.",
-        },
-        {
-          id: "q3",
-          title: "Can I return products?",
-          content: "We offer a 30-day return policy for unused items.",
-        },
-      ]}
-      title="Frequent Questions"
-      description="Answers to commonly asked questions about our process."
-      faqsAnimation="blur-reveal"
-      mediaAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=3"
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "120+",
-          title: "Designs",
-          description: "Unique curated items",
-          icon: Star,
-        },
-        {
-          id: "m2",
-          value: "98%",
-          title: "Satisfaction",
-          description: "Customer approval rating",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "50+",
-          title: "Markets",
-          description: "Global shipping reach",
-          icon: Globe,
-        },
-      ]}
-      title="Impact by Numbers"
-      description="Our reach and customer satisfaction growth."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Get in Touch"
-      description="Have questions? Our support team is ready to assist you."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=4"
     />
   </div>
 
@@ -445,36 +59,12 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/abstract-smooth-dark-blue-with-black-vignette-studio-well-use-as-backgroundbusiness-reportdigitalwebsite-templatebackdrop_1258-94419.jpg"
       logoText="LUXE"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-            {
-              label: "Returns",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About Us", href: "/about" }] },
+        { title: "Support", items: [{ label: "Contact", href: "/contact" }] }
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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

@@ -0,0 +1,10 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ProductPage({ params }: { params: { id: string } }) {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div>Product {params.id}</div>
+    </ThemeProvider>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function RegisterPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+      <ContactForm 
+        title="Create Account"
+        description="Join our exclusive community."
+        tag="Onboarding"
+        buttonText="Register"
+        useInvertedBackground={false}
+      />
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import { useState } from "react";
+
+export default function ShopPage() {
+  const [category, setCategory] = useState("All");
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Shop", id: "/shop"}, {name: "About", id: "/about"}, {name: "Login", id: "/login"}, {name: "Cart", id: "/cart"}, {name: "Contact", id: "/contact"}]} />
+        <div className="pt-32 pb-20">
+            <ProductCatalog
+                layout="page"
+                products={[
+                    { id: "1", category: "perfumes", name: "Midnight Oud", price: "$290", rating: 5, imageSrc: "" },
+                    { id: "2", category: "watches", name: "Classic Chrono", price: "$1200", rating: 5, imageSrc: "" },
+                    { id: "3", category: "clothing", name: "Cashmere Coat", price: "$850", rating: 4, imageSrc: "" }
+                ]}
+                filters={[{ label: "Category", options: ["All", "perfumes", "watches", "clothing"], selected: category, onChange: setCategory }]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #000000;
+  --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --primary-cta: #d4af37;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #c0c0c0;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #ff0000;
+  --accent: #d4af37;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);