Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Aura"
+          />
+        </div>
+        <div id="about" data-section="about">
+          <SplitAbout
+            title="Our Story"
+            description="We believe fashion is a universal language, transcending cultures and borders. Our mission is to bring high-end, modern design to style enthusiasts around the globe."
+            imageSrc="http://img.b2bpic.net/free-photo/full-shot-stylish-woman-wearing-punk-outfit_23-2149267472.jpg"
+            textboxLayout="split"
+            bulletPoints={[
+              { title: "Quality", description: "Sourcing the finest materials." },
+              { title: "Ethics", description: "Fair treatment for all artisans." },
+              { title: "Design", description: "Modern and timeless aesthetics." },
+            ]}
+            useInvertedBackground={false}
+            mediaAnimation="none"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+              logoText="AURA"
+              columns={[
+                  { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
+              ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Aura"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Contact Us"
+            title="How can we help?"
+            description="Reach out to our support team and we'll get back to you within 24 hours."
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+              logoText="AURA"
+              columns={[
+                  { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
+              ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,22 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Shop",
-          id: "products",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "Shop", id: "/#products" },
+        { name: "About", id: "/about" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Aura"
     />
@@ -55,20 +43,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       logoText="AURA"
       description="Fashion Without Borders. Worldwide shipping for our global community."
       buttons={[
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
-        {
-          text: "Contact Us",
-          href: "#contact",
-        },
+        { text: "Shop Now", href: "/#products" },
+        { text: "Contact Us", href: "/contact" },
       ]}
       mediaAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/fabulous-drag-queen-getting-ready-photo-shooting_23-2149138203.jpg"
@@ -82,31 +62,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
-          icon: Sparkles,
-          title: "Streetwear",
-          description: "Urban essentials for everyday life.",
-        },
-        {
-          icon: Star,
-          title: "Casual Wear",
-          description: "Effortless styles for the modern individual.",
-        },
-        {
-          icon: Award,
-          title: "Formal Wear",
-          description: "Sophisticated pieces for special occasions.",
-        },
-        {
-          icon: Sun,
-          title: "Summer Collection",
-          description: "Light, breezy styles for warmer days.",
-        },
-        {
-          icon: Snowflake,
-          title: "Winter Collection",
-          description: "Cozy, warm styles for colder days.",
-        },
+        { icon: Sparkles, title: "Streetwear", description: "Urban essentials for everyday life." },
+        { icon: Star, title: "Casual Wear", description: "Effortless styles for the modern individual." },
+        { icon: Award, title: "Formal Wear", description: "Sophisticated pieces for special occasions." },
+        { icon: Sun, title: "Summer Collection", description: "Light, breezy styles for warmer days." },
+        { icon: Snowflake, title: "Winter Collection", description: "Cozy, warm styles for colder days." },
       ]}
       title="Our Categories"
       description="Discover our curated collections for every occasion."
@@ -120,48 +80,12 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Urban Hoodie",
-          price: "$120.00",
-          variant: "Sale",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-white-hoodie_23-2149359843.jpg",
-        },
-        {
-          id: "p2",
-          name: "Silk Dress",
-          price: "$350.00",
-          variant: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-presenting-soft-cotton-plain-gray-sweatshirt-with-black-jeans-isolated-white_346278-965.jpg",
-        },
-        {
-          id: "p3",
-          name: "Classic Trousers",
-          price: "$180.00",
-          variant: "Popular",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blond-woman-white-long-dress-posing-smoking-cigarette_613910-11002.jpg",
-        },
-        {
-          id: "p4",
-          name: "Minimalist Coat",
-          price: "$450.00",
-          variant: "Sale",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-woman-with-walking-urban-city-business-street-dressed-warm-brown-coat-blue-suit-spring-autumn-trendy-fashion-street-style-wearing-sunglasses_285396-7140.jpg",
-        },
-        {
-          id: "p5",
-          name: "Casual Sneakers",
-          price: "$90.00",
-          variant: "New",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylish-smiling-skinny-woman-with-curly-hair-walking-street-stairs-dressed-warm-brown-coat-blue-suit-autumn-trendy-fashion-street-style_285396-7080.jpg",
-        },
-        {
-          id: "p6",
-          name: "Gold Accessories",
-          price: "$60.00",
-          variant: "Limited",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-woman-with-walking-urban-city-business-street-dressed-warm-brown-coat-blue-suit-spring-autumn-trendy-fashion-street-style-wearing-sunglasses_285396-7138.jpg",
-        },
+        { id: "p1", name: "Urban Hoodie", price: "$120.00", variant: "Sale", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-white-hoodie_23-2149359843.jpg" },
+        { id: "p2", name: "Silk Dress", price: "$350.00", variant: "New", imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-presenting-soft-cotton-plain-gray-sweatshirt-with-black-jeans-isolated-white_346278-965.jpg" },
+        { id: "p3", name: "Classic Trousers", price: "$180.00", variant: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/young-blond-woman-white-long-dress-posing-smoking-cigarette_613910-11002.jpg" },
+        { id: "p4", name: "Minimalist Coat", price: "$450.00", variant: "Sale", imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-woman-with-walking-urban-city-business-street-dressed-warm-brown-coat-blue-suit-spring-autumn-trendy-fashion-street-style-wearing-sunglasses_285396-7140.jpg" },
+        { id: "p5", name: "Casual Sneakers", price: "$90.00", variant: "New", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylish-smiling-skinny-woman-with-curly-hair-walking-street-stairs-dressed-warm-brown-coat-blue-suit-autumn-trendy-fashion-street-style_285396-7080.jpg" },
+        { id: "p6", name: "Gold Accessories", price: "$60.00", variant: "Limited", imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-woman-with-walking-urban-city-business-street-dressed-warm-brown-coat-blue-suit-spring-autumn-trendy-fashion-street-style-wearing-sunglasses_285396-7138.jpg" },
       ]}
       title="Featured Items"
       description="Browse our latest fashion releases. All prices in USD."
@@ -188,27 +112,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "100+",
-          title: "Countries",
-          description: "Worldwide shipping destinations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/metal-planet-with-binary-numbers_1048-5044.jpg",
-        },
-        {
-          id: "m2",
-          value: "10k+",
-          title: "Orders",
-          description: "Happy fashion lovers served.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-icon-travel-with-luggage_23-2151037418.jpg",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "Support",
-          description: "Always here to help you.",
-          imageSrc: "http://img.b2bpic.net/free-photo/delivery-icon-left-side_187299-45734.jpg",
-        },
+        { id: "m1", value: "100+", title: "Countries", description: "Worldwide shipping destinations.", imageSrc: "http://img.b2bpic.net/free-photo/metal-planet-with-binary-numbers_1048-5044.jpg" },
+        { id: "m2", value: "10k+", title: "Orders", description: "Happy fashion lovers served.", imageSrc: "http://img.b2bpic.net/free-photo/3d-icon-travel-with-luggage_23-2151037418.jpg" },
+        { id: "m3", value: "24/7", title: "Support", description: "Always here to help you.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-icon-left-side_187299-45734.jpg" },
       ]}
       title="Global Presence"
       description="Shipping luxury fashion worldwide every single day."
@@ -222,26 +128,11 @@ export default function LandingPage() {
       rating={5}
       author="Elena Rossi"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275128.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-transgender-person-using-hair-net_23-2148827034.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/high-fashion-look-glamor-closeup-portrait-beautiful-sexy-stylish-blond-young-woman-model-with-bright-makeup-with-perfect-clean-skin-with-jewelery-black-cloth_158538-2009.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-sitting-grey-wall_176420-11169.jpg",
-          alt: "Client 5",
-        },
+        { src: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275128.jpg", alt: "Client 1" },
+        { src: "http://img.b2bpic.net/free-photo/young-transgender-person-using-hair-net_23-2148827034.jpg", alt: "Client 2" },
+        { src: "http://img.b2bpic.net/free-photo/high-fashion-look-glamor-closeup-portrait-beautiful-sexy-stylish-blond-young-woman-model-with-bright-makeup-with-perfect-clean-skin-with-jewelery-black-cloth_158538-2009.jpg", alt: "Client 3" },
+        { src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg", alt: "Client 4" },
+        { src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-sitting-grey-wall_176420-11169.jpg", alt: "Client 5" },
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="slide-up"
@@ -252,21 +143,9 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Do you ship worldwide?",
-          content: "Yes, we ship to all countries around the globe.",
-        },
-        {
-          id: "f2",
-          title: "What currencies do you accept?",
-          content: "Our store displays all prices in USD.",
-        },
-        {
-          id: "f3",
-          title: "How can I order?",
-          content: "You can order directly from our product pages, or via WhatsApp!",
-        },
+        { id: "f1", title: "Do you ship worldwide?", content: "Yes, we ship to all countries around the globe." },
+        { id: "f2", title: "What currencies do you accept?", content: "Our store displays all prices in USD." },
+        { id: "f3", title: "How can I order?", content: "You can order directly from our product pages, or via WhatsApp!" },
       ]}
       sideTitle="Questions?"
       sideDescription="We're here to assist with all your fashion needs."
@@ -277,21 +156,13 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Get in Touch"
       title="Need Assistance?"
       description="Have questions about an order or our collections? Connect with us via WhatsApp or email."
       buttons={[
-        {
-          text: "WhatsApp Us",
-          href: "https://wa.me/1234567890",
-        },
-        {
-          text: "Email Us",
-          href: "mailto:hello@aura.com",
-        },
+        { text: "WhatsApp Us", href: "https://wa.me/1234567890" },
+        { text: "Email Us", href: "mailto:hello@aura.com" },
       ]}
     />
   </div>
@@ -300,45 +171,9 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="AURA"
       columns={[
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Streetwear",
-              href: "#products",
-            },
-            {
-              label: "Casual",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact Us",
-              href: "#contact",
-            },
-            {
-              label: "Shipping",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Follow Us",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "TikTok",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Shop", items: [{ label: "Streetwear", href: "/#products" }, { label: "Casual", href: "/#products" }] },
+        { title: "Support", items: [{ label: "Contact Us", href: "/contact" }, { label: "About Us", href: "/about" }] },
+        { title: "Follow Us", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
       ]}
     />
   </div>

src/app/shop/[productId]/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function ProductDetailPage({ params }: { params: { productId: string } }) {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="largeSmall"
+        background="noise"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+          ]}
+          brandName="Aura"
+        />
+
+        <div className="pt-32 pb-20">
+          <ProductDetailCard 
+            layout="page"
+            name="Product Details"
+            price="$150.00"
+            description="This is a high quality product. Interested? Contact us via WhatsApp to inquire or order."
+            images={[{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-white-hoodie_23-2149359843.jpg", alt: "Product image" }]}
+            buttons={[
+              { text: "WhatsApp Inquiry", href: "https://wa.me/1234567890?text=I+am+interested+in+your+product" }
+            ]}
+          />
+        </div>
+
+        <FooterBaseCard 
+          logoText="AURA"
+          columns={[{ title: "Shop", items: [{ label: "Back to Shop", href: "/shop" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="largeSmall"
+        background="noise"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "About", id: "/#about" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          brandName="Aura"
+        />
+        
+        <div className="pt-32 pb-20">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Urban Hoodie", price: "$120.00", variant: "Sale", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-white-hoodie_23-2149359843.jpg" },
+              { id: "p2", name: "Silk Dress", price: "$350.00", variant: "New", imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-presenting-soft-cotton-plain-gray-sweatshirt-with-black-jeans-isolated-white_346278-965.jpg" },
+              { id: "p3", name: "Classic Trousers", price: "$180.00", variant: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/young-blond-woman-white-long-dress-posing-smoking-cigarette_613910-11002.jpg" },
+              { id: "p4", name: "Minimalist Coat", price: "$450.00", variant: "Sale", imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-woman-with-walking-urban-city-business-street-dressed-warm-brown-coat-blue-suit-spring-autumn-trendy-fashion-street-style-wearing-sunglasses_285396-7140.jpg" },
+            ]}
+            title="All Products"
+            description="Shop our entire collection."
+          />
+        </div>
+
+        <FooterBaseCard 
+          logoText="AURA"
+          columns={[{ title: "Shop", items: [{ label: "Return Home", href: "/" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000000;
-  --primary-cta: #d4af37;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #d4af37;
-  --background-accent: #f4f4f4;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);