Update src/app/page.tsx

This commit is contained in:
2026-03-09 15:52:09 +00:00
parent ae02074a75
commit e3cfb26532

View File

@@ -12,7 +12,7 @@ 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 } from "lucide-react";
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";
@@ -188,85 +188,87 @@ export default function LandingPage() {
/>
</div>
<div id="pain-points" data-section="pain-points">
<div className="relative py-16 md:py-24 px-4 bg-background">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12 md:mb-16">
<div className="inline-block mb-4">
<span className="px-4 py-2 rounded-full bg-primary-cta/10 text-primary-cta text-sm font-semibold flex items-center gap-2">
<Zap size={16} />
Why Switch
</span>
</div>
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">The Old Way vs. The studio ads Way</h2>
<p className="text-foreground/70 text-lg md:text-xl">Stop wasting weeks on ad production. Here's how we're different.</p>
<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>
</div>
{/* Comparison Chart */}
<div className="overflow-x-auto">
<table className="w-full text-sm md:text-base">
<thead>
<tr className="border-b-2 border-accent/20 bg-card/50">
<th className="text-left py-4 px-4 md:px-6 font-semibold text-foreground">Feature</th>
<th className="text-center py-4 px-4 md:px-6 font-semibold text-foreground">Traditional Agencies</th>
<th className="text-center py-4 px-4 md:px-6 font-semibold text-primary-cta">studio ads</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Production Time</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">3-4 Weeks</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">48 Hours</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Cost per Ad</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">$2,500-5,000</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">$500-1,500</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Creative Variations</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">1-3 Base Concepts</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">10+ Included</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Revision Rounds</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">Limited / Extra Cost</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Unlimited (48hr)</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Platform Optimization</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">Limited Formats</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">All Major Platforms</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Average ROAS Lift</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">20-25% Average</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">40% Average</td>
</tr>
<tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Account Manager</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">Always Included</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Growth+ Plans</td>
</tr>
<tr className="hover:bg-card/30 transition-colors">
<td className="py-4 px-4 md:px-6 font-semibold text-foreground">Setup/Onboarding</td>
<td className="text-center py-4 px-4 md:px-6 text-foreground/70">2-4 Weeks</td>
<td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Minimal</td>
</tr>
</tbody>
</table>
</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>
<div className="mt-12 text-center">
<button
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
className="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-primary-cta text-primary-cta-text hover:opacity-90 transition-opacity font-semibold"
aria-label="View features"
>
<span>Experience the Difference</span>
<ArrowRight size={18} />
</button>
</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>
@@ -349,43 +351,48 @@ export default function LandingPage() {
/>
</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-2">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-semibold text-sm md:text-base mb-6">Only 3 spots left this week</p>
<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>
<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-semibold rounded-full hover:opacity-90 transition-opacity whitespace-nowrap"
>
Claim Free Ads
</button>
</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="w-full py-4 px-6 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-lg"
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>
<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>
<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>
<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>
@@ -501,43 +508,49 @@ export default function LandingPage() {
/>
</div>
<div id="who-its-for" data-section="who-its-for">
<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 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="testimonials" data-section="testimonials">
@@ -560,27 +573,27 @@ export default function LandingPage() {
/>
</div>
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 bg-background">
<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 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: "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."
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."
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."
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: "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."
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."
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"
@@ -602,8 +615,12 @@ export default function LandingPage() {
</div>
</div>
<div id="contact" data-section="contact" className="py-16 md:py-24 px-4">
<div className="max-w-4xl mx-auto">
<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?"
@@ -613,7 +630,7 @@ export default function LandingPage() {
useInvertedBackground={true}
inputPlaceholder="Enter your email address"
buttonText="Start Free Project"
termsText="No card required. 30-day guarantee. Cancel anytime."
termsText="No card required • 🚀 48-hour guarantee • ⚡ Cancel anytime"
ariaLabel="Contact form and ad offer signup"
containerClassName="max-w-2xl mx-auto"
/>