From 97793bfab779911f974ea7e7793304fdacb7323b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 14 Apr 2026 12:06:46 +0000
Subject: [PATCH 1/2] Update src/app/page.tsx

---
 src/app/page.tsx | 387 +++++++++++++----------------------------------
 1 file changed, 109 insertions(+), 278 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0d7d3a4..4781ab6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,299 +2,130 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { ShieldCheck } from "lucide-react";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import MetricCardSeven from '@/components/sections/metric/MetricCardSeven';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { Zap, Target, Award } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="compact"
-        sizing="mediumSizeLargeTitles"
-        background="grid"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="noise"
         cardStyle="glass-depth"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
-        headingFontWeight="bold"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Topmovers"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            brandName="NOIR"
+            navItems={[
+              { name: "Collection", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Process", id: "features" },
+              { name: "Contact", id: "contact" }
+            ]}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-static-grid",
-      }}
-      title="Seamless Relocation, Every Time."
-      description="Premium moving services tailored to your specific needs. Experience a stress-free transition with our professional team."
-      buttons={[
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-getting-ready-his-new-home-move_23-2149094133.jpg?_wi=1",
-          imageAlt: "moving trucks professional loading",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-out-delivery_23-2149371919.jpg?_wi=1",
-          imageAlt: "movers handling boxes carefully",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/diverse-warehouse-managers-packing-parcels_482257-90411.jpg?_wi=1",
-          imageAlt: "moving crew working together",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-delivery-man-with-package_23-2148889999.jpg?_wi=1",
-          imageAlt: "truck loading moving services",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229210.jpg?_wi=1",
-          imageAlt: "moving boxes inside truck",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/laborers-preparing-warehouse-shipping_482257-75296.jpg",
-          imageAlt: "moving service team portrait",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitDualMedia
+            title="Define the Shadow."
+            description="Premium streetwear crafted for the modern edge. Uncompromising quality meets a dark, nocturnal aesthetic."
+            tag="New Season Available"
+            rating={5}
+            ratingText="Rated 5.0 by our community"
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/black-hoodie-mockup-men-wearing-streetwear_23-2149463996.jpg", imageAlt: "Black Hoodie Streetwear" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-man-wearing-black-leather-jacket_144627-24792.jpg", imageAlt: "Edgy Leather Style" }
+            ]}
+            buttons={[{ text: "Explore Collection" }]}
+            background={{ variant: "plain" }}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="Our Commitment"
-      title="We Move Your World With Care."
-      description="With years of excellence in logistics, we ensure that your belongings arrive exactly how they left—perfectly intact."
-      subdescription="From local moves to complex relocations, Topmovers provides bespoke solutions for every client."
-      imageSrc="http://img.b2bpic.net/free-photo/person-presenting-their-job-resignation_23-2149445185.jpg"
-      mediaAnimation="slide-up"
-      icon={ShieldCheck}
-      imageAlt="moving consultant helping family"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MediaAbout
+            title="The Essence of Noir"
+            description="Born from the city streets, Noir is a brand for those who find power in the shadows. We prioritize heavy-weight textiles, precision cuts, and a monochromatic palette that stands the test of time."
+            tag="Brand Identity"
+            imageSrc="http://img.b2bpic.net/free-photo/young-man-wearing-black-oversized-t-shirt_23-2149463994.jpg"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Residential Moving",
-          description: "Safe transport for your home items.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home-together-african-american-couple-with-cardboard-boxes_1157-40330.jpg",
-        },
-        {
-          title: "Corporate Relocation",
-          description: "Minimize downtime for your business.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-warehouse_23-2149128291.jpg",
-        },
-        {
-          title: "Storage Solutions",
-          description: "Secure space for extra belongings.",
-          imageSrc: "http://img.b2bpic.net/free-photo/interracial-couple-getting-ready-move_23-2149094080.jpg",
-        },
-      ]}
-      title="Comprehensive Moving Services"
-      description="Everything you need for a successful transition under one roof."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyFive
+            title="Our Craft"
+            description="Details that define a premium garment."
+            animationType="blur-reveal"
+            useInvertedBackground={false}
+            features={[
+              { title: "Heavyweight Cotton", description: "High density, durable fabrics.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-fabric-texture_23-2148782354.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/cotton-fabric-rolls_23-2148782355.jpg" }] },
+              { title: "Precision Cuts", description: "Tailored for an oversized, architectural fit.", icon: Target, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-working-studio_23-2148782356.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/pattern-making-fashion_23-2148782357.jpg" }] },
+              { title: "Ethical Sourcing", description: "Crafted with respect for the artisan.", icon: Award, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/workshop-artisans_23-2148782358.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/ethical-fashion-label_23-2148782359.jpg" }] }
+            ]}
+            textboxLayout="split"
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          value: "15k+",
-          description: "Moves Completed",
-        },
-        {
-          id: "2",
-          value: "99.8%",
-          description: "Safety Rate",
-        },
-        {
-          id: "3",
-          value: "24/7",
-          description: "Support Available",
-        },
-      ]}
-      title="Proven Performance"
-      description="Our success is measured by the satisfaction of our clients and the safety of their goods."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardSeven
+            title="Impact Metrics"
+            description="Stats behind the black."
+            textboxLayout="default"
+            animationType="depth-3d"
+            metrics={[
+              { id: "1", value: "100%", title: "Midnight Aesthetics", items: ["Black-on-black", "Dark grey accents", "Shadow finish"] },
+              { id: "2", value: "50k", title: "Pieces Sold", items: ["Global reach", "Cult following", "Limited editions"] }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Miller",
-          date: "Jan 2024",
-          title: "Great Service",
-          quote: "Topmovers made my relocation simple and stress-free.",
-          tag: "Relocation",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-getting-ready-his-new-home-move_23-2149094133.jpg?_wi=2",
-          imageAlt: "happy home owner portrait",
-        },
-        {
-          id: "2",
-          name: "John Doe",
-          date: "Feb 2024",
-          title: "Professional Team",
-          quote: "Very punctual and extremely careful with fragile items.",
-          tag: "Residential",
-          avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera-office_482257-119300.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-out-delivery_23-2149371919.jpg?_wi=2",
-          imageAlt: "happy home owner portrait",
-        },
-        {
-          id: "3",
-          name: "Elena Ross",
-          date: "Mar 2024",
-          title: "Highly Recommend",
-          quote: "Efficient planning made a massive difference to our move.",
-          tag: "Corporate",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-young-man-sitting-armchair-against-grey-wall_23-2148130370.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/diverse-warehouse-managers-packing-parcels_482257-90411.jpg?_wi=2",
-          imageAlt: "happy home owner portrait",
-        },
-        {
-          id: "4",
-          name: "Mike Smith",
-          date: "Apr 2024",
-          title: "Excellent Care",
-          quote: "The team treated our furniture like it was their own.",
-          tag: "Residential",
-          avatarSrc: "http://img.b2bpic.net/free-photo/displeased-businessman-showing-middle-finger-toward-camera-after-losing-his-job-office_637285-6833.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-delivery-man-with-package_23-2148889999.jpg?_wi=2",
-          imageAlt: "happy home owner portrait",
-        },
-        {
-          id: "5",
-          name: "Anna Wright",
-          date: "May 2024",
-          title: "Seamless Process",
-          quote: "Five star service from start to finish!",
-          tag: "Relocation",
-          avatarSrc: "http://img.b2bpic.net/free-photo/businessman-showing-thumbs-up-sign_93675-133117.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229210.jpg?_wi=2",
-          imageAlt: "happy home owner portrait",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="Stories from families and businesses who trust Topmovers."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            title="Voices of Noir"
+            description="See how our community wears the darkness."
+            textboxLayout="split-description"
+            animationType="blur-reveal"
+            testimonials={[
+              { id: "1", name: "Alex D.", role: "Stylist", testimonial: "The fit and feel of the materials is unparalleled. Finally, clothing that matches my vibe." },
+              { id: "2", name: "Maya K.", role: "Creative", testimonial: "Noir isn't just clothing; it's a statement. Clean, sharp, and perfectly edgy." }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-static-grid",
-      }}
-      tag="Get Started"
-      title="Ready to move?"
-      description="Enter your email to receive a customized moving consultation."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Join The Order"
+            title="Early Access"
+            description="Sign up to be the first to know about our exclusive limited-edition drops."
+            buttons={[{ text: "Join Waitlist" }]}
+            background={{ variant: "sparkles-gradient" }}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Residential",
-              href: "#features",
-            },
-            {
-              label: "Corporate",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Topmovers"
-      copyrightText="© 2025 Topmovers. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="NOIR"
+            columns={[
+              { title: "Shop", items: [{ label: "Hoodies", href: "#" }, { label: "T-Shirts", href: "#" }] },
+              { title: "Noir", items: [{ label: "Our Vision", href: "#about" }, { label: "Stockists", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1


From c0c955f8cb7dc30d0dcd4892992535339664879c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 14 Apr 2026 12:06:46 +0000
Subject: [PATCH 2/2] Update src/app/styles/variables.css

---
 src/app/styles/variables.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index b7afc67..ed90608 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #535353;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
-- 
2.49.1