Compare commits
8 Commits
version_24
...
version_26
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b3045eda6 | |||
| 8ddb5d7b64 | |||
| dedf4b0752 | |||
| f33b1d8ff5 | |||
| 8060f0dc6f | |||
| 033937a08c | |||
| 1b63d1b19b | |||
| fc373efcec |
@@ -1,7 +1,12 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "studio ads | Professional Ad Creatives in 48 Hours", description: "Turn 48-hour briefs into conversion-ready creatives. Agency-quality ad creatives in 48 hours, 50% cheaper than traditional agencies."};
|
||||
title: "studio ads - Professional Ad Creatives in 48 Hours", description: "Get agency-quality ads in 48 hours with proven 40% ROAS lift. Professional ad creatives delivered fast, 50% cheaper than traditional agencies."
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -10,7 +15,7 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}
|
||||
<body className={inter.className}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
||||
257
src/app/page.tsx
257
src/app/page.tsx
@@ -64,7 +64,7 @@ export default function LandingPage() {
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Claim 3 Free Ads", href: "#free-offer"
|
||||
text: "Get Your Free Ads → See 48-Hour Results", href: "#free-offer"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
@@ -91,15 +91,15 @@ export default function LandingPage() {
|
||||
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"
|
||||
>
|
||||
Claim 3 Free Ads
|
||||
Get Your Free Ads
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="Agency-Quality Ads in 48 Hours"
|
||||
description="Turn 48-hour briefs into conversion-ready creatives. Professional ad creatives delivered in 48 hours instead of 3 weeks. Agency-quality video ads and static creatives, 50% cheaper than traditional agencies."
|
||||
title="Get Agency-Quality Ads in 48 Hours"
|
||||
description="Turn 48-hour briefs into conversion-ready creatives with proven 40% ROAS lift. Professional ad creatives delivered in 48 hours instead of 3 weeks. Agency-quality video ads and static creatives, 50% cheaper than traditional agencies."
|
||||
background={{ variant: "downward-rays-animated" }}
|
||||
avatars={[
|
||||
{
|
||||
@@ -114,7 +114,7 @@ export default function LandingPage() {
|
||||
]}
|
||||
avatarText="Trusted by 100+ agencies and brands"
|
||||
buttons={[
|
||||
{ text: "Claim 3 Free Ads", href: "#free-offer" },
|
||||
{ text: "Start Free Project", href: "#free-offer" },
|
||||
{ text: "See Our Work", href: "#features" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -189,44 +189,86 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="pain-points" data-section="pain-points">
|
||||
<FeatureBorderGlow
|
||||
title="The Old Way vs. The studio ads Way"
|
||||
description="Stop wasting weeks on ad production. Here's how we're different."
|
||||
tag="Why Switch"
|
||||
tagIcon={Zap}
|
||||
features={[
|
||||
{
|
||||
icon: Clock,
|
||||
title: "3 Weeks Production Time vs 48 Hours", 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: "40% Average ROAS Increase", description: "Guessing which creatives will perform best. We optimize based on real data insights."
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "50% Cheaper Than Agencies", 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">
|
||||
@@ -316,9 +358,6 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 max-w-lg mx-auto">
|
||||
<div className="p-4 bg-card rounded-lg border border-accent/20 text-center">
|
||||
<p className="text-sm font-semibold text-primary-cta">✓ No credit card required. Instant results.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={urlInput}
|
||||
@@ -338,7 +377,7 @@ export default function LandingPage() {
|
||||
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 3 Free Ads Now
|
||||
Start Free Project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -420,89 +459,45 @@ export default function LandingPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Simple, Transparent Pricing</h2>
|
||||
<p className="text-lg text-foreground/70">Choose the plan that fits your creative needs. Upgrade anytime.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Starter Plan */}
|
||||
<div className="bg-card rounded-2xl p-8 border border-accent/20">
|
||||
<div className="mb-6">
|
||||
<p className="text-sm font-semibold text-primary-cta mb-2">Starter</p>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">$1,500</h3>
|
||||
<p className="text-foreground/70 text-sm">Perfect for growing brands testing ad creation</p>
|
||||
</div>
|
||||
<div className="flex gap-3 mb-6">
|
||||
<button className="flex-1 py-3 px-4 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-sm">
|
||||
Claim 3 Free Ads Now
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-foreground/70">✓ 4 ad projects per month</p>
|
||||
<p className="text-sm text-foreground/70">✓ Video ads (up to 3 variations each)</p>
|
||||
<p className="text-sm text-foreground/70">✓ Static creatives (10+ variations)</p>
|
||||
<p className="text-sm text-foreground/70">✓ Full-funnel packs</p>
|
||||
<p className="text-sm text-foreground/70">✓ 48-hour turnaround</p>
|
||||
<p className="text-sm text-foreground/70">✓ Brand consistency maintained</p>
|
||||
<p className="text-sm text-foreground/70">✓ Email support</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Growth Plan - Most Popular */}
|
||||
<div className="md:scale-105 bg-gradient-to-br from-primary-cta/10 to-accent/10 rounded-2xl p-8 border-2 border-primary-cta shadow-lg relative">
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-primary-cta text-primary-cta-text px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Most Popular
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<p className="text-sm font-semibold text-primary-cta mb-2">Growth</p>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">$5,000</h3>
|
||||
<p className="text-foreground/70 text-sm">For high-volume, results-driven marketing teams</p>
|
||||
</div>
|
||||
<div className="flex gap-3 mb-6">
|
||||
<button className="flex-1 py-3 px-4 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-sm">
|
||||
Start Your 48-Hour Project
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-foreground/70">✓ Unlimited ad projects</p>
|
||||
<p className="text-sm text-foreground/70">✓ 30 ad creatives (video & static mix)</p>
|
||||
<p className="text-sm text-foreground/70">✓ Full-funnel packs included</p>
|
||||
<p className="text-sm text-foreground/70">✓ 24-hour turnaround available</p>
|
||||
<p className="text-sm text-foreground/70">✓ A/B testing variations</p>
|
||||
<p className="text-sm text-foreground/70">✓ Performance analytics</p>
|
||||
<p className="text-sm text-foreground/70">✓ Priority support</p>
|
||||
<p className="text-sm text-foreground/70">✓ Dedicated account manager</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="bg-card rounded-2xl p-8 border border-accent/20">
|
||||
<div className="mb-6">
|
||||
<p className="text-sm font-semibold text-primary-cta mb-2">Enterprise</p>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">Custom</h3>
|
||||
<p className="text-foreground/70 text-sm">For agencies and enterprises with unique needs</p>
|
||||
</div>
|
||||
<div className="flex gap-3 mb-6">
|
||||
<button className="flex-1 py-3 px-4 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-sm">
|
||||
Book Appointment
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-foreground/70">✓ Unlimited everything</p>
|
||||
<p className="text-sm text-foreground/70">✓ Custom creative strategy sessions</p>
|
||||
<p className="text-sm text-foreground/70">✓ Unlimited team members</p>
|
||||
<p className="text-sm text-foreground/70">✓ API access</p>
|
||||
<p className="text-sm text-foreground/70">✓ White-label options</p>
|
||||
<p className="text-sm text-foreground/70">✓ Custom integrations</p>
|
||||
<p className="text-sm text-foreground/70">✓ 24/7 dedicated support</p>
|
||||
<p className="text-sm text-foreground/70">✓ Quarterly strategy reviews</p>
|
||||
</div>
|
||||
</div>
|
||||
</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 - 40% ROAS Lift Guaranteed", 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 - 20% Average 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">
|
||||
@@ -609,7 +604,7 @@ export default function LandingPage() {
|
||||
background={{ variant: "downward-rays-static-grid" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Claim 3 Free Ads Now"
|
||||
buttonText="Start Free Project"
|
||||
termsText="No card required. 30-day guarantee. Cancel anytime."
|
||||
ariaLabel="Contact form and ad offer signup"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user