22 Commits

Author SHA1 Message Date
773dad4e11 Update src/app/styles/variables.css 2026-03-14 06:39:26 +00:00
b1c0aa699b Merge version_34 into main
Merge version_34 into main
2026-03-14 06:38:19 +00:00
e54607bce9 Update theme colors 2026-03-14 06:38:13 +00:00
795291914b Merge version_34 into main
Merge version_34 into main
2026-03-14 06:36:31 +00:00
83578d1a62 Update src/app/page.tsx 2026-03-14 06:36:27 +00:00
70c9a13179 Merge version_33 into main
Merge version_33 into main
2026-03-12 15:44:54 +00:00
f7465ba933 Update src/app/page.tsx 2026-03-12 15:44:49 +00:00
7213f0e4d2 Merge version_32 into main
Merge version_32 into main
2026-03-12 15:38:46 +00:00
c085f7173b Update src/app/page.tsx 2026-03-12 15:38:42 +00:00
ba5b66e90b Switch to version 30: modified src/app/page.tsx 2026-03-10 06:00:37 +00:00
3420d7b27f Merge version_31 into main
Merge version_31 into main
2026-03-09 23:54:28 +00:00
6c9cb6767a Update src/app/page.tsx 2026-03-09 23:54:24 +00:00
7ba7bfe966 Merge version_31 into main
Merge version_31 into main
2026-03-09 23:53:43 +00:00
3117bfa553 Update src/app/page.tsx 2026-03-09 23:53:33 +00:00
67511c98ab Merge version_31 into main
Merge version_31 into main
2026-03-09 23:52:28 +00:00
fcbc5d79e3 Update src/app/page.tsx 2026-03-09 23:52:24 +00:00
83784db2d4 Merge version_30 into main
Merge version_30 into main
2026-03-09 15:53:18 +00:00
bb036a71c1 Update src/app/layout.tsx 2026-03-09 15:53:14 +00:00
f805b5f5da Merge version_30 into main
Merge version_30 into main
2026-03-09 15:52:13 +00:00
e3cfb26532 Update src/app/page.tsx 2026-03-09 15:52:09 +00:00
ae02074a75 Update src/app/layout.tsx 2026-03-09 15:52:09 +00:00
cce55dc6d8 Merge version_29 into main
Merge version_29 into main
2026-03-09 13:53:57 +00:00
3 changed files with 213 additions and 292 deletions

View File

