|
|
|
|
@@ -11,9 +11,32 @@ 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 { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown, Play, Image, Layers, Clock, CheckCircle, HelpCircle } from "lucide-react";
|
|
|
|
|
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 { useState, useEffect } from "react";
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
|
@@ -28,26 +51,55 @@ export default function LandingPage() {
|
|
|
|
|
headingFontWeight="medium"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarLayoutFloatingInline
|
|
|
|
|
brandName="Quick Creatives"
|
|
|
|
|
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: "Claim Free Creatives Now", href: "#free-offer"
|
|
|
|
|
}}
|
|
|
|
|
animateOnLoad={true}
|
|
|
|
|
/>
|
|
|
|
|
<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="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"
|
|
|
|
|
}}
|
|
|
|
|
animateOnLoad={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</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 Your Free Ads
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroCentered
|
|
|
|
|
title="Agency-Quality Ad Creatives. Delivered in 48 Hours."
|
|
|
|
|
description="Skip the lengthy production cycles. Get stunning video ads, static creatives, and full-funnel packs faster than ever. Perfect for agencies, brands, and creators who refuse to compromise on quality."
|
|
|
|
|
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={[
|
|
|
|
|
{
|
|
|
|
|
@@ -62,21 +114,69 @@ export default function LandingPage() {
|
|
|
|
|
]}
|
|
|
|
|
avatarText="Trusted by 100+ agencies and brands"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Claim Free Creatives Now", href: "#free-offer" },
|
|
|
|
|
{ text: "Start Free Project", href: "#free-offer" },
|
|
|
|
|
{ text: "See Our Work", href: "#features" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
ariaLabel="Hero section - Quick Creatives agency-quality ads in 48 hours"
|
|
|
|
|
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="Real numbers from real clients achieving real results"
|
|
|
|
|
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={["200+ Ad Variations", "48-Hour Turnaround", "95% Client Satisfaction", "10M+ Impressions Generated", "3x Faster Production"]}
|
|
|
|
|
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}
|
|
|
|
|
@@ -89,44 +189,86 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="pain-points" data-section="pain-points">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
title="The Old Way vs. The Quick Creatives Way"
|
|
|
|
|
description="Stop wasting weeks on ad production. Here's how we're different."
|
|
|
|
|
tag="Why Switch"
|
|
|
|
|
tagIcon={Zap}
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
icon: Clock,
|
|
|
|
|
title: "Weeks of Back-and-Forth", description: "Traditional agencies take weeks for approvals and revisions. We deliver in 48 hours."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: Users,
|
|
|
|
|
title: "Managing Multiple Vendors", description: "Juggling designers, videographers, and copywriters. We handle everything under one roof."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: Palette,
|
|
|
|
|
title: "Limited Creative Variations", description: "You get one option and hope it works. We create 10+ variations to maximize ROI."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: TrendingUp,
|
|
|
|
|
title: "Unknown Performance", description: "Guessing which creatives will perform best. We optimize based on real data insights."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: CreditCard,
|
|
|
|
|
title: "Unpredictable Costs", description: "Hidden fees and scope creep add up fast. Our pricing is transparent and fixed."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: Sparkles,
|
|
|
|
|
title: "Poor Quality at Scale", description: "Agencies cut corners when scaling. We maintain premium quality every single time."
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Experience the Difference", href: "#features" }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
{/* 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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
@@ -138,7 +280,7 @@ export default function LandingPage() {
|
|
|
|
|
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: [
|
|
|
|
|
{ videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=1" },
|
|
|
|
|
{ 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" }
|
|
|
|
|
]
|
|
|
|
|
@@ -207,7 +349,117 @@ 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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<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"
|
|
|
|
|
>
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
{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."
|
|
|
|
|
@@ -215,58 +467,40 @@ export default function LandingPage() {
|
|
|
|
|
tagIcon={CreditCard}
|
|
|
|
|
plans={[
|
|
|
|
|
{
|
|
|
|
|
id: "starter", badge: "Starter", badgeIcon: Sparkles,
|
|
|
|
|
price: "$1,500", subtitle: "Per Month", buttons: [
|
|
|
|
|
{ text: "Get Started", href: "#free-offer" }
|
|
|
|
|
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: [
|
|
|
|
|
"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"
|
|
|
|
|
"✓ 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: "growth", badge: "Most Popular", badgeIcon: Zap,
|
|
|
|
|
price: "$3,000", subtitle: "Per Month", buttons: [
|
|
|
|
|
{ text: "Get Started", href: "#free-offer" }
|
|
|
|
|
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: [
|
|
|
|
|
"Unlimited ad projects", "Video ads with unlimited variations", "Static creatives (unlimited)", "Full-funnel packs included", "24-hour turnaround available", "A/B testing variations", "Performance analytics", "Priority support", "Dedicated account manager"
|
|
|
|
|
"✓ 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: "scale", badge: "Scale", badgeIcon: Crown,
|
|
|
|
|
price: "$5,500", subtitle: "Per Month", buttons: [
|
|
|
|
|
{ text: "Contact Sales", href: "#free-offer" }
|
|
|
|
|
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: [
|
|
|
|
|
"Everything in Growth +", "Custom creative strategy sessions", "Unlimited team members", "API access", "White-label options", "Custom integrations", "24/7 dedicated support", "Quarterly strategy reviews", "Enterprise SLA"
|
|
|
|
|
"✓ 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}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Compare All Plans", href: "#features" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="opacity"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="free-offer" data-section="free-offer">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Free Trial - Risk Free"
|
|
|
|
|
title="Claim Your 3 Free Creatives Now"
|
|
|
|
|
description="Try our service risk-free with no credit card required. See exactly what we deliver in 48 hours. Includes 30-day money-back guarantee on paid plans. No follow-up sales calls. No obligations."
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
background={{ variant: "downward-rays-static-grid" }}
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
inputPlaceholder="Enter your email address"
|
|
|
|
|
buttonText="Claim Free Creatives Now"
|
|
|
|
|
termsText="By claiming your free creatives, you agree to our Terms and Conditions. We'll send you everything via email. No credit card required. No follow-up calls. No obligations."
|
|
|
|
|
ariaLabel="Free creative offer signup"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="who-its-for" data-section="who-its-for">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
title="Who We Help"
|
|
|
|
|
@@ -308,73 +542,82 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<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%. Quick Creatives is a game-changer for our agency."
|
|
|
|
|
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="Emma Rodriguez, Creative Director"
|
|
|
|
|
author="Marcus Chen, Founder"
|
|
|
|
|
avatars={[
|
|
|
|
|
{
|
|
|
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", alt: "Emma Rodriguez"
|
|
|
|
|
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-female-creati-1772624560954-fe3f44ea.png", alt: "Team member"
|
|
|
|
|
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 Emma Rodriguez"
|
|
|
|
|
ariaLabel="Customer testimonial from Marcus Chen"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqSplitMedia
|
|
|
|
|
faqs={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", title: "How do you deliver in 48 hours?", content: "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: "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: "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: "5", title: "Can I get unlimited revisions?", content: "Revision allowances vary by plan. Our Growth and Scale plans include comprehensive revision options. We work with you until you're happy with the results—we succeed when you succeed."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6", title: "What's included in the free 3 creatives 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, no follow-up sales calls—just quality work to show what we can do."
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=2"
|
|
|
|
|
imageAlt="FAQ support team"
|
|
|
|
|
title="Frequently Asked Questions"
|
|
|
|
|
description="Everything you need to know about working with Quick Creatives."
|
|
|
|
|
tag="Help"
|
|
|
|
|
tagIcon={HelpCircle}
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
faqsAnimation="blur-reveal"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
mediaPosition="left"
|
|
|
|
|
/>
|
|
|
|
|
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 bg-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: "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: "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: "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: "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: "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."
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
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">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Get Started"
|
|
|
|
|
title="Ready to Scale Your Creative Output?"
|
|
|
|
|
description="Join 100+ brands and agencies already transforming their ad production with Quick Creatives. Start with your free 3 creatives today. 30-day money-back guarantee. Cancel anytime."
|
|
|
|
|
tagIcon={Mail}
|
|
|
|
|
background={{ variant: "downward-rays-static-grid" }}
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
inputPlaceholder="Enter your email address"
|
|
|
|
|
buttonText="Claim Your Free Creatives"
|
|
|
|
|
termsText="By claiming your free creatives, you're confirming that you agree with our Terms and Conditions. 30-day money-back guarantee on paid plans. Cancel anytime, no questions asked."
|
|
|
|
|
ariaLabel="Contact form and creative offer signup"
|
|
|
|
|
/>
|
|
|
|
|
<div id="contact" data-section="contact" className="py-16 md:py-24 px-4">
|
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
|
|
|
<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. 30-day guarantee. Cancel anytime."
|
|
|
|
|
ariaLabel="Contact form and ad offer signup"
|
|
|
|
|
containerClassName="max-w-2xl mx-auto"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
@@ -404,8 +647,9 @@ export default function LandingPage() {
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
copyrightText="© 2025 Quick Creatives. All rights reserved."
|
|
|
|
|
copyrightText="© 2025 studio ads. All rights reserved."
|
|
|
|
|
ariaLabel="Footer navigation and company information"
|
|
|
|
|
containerClassName="max-w-6xl mx-auto px-4"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
|
