From 2e2b93e65c8e30c54fd260a0b83bbc3c278b2bcb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 5 Mar 2026 12:15:42 +0000
Subject: [PATCH] Switch to version 14: modified src/app/page.tsx

---
 src/app/page.tsx | 210 +++++++----------------------------------------
 1 file changed, 31 insertions(+), 179 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e363812..086777e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,31 +11,11 @@ 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 } from "lucide-react";
-import { useState, useEffect } from "react";
-import Link from "next/link";
+import { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown, Play, Image, Layers, Clock, CheckCircle, HelpCircle, Calendar, ArrowRight } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
   const [showComparison, setShowComparison] = useState(false);
-  const [urlInput, setUrlInput] = useState("");
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [showMobileCTA, setShowMobileCTA] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 100);
-      setShowMobileCTA(window.scrollY > 500);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
-  const handleUrlSubmit = () => {
-    if (urlInput.trim()) {
-      window.location.href = `/thank-you?url=${encodeURIComponent(urlInput)}`;
-    }
-  };
 
   return (
     <ThemeProvider
@@ -51,51 +31,22 @@ export default function LandingPage() {
       headingFontWeight="medium"
     >
       <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'
-        }`}>
-          <NavbarLayoutFloatingInline
-            brandName="Efficient 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 3 Free Ads Now",              href: "#free-offer"
-            }}
-            animateOnLoad={true}
-          />
-        </div>
+        <NavbarLayoutFloatingInline
+          brandName="Efficient 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 3 Free Ads Now",            href: "#free-offer"
+          }}
+          animateOnLoad={true}
+        />
       </div>
 
-      {/* 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 3 Free Ads
-          </button>
-        </div>
-      )}
-
       <div id="hero" data-section="hero">
         <HeroCentered
           title="40% ROAS Increase in 48 Hours"
@@ -122,54 +73,6 @@ export default function LandingPage() {
         />
       </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"
@@ -305,66 +208,21 @@ export default function LandingPage() {
           ]}
           buttonAnimation="opacity"
         />
-
-        {/* Video Explainer Section */}
-        <div className="mt-12 md:mt-16 px-4">
-          <div className="max-w-4xl mx-auto">
-            <div className="aspect-video bg-card rounded-lg border border-accent/20 flex items-center justify-center overflow-hidden">
-              <iframe
-                width="100%"
-                height="100%"
-                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-                title="Efficient Ads Demo"
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-              />
-            </div>
-            <p className="text-center text-foreground/60 text-sm mt-4">60-90 second video explainer - See how our process works</p>
-          </div>
-        </div>
       </div>
 
       <div id="free-offer" data-section="free-offer">
-        <div className="relative py-16 md:py-20 px-4 bg-gradient-to-br from-primary-cta/5 to-accent/5">
-          <div className="max-w-2xl mx-auto">
-            <div className="text-center mb-8">
-              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">Claim Your 3 Free Ads Now</h2>
-              <p className="text-foreground/70 mb-6">Try our service risk-free. No credit card required upfront. Get agency-quality ad creatives delivered in 48 hours.</p>
-            </div>
-
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">Paste your website URL</label>
-                <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-semibold rounded-full hover:opacity-90 transition-opacity whitespace-nowrap"
-                  >
-                    Submit
-                  </button>
-                </div>
-              </div>
-              <button
-                onClick={handleUrlSubmit}
-                className="w-full py-4 px-6 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-lg"
-              >
-                Get 3 Free Ads (No Credit Card)
-              </button>
-            </div>
-
-            <p className="text-center text-foreground/60 text-xs md:text-sm mt-4">
-              No credit card required. 30-day money-back guarantee on paid plans.
-            </p>
-          </div>
-        </div>
+        <ContactCenter
+          tag="Free Trial - Risk Free"
+          title="Claim Your 3 Free Ads Now"
+          description="Try our service risk-free. No credit card required upfront. Get agency-quality ad creatives delivered in 48 hours."
+          tagIcon={Sparkles}
+          background={{ variant: "downward-rays-static-grid" }}
+          useInvertedBackground={true}
+          inputPlaceholder="Enter your email address"
+          buttonText="Get 3 Free Ads Now"
+          termsText="No credit card required. 30-day money-back guarantee on paid plans."
+          ariaLabel="Free ad offer signup"
+        />
       </div>
 
       <div id="pricing" data-section="pricing">
@@ -393,12 +251,6 @@ export default function LandingPage() {
                     </tr>
                   </thead>
                   <tbody>
-                    <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Average ROAS Lift</td>
-                      <td className="text-center py-3 px-3">20%</td>
-                      <td className="text-center py-3 px-3">40%</td>
-                      <td className="text-center py-3 px-3">Custom</td>
-                    </tr>
                     <tr className="border-b border-accent/10">
                       <td className="py-3 px-3">Projects/Month</td>
                       <td className="text-center py-3 px-3">4</td>
@@ -448,7 +300,7 @@ export default function LandingPage() {
           tagIcon={CreditCard}
           plans={[
             {
-              id: "starter",              badge: "Starter - 20% Average ROAS Lift",              badgeIcon: Sparkles,
+              id: "starter",              badge: "Starter",              badgeIcon: Sparkles,
               price: "$1,500",              subtitle: "Per Month (Recurring)",              buttons: [
                 { text: "Get 3 Free Ads Now", href: "#free-offer" }
               ],
@@ -457,7 +309,7 @@ export default function LandingPage() {
               ]
             },
             {
-              id: "growth",              badge: "Growth - 40% Average ROAS Lift",              badgeIcon: Zap,
+              id: "growth",              badge: "Most Popular",              badgeIcon: Zap,
               price: "$5,000",              subtitle: "Per Month (Recurring)",              buttons: [
                 { text: "Get 3 Free Ads Now", href: "#free-offer" }
               ],
@@ -466,7 +318,7 @@ export default function LandingPage() {
               ]
             },
             {
-              id: "enterprise",              badge: "Enterprise - Custom ROAS",              badgeIcon: Calendar,
+              id: "enterprise",              badge: "Enterprise",              badgeIcon: Calendar,
               price: "Custom",              subtitle: "Schedule a Call",              buttons: [
                 { text: "Book Appointment", href: "#contact" }
               ],