diff --git a/src/app/page.tsx b/src/app/page.tsx
index d6130be..93937ce 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,316 +2,120 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import { Coffee, Briefcase, Zap, Mail, MessageSquare } from "lucide-react";
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="mediumSizeLargeTitles"
-        background="circleGradient"
-        cardStyle="glass-depth"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Portfolio",
-          id: "#portfolio",
-        },
-        {
-          name: "Process",
-          id: "#how-it-works",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="Agency X"
-      button={{
-        text: "Get Preview",
-        href: "#contact",
-      }}
-    />
-  </div>
+        <NavbarStyleApple 
+            brandName="Agency"
+            navItems={[
+                { name: "Portfolio", id: "#portfolio" },
+                { name: "Benefits", id: "#benefits" },
+                { name: "Process", id: "#how-it-works" },
+                { name: "Contact", id: "#contact" }
+            ]}
+        />
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{
-        variant: "plain",
-      }}
-      title="Websites That Convert, Not Just Look Good."
-      description="We build premium, high-converting digital storefronts tailored for your local business. Get more clients with a site that works as hard as you do."
-      buttons={[
-        {
-          text: "Get Your Free Preview",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-seller-car-dealership_23-2149106140.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826279.jpg",
-          alt: "Minimalist office interior design",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797750.jpg",
-          alt: "Modern office space with futuristic decor and furniture",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777551.jpg",
-          alt: "Modern and minimalist office in black and white",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797676.jpg",
-          alt: "Modern office space with futuristic decor and furniture",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821346.jpg",
-          alt: "Futuristic kitchen interior design",
-        },
-      ]}
-      avatarText="Trusted by 50+ local leaders"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "SEO Optimized",
-        },
-        {
-          type: "text",
-          text: "Mobile Responsive",
-        },
-        {
-          type: "text",
-          text: "Fast Loading",
-        },
-        {
-          type: "text",
-          text: "Conversion Focused",
-        },
-        {
-          type: "text",
-          text: "Modern Design",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero">
+          <HeroBillboard
+            title="Modern Websites for Local Growth"
+            description="We craft professional, high-performance websites that build credibility and drive customers to your business. Clean, fast, and results-focused."
+            background={{ variant: "plain" }}
+            buttons={[{ text: "Get Started", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797750.jpg"
+          />
+        </div>
 
-  <div id="portfolio" data-section="portfolio">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="split-description"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "The Modern Café",
-          price: "View Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-man-s-hands-keyboard-open-generic-laptop-male-student-studying-online-his-notebook-computer_273609-1402.jpg",
-        },
-        {
-          id: "2",
-          name: "Elite Fashion Co.",
-          price: "View Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-autumnal-leaf-with-copy-space_23-2148647659.jpg",
-        },
-        {
-          id: "3",
-          name: "Success Business LLC",
-          price: "View Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-133814.jpg",
-        },
-      ]}
-      title="Website Previews"
-      description="Real examples of modern design."
-    />
-  </div>
+        <div id="portfolio">
+          <ProductCardThree
+            title="Recent Work"
+            description="Designed to stand out in the local market."
+            gridVariant="one-large-left-three-stacked-right"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "City Café", price: "Custom Web", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-man-s-hands-keyboard-open-generic-laptop-male-student-studying-online-his-notebook-computer_273609-1402.jpg" },
+              { id: "p2", name: "Fashion Brand", price: "E-commerce", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-autumnal-leaf-with-copy-space_23-2148647659.jpg" },
+              { id: "p3", name: "Business Consulting", price: "Lead Gen", imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-133814.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="benefits" data-section="benefits">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Get More Clients",
-          description: "High-converting designs engineered to drive leads.",
-          imageSrc: "http://img.b2bpic.net/free-photo/nobody-architectural-office-with-building-model-maquette-design-property-real-estate-empty-space-plan-construction-layout-structure-with-blueprints-urban-sketch_482257-38861.jpg",
-        },
-        {
-          title: "Professional Image",
-          description: "Look like an industry leader with custom design.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-communication-caucasian-student-using-laptop-computer-texting-friends-online-via-social-media_273609-1407.jpg",
-        },
-        {
-          title: "Build Trust",
-          description: "Clean, credible sites that earn client confidence.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-single-s-day-banner_23-2149520230.jpg",
-        },
-      ]}
-      title="Why Choose Us?"
-      description="We turn visitors into loyal customers."
-    />
-  </div>
+        <div id="benefits">
+          <FeatureBento
+            title="Built for Success"
+            description="We focus on the metrics that matter for your bottom line."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "High Conversion", description: "Optimized layouts to capture more leads.", bentoComponent: 'reveal-icon', icon: Zap },
+              { title: "Industry Trust", description: "Modern design that makes you look the part.", bentoComponent: 'reveal-icon', icon: Briefcase },
+              { title: "Customer Growth", description: "Reaching your community with impact.", bentoComponent: 'reveal-icon', icon: Coffee }
+            ]}
+          />
+        </div>
 
-  <div id="how-it-works" data-section="how-it-works">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "01",
-          title: "We Create Preview",
-          description: "You get a custom look.",
-          imageSrc: "http://img.b2bpic.net/free-photo/small-business-strategy-marketing-enterprise-concept_53876-133756.jpg",
-        },
-        {
-          id: "m2",
-          value: "02",
-          title: "You Approve",
-          description: "We finalize every detail.",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345398.jpg",
-        },
-        {
-          id: "m3",
-          value: "03",
-          title: "We Launch",
-          description: "Your site goes live.",
-          imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-office-financial-investments-looking-chroma-key-laptop_482257-120503.jpg",
-        },
-      ]}
-      title="Simple 3-Step Process"
-      description="Getting your new site is effortless."
-    />
-  </div>
+        <div id="how-it-works">
+          <MetricCardThree
+            title="Our 3-Step Process"
+            description="Seamless delivery, every single time."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", icon: Coffee, title: "Discovery", value: "Step 01" },
+              { id: "m2", icon: Zap, title: "Design", value: "Step 02" },
+              { id: "m3", icon: Briefcase, title: "Launch", value: "Step 03" }
+            ]}
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Café Bistro",
-        "Urban Style",
-        "Elite Fitness",
-        "Bloom Florist",
-        "Fresh Market",
-        "Local Tech",
-        "Studio Art",
-      ]}
-      title="Trusted by Local Heroes"
-      description="We power growing businesses in our community."
-    />
-  </div>
+        <div id="contact">
+          <ContactCTA
+            title="Ready to Build?"
+            description="Reach out to us via email at contact@agency.com or start a conversation instantly via WhatsApp."
+            tag="Get In Touch"
+            buttons={[
+              { text: "Email Us", href: "mailto:contact@agency.com" },
+              { text: "Chat on WhatsApp", href: "https://wa.me/15551234567" }
+            ]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How fast can we launch?",
-          content: "Usually within 2-4 weeks.",
-        },
-        {
-          id: "f2",
-          title: "Do you manage everything?",
-          content: "Yes, we handle hosting and maintenance.",
-        },
-        {
-          id: "f3",
-          title: "Can I edit the site?",
-          content: "Yes, we provide easy access.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780717.jpg"
-      title="Common Questions"
-      description="Everything you need to know."
-      mediaAnimation="slide-up"
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Start Your Project"
-      description="Email: jc8016.martinez@gmail.com | Need help? Chat via WhatsApp."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Tell us about your business goals",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/wooden-workspace-design_1048-1772.jpg"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Agency",
-          items: [
-            {
-              label: "Portfolio",
-              href: "#portfolio",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Email",
-              href: "mailto:jc8016.martinez@gmail.com",
-            },
-            {
-              label: "WhatsApp",
-              href: "https://wa.me/15551234567",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Digital Agency X"
-      bottomRightText="All rights reserved"
-    />
-  </div>
+        <div id="footer">
+          <FooterBase
+            logoText="Agency"
+            columns={[
+              { title: "Agency", items: [{ label: "Home", href: "#" }, { label: "Portfolio", href: "#portfolio" }] },
+              { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "WhatsApp", href: "https://wa.me/15551234567" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index b7afc67..71d72ec 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: #ffffff;
+  --card: #f5f5f5;
+  --foreground: #1a1a1a;
+  --primary-cta: #1a1a1a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #f5f5f5;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);