diff --git a/src/app/page.tsx b/src/app/page.tsx
index bc76fb3..20d5144 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,673 +1,225 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroCentered from "@/components/sections/hero/HeroCentered";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import Input from "@/components/form/Input";
-import { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown, Play, Image, Layers, Clock, CheckCircle, HelpCircle, Calendar, ArrowRight, MessageCircle, Zap as ZapIcon, Award, Bolt, Target, Rocket, Flame } from "lucide-react";
-import { useState, useEffect } from "react";
-import Link from "next/link";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Sparkles, CheckCircle, Zap, Target } from "lucide-react";
+import Image from "next/image";
 
-export default function LandingPage() {
-  const [showComparison, setShowComparison] = useState(false);
-  const [urlInput, setUrlInput] = useState("");
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [showMobileCTA, setShowMobileCTA] = useState(false);
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "#features" },
+  { name: "Pricing", id: "#pricing" },
+  { name: "Contact", id: "#contact" },
+];
 
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 100);
-      setShowMobileCTA(window.scrollY > 500);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+const heroButtons = [
+  { text: "Claim Free Ads", href: "#claim-free" },
+  { text: "See Samples", href: "#samples" },
+];
 
-  const handleUrlSubmit = () => {
-    if (urlInput.trim()) {
-      window.location.href = `/thank-you?url=${encodeURIComponent(urlInput)}`;
-    }
-  };
+const aboutBulletPoints = [
+  {
+    title: "Professional Quality",    description: "Agency-caliber video ads and static creatives that stand out",    icon: Sparkles,
+  },
+  {
+    title: "48-Hour Delivery",    description: "Fast turnaround without compromising on quality or results",    icon: Zap,
+  },
+  {
+    title: "40% Average ROAS Increase",    description: "Proven results that drive measurable business growth",    icon: Target,
+  },
+  {
+    title: "50% Cost Savings",    description: "Half the cost of traditional agencies while maintaining excellence",    icon: CheckCircle,
+  },
+];
 
