Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
@@ -30,12 +30,9 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Collection",          id: "collection"},
-        {
-          name: "Design",          id: "design"},
-        {
-          name: "Materials",          id: "materials"},
+        { name: "Collection", id: "collection" },
+        { name: "Design", id: "design" },
+        { name: "Materials", id: "materials" },
       ]}
       brandName="Whoopselect"
     />
@@ -46,13 +43,11 @@ export default function LandingPage() {
       logoText="Make Your WHOOP a Statement."
       description="Premium custom bands designed for WHOOP 5.0 — crafted for performance, style, and individuality."
       buttons={[
-        {
-          text: "Explore the Collection",          href: "#collection"},
-        {
-          text: "Customize Yours",          href: "#contact"},
+        { text: "Explore the Collection", href: "#collection" },
+        { text: "Customize Yours", href: "#contact" },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=334wrd"
-      imageAlt="Whoopselect Custom Band Showcase"
+      imageAlt="Close-up lifestyle wrist shot featuring premium custom band on WHOOP sensor"
     />
   </div>
 
@@ -62,12 +57,9 @@ export default function LandingPage() {
       title="Not Just a Band. A Personal Signature."
       description="Whoopselect turns performance hardware into an extension of your identity. From bold typefaces to custom illustrated patterns, we create the aesthetics that WHOOP users have been waiting for."
       metrics={[
-        {
-          value: "100%",          title: "Compatible"},
-        {
-          value: "Premium",          title: "Materials"},
-        {
-          value: "Endless",          title: "Expression"},
+        { value: "100%", title: "Compatible" },
+        { value: "Premium", title: "Materials" },
+        { value: "Endless", title: "Expression" },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kbgyqg"
       mediaAnimation="slide-up"
@@ -80,33 +72,12 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      features={[
-        {
-          title: "Premium Woven Nylon",          description: "High-durability material optimized for breathability and sweat-wicking.",          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4qe04l",            imageAlt: "nylon textile texture macro"
-          },
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0dlecd",            imageAlt: "stainless steel watch buckle macro"
-          }
-        },
-        {
-          title: "Adjustable Fit",          description: "Fully compatible with WHOOP 5.0 sensor mechanics for accurate tracking.",          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=umbghb",            imageAlt: "stainless steel watch buckle macro"
-          },
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vu60qg",            imageAlt: "nylon textile texture macro"
-          }
-        },
-        {
-          title: "Stainless Steel Clasp",          description: "Resistant to corrosion and daily movement, ensuring a secure closure.",          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mu2zh4",            imageAlt: "nylon textile texture macro"
-          },
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=agh65z",            imageAlt: "stainless steel watch buckle macro"
-          }
-        }
-      ]}
       showStepNumbers={false}
