bender/478382ab-cb66-4e1f-bd30-d6157a624f7d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to version 14: modified src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-05 12:15:42 +00:00
parent e9f886752a
commit 2e2b93e65c
1 changed files with 31 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/app/page.tsx
View File

@@ -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" }
],