|
|
|
|
@@ -306,21 +306,74 @@ export default function LandingPage() {
|
|
|
|
|
buttonAnimation="opacity"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* Video Explainer Section */}
|
|
|
|
|
{/* Comparison Chart 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="studio ads Demo"
|
|
|
|
|
frameBorder="0"
|
|
|
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
|
|
|
allowFullScreen
|
|
|
|
|
/>
|
|
|
|
|
<div className="max-w-5xl mx-auto">
|
|
|
|
|
<div className="mb-8 text-center">
|
|
|
|
|
<h3 className="text-2xl md:text-3xl font-bold text-foreground mb-3">studio ads vs Traditional Agencies</h3>
|
|
|
|
|
<p className="text-foreground/70">See how we stack up against the competition</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="text-center text-foreground/60 text-sm mt-4">60-90 second video explainer - See how our process works</p>
|
|
|
|
|
<div className="bg-card rounded-lg border border-accent/20 overflow-hidden">
|
|
|
|
|
<div className="overflow-x-auto">
|
|
|
|
|
<table className="w-full text-sm">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr className="bg-primary-cta/10 border-b border-accent/20">
|
|
|
|
|
<th className="text-left py-4 px-4 font-semibold text-foreground">Feature</th>
|
|
|
|
|
<th className="text-center py-4 px-4 font-semibold text-primary-cta">studio ads</th>
|
|
|
|
|
<th className="text-center py-4 px-4 font-semibold text-foreground/60">Traditional Agencies</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Turnaround Time</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-primary-cta font-semibold">48 Hours</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/70">2-3 Weeks</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Cost per Creative</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-primary-cta font-semibold">50% Less</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/70">$2,000-$5,000+</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Creative Variations</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-primary-cta font-semibold">10+ Options</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/70">1-3 Options</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Revision Process</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-primary-cta font-semibold">24hr Revisions</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/70">1-2 Weeks</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Unlimited Projects</td>
|
|
|
|
|
<td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/40">-</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Dedicated Account Manager</td>
|
|
|
|
|
<td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/40">-</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Platform Optimization</td>
|
|
|
|
|
<td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/40">-</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Average ROAS Lift</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-primary-cta font-semibold">40%</td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/70">15-25%</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="hover:bg-accent/5 transition-colors">
|
|
|
|
|
<td className="py-4 px-4 text-foreground font-medium">Performance Tracking</td>
|
|
|
|
|
<td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
|
|
|
|
|
<td className="text-center py-4 px-4 text-foreground/40">-</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p className="text-center text-foreground/60 text-sm mt-6">Comparison based on industry averages and typical agency practices. Results may vary.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -622,4 +675,4 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|