Update src/app/page.tsx

Merge version_1 into main

src/app/layout.tsx

@@ -20,6 +20,7 @@ export const metadata: Metadata = {
   },
 };
 
+
 const playfair = Playfair_Display({ variable: "--font-playfair", subsets: ["latin"] });
 const dmSans = DM_Sans({ variable: "--font-dm-sans", subsets: ["latin"] });
 

src/app/page.tsx

@@ -2,132 +2,135 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
         borderRadius="soft"
         contentWidth="mediumLarge"
         sizing="mediumLargeSizeLargeTitles"
-        background="circleGradient"
+        background="none"
-        cardStyle="glass-depth"
+        cardStyle="solid"
         primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarStyleFullscreen
       navItems={[
         { name: "Home", id: "hero" },
-        { name: "Shop", id: "products" },
+        { name: "New Arrivals", id: "products" },
-        { name: "Our Story", id: "about" },
+        { name: "Featured", id: "features" },
-        { name: "Newsletter", id: "contact" }
+        { name: "Values", id: "about" },
+        { name: "Contact", id: "contact" }
       ]}
       brandName="VOXE"
-      button={{ text: "Get Started", href: "#contact" }}
+      button={{ text: "Shop Now", href: "#products" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "plain" }}
-      title="Walk in every story"
+      testimonials={[]}
-      description="VOXE represents the pinnacle of craftsmanship, where every step defines your legacy. Discover the art of modern footwear."
+      title="Wear your story"
-      testimonials={[
+      description="Gender-inclusive fashion crafted for every soul. Discover timeless silhouettes in obsidian, amber, and cream."
-        { name: "Eleanor Vance", handle: "@evance", testimonial: "The most comfortable luxury shoe I've ever owned. Pure art.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186782.jpg?_wi=1", imageAlt: "luxury shoe fashion photography" },
+      buttons={[{ text: "Explore Collection", href: "#products" }]}
-        { name: "Julian Thorne", handle: "@jthorne", testimonial: "VOXE defines elegance. Exquisite leather craftsmanship.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/shoes_1303-3607.jpg?_wi=1", imageAlt: "luxury mens oxford shoes studio" },
+      imageSrc="http://img.b2bpic.net/free-photo/fashion-portrait-young-stylish-man-woman-standing-together-studio-background_158595-6547.jpg"
-        { name: "Sophia Moretti", handle: "@smoretti", testimonial: "A timeless piece for my collection. Absolutely stunning.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-brunette-girl-wear-black-red-high-heels-sitting-posing-chair-studio-against-dark-brick-wall-studio-model-portrait_627829-7841.jpg?_wi=1", imageAlt: "luxury women's leather heels studio" },
-        { name: "Marcus Aurelius", handle: "@maurelius", testimonial: "Sophistication in every detail. Unmatched quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/boots-woman-autumnal-forest_329181-17144.jpg?_wi=1", imageAlt: "designer leather boots studio shot" },
-        { name: "Diana Prince", handle: "@dprince", testimonial: "VOXE shoes are simply transformative. A must-have.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smiling-sitting-floor-white-wall_176420-8546.jpg?_wi=1", imageAlt: "luxury loafers tan leather" }
-      ]}
-      buttons={[{ text: "Shop Men", href: "#products" }, { text: "Shop Women", href: "#products" }]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186782.jpg?_wi=2"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/shoes_1303-3607.jpg", alt: "Customer 1" },
-        { src: "http://img.b2bpic.net/free-photo/handsome-brunette-girl-wear-black-red-high-heels-sitting-posing-chair-studio-against-dark-brick-wall-studio-model-portrait_627829-7841.jpg", alt: "Customer 2" },
-        { src: "http://img.b2bpic.net/free-photo/boots-woman-autumnal-forest_329181-17144.jpg", alt: "Customer 3" },
-        { src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smiling-sitting-floor-white-wall_176420-8546.jpg", alt: "Customer 4" },
-        { src: "http://img.b2bpic.net/free-photo/groom-wedding-shoes_1303-10490.jpg", alt: "Customer 5" }
-      ]}
-      marqueeItems={[
-        { type: "text", text: "Handcrafted Excellence" },
-        { type: "text", text: "Sustainable Sourcing" },
-        { type: "text", text: "Timeless Design" },
-        { type: "text", text: "Global Heritage" },
-        { type: "text", text: "Uncompromising Quality" }
-      ]}
     />
   </div>
 
   <div id="products" data-section="products">
       <ProductCardThree
