Merge version_25 into main #37
@@ -5,8 +5,7 @@ import "./globals.css";
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "studio ads - Professional Ad Creatives in 48 Hours", description: "Get agency-quality ad creatives delivered in 48 hours. 40% ROAS increase, 50% cheaper than traditional agencies."
|
||||
};
|
||||
title: "studio ads - Professional Ad Creatives in 48 Hours", description: "Transform your ad production with agency-quality creatives delivered in 48 hours. 40% average ROAS increase, 50% cheaper than traditional agencies."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
|
||||
118
src/app/page.tsx
118
src/app/page.tsx
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user