@@ -1,12 +1,19 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Lora, Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
const lora = Lora({
variable: "--font-lora", subsets: ["latin"],
weight: ["400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
weight: ["400", "500", "600", "700"],
});
export const metadata: Metadata = {
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."
};
title: "studio ads - Agency-Quality Ad Creatives in 48 Hours", description: "Get professional video ads and static creatives delivered in 48 hours. 40% average ROAS increase. Half the cost of traditional agencies."};
export default function RootLayout({
children,
@@ -14,8 +21,38 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}
<html lang="en" suppressHydrationWarning>
<body
className={`${lora.variable} ${inter.variable} antialiased`}
suppressHydrationWarning
>
{children}
<script
async
src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"
></script>
<script>
{`
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: 'vertical',
gestureDirection: 'vertical',
smooth: true,
mouseMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
`}
</script>
<script
dangerouslySetInnerHTML={{
__html: `

View File

@@ -6,13 +6,12 @@ import HeroCentered from "@/components/sections/hero/HeroCentered";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
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 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 { 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, Award, Bolt, Target, Rocket, Flame } from "lucide-react";
import { useState, useEffect } from "react";
import Link from "next/link";
@@ -58,7 +57,6 @@ export default function LandingPage() {
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" }
@@ -188,85 +186,87 @@ export default function LandingPage() {
/>
</div>
<div id="pain-points" data-section="pain-points">
<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 id="pain-points" data-section="pain-points" className="relative py-16 md:py-24 px-4 bg-gradient-to-br from-primary-cta/10 via-background to-accent/5 overflow-hidden">
<div className="absolute inset-0 opacity-30">
<div className="absolute top-10 left-10 w-72 h-72 bg-primary-cta/20 rounded-full blur-3xl"></div>
<div className="absolute bottom-10 right-10 w-96 h-96 bg-accent/20 rounded-full blur-3xl"></div>
</div>
<div className="max-w-6xl mx-auto relative z-10">
<div className="text-center mb-12 md:mb-16">
<div className="inline-block mb-4 animate-pulse">
<span className="px-4 py-2 rounded-full bg-primary-cta text-primary-cta-text text-sm font-bold flex items-center gap-2 shadow-lg">
<Flame size={16} />
Why Switch Now
</span>
</div>
<h2 className="text-4xl md:text-6xl font-black text-foreground mb-4 leading-tight">The Old Way vs. The studio ads Way</h2>
<p className="text-foreground/70 text-lg md:text-xl max-w-2xl mx-auto">Stop wasting weeks and thousands of dollars on ad production. Here's how we're revolutionizing creative delivery.</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>
{/* Enhanced Comparison Chart */}
<div className="overflow-x-auto rounded-2xl border border-primary-cta/30 shadow-2xl">
<table className="w-full text-sm md:text-base">
<thead>
<tr className="border-b-2 border-primary-cta/40 bg-gradient-to-r from-primary-cta/20 to-accent/20">
<th className="text-left py-5 px-4 md:px-8 font-black text-foreground text-base md:text-lg">Feature</th>
<th className="text-center py-5 px-4 md:px-8 font-bold text-foreground/70 text-base md:text-lg">Traditional Agencies</th>
<th className="text-center py-5 px-4 md:px-8 font-black text-primary-cta text-base md:text-lg"> studio ads</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground"> Production Time</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 strikethrough opacity-60">3-4 Weeks</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🚀 48 Hours</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">💰 Cost per Ad</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 strikethrough opacity-60">$2,500-5,000</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg"> $500-1,500</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">🎨 Creative Variations</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">1-3 Concepts</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">💎 10+ Included</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">🔄 Revision Rounds</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Limited / Extra $</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg"> Unlimited</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">📱 Platform Coverage</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Limited Formats</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🌐 All Platforms</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">📈 Average ROAS Lift</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">20-25%</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg">🔥 40% Guaranteed</td>
</tr>
<tr className="border-b border-primary-cta/20 hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">👥 Account Manager</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">Always Included</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg"> Growth+ Plans</td>
</tr>
<tr className="hover:bg-primary-cta/10 transition-all duration-300 group">
<td className="py-5 px-4 md:px-8 font-bold text-foreground">🚀 Onboarding</td>
<td className="text-center py-5 px-4 md:px-8 text-foreground/70 opacity-60">2-4 Weeks</td>
<td className="text-center py-5 px-4 md:px-8 text-primary-cta font-black text-lg"> Instant</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 className="mt-12 text-center">
<button
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
className="inline-flex items-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-primary-cta to-accent text-primary-cta-text hover:shadow-2xl hover:scale-105 transition-all font-black text-lg shadow-lg"
aria-label="View features"
>
<span>Experience the Difference</span>
<ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
</button>
</div>
</div>
</div>
@@ -343,201 +343,81 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Start Your First Project", href: "#pricing" }
{ text: "Start Your First Project", href: "#book-now" }
]}
buttonAnimation="opacity"
/>
</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 id="book-now" data-section="book-now" className="relative py-16 md:py-20 px-4 bg-gradient-to-br from-primary-cta/10 via-background to-accent/5 overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
<div className="absolute bottom-0 right-1/4 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
</div>
</div>
<div className="max-w-2xl mx-auto relative z-10">
<div className="text-center mb-8">
<h2 className="text-4xl md:text-5xl font-black text-foreground mb-4 leading-tight">Ready to Book Your First Project?</h2>
<p className="text-foreground/70 mb-2 text-lg">Get started with a clean booking process. Let's create something amazing together.</p>
</div>
<div id="pricing" data-section="pricing">
<div className="relative">
<div className="flex justify-center mb-8">
<div className="flex flex-col gap-4 max-w-lg mx-auto">
<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"
onClick={() => window.open('https://calendly.com/randorfalconer-/chat-intro-with-randor', '_blank')}
className="w-full py-4 px-6 bg-gradient-to-r from-primary-cta to-accent text-primary-cta-text font-black rounded-full hover:opacity-90 transition-opacity text-lg shadow-lg"
>
<CheckCircle size={20} />
<span>View Plan Comparison</span>
Schedule a Call
</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>
)}
<p className="text-center text-foreground/60 text-xs md:text-sm mt-4 font-semibold">
Quick consultation 🔒 No commitment 48-hour delivery
</p>
</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 - 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: [
"✓ 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 - 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: [
"✓ 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">
<FeatureBorderGlow
title="Who We Help"
description="Whether you're a growing brand, creative agency, or in-house marketing team, we've got the perfect solution."
tag="Ideal For"
tagIcon={Users}
features={[
{
icon: ShoppingCart,
title: "E-commerce Brands", description: "Product ads, promotional content, and conversion-focused creatives that drive sales."
},
{
icon: Package,
title: "SaaS Companies", description: "Feature demonstrations, benefit-focused ads, and explainer videos that educate and convert."
},
{
icon: Briefcase,
title: "Marketing Agencies", description: "Scale your creative output without hiring. Deliver more to your clients faster."
},
{
icon: Users,
title: "Digital Creators", description: "Professional ad content, sponsorship pitches, and promotional materials for your audience."
},
{
icon: Palette,
title: "Startups & Brands", description: "Launch campaigns quickly. Build brand presence with polished, professional ads."
},
{
icon: TrendingUp,
title: "Growth Teams", description: "Test campaigns faster. Optimize with unlimited variations and performance insights."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
<div id="who-its-for" data-section="who-its-for" className="relative py-16 md:py-24 px-4 bg-gradient-to-b from-background to-primary-cta/5 overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-1/2 left-0 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
<div className="absolute top-1/4 right-0 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
</div>
<div className="max-w-6xl mx-auto relative z-10">
<FeatureBorderGlow
title="Who We Help"
description="Whether you're a growing brand, creative agency, or in-house marketing team, we've got the perfect solution."
tag="Ideal For"
tagIcon={Users}
features={[
{
icon: ShoppingCart,
title: "E-commerce Brands", description: "Product ads, promotional content, and conversion-focused creatives that drive sales."
},
{
icon: Package,
title: "SaaS Companies", description: "Feature demonstrations, benefit-focused ads, and explainer videos that educate and convert."
},
{
icon: Briefcase,
title: "Marketing Agencies", description: "Scale your creative output without hiring. Deliver more to your clients faster."
},
{
icon: Users,
title: "Digital Creators", description: "Professional ad content, sponsorship pitches, and promotional materials for your audience."
},
{
icon: Palette,
title: "Startups & Brands", description: "Launch campaigns quickly. Build brand presence with polished, professional ads."
},
{
icon: TrendingUp,
title: "Growth Teams", description: "Test campaigns faster. Optimize with unlimited variations and performance insights."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
</div>
<div id="testimonials" data-section="testimonials">
@@ -560,27 +440,27 @@ export default function LandingPage() {
/>
</div>
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 bg-background">
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 bg-gradient-to-b from-background via-primary-cta/5 to-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: "1", title: "How do you deliver in 48 hours?", content: "We deliver 3-5 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: "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. Growth plans include unlimited revisions during the project window."
},
{
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: "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. Our team has experience across 50+ verticals."
},
{
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: "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 immediately."
},
{
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: "5", title: "Can I get unlimited revisions?", content: "Yes! 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. Starter plans include 2 revision rounds."
},
{
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."
id: "6", title: "How do I book a project?", content: "Simply schedule a quick consultation call with us, and we'll discuss your project needs, timeline, and budget. From there, we'll send you a creative brief form to fill out. Once we have all the details, we get started immediately and deliver your creatives in 48 hours."
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png?_wi=2"
@@ -597,24 +477,28 @@ export default function LandingPage() {
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"
faqsContainerClassName="order-1 md:order-2 space-y-0"
/>
</div>
</div>
<div id="contact" data-section="contact" className="py-16 md:py-24 px-4">
<div className="max-w-4xl mx-auto">
<div id="contact" data-section="contact" className="py-16 md:py-24 px-4 relative overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-0 right-0 w-96 h-96 bg-primary-cta/30 rounded-full blur-3xl"></div>
<div className="absolute bottom-0 left-1/4 w-80 h-80 bg-accent/30 rounded-full blur-3xl"></div>
</div>
<div className="max-w-4xl mx-auto relative z-10">
<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."
description="Join 100+ brands and agencies already transforming their ad production with studio ads. Book a call 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"
buttonText="Schedule a Call"
termsText="✅ Quick consultation • 🚀 48-hour guarantee • ⚡ Cancel anytime"
ariaLabel="Contact form and booking"
containerClassName="max-w-2xl mx-auto"
/>
</div>
@@ -626,9 +510,9 @@ export default function LandingPage() {
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "How It Works", href: "#how-it-works" },
{ label: "Testimonials", href: "#testimonials" }
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" }
]
},
{
@@ -654,4 +538,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}

View File

@@ -10,15 +10,15 @@
--accent: #684f7b;;
--background-accent: #65417c;; */
--background: #f5faff;;
--card: #f1f8ff;;
--foreground: #001122;;
--primary-cta: #15479c;;
--primary-cta-text: #f5faff;;
--secondary-cta: #ffffff;;
--secondary-cta-text: #001122;;
--accent: #a8cce8;;
--background-accent: #7ba3cf;;
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #e63946;;
--primary-cta: #e63946;;
--primary-cta-text: #ffffff;;
--secondary-cta: #f9f9f9;;
--secondary-cta-text: #e63946;;
--accent: #e2e2e2;;
--background-accent: #ff7a7a;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);