+      useInvertedBackground={false}
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
+      title="New Arrivals"
+      description="Our latest gender-inclusive essentials in our signature obsidian and amber-tan palettes."
       products={[
-        { id: "1", name: "The Obsidian Oxford", price: "$850", imageSrc: "http://img.b2bpic.net/free-photo/shoes_1303-3607.jpg?_wi=2" },
+        { id: "1", name: "Obsidian Oversized Tee", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/black-t-shirt-front-view_125540-1533.jpg" },
-        { id: "2", name: "Amber Grace Heels", price: "$720", imageSrc: "http://img.b2bpic.net/free-photo/handsome-brunette-girl-wear-black-red-high-heels-sitting-posing-chair-studio-against-dark-brick-wall-studio-model-portrait_627829-7841.jpg?_wi=2" },
+        { id: "2", name: "Linen Cream Trousers", price: "$240", imageSrc: "http://img.b2bpic.net/free-photo/beige-trousers-studio_125540-1540.jpg" },
-        { id: "3", name: "Heritage Leather Boot", price: "$950", imageSrc: "http://img.b2bpic.net/free-photo/boots-woman-autumnal-forest_329181-17144.jpg?_wi=2" },
+        { id: "3", name: "Amber-Tan Knit", price: "$310", imageSrc: "http://img.b2bpic.net/free-photo/tan-sweater-studio_125540-1545.jpg" },
-        { id: "4", name: "Velvet Loafer", price: "$680", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-smiling-sitting-floor-white-wall_176420-8546.jpg?_wi=2" },
+        { id: "4", name: "Off-White Utility Jacket", price: "$450", imageSrc: "http://img.b2bpic.net/free-photo/white-utility-jacket_125540-1550.jpg" }
-        { id: "5", name: "Modern Derby", price: "$790", imageSrc: "http://img.b2bpic.net/free-photo/groom-wedding-shoes_1303-10490.jpg" },
-        { id: "6", name: "Elegance Stiletto", price: "$880", imageSrc: "http://img.b2bpic.net/free-photo/luxury-fashion-woman-accessories-golden-heeled-shoes-little-evening-purse-elegant-style-vintage-style-sandals-footwear_285396-7262.jpg" }
       ]}
-      title="Iconic Collections"
+    />
-      description="Discover our signature footwear, crafted to last a lifetime."
+  </div>
+
+  <div id="features" data-section="features">
+      <FeatureCardTwentyThree
+      useInvertedBackground={false}
+      textboxLayout="default"
+      animationType="slide-up"
+      title="Featured Collection"
+      description="Timeless staples for the modern individual."
+      features={[
+        { id: "f1", title: "The Obsidian Edit", tags: ["Sustainable", "Luxury"], imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-woman-studio_125540-1600.jpg" },
+        { id: "f2", title: "Amber-Tan Basics", tags: ["Organic", "Essential"], imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-tan-clothing_125540-1605.jpg" }
+      ]}
+    />
+  </div>
+
+  <div id="trending" data-section="trending">
+    <TestimonialCardSix
+      useInvertedBackground={false}
+      animationType="slide-up"
+      textboxLayout="default"
+      title="Trending Now"
+      description="What our community says about us."
+      testimonials={[]}
     />
   </div>
 
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="A Legacy of Craftsmanship"
+      title="Our Brand Values"
-      description="VOXE was founded on the belief that luxury should be felt in every step. We source only the finest leathers, ensuring our shoes age with grace and integrity."
+      description="VOXE is committed to sustainability, inclusivity, and uncompromising craftsmanship. We believe fashion is a story that should be worn with pride by everyone."
       metrics={[
-        { value: "120+", title: "Years of Tradition" },
+        { value: "100%", title: "Ethical" },
-        { value: "24h", title: "Craftsmanship Per Shoe" },
+        { value: "Global", title: "Inclusive" },
-        { value: "100%", title: "Ethical Sourcing" }
+        { value: "Timeless", title: "Design" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/bootmaker-workshop-making-shoes_171337-12278.jpg?_wi=1"
+      imageSrc="http://img.b2bpic.net/free-photo/close-up-fashion-fabric-textiles_125540-1700.jpg"
       mediaAnimation="blur-reveal"
       metricsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCTA
+      background={{ variant: "plain" }}
       useInvertedBackground={false}
-      title="Join the VOXE Circle"
+      tag="Newsletter"
-      description="Sign up for early access to our limited collections and receive an exclusive 10% incentive on your first pair."
+      title="Stay connected"
-      inputs={[
+      description="Join our community for early access to new collections and exclusive updates."
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
+      buttons={[{ text: "Sign Up", href: "#" }]}
-        { name: "email", type: "email", placeholder: "Your Email", required: true }
-      ]}
-      mediaPosition="left"
-      buttonText="Subscribe & Save 10%"
-      imageSrc="http://img.b2bpic.net/free-photo/bootmaker-workshop-making-shoes_171337-12278.jpg?_wi=2"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterLogoEmphasis
       logoText="VOXE"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
+      columns={[
-      rightLink={{ text: "Terms of Service", href: "#" }}
+        { items: [{ label: "Shop" }, { label: "Journal" }] },
+        { items: [{ label: "Support" }, { label: "Contact" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;

src/app/styles/variables.css

@@ -15,7 +15,7 @@
   --foreground: #F0E6D3;
   --primary-cta: #B5906A;
   --primary-cta-text: #0D0D0D;
-  --secondary-cta: #B5906A;
+  --secondary-cta: #1A1A1A;
   --secondary-cta-text: #F0E6D3;
   --accent: #B5906A;
   --background-accent: #1A1A1A;