Merge version_32 into main #47

Merged
bender merged 1 commits from version_32 into main 2026-03-12 15:38:46 +00:00

View File

@@ -6,7 +6,6 @@ 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";
@@ -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" }
@@ -345,169 +343,38 @@ 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" 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 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 className="max-w-2xl mx-auto relative z-10">
<div className="text-center mb-8">
<div className="inline-block mb-4 px-4 py-2 rounded-full bg-primary-cta/20 border border-primary-cta/40 mb-4">
<span className="text-primary-cta font-bold text-sm">🎁 LIMITED TIME OFFER</span>
</div>
<h2 className="text-4xl md:text-5xl font-black text-foreground mb-4 leading-tight">Claim Your 3 Free Premium Ads</h2>
<p className="text-foreground/70 mb-2 text-lg">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-black text-base md:text-lg mb-6 animate-pulse"> Only 3 spots left this week</p>
<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 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-black rounded-full hover:opacity-90 transition-opacity whitespace-nowrap shadow-lg"
>
Claim Free Ads
</button>
</div>
<button
onClick={handleUrlSubmit}
onClick={() => window.open('https://calendly.com', '_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"
>
Claim Free Ads Now
Schedule a Call
</button>
</div>
<p className="text-center text-foreground/60 text-xs md:text-sm mt-4 font-semibold">
No credit card required 🔒 30-day money-back guarantee 48-hour delivery
Quick consultation 🔒 No commitment 48-hour delivery
</p>
</div>
</div>
<div id="pricing" data-section="pricing">
<div className="relative">
<div className="flex justify-center mb-8">
<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"
>
<CheckCircle size={20} />
<span>View Plan Comparison</span>
</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>
)}
</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" 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>
@@ -593,7 +460,7 @@ export default function LandingPage() {
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, and it comes with a full 48-hour delivery guarantee. Perfect way to experience the quality of our work risk-free."
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"
@@ -624,14 +491,14 @@ export default function LandingPage() {
<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 • 🚀 48-hour 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>
@@ -643,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" }
]
},
{