Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 
 export default function LandingPage() {
   return (
@@ -31,138 +31,71 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Catalog",
-          id: "catalog",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Catalog", id: "catalog" },
+        { name: "Contact", id: "contact" },
       ]}
-      brandName="VogueEra"
+      brandName="TROJAN"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroLogo
-      logoText="VogueEra"
-      description="Redefining fast fashion with elegance and sustainability. Explore our latest seasonal collections crafted for your modern lifestyle."
+      logoText="TROJAN"
+      description="Redefining urban style with our latest collection of premium printed hoodies and t-shirts. Built for comfort, designed for the modern man."
       buttons={[
-        {
-          text: "Shop Now",
-          href: "#catalog",
-        },
+        { text: "Shop Men's Wear", href: "#catalog" },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/fashionable-stylish-woman-with-white-hair-poses-studio-dressed-fashionable-jacket-dress-hat-is-her-head_132075-13979.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/handsome-man-hoodie-posing-outdoors_23-2148700201.jpg?_wi=1"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="Our Philosophy"
-      description={[
-        "VogueEra bridges the gap between high-end aesthetics and everyday accessibility.",
-        "We are committed to ethical production, premium materials, and timeless design that speaks to the modern individual.",
+      title="Crafted for the Streets"
+      description="Born from urban culture, TROJAN represents the intersection of resilience and refinement. We design for those who move through the city with intent and style."
+      metrics={[
+        { value: "2024", title: "Year Established" },
+        { value: "100%", title: "Ethical Sourcing" },
+        { value: "50k+", title: "Community Count" }
       ]}
+      mediaAnimation="slide-up"
+      metricsAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/handsome-man-hoodie-posing-outdoors_23-2148700201.jpg?_wi=2"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyNine
+      <FeatureCardTwentyThree
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Sustainable Sourcing",
-          description: "Materials sourced ethically and responsibly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/rough-studio-shot-fabric-horizontal-material_1122-2405.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-green-belt-texture-background_23-2149341338.jpg",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Modern Trends",
-          description: "Curated collections inspired by global styles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/outline-illustration-different-types-trees_1258-289370.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/trendy-teenager-boy-girl-posing-together_23-2149085224.jpg",
-          buttonText: "View Trends",
-        },
-        {
-          title: "Global Shipping",
-          description: "Fast and reliable delivery worldwide.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-delivery-woman-wearing-red-polo-shirt-cap-medical-protective-mask-standing-with-cardboard-boxes-looking-camera-with-serious-face-isolated-blue-background_141793-19921.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/young-delivery-girl-red-uniform-holding-box-looking-down-standing-profile-view-isolated-pink-wall_141793-79407.jpg",
-          buttonText: "Shipping Info",
-        },
+        { id: "f1", title: "Urban Durability", tags: ["Street-Ready", "Long-Lasting"] },
+        { id: "f2", title: "Ergonomic Street-Fit", tags: ["Premium Comfort", "Tailored"] },
+        { id: "f3", title: "Sustainable Soul", tags: ["Earth-Friendly", "Ethical"] },
       ]}
-      title="Why VogueEra?"
-      description="What sets us apart in the fast fashion landscape."
+      title="Built for the Streets"
+      description="Streetwear performance meeting high-fashion ethics."
     />
   </div>
 
   <div id="catalog" data-section="catalog">
-      <ProductCardFour
+      <ProductCardOne
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Minimalist Silk Dress",
-          price: "$129",
-          variant: "Midnight",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-with-sunglasses_23-2149267444.jpg",
-        },
-        {
-          id: "p2",
-          name: "Urban Bomber Jacket",
-          price: "$189",
-          variant: "Graphite",
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-eyes-young-woman-white-clothes-possing-chair_613910-10582.jpg",
-        },
-        {
-          id: "p3",
-          name: "Classic Linen Shirt",
-          price: "$89",
-          variant: "Sand",
-          imageSrc: "http://img.b2bpic.net/free-photo/sad-gloomy-redhead-male-student-pouting-frowning-looking-distressed-standing-white-back_1258-154184.jpg",
-        },
-        {
-          id: "p4",
-          name: "Tailored Slim Trousers",
-          price: "$115",
-          variant: "Black",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing_1303-3782.jpg",
-        },
-        {
-          id: "p5",
-          name: "Signature Crossbody Bag",
-          price: "$99",
-          variant: "Tan",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blue-eyed-girl-with-bun-woman-with-red-lipstick-pink-blouse-headband-posing-isolated-space_197531-15275.jpg",
-        },
-        {
-          id: "p6",
-          name: "Signature Winter Coat",
-          price: "$249",
-          variant: "Charcoal",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fashion-woman-posing-with-elegant-suit_1328-3313.jpg",
-        },
+        { id: "p1", name: "Graphic Logo Hoodie", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/man-hoodie-posing_1328-3313.jpg" },
+        { id: "p2", name: "Essential Street Tee", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/men-t-shirt-front-view_1258-289370.jpg" },
+        { id: "p3", name: "Classic Print Crewneck", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-crewneck_1303-3782.jpg" },
+        { id: "p4", name: "Urban Minimal Hoodie", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/black-hoodie-man-posing_23-2148810239.jpg" },
       ]}
-      title="Seasonal Collection"
-      description="Discover our most anticipated pieces for the upcoming season."
+      title="Curated Street Essentials"
+      description="The latest drops for your modern rotation."
     />
   </div>
 
@@ -170,207 +103,58 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={true}
-      names={[
-        "Vogue",
-        "Harper's Bazaar",
-        "Elle",
-        "InStyle",
-        "GQ",
-        "Marie Claire",
-        "Cosmopolitan",
-      ]}
-      title="Featured In"
-      description="Trusted by leading fashion editorials globally."
+      names={["Vogue", "GQ", "Hypebeast", "Highsnobiety", "Elle"]}
+      title="Urban Recognition"
+      description="Featured globally by those who define the culture."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
+      <TestimonialCardFive
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Miller",
-          role: "Creative Director",
-          company: "DesignCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hat_23-2149213174.jpg",
-        },
-        {
-          id: "t2",
-          name: "James Chen",
-          role: "Fashion Consultant",
-          company: "StyleLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-studio-portrait_1303-2284.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily Watson",
-          role: "Blogger",
-          company: "TrendSet",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5441.jpg",
-        },
-        {
-          id: "t4",
-          name: "Alex Rivera",
-          role: "Editor",
-          company: "MediaHub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-shopping-bags-city_1303-16825.jpg",
-        },
-        {
-          id: "t5",
-          name: "Clara Schmidt",
-          role: "Buyer",
-          company: "GlobalFashion",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-hipster-couple-rest-walk-sitting-pavement-old-europe-street_613910-6592.jpg",
-        },
-        {
-          id: "t6",
-          name: "David Zhou",
-          role: "Influencer",
-          company: "UrbanVogue",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-drag-man_23-2149218634.jpg",
-        },
+        { id: "t1", name: "Mark S.", date: "Oct 2024", title: "Urban Essential", quote: "The fit and quality are unmatched for the street scene.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-wearing-black-hoodie-studio-shot_23-2148700201.jpg" },
+        { id: "t2", name: "James C.", date: "Sep 2024", title: "Top Tier", quote: "TROJAN has elevated my daily rotation dramatically.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-fashion-man-looking-side_1303-2284.jpg" },
       ]}
-      kpiItems={[
-        {
-          value: "50k+",
-          label: "Happy Shoppers",
-        },
-        {
-          value: "4.9/5",
-          label: "Global Rating",
-        },
-        {
-          value: "15+",
-          label: "Countries Served",
-        },
-      ]}
-      title="Client Feedback"
-      description="Hear what our global community thinks."
+      title="Authentic Voices"
+      description="Hear from our real-world community."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "How do I find my size?",
-          content: "Consult our detailed size guide on every product page for exact measurements.",
-        },
-        {
-          id: "f2",
-          title: "What is your return policy?",
-          content: "We offer 30-day hassle-free returns on all unworn items.",
-        },
-        {
-          id: "f3",
-          title: "How can I track my order?",
-          content: "You will receive an automated email with tracking information once your order ships.",
-        },
+        { id: "f1", title: "What makes it 'Street-Ready'?", content: "Reinforced stitching and premium GSM cotton ensure resilience." },
+        { id: "f2", title: "Are drops limited?", content: "Yes, our collections are released in limited runs to ensure exclusivity." },
       ]}
-      title="Common Questions"
-      description="Find answers to your shipping, return, and sizing queries."
       faqsAnimation="slide-up"
+      title="Your Questions"
+      description="Straight talk on all things TROJAN."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCenter
+      tag="Connect"
+      title="Join the Movement"
+      description="Stay updated on drops, collaborations, and community events."
       useInvertedBackground={false}
-      title="Get in Touch"
-      description="Have questions or want to collaborate? Fill out the form below and our team will get back to you shortly."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Your Message",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/industrial-home-office-interior-design-with-white-frame-hanging-wall_53876-111088.jpg"
+      background={{ variant: "plain" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterBaseCard
+      logoText="TROJAN"
       columns={[
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Catalog",
-              href: "#catalog",
-            },
-            {
-              label: "Size Guide",
-              href: "#",
-            },
-            {
-              label: "Collections",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Sustainability",
-              href: "#",
-            },
-            {
-              label: "Press",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Shipping",
-              href: "#",
-            },
-            {
-              label: "Returns",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Shop", items: [{ label: "Catalog", href: "#catalog" }, { label: "Size Guide", href: "#" }] },
+        { title: "Brand", items: [{ label: "About", href: "#about" }, { label: "Press", href: "#" }] },
+        { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Returns", href: "#" }] },
       ]}
-      bottomLeftText="© 2024 VogueEra. All rights reserved."
-      bottomRightText="Privacy Policy | Terms of Service"
+      copyrightText="© 2024 TROJAN. Urban Culture Unified."
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-archivo), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-archivo), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #ff6207;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #1f7cff;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);