+      features={[
+        { title: "Premium Woven Nylon", description: "High-durability material optimized for breathability and sweat-wicking.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4qe04l" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0dlecd" } },
+        { title: "Adjustable Fit", description: "Fully compatible with WHOOP 5.0 sensor mechanics for accurate tracking.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=umbghb" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vu60qg" } },
+        { title: "Stainless Steel Clasp", description: "Resistant to corrosion and daily movement, ensuring a secure closure.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mu2zh4" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=agh65z" } }
+      ]}
       title="Precision Engineering"
       description="Designed for the rigors of your training without compromising style."
     />
@@ -119,18 +90,12 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          name: "The Late Band",          price: "From €49",          variant: "White/Navy",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5xi6b"},
-        {
-          id: "p2",          name: "No Risk Band",          price: "From €49",          variant: "Black/White",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w8iky4"},
-        {
-          id: "p3",          name: "Founder Mode",          price: "From €49",          variant: "Dark",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mhwtao"},
-        {
-          id: "p4",          name: "Out of Office",          price: "From €49",          variant: "Minimalist",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=54u93p"},
-        {
-          id: "p5",          name: "Minimal Icons",          price: "From €49",          variant: "Patterns",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qfqsy3"},
-        {
-          id: "p6",          name: "Signature Text",          price: "From €49",          variant: "Custom",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rgqpuz"},
+        { id: "p1", name: "The Late Band", price: "From €49", variant: "Matte • Low Stock", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5xi6b" },
+        { id: "p2", name: "No Risk Band", price: "From €49", variant: "Matte • Limited Time", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w8iky4" },
+        { id: "p3", name: "Founder Mode", price: "From €49", variant: "Matte", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mhwtao" },
+        { id: "p4", name: "Out of Office", price: "From €49", variant: "Matte", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=54u93p" },
+        { id: "p5", name: "Minimal Icons", price: "From €49", variant: "Matte • Low Stock", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qfqsy3" },
+        { id: "p6", name: "Signature Text", price: "From €49", variant: "Matte", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rgqpuz" },
       ]}
       title="The Signature Collection"
       description="A curated range of custom-designed bands for every persona."
@@ -143,18 +108,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          value: "Premium",          title: "Nylon Build",          items: [
-            "High-tenacity weave",            "Soft-touch finish"],
-        },
-        {
-          id: "m2",          value: "Stainless",          title: "Hardware",          items: [
-            "Brushed silver finish",            "Secure buckle system"],
-        },
-        {
-          id: "m3",          value: "5.0",          title: "Compatibility",          items: [
-            "Seamless attachment",            "Perfect sensor fit"],
-        },
+        { id: "m1", value: "Premium", title: "Nylon Build", items: ["High-tenacity weave", "Soft-touch finish"] },
+        { id: "m2", value: "Stainless", title: "Hardware", items: ["Brushed silver finish", "Secure buckle system"] },
+        { id: "m3", value: "5.0", title: "Compatibility", items: ["Seamless attachment", "Perfect sensor fit"] },
       ]}
       title="Care & Maintenance"
       description="To preserve the printed pattern, avoid prolonged exposure to water, chlorine, salt water, soap, and aggressive rubbing."
@@ -162,66 +118,43 @@ export default function LandingPage() {
   </div>
 
   <div id="compliance" data-section="compliance">
-      <FaqBase
+      <FaqDouble
+      faqsAnimation="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",          title: "Are these official bands?",          content: "No, these are high-quality aftermarket accessories compatible with WHOOP devices."},
-        {
-          id: "f2",          title: "Do they affect the sensors?",          content: "Our bands are designed to integrate seamlessly, ensuring the sensor placement remains exact for accurate tracking."},
-        {
-          id: "f3",          title: "What about the packaging?",          content: "We currently use neutral premium packaging for this test phase, with custom branded solutions coming soon."},
+        { id: "f1", title: "Are these official bands?", content: "No, these are high-quality aftermarket accessories compatible with WHOOP devices." },
+        { id: "f2", title: "Do they affect the sensors?", content: "Our bands are designed to integrate seamlessly, ensuring the sensor placement remains exact for accurate tracking." },
+        { id: "f3", title: "What about the packaging?", content: "We currently use neutral premium packaging for this test phase, with custom branded solutions coming soon." },
       ]}
       title="Compatibility Disclaimer"
       description="Whoopselect is not affiliated with or endorsed by WHOOP. WHOOP is a trademark of its respective owner. Products are compatible accessories only."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "plain"}}
-      tag="Stay Updated"
+      <ContactSplitForm
       title="Get Early Access"
       description="Join the list for early releases and custom band drop alerts."
+      inputs={[
+        { name: "email", type: "email", placeholder: "Enter your email", required: true }
+      ]}
+      buttonText="Sign Up"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Collection",              href: "#collection"},
-            {
-              label: "Design",              href: "#design"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Materials",              href: "#materials"},
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "#"},
-            {
-              label: "Twitter",              href: "#"},
-          ],
-        },
-      ]}
+      <FooterBase
       logoText="Whoopselect"
+      columns={[
+        { title: "Shop", items: [{ label: "Collection", href: "#collection" }, { label: "Design", href: "#design" }] },
+        { title: "Support", items: [{ label: "Materials", href: "#materials" }, { label: "Privacy Policy", href: "#" }] },
+        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612;
-  --primary-cta: #1c1c1c;
+  --card: #f8f8f8;
+  --foreground: #1a1a1a;
+  --primary-cta: #000000;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f1f1f1;
   --secondary-cta-text: #1c1c1c;
-  --accent: #d1d1d1;
-  --background-accent: #e8e8e8;
+  --accent: #e5e7eb;
+  --background-accent: #f3f4f6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);