src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import ContactText from '@/components/sections/contact/ContactText';
-import { Instagram, Twitter, BarChart3, Users, Target } from "lucide-react";
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import { BarChart3, Users, Target } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -56,23 +56,24 @@ export default function LandingPage() {
   </div>
 
   <div id="intelligence" data-section="intelligence">
-      <TextSplitAbout
+      <SplitAbout
       useInvertedBackground={true}
       title="Business Intelligence"
-      description={["Stop guessing. Node tracks every metric that matters — from ad spend to close rate — with full UTM attribution so you know exactly which piece of content generated revenue.", "Unify your data sources into one actionable dashboard."]}
+      description="Stop guessing. Node tracks every metric that matters — from ad spend to close rate — with full UTM attribution so you know exactly which piece of content generated revenue. Unify your data sources into one actionable dashboard."
       buttons={[{ text: "Learn More" }]}
+      textboxLayout="split"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwelve
-      animationType="slide-up"
+      <FeatureCardTwentyThree
+      animationType="blur-reveal"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        { id: "c1", label: "Analytics", title: "Content Intelligence", items: ["Frame-by-frame analysis", "Conversion tracking", "Trust signals"], buttons: [{ text: "Explore" }] },
-        { id: "t1", label: "Team", title: "Team Management", items: ["Setter/closer tracking", "Commission management", "EOD reports"], buttons: [{ text: "Explore" }] },
-        { id: "m1", label: "Unified", title: "Performance Hub", items: ["Calendar integration", "Closed deal tracking", "Real-time visibility"], buttons: [{ text: "Explore" }] }
+        { id: "c1", title: "Content Intelligence", tags: ["Frame-by-frame analysis", "Conversion tracking"] },
+        { id: "t1", title: "Team Management", tags: ["Setter/closer tracking", "EOD reports"] },
+        { id: "m1", title: "Performance Hub", tags: ["Calendar integration", "Real-time visibility"] }
       ]}
       title="Powering Your Growth"
       description="Comprehensive tools to master your performance, content, and team."
@@ -80,15 +81,14 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardSeven
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="bento-grid"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", value: "$200k", title: "Target", description: "Monthly Scaling", icon: BarChart3 },
-        { id: "m2", value: "100+", title: "Metrics", description: "Automatically Tracked", icon: Target },
-        { id: "m3", value: "3x", title: "Growth", description: "Sales Visibility", icon: Users }
+        { id: "m1", value: "$200k", title: "Target", items: ["Monthly Scaling"] },
+        { id: "m2", value: "100+", title: "Metrics", items: ["Automatically Tracked"] },
+        { id: "m3", value: "3x", title: "Growth", items: ["Sales Visibility"] }
       ]}
       title="Built for Scale"
       description="Designed for elite owners running organic content and paid ads at high scale."
@@ -96,65 +96,59 @@ export default function LandingPage() {
   </div>
 
   <div id="proof" data-section="proof">
-      <div className="bg-card p-12 text-center">
-        <h2 className="text-3xl font-bold">Trusted by Industry Leaders</h2>
-        <p className="mt-4">Supporting the top-tier coaching organizations.</p>
-      </div>
+      <SocialProofOne
+      names={["ScaleMax", "CoachCorp", "GrowthOps", "EliteCoaching"]}
+      title="Trusted by Industry Leaders"
+      description="Supporting the top-tier coaching organizations."
+      textboxLayout="default"
+      useInvertedBackground={true}
+    />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardTen
       textboxLayout="split"
       useInvertedBackground={false}
-      animationType="slide-up"
       title="Hear from Owners"
       description="Real results from coaching leaders using Node."
-      kpiItems={[
-        { label: "Avg. Growth", value: "45%" },
-        { label: "Time Saved", value: "12h/wk" },
-        { label: "CRM Accuracy", value: "100%" }
-      ]}
       testimonials={[
-        { id: "1", name: "Sarah J.", role: "Owner", company: "CoachCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-stylish-businesswoman-cafe-sitting-with-notebook-making-notes-working_1258-199053.jpg" },
-        { id: "2", name: "Mark D.", role: "CEO", company: "ScaleMax", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-having-conversation-with-work-colleague_273609-4714.jpg" }
+        { id: "1", title: "Absolute Game Changer", quote: "Node transformed how we track our ROI.", name: "Sarah J.", role: "Owner" },
+        { id: "2", title: "Essential Tool", quote: "We doubled our efficiency within 30 days.", name: "Mark D.", role: "CEO" }
       ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitText
       textboxLayout="split"
       useInvertedBackground={true}
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
       faqs={[
         { id: "f1", title: "Who is Node for?", content: "High-ticket coaching owners making $30k-$200k/mo." },
         { id: "f2", title: "CRM Integrations?", content: "Yes, we support all major sales CRMs." }
       ]}
-      title="Common Questions"
-      description="Get clarity on how Node scales your business."
+      sideTitle="Common Questions"
+      sideDescription="Get clarity on how Node scales your business."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      text="Ready to take control of your revenue?"
-      animationType="entrance-slide"
+      <ContactCenter
+      title="Ready to take control of your revenue?"
+      description="Get started with Node today."
       background={{ variant: "plain" }}
       useInvertedBackground={false}
-      buttons={[{ text: "Schedule Demo", href: "#" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoReveal
       logoText="Node"
-      columns={[
-        { title: "Product", items: [{ label: "Intelligence", href: "#" }, { label: "Features", href: "#" }] },
-        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }
-      ]}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #000000;
-  --foreground: #000000;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
   --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
-  --accent: #106EFB;
-  --background-accent: #000000;
+  --accent: #e2e2e2;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);