+const features = [
+  {
+    id: "1",    title: "Video Ad Creation",    description: "Compelling video ads optimized for all platforms with proven engagement metrics",    imageSrc:
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png",    imageAlt: "Video ad creation"},
+  {
+    id: "2",    title: "Static Creative Design",    description: "Eye-catching static images and banners that convert viewers into customers",    imageSrc:
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png",    imageAlt: "Static creative design"},
+  {
+    id: "3",    title: "Platform Optimization",    description: "Creatives tailored for Facebook, Instagram, Google, and TikTok with format expertise",    imageSrc:
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png",    imageAlt: "Platform optimization"},
+  {
+    id: "4",    title: "A/B Testing Ready",    description: "Multiple variations for each creative to maximize your testing and learning",    imageSrc:
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png",    imageAlt: "A/B testing ready"},
+];
+
+const pricingPlans = [
+  {
+    id: "1",    badge: "Starter",    badgeIcon: Sparkles,
+    price: "$299",    subtitle: "Perfect for small businesses testing paid ads",    buttons: [
+      { text: "Get Started", onClick: () => console.log("Starter selected") },
+      { text: "Learn More", href: "#" },
+    ],
+    features: [
+      "3 video ad variations",      "5 static creatives",      "One platform optimization",      "48-hour delivery",      "Email support"],
+  },
+  {
+    id: "2",    badge: "Professional",    badgeIcon: Zap,
+    price: "$599",    subtitle: "Best for growing businesses scaling campaigns",    buttons: [
+      { text: "Get Started", onClick: () => console.log("Professional selected") },
+      { text: "Learn More", href: "#" },
+    ],
+    features: [
+      "6 video ad variations",      "10 static creatives",      "Multi-platform optimization",      "48-hour delivery",      "Priority support",      "Monthly strategy call"],
+  },
+  {
+    id: "3",    badge: "Enterprise",    badgeIcon: Target,
+    price: "Custom",    subtitle: "For large teams with complex needs",    buttons: [
+      { text: "Contact Sales", onClick: () => console.log("Enterprise contact") },
+      { text: "View Details", href: "#" },
+    ],
+    features: [
+      "Unlimited creatives",      "All platforms covered",      "Custom delivery timeline",      "Dedicated account manager",      "24/7 support",      "Quarterly business reviews"],
+  },
+];
+
+const contactButtons = [
+  { text: "Start Your Free Ads", href: "#claim-free" },
+  { text: "Schedule a Call", onClick: () => console.log("Schedule call") },
+];
+
+const footerColumns = [
+  {
+    items: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "About", href: "#about" },
+    ],
+  },
+  {
+    items: [
+      { label: "Contact", href: "#contact" },
+      { label: "Support", href: "#support" },
+      { label: "Terms", href: "#terms" },
+    ],
+  },
+];
+
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
+      borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="none"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <div className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-          isScrolled ? 'bg-background/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
-        }`}>
+      <div className="w-full">
+        <nav className="sticky top-0 z-50">
           <NavbarLayoutFloatingInline
+            navItems={navItems}
             brandName="studio ads"
-            navItems={[
-              { name: "How it Works", id: "how-it-works" },
-              { name: "Pricing", id: "pricing" },
-              { name: "Testimonials", id: "testimonials" },
-              { name: "FAQ", id: "faq" },
-              { name: "Contact", id: "contact" }
-            ]}
             button={{
-              text: "Get Your Free Ads → See 48-Hour Results",              href: "#free-offer"
+              text: "Get Started",              onClick: () => console.log("navbar cta clicked"),
             }}
             animateOnLoad={true}
           />
-        </div>
-      </div>
+        </nav>
 
-      {/* Floating WhatsApp Chat Button */}
-      <div className="fixed bottom-6 right-6 z-40">
-        <a
-          href="https://wa.me/1234567890"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center justify-center w-14 h-14 rounded-full bg-primary-cta text-primary-cta-text hover:scale-110 transition-transform shadow-lg"
-          aria-label="Chat on WhatsApp"
-        >
-          <MessageCircle size={24} />
-        </a>
-      </div>
-
-      {/* Mobile-only CTA Bar */}
-      {showMobileCTA && (
-        <div className="fixed bottom-0 left-0 right-0 z-40 md:hidden bg-primary-cta text-primary-cta-text p-4 shadow-lg">
-          <button
-            onClick={() => document.getElementById('free-offer')?.scrollIntoView({ behavior: 'smooth' })}
-            className="w-full py-3 px-4 bg-white text-primary-cta font-semibold rounded-full hover:opacity-90 transition-opacity"
-          >
-            Get Your Free Ads
-          </button>
-        </div>
-      )}
-
-      <div id="hero" data-section="hero">
-        <HeroCentered
-          title="48-Hour Ad Creatives That Drive 40% ROAS"
-          description="Cut production time from weeks to 2 days. Launch high-converting ads in 48 hours at half the cost of agencies. Get agency-quality video ads and static creatives faster, smarter, and cheaper."
-          background={{ variant: "downward-rays-animated" }}
-          avatars={[
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png",              alt: "Marketing professional 1"
-            },
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png",              alt: "Creative director"
-            },
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png",              alt: "Business owner"
-            }
-          ]}
-          avatarText="Trusted by 100+ agencies and brands"
-          buttons={[
-            { text: "Start Free Project", href: "#free-offer" },
-            { text: "See Our Work", href: "#features" }
-          ]}
-          buttonAnimation="slide-up"
-          ariaLabel="Hero section - studio ads professional ad creatives in 48 hours"
-        />
-      </div>
-
-      {/* Metrics Strip Section */}
-      <div id="metrics" data-section="metrics" className="py-12 md:py-16 bg-card border-y border-accent/10">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8">
-            <div className="text-center">
-              <div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">$2.3M+</div>
-              <p className="text-foreground/70 text-sm md:text-base">Ad Spend Managed</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">34%</div>
-              <p className="text-foreground/70 text-sm md:text-base">Avg CPC Reduction</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">48hr</div>
-              <p className="text-foreground/70 text-sm md:text-base">Delivery Time</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">200+</div>
-              <p className="text-foreground/70 text-sm md:text-base">Creatives Delivered</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Platform Logo Strip */}
-      <div id="platforms" data-section="platforms" className="py-8 md:py-12 bg-background">
-        <div className="max-w-6xl mx-auto px-4">
-          <p className="text-center text-foreground/60 text-sm md:text-base mb-6 md:mb-8">We create ads optimized for all major platforms</p>
-          <div className="flex flex-wrap justify-center items-center gap-6 md:gap-10">
-            <div className="flex items-center gap-2 text-foreground/70 font-semibold">
-              <span className="text-lg">f</span> Meta
-            </div>
-            <div className="flex items-center gap-2 text-foreground/70 font-semibold">
-              <span className="text-lg">⏶</span> TikTok
-            </div>
-            <div className="flex items-center gap-2 text-foreground/70 font-semibold">
-              <span className="text-lg">▶</span> YouTube
-            </div>
-            <div className="flex items-center gap-2 text-foreground/70 font-semibold">
-              <span className="text-lg">G</span> Google
-            </div>
-            <div className="flex items-center gap-2 text-foreground/70 font-semibold">
-              <span className="text-lg">◻</span> Display
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Proven Results for Growing Brands"
-          description="40% Average ROAS Increase. 3 Weeks Production Time Cut to 48 Hours. Real numbers from real clients achieving real results."
-          tag="Social Proof"
-          tagIcon={TrendingUp}
-          names={["40% Average ROAS Increase", "3 Weeks Production Time Cut to 48 Hours", "95% Client Satisfaction", "10M+ Impressions Generated", "50% Cost Savings vs Agencies"]}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          speed={40}
-          showCard={true}
-          buttons={[
-            { text: "View Success Stories", href: "#testimonials" }
-          ]}
-          buttonAnimation="blur-reveal"
-        />
-      </div>
-
-      <div id="pain-points" data-section="pain-points" className="relative py-16 md:py-24 px-4 bg-gradient-to-br from-primary-cta/10 via-background to-accent/5 overflow-hidden">
-        <div className="absolute inset-0 opacity-30">
-          <div className="absolute top-10 left-10 w-72 h-72 bg-primary-cta/20 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-10 right-10 w-96 h-96 bg-accent/20 rounded-full blur-3xl"></div>
-        </div>
-        <div className="max-w-6xl mx-auto relative z-10">
-          <div className="text-center mb-12 md:mb-16">
-            <div className="inline-block mb-4 animate-pulse">
-              <span className="px-4 py-2 rounded-full bg-primary-cta text-primary-cta-text text-sm font-bold flex items-center gap-2 shadow-lg">
-                <Flame size={16} />
-                Why Switch Now
-              </span>
-            </div>
-            <h2 className="text-4xl md:text-6xl font-black text-foreground mb-4 leading-tight">The Old Way vs. The studio ads Way</h2>
-            <p className="text-foreground/70 text-lg md:text-xl max-w-2xl mx-auto">Stop wasting weeks and thousands of dollars on ad production. Here's how we're revolutionizing creative delivery.</p>
+        <main className="w-full">
+          <div id="hero" data-section="hero">
+            <HeroBillboardScroll
+              background={{ variant: "sparkles-gradient" }}
+              title="Agency-Quality Ad Creatives in 48 Hours"
+              description="Get professional video ads and static creatives delivered fast. 40% average ROAS increase. Half the cost of traditional agencies."
+              tag="Premium Creatives"
+              tagIcon={Sparkles}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png"
+              imageAlt="Hero showcase"
+              buttons={heroButtons}
+            />
           </div>
 
-          {/* Enhanced Comparison Chart */}
-          <div className="overflow-x-auto rounded-2xl border border-primary-cta/30 shadow-2xl">
-            <table className="w-full text-sm md:text-base">
-              <thead>
-                <tr className="border-b-2 border-primary-cta/40 bg-gradient-to-r from-primary-cta/20 to-accent/20">
-                  <th className="text-left py-5 px-4 md:px-8 font-black text-foreground text-base md:text-lg">Feature</th>
-                  <th className="text-center py-5 px-4 md:px-8 font-bold text-foreground/70 text-base md:text-lg">Traditional Agencies</th>
-                  <th className="text-center py-5 px-4 md:px-8 font-black text-primary-cta text-base md:text-lg">⚡ studio ads</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">⏱️ Production Time</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 strikethrough opacity-60">3-4 Weeks</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🚀 48 Hours</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">💰 Cost per Ad</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 strikethrough opacity-60">$2,500-5,000</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">✨ $500-1,500</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">🎨 Creative Variations</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">1-3 Concepts</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">💎 10+ Included</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">🔄 Revision Rounds</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Limited / Extra $</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">∞ Unlimited</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">📱 Platform Coverage</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Limited Formats</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🌐 All Platforms</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">📈 Average ROAS Lift</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">20-25%</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🔥 40% Guaranteed</td>
-                </tr>
-                <tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">👥 Account Manager</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Always Included</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">⭐ Growth+ Plans</td>
-                </tr>
-                <tr className="hover:bg-primary-cta/10 transition-all duration-300 group">
-                  <td className="py-5 px-4 md:px-8 font-bold text-foreground">🚀 Onboarding</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">2-4 Weeks</td>
-                  <td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">⚡ Instant</td>
-                </tr>
-              </tbody>
-            </table>
+          <div id="about" data-section="about">
+            <SplitAbout
+              title="Why Choose Studio Ads"
+              description="We combine speed, quality, and affordability to deliver results that matter"
+              tag="Our Approach"
+              tagIcon={CheckCircle}
+              bulletPoints={aboutBulletPoints}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/uploaded-1773100314435-vddenqu9.png"
+              imageAlt="About showcase"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              mediaAnimation="slide-up"
+              imagePosition="right"
+            />
           </div>
 
-          <div className="mt-12 text-center">
-            <button
-              onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
-              className="inline-flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-primary-cta to-accent text-primary-cta-text hover:shadow-2xl hover:scale-105 transition-all font-black text-lg shadow-lg"
-              aria-label="View features"
-            >
-              <span>Experience the Difference</span>
-              <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureBento
-          title="Our Complete Creative Solutions"
-          description="Everything you need to build winning ad campaigns, all in one platform."
-          tag="Capabilities"
-          tagIcon={Sparkles}
-          features={[
-            {
-              title: "Video Ads",              description: "Professional 15-60 second video ads optimized for every platform. Cinematic, conversion-focused, and brand-consistent.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", imageAlt: "Video ad sample" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png", imageAlt: "Creative sample" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", imageAlt: "Creative sample" }
-              ]
-            },
-            {
-              title: "Static Ad Creatives",              description: "High-converting Instagram, Facebook, and Google Ads. Multiple sizes and formats ready to deploy.",              bentoComponent: "reveal-icon",              icon: Image
-            },
-            {
-              title: "Full-Funnel Packs",              description: "Complete creative suites covering awareness, consideration, and conversion. Cohesive storytelling across all stages.",              bentoComponent: "3d-stack-cards",              items: [
-                { icon: Layers, title: "Awareness", subtitle: "Top of Funnel", detail: "Build brand recognition with impact" },
-                { icon: Play, title: "Consideration", subtitle: "Mid Funnel", detail: "Showcase value and benefits" },
-                { icon: CheckCircle, title: "Conversion", subtitle: "Bottom Funnel", detail: "Drive action and sales" }
-              ]
-            },
-            {
-              title: "Brand Consistency",              description: "All creatives maintain your brand guidelines. Colors, fonts, messaging—perfectly aligned every time.",              bentoComponent: "marquee",              centerIcon: Shield,
-              variant: "text",              texts: ["Your Brand", "Every Time", "Consistent Style", "Perfect Fit"]
-            },
-            {
-              title: "Multi-Category Support",              description: "We create ads for SaaS, E-commerce, Real Estate, Services, and any industry you're in.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
-              items: [
-                { icon: ShoppingCart, ring: 1 },
-                { icon: Package, ring: 1 },
-                { icon: BarChart3, ring: 2 },
-                { icon: Briefcase, ring: 2 }
-              ]
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          buttons={[
-            { text: "View All Features", href: "#how-it-works" }
-          ]}
-          buttonAnimation="blur-reveal"
-        />
-      </div>
-
-      <div id="how-it-works" data-section="how-it-works">
-        <FeatureBento
-          title="How It Works: 4 Simple Steps"
-          description="From brief to finished creatives in just 48 hours. No complexity, no delays."
-          tag="Process"
-          tagIcon={Clock}
-          features={[
-            {
-              title: "Step 1: Share Your Brief",              description: "Tell us about your product, audience, and goals. Upload references and any brand assets.",              bentoComponent: "reveal-icon",              icon: Mail
-            },
-            {
-              title: "Step 2: Creative Strategy",              description: "Our team develops concepts and creative directions tailored to your objectives.",              bentoComponent: "reveal-icon",              icon: Palette
-            },
-            {
-              title: "Step 3: Production & Revisions",              description: "We produce high-quality creatives and incorporate your feedback within 24 hours.",              bentoComponent: "reveal-icon",              icon: Play
-            },
-            {
-              title: "Step 4: Launch & Optimize",              description: "Receive final files in all formats. Deploy across channels and watch them perform.",              bentoComponent: "reveal-icon",              icon: CheckCircle
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Start Your First Project", href: "#pricing" }
-          ]}
-          buttonAnimation="opacity"
-        />
-      </div>
-
-      <div id="free-offer" data-section="free-offer" className="relative py-16 md:py-20 px-4 bg-gradient-to-br from-primary-cta/10 via-background to-accent/5 overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
-        </div>
-        <div className="max-w-2xl mx-auto relative z-10">
-          <div className="text-center mb-8">
-            <div className="inline-block mb-4 px-4 py-2 rounded-full bg-primary-cta/20 border border-primary-cta/40 mb-4">
-              <span className="text-primary-cta font-bold text-sm">🎁 LIMITED TIME OFFER</span>
-            </div>
-            <h2 className="text-4xl md:text-5xl font-black text-foreground mb-4 leading-tight">Claim Your 3 Free Premium Ads</h2>
-            <p className="text-foreground/70 mb-2 text-lg">Try our service risk-free. No credit card required upfront. Get agency-quality ad creatives delivered in 48 hours.</p>
-            <p className="text-primary-cta font-black text-base md:text-lg mb-6 animate-pulse">⚡ Only 3 spots left this week</p>
+          <div id="features" data-section="features">
+            <FeatureCardTwentySeven
+              features={features}
+              gridVariant="four-items-2x2-equal-grid"
+              animationType="slide-up"
+              title="Our Services"
+              description="Comprehensive creative solutions tailored to your advertising needs"
+              tag="Services"
+              tagIcon={Sparkles}
+              textboxLayout="default"
+              useInvertedBackground={false}
+            />
           </div>
 
-          <div className="flex flex-col gap-4 max-w-lg mx-auto">
-            <div className="flex gap-2">
-              <Input
-                value={urlInput}
-                onChange={setUrlInput}
-                type="url"
-                placeholder="e.g. yourbrand.com"
-                required
-              />
-              <button
-                onClick={handleUrlSubmit}
-                className="px-6 py-3 bg-primary-cta text-primary-cta-text font-black rounded-full hover:opacity-90 transition-opacity whitespace-nowrap shadow-lg"
-              >
-                Claim Free Ads
-              </button>
-            </div>
-            <button
-              onClick={handleUrlSubmit}
-              className="w-full py-4 px-6 bg-gradient-to-r from-primary-cta to-accent text-primary-cta-text font-black rounded-full hover:opacity-90 transition-opacity text-lg shadow-lg"
-            >
-              Claim Free Ads Now
-            </button>
+          <div id="claim-free" data-section="claim-free">
+            <ContactCTA
+              tag="Limited Time"
+              title="Claim Your Free Ad Creatives"
+              description="Get started with a free sample package. See the quality and speed that sets us apart. No credit card required."
+              buttons={[
+                { text: "Get Free Ads Now", onClick: () => console.log("claim free ads") },
+                {
+                  text: "Book a Consultation",                  onClick: () => console.log("book consultation"),
+                },
+              ]}
+              background={{ variant: "plain" }}
+              useInvertedBackground={false}
+            />
           </div>
 
-          <p className="text-center text-foreground/60 text-xs md:text-sm mt-4 font-semibold">
-            ✅ No credit card required • 🔒 30-day money-back guarantee • ⚡ 48-hour delivery
-          </p>
-        </div>
-      </div>
-
-      <div id="pricing" data-section="pricing">
-        <div className="relative">
-          <div className="flex justify-center mb-8">
-            <button
-              onClick={() => setShowComparison(!showComparison)}
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-primary-cta text-primary-cta-text hover:opacity-80 transition-opacity font-semibold"
-              aria-label="View plan comparison"
-            >
-              <CheckCircle size={20} />
-              <span>View Plan Comparison</span>
-            </button>
+          <div id="pricing" data-section="pricing">
+            <PricingCardTwo
+              plans={pricingPlans}
+              animationType="slide-up"
+              title="Transparent Pricing"
+              description="Choose the plan that fits your business needs. All plans include 48-hour delivery and proven results."
+              tag="Pricing"
+              tagIcon={Target}
+              textboxLayout="default"
+              useInvertedBackground={false}
+            />
           </div>
-          {showComparison && (
-            <div className="mb-8 p-6 rounded-lg bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20">
-              <h3 className="text-lg font-semibold mb-4 text-foreground">Studio Ads vs Traditional Agencies</h3>
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="border-b border-accent/20">
-                      <th className="text-left py-2 px-3 font-semibold">Metric</th>
-                      <th className="text-center py-2 px-3 font-semibold">Studio Ads</th>
-                      <th className="text-center py-2 px-3 font-semibold">Traditional Agencies</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Production Time</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">48 Hours</td>
-                      <td className="text-center py-3 px-3">3-4 Weeks</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Cost per Ad</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">$500-1,500</td>
-                      <td className="text-center py-3 px-3">$2,500-5,000</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Creative Variations</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">10+ Included</td>
-                      <td className="text-center py-3 px-3">1-3 Base Concepts</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Revision Rounds</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Unlimited (48hr)</td>
-                      <td className="text-center py-3 px-3">Limited / Extra Cost</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Platform Optimization</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">All Major Platforms</td>
-                      <td className="text-center py-3 px-3">Limited Formats</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Average ROAS Lift</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">40% Average</td>
-                      <td className="text-center py-3 px-3">20-25% Average</td>
-                    </tr>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3 font-semibold">Account Manager</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Growth+ Plans</td>
-                      <td className="text-center py-3 px-3">Always Included</td>
-                    </tr>
-                    <tr>
-                      <td className="py-3 px-3 font-semibold">Setup/Onboarding</td>
-                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Minimal</td>
-                      <td className="text-center py-3 px-3">2-4 Weeks</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-        </div>
-        <PricingCardEight
-          title="Simple, Transparent Pricing"
-          description="Choose the plan that fits your creative needs. Upgrade anytime."
-          tag="Plans"
-          tagIcon={CreditCard}
-          plans={[
-            {
-              id: "growth",              badge: "Growth - Most Popular - Guaranteed 40% ROAS Lift",              badgeIcon: ZapIcon,
-              price: "$5,000",              subtitle: "For high-volume, results-driven marketing teams",              buttons: [
-                { text: "Start Your 48-Hour Project", href: "#free-offer" }
-              ],
-              features: [
-                "✓ Unlimited ad projects",                "✓ 30 ad creatives (video & static mix)",                "✓ Full-funnel packs included",                "✓ 24-hour turnaround available",                "✓ A/B testing variations",                "✓ Performance analytics",                "✓ Priority support",                "✓ Dedicated account manager"
-              ]
-            },
-            {
-              id: "starter",              badge: "Starter - Guaranteed 20% ROAS Lift",              badgeIcon: Sparkles,
-              price: "$1,500",              subtitle: "Perfect for growing brands testing ad creation",              buttons: [
-                { text: "Start Free Project", href: "#free-offer" }
-              ],
-              features: [
-                "✓ 4 ad projects per month",                "✓ Video ads (up to 3 variations each)",                "✓ Static creatives (10+ variations)",                "✓ Full-funnel packs",                "✓ 48-hour turnaround",                "✓ Brand consistency maintained",                "✓ Email support"
-              ]
-            },
-            {
-              id: "enterprise",              badge: "Enterprise - Custom ROAS Targets",              badgeIcon: Calendar,
-              price: "Custom",              subtitle: "For agencies and enterprises with unique needs",              buttons: [
-                { text: "Book Appointment", href: "#contact" }
-              ],
-              features: [
-                "✓ Unlimited everything",                "✓ Custom creative strategy sessions",                "✓ Unlimited team members",                "✓ API access",                "✓ White-label options",                "✓ Custom integrations",                "✓ 24/7 dedicated support",                "✓ Quarterly strategy reviews"
-              ]
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttonAnimation="opacity"
-        />
-      </div>
 
-      <div id="who-its-for" data-section="who-its-for" className="relative py-16 md:py-24 px-4 bg-gradient-to-b from-background to-primary-cta/5 overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-1/2 left-0 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
-          <div className="absolute top-1/4 right-0 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
-        </div>
-        <div className="max-w-6xl mx-auto relative z-10">
-          <FeatureBorderGlow
-            title="Who We Help"
-            description="Whether you're a growing brand, creative agency, or in-house marketing team, we've got the perfect solution."
-            tag="Ideal For"
-            tagIcon={Users}
-            features={[
-              {
-                icon: ShoppingCart,
-                title: "E-commerce Brands",                description: "Product ads, promotional content, and conversion-focused creatives that drive sales."
-              },
-              {
-                icon: Package,
-                title: "SaaS Companies",                description: "Feature demonstrations, benefit-focused ads, and explainer videos that educate and convert."
-              },
-              {
-                icon: Briefcase,
-                title: "Marketing Agencies",                description: "Scale your creative output without hiring. Deliver more to your clients faster."
-              },
-              {
-                icon: Users,
-                title: "Digital Creators",                description: "Professional ad content, sponsorship pitches, and promotional materials for your audience."
-              },
-              {
-                icon: Palette,
-                title: "Startups & Brands",                description: "Launch campaigns quickly. Build brand presence with polished, professional ads."
-              },
-              {
-                icon: TrendingUp,
-                title: "Growth Teams",                description: "Test campaigns faster. Optimize with unlimited variations and performance insights."
-              }
-            ]}
-            animationType="blur-reveal"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            carouselMode="buttons"
-          />
-        </div>
-      </div>
+          <div id="contact" data-section="contact">
+            <ContactCTA
+              tag="Ready to Start?"
+              tagIcon={Zap}
+              title="Let's Create Your Next Campaign"
+              description="Our team is ready to deliver professional, high-converting ad creatives in 48 hours. Join hundreds of satisfied clients."
+              buttons={contactButtons}
+              background={{ variant: "plain" }}
+              useInvertedBackground={false}
+            />
+          </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardFifteen
-          testimonial="We went from spending 3 weeks on ad production to 48 hours. The quality is exceptional and our ROAS improved by 40%. studio ads is a game-changer for our agency."
-          rating={5}
-          author="Marcus Chen, Founder"
-          avatars={[
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png",              alt: "Marcus Chen"
-            },
-            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png",              alt: "Team member"
-            }
-          ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="blur-reveal"
-          useInvertedBackground={true}
-          ariaLabel="Customer testimonial from Marcus Chen"
-        />
-      </div>
-
-      <div id="faq" data-section="faq" className="py-16 md:py-24 px-4 bg-gradient-to-b from-background via-primary-cta/5 to-background">
-        <div className="max-w-6xl mx-auto">
-          <FaqSplitMedia
-            faqs={[
-              {
-                id: "1",                title: "How do you deliver in 48 hours?",                content: "We deliver 3-5 premium ad creatives with a guaranteed 48-hour turnaround. Our streamlined workflow combines creative strategy, production, and revisions into a single efficient process. We have dedicated creative teams working around the clock to ensure your project gets the attention it deserves while meeting our 48-hour promise."
-              },
-              {
-                id: "2",                title: "What if I need revisions?",                content: "Revisions are part of our process. We build in time for feedback and iterations within your 48-hour window. For changes after delivery, we have a simple revision policy—typically one round of revisions is included in your plan. Growth plans include unlimited revisions during the project window."
-              },
-              {
-                id: "3",                title: "Do you work with all industries?",                content: "Absolutely. We work with e-commerce, SaaS, real estate, services, finance, healthcare, nonprofits, and everything in between. Every project gets customized strategy based on your industry, audience, and objectives. Our team has experience across 50+ verticals."
-              },
-              {
-                id: "4",                title: "What formats and specs do you deliver?",                content: "We deliver files optimized for Instagram, Facebook, TikTok, LinkedIn, YouTube, Google Ads, and more. All formats include proper sizing, aspect ratios, captions, and platform-specific optimization. You get everything ready to post immediately."
-              },
-              {
-                id: "5",                title: "Can I get unlimited revisions?",                content: "Yes! Revision allowances vary by plan. Our Growth and Enterprise plans include comprehensive revision options. We work with you until you're happy with the results—we succeed when you succeed. Starter plans include 2 revision rounds."
-              },
-              {
-                id: "6",                title: "What's included in the free 3 ads offer?",                content: "You get three custom ad creatives tailored to your business. This might be a mix of video ads, static creatives, or a full-funnel sample. No credit card needed, and it comes with a full 48-hour delivery guarantee. Perfect way to experience the quality of our work risk-free."
-              }
-            ]}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png?_wi=2"
-            imageAlt="FAQ support team"
-            title="Frequently Asked Questions"
-            description="Everything you need to know about working with studio ads."
-            tag="Help"
-            tagIcon={HelpCircle}
-            mediaAnimation="slide-up"
-            faqsAnimation="blur-reveal"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            mediaPosition="left"
-            containerClassName="max-w-6xl mx-auto"
-            contentClassName="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center"
-            mediaWrapperClassName="order-2 md:order-1"
-            faqsContainerClassName="order-1 md:order-2"
-          />
-        </div>
-      </div>
-
-      <div id="contact" data-section="contact" className="py-16 md:py-24 px-4 relative overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 right-0 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-0 left-1/4 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
-        </div>
-        <div className="max-w-4xl mx-auto relative z-10">
-          <ContactCenter
-            tag="Get Started"
-            title="Ready to Scale Your Creative Output?"
-            description="Join 100+ brands and agencies already transforming their ad production with studio ads. Start with your free 3 ads today."
-            tagIcon={Mail}
-            background={{ variant: "downward-rays-static-grid" }}
-            useInvertedBackground={true}
-            inputPlaceholder="Enter your email address"
-            buttonText="Start Free Project"
-            termsText="✅ No card required • 🚀 48-hour guarantee • ⚡ Cancel anytime"
-            ariaLabel="Contact form and ad offer signup"
-            containerClassName="max-w-2xl mx-auto"
-          />
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBaseReveal
-          columns={[
-            {
-              title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
-                { label: "How It Works", href: "#how-it-works" },
-                { label: "Testimonials", href: "#testimonials" }
-              ]
-            },
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "#" },
-                { label: "Blog", href: "#" },
-                { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
-              ]
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" }
-              ]
-            }
-          ]}
-          copyrightText="© 2025 studio ads. All rights reserved."
-          ariaLabel="Footer navigation and company information"
-          containerClassName="max-w-6xl mx-auto px-4"
-        />
+          <footer id="footer" data-section="footer">
+            <FooterLogoEmphasis columns={footerColumns} logoText="studio ads" />
+          </footer>
+        </main>
       </div>
     </ThemeProvider>
   );