Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Globe, Layers, Users } from "lucide-react";
+import { Globe, Layers, Users, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,14 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Drops",          id: "products"},
-        {
-          name: "Story",          id: "about"},
-        {
-          name: "FAQ",          id: "faq"},
+        { name: "Home", id: "hero" },
+        { name: "Drops", id: "products" },
+        { name: "Story", id: "about" },
+        { name: "FAQ", id: "faq" },
       ]}
       brandName="RARE"
     />
@@ -47,41 +43,13 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplit
-      background={{
-        variant: "plain"}}
+      background={{ variant: "plain" }}
       title="RARE. DEFINED BY THE UNSEEN."
       description="We don't follow trends. We craft them for the bold. Experience the next evolution of high-end streetwear."
-      buttons={[
-        {
-          text: "Shop The Drop",          href: "#products"},
-      ]}
+      buttons={[{ text: "Shop The Drop", href: "#products" }]}
       imageSrc="http://img.b2bpic.net/free-photo/stylish-woman-wearing-blue-wig-sitting-stairs_158595-4336.jpg"
       imageAlt="urban fashion model dark theme"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/stunning-african-man-posing-with-gently-smile-stairs-handsome-guy-checkered-jacket-sitting-steps-evening_197531-22068.jpg",          alt: "Stunning african man posing with gently smile on stairs. Handsome guy in checkered jacket sitting on steps in evening."},
-        {
-          src: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg",          alt: "Brutal young man in sunglasses and a hat. Island travel."},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-handsome-smiling-hipster-black-man-retro-vintage-style-suit-dancing-hip-hop-disco-night-club-having-fun_285396-10218.jpg",          alt: "Young handsome smiling hipster black man in retro vintage style suit dancing hip hop in disco night club, having fun"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg",          alt: "Beautiful blonde woman in white hoodie and blue jeans posing against neon background"},
-        {
-          src: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-43.jpg",          alt: "the blue jeans fabric details"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "LIMITED EDITION"},
-        {
-          type: "text",          text: "RARE EXCLUSIVES"},
-        {
-          type: "text",          text: "GLOBAL SHIPPING"},
-        {
-          type: "text",          text: "PREMIUM FABRICS"},
-        {
-          type: "text",          text: "AVANT-GARDE"},
-      ]}
     />
   </div>
 
@@ -89,10 +57,7 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={false}
       title="The Philosophy of Rare"
-      buttons={[
-        {
-          text: "Learn More"},
-      ]}
+      buttons={[{ text: "Learn More" }]}
     />
   </div>
 
@@ -103,18 +68,9 @@ export default function LandingPage() {
       animationType="slide-up"
       useInvertedBackground={true}
       products={[
-        {
-          id: "1",          name: "Obsidian Sneaker",          price: "$340",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-outdoor_624325-3549.jpg"},
-        {
-          id: "2",          name: "Architectural Hoodie",          price: "$220",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2744.jpg"},
-        {
-          id: "3",          name: "Tactical Utility Pant",          price: "$280",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg"},
-        {
-          id: "4",          name: "Minimalist Tee",          price: "$85",          imageSrc: "http://img.b2bpic.net/free-vector/happy-new-year-2025-text-typography-design-element-flyer-banner-poster-design_460848-18792.jpg"},
-        {
-          id: "5",          name: "Cargo Tech Vest",          price: "$190",          imageSrc: "http://img.b2bpic.net/free-photo/soldier-russian-s-war-ukraine-side-view_23-2149437803.jpg"},
-        {
-          id: "6",          name: "Matte Accessory",          price: "$60",          imageSrc: "http://img.b2bpic.net/free-photo/skater-wearing-trucker-hat_23-2149431180.jpg"},
+        { id: "1", name: "Obsidian Sneaker", price: "$340", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-outdoor_624325-3549.jpg" },
+        { id: "2", name: "Architectural Hoodie", price: "$220", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2744.jpg" },
+        { id: "3", name: "Tactical Utility Pant", price: "$280", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg" }
       ]}
       title="Current Collection"
       description="Each piece is limited. Once they are gone, they remain gone."
@@ -125,10 +81,9 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "Hypebeast",        "Vogue",        "GQ",        "Complex",        "Highsnobiety"]}
-      title="Seen In"
-      description="Cultural icons trust RARE."
+      names={["Hypebeast", "Vogue", "GQ", "Complex", "Highsnobiety"]}
+      title="Cultural Legacy"
+      description="RARE is recognized globally by visionaries and curators of style."
     />
   </div>
 
@@ -138,97 +93,78 @@ export default function LandingPage() {
       useInvertedBackground={true}
       animationType="slide-up"
       metrics={[
-        {
-          id: "m1",          title: "Collectors",          value: "10k+",          icon: Users,
-        },
-        {
-          id: "m2",          title: "Pieces Crafted",          value: "50k+",          icon: Layers,
-        },
-        {
-          id: "m3",          title: "Global Drops",          value: "120",          icon: Globe,
-        },
+        { id: "m1", title: "Active Collectors", value: "10k+", icon: Users },
+        { id: "m2", title: "Artisan Pieces", value: "50k+", icon: Layers },
+        { id: "m3", title: "Global Markets", value: "120", icon: Globe },
       ]}
-      title="Our Impact"
-      description="Built for the rare enthusiast."
+      title="Exclusivity Metrics"
+      description="Quantifying the impact of our limited releases."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+      <TestimonialCardThirteen
+      showRating={true}
+      animationType="depth-3d"
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",          title: "Incredible Quality",          quote: "The fabric quality is unmatched. Truly rare.",          name: "Alex R.",          role: "Creative",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg"},
-        {
-          id: "t2",          title: "Distinct Aesthetic",          quote: "Finally, streetwear that feels original.",          name: "Maya S.",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg"},
-        {
-          id: "t3",          title: "Elite Fits",          quote: "My go-to brand for unique silhouettes.",          name: "Leo P.",          role: "Influencer",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478943.jpg"},
-        {
-          id: "t4",          title: "Fast Shipping",          quote: "Surprisingly quick shipping for a high-end drop.",          name: "Sam D.",          role: "Collector",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-lone-woman-bar_53876-165211.jpg"},
-        {
-          id: "t5",          title: "Pure Hype",          quote: "RARE always hits different.",          name: "Jo K.",          role: "Artist",          imageSrc: "http://img.b2bpic.net/free-photo/birthday-warm-antique-white-friendship-handmade_1418-4.jpg"},
+        { id: "t1", name: "Alex R.", handle: "@alexr", testimonial: "The fabric quality and design intent are genuinely on another level. Pure luxury.", rating: 5 },
+        { id: "t2", name: "Maya S.", handle: "@mayas", testimonial: "RARE provides an experience that transcends mere clothing. It's sophisticated and bold.", rating: 5 },
+        { id: "t3", name: "Leo P.", handle: "@leop", testimonial: "A truly premium customer experience. Every detail matters to them.", rating: 5 }
       ]}
       title="Voices of the Rare"
-      description="What our community is saying."
+      description="Curated feedback from those who understand the value of exclusivity."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqBase
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",          title: "How limited is each drop?",          content: "Every piece is limited to 500 units worldwide."},
-        {
-          id: "f2",          title: "Do you ship internationally?",          content: "Yes, we ship to over 50 countries globally."},
-        {
-          id: "f3",          title: "Can I return items?",          content: "We offer a 14-day return window for unworn items."},
+        { id: "f1", title: "What makes RARE exclusive?", content: "We limit every design to 500 units worldwide, ensuring rarity and craftsmanship for our clients." },
+        { id: "f2", title: "How is the customer experience different?", content: "From personalized unboxing to white-glove support, we prioritize your journey with us." },
+        { id: "f3", title: "Global logistics?", content: "We provide bespoke worldwide shipping services for all our collectors."}
       ]}
-      title="Common Questions"
+      title="Bespoke Inquiries"
       faqsAnimation="slide-up"
-      description="Everything you need to know about your order."
+      description="Sophisticated answers for the discerning collector."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      tag="Connect"
+      title="Join the Circle"
+      description="Apply for early access to upcoming drops and private events."
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      text="Join the rare circle."
-      buttons={[
-        {
-          text: "Contact Support",          href: "mailto:support@rare.com"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Shop",              href: "#products"},
-            {
-              label: "About",              href: "#about"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Support",              href: "#contact"},
-            {
-              label: "FAQ",              href: "#faq"},
-          ],
-        },
-      ]}
+      <FooterBase
       logoText="RARE"
+      columns={[
+        { 
+          title: "The Brand", 
+          items: [
+            { label: "Collection", href: "#products" },
+            { label: "Our Story", href: "#about" }
+          ] 
+        },
+        { 
+          title: "Experience", 
+          items: [
+            { label: "Support", href: "#contact" },
+            { label: "Information", href: "#faq" }
+          ] 
+        }
+      ]}
     />
   </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-source-sans-3), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
+  --background: #0a0a0a;
+  --card: #121212;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #d4af37;
   --primary-cta-text: #000000;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #CEE7FF;
+  --accent: #d4af37;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);