Compare commits
12 Commits
version_21
...
version_24
| Author | SHA1 | Date | |
|---|---|---|---|
| 1df41c0c1e | |||
| 342d16373c | |||
| fa55e77820 | |||
| 1930d06fe2 | |||
| 9e8c6e67d1 | |||
| 6093c0b799 | |||
| a2f8453fe9 | |||
| 73efafef66 | |||
| 3e77d4ef4e | |||
| 1582bd7bfc | |||
| 768bfa6ce3 | |||
| 4764ffea99 |
@@ -1,12 +1,7 @@
|
||||
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: "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: "Turn 48-hour briefs into conversion-ready creatives. Agency-quality ad creatives in 48 hours, 50% cheaper than traditional agencies."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -15,7 +10,7 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}
|
||||
<body>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1385,4 +1380,4 @@ export default function RootLayout({
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
222
src/app/page.tsx
222
src/app/page.tsx
@@ -98,7 +98,7 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="40% ROAS Increase in 48 Hours"
|
||||
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."
|
||||
background={{ variant: "downward-rays-animated" }}
|
||||
avatars={[
|
||||
@@ -238,7 +238,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" }
|
||||
]
|
||||
@@ -305,24 +305,6 @@ export default function LandingPage() {
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
|
||||
{/* Video Explainer 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>
|
||||
<p className="text-center text-foreground/60 text-sm mt-4">60-90 second video explainer - See how our process works</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="free-offer" data-section="free-offer">
|
||||
@@ -334,6 +316,9 @@ 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}
|
||||
@@ -378,59 +363,56 @@ export default function LandingPage() {
|
||||
</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">Feature Comparison</h3>
|
||||
<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">Feature</th>
|
||||
<th className="text-center py-2 px-3 font-semibold">Starter</th>
|
||||
<th className="text-center py-2 px-3 font-semibold">Growth</th>
|
||||
<th className="text-center py-2 px-3 font-semibold">Enterprise</th>
|
||||
<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">Average ROAS Lift</td>
|
||||
<td className="text-center py-3 px-3">20%</td>
|
||||
<td className="text-center py-3 px-3">40%</td>
|
||||
<td className="text-center py-3 px-3">Custom</td>
|
||||
<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">Projects/Month</td>
|
||||
<td className="text-center py-3 px-3">4</td>
|
||||
<td className="text-center py-3 px-3">Unlimited</td>
|
||||
<td className="text-center py-3 px-3">Unlimited</td>
|
||||
<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">Creatives/Month</td>
|
||||
<td className="text-center py-3 px-3">Included</td>
|
||||
<td className="text-center py-3 px-3">30+</td>
|
||||
<td className="text-center py-3 px-3">Unlimited</td>
|
||||
<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">Turnaround Time</td>
|
||||
<td className="text-center py-3 px-3">48 hours</td>
|
||||
<td className="text-center py-3 px-3">24 hours</td>
|
||||
<td className="text-center py-3 px-3">24 hours</td>
|
||||
<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">Account Manager</td>
|
||||
<td className="text-center py-3 px-3">-</td>
|
||||
<td className="text-center py-3 px-3">✓</td>
|
||||
<td className="text-center py-3 px-3">✓</td>
|
||||
<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">API Access</td>
|
||||
<td className="text-center py-3 px-3">-</td>
|
||||
<td className="text-center py-3 px-3">-</td>
|
||||
<td className="text-center py-3 px-3">✓</td>
|
||||
<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">24/7 Support</td>
|
||||
<td className="text-center py-3 px-3">-</td>
|
||||
<td className="text-center py-3 px-3">-</td>
|
||||
<td className="text-center py-3 px-3">✓</td>
|
||||
<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>
|
||||
@@ -438,45 +420,89 @@ export default function LandingPage() {
|
||||
</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", 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: "Claim 3 Free Ads Now", 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", 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 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>
|
||||
</div>
|
||||
|
||||
<div id="who-its-for" data-section="who-its-for">
|
||||
@@ -522,19 +548,19 @@ export default function LandingPage() {
|
||||
<TestimonialCardFifteen
|
||||
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>
|
||||
|
||||
@@ -560,7 +586,7 @@ export default function LandingPage() {
|
||||
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-young-marketi-1772624560922-a81a2ec0.png?_wi=2"
|
||||
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."
|
||||
@@ -622,4 +648,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user