Compare commits
168 Commits
version_1
...
version_33
| Author | SHA1 | Date | |
|---|---|---|---|
| f7465ba933 | |||
| 7213f0e4d2 | |||
| c085f7173b | |||
| ba5b66e90b | |||
| 3420d7b27f | |||
| 6c9cb6767a | |||
| 7ba7bfe966 | |||
| 3117bfa553 | |||
| 67511c98ab | |||
| fcbc5d79e3 | |||
| 83784db2d4 | |||
| bb036a71c1 | |||
| f805b5f5da | |||
| e3cfb26532 | |||
| ae02074a75 | |||
| cce55dc6d8 | |||
| 60de093eed | |||
| 51fea41093 | |||
| 0caadc2db6 | |||
| 60041290b4 | |||
| 662dde5c2e | |||
| 75fc83bab8 | |||
| 1576cdc334 | |||
| 0b3045eda6 | |||
| 8ddb5d7b64 | |||
| dedf4b0752 | |||
| f33b1d8ff5 | |||
| 8060f0dc6f | |||
| 033937a08c | |||
| 1b63d1b19b | |||
| fc373efcec | |||
| 1df41c0c1e | |||
| 342d16373c | |||
| fa55e77820 | |||
| 1930d06fe2 | |||
| 9e8c6e67d1 | |||
| 6093c0b799 | |||
| a2f8453fe9 | |||
| 73efafef66 | |||
| 3e77d4ef4e | |||
| 67c3e23ddd | |||
| 1582bd7bfc | |||
| ac78910b26 | |||
| 768bfa6ce3 | |||
| f884879659 | |||
| 4764ffea99 | |||
| cc382f7a71 | |||
| cfe6423a01 | |||
| 9708909a0c | |||
| 234de6419c | |||
| 83414f666a | |||
| b0210d44ff | |||
| 4ddd0fae64 | |||
| 96cf8fe822 | |||
| 3c46b37f19 | |||
| 343dc3aa4b | |||
| fa739da65f | |||
| dd9f8dd11b | |||
| de7921dcf2 | |||
| aaa107a8f2 | |||
| d58e0f6db4 | |||
| 09f71fe071 | |||
| f741842e42 | |||
| e71f68d950 | |||
| b29a136927 | |||
| a334e75d98 | |||
| 4cd4563a81 | |||
| a2b7ffccfd | |||
| e7dd8cffb4 | |||
| 158598b397 | |||
| 4f288a7aa8 | |||
| f7957f64d5 | |||
| 7725cff7ee | |||
| 92a2671031 | |||
| 762a6b788d | |||
| 8c13acb37e | |||
| e654873cc1 | |||
| 582e372208 | |||
| b920d66603 | |||
| 28ea541a07 | |||
| ecb51cf35c | |||
| 1d1cb3e25e | |||
| cd43b2423c | |||
| bf14dde886 | |||
| 775c58dd5f | |||
| ca54c45148 | |||
| b8a60846fa | |||
| 7df6cb9adc | |||
| 92ed70cb51 | |||
| 2022cff594 | |||
| a3fb84396d | |||
| 3c2670e684 | |||
| ff5e4fc53b | |||
| 9b56793461 | |||
| 761cea35b5 | |||
| a9dd4797f0 | |||
| 1f8dcc0d2f | |||
| 4b299fa5eb | |||
| 1364284317 | |||
| 6ed9bf2554 | |||
| 27c0ba48c9 | |||
| b5f1ed8f9e | |||
| 327c83d2c6 | |||
| 47798547bb | |||
| bb0610599e | |||
| b74202f2b1 | |||
| 2e2b93e65c | |||
| e9f886752a | |||
| cbdd5bd21a | |||
| 5b0ad54dc3 | |||
| f0d015ede5 | |||
| 3c53b25ead | |||
| 1727e38d3c | |||
| 3e7815f595 | |||
| 0894ecbe8c | |||
| 07badd52e6 | |||
| ab1b99a53f | |||
| 98102d181f | |||
| 9b9f3354a8 | |||
| 0b12075419 | |||
| dad477b06e | |||
| ed40fec024 | |||
| 34db2ddbf0 | |||
| c08bfd11f8 | |||
| 681266e374 | |||
| df52fd53a5 | |||
| 7967ae572b | |||
| b4deea5982 | |||
| e489f74440 | |||
| 9a89f7be97 | |||
| 5548158ae2 | |||
| 6f11ebac09 | |||
| 45e956d16a | |||
| ff8938ec0f | |||
| 98f7cb8ba6 | |||
| fe1b84e4d2 | |||
| 2a8616b144 | |||
| 7105de1607 | |||
| f09f245b63 | |||
| d77c1249bb | |||
| f032927a66 | |||
| 6e76762078 | |||
| 9abc6caa07 | |||
| d79fff57f6 | |||
| cef806d5ee | |||
| 1d7bdc8f07 | |||
| 3249eead64 | |||
| 453c66bf08 | |||
| 1df8d4652a | |||
| a9da569845 | |||
| 30e9ac1de5 | |||
| 8212671c23 | |||
| 92b0b4b577 | |||
| 5d022c1da4 | |||
| 8b8e88ab3e | |||
| 0f18b0fd5a | |||
| 388971e9ea | |||
| 37c2b0b325 | |||
| 9856a25ee6 | |||
| f5191a2e57 | |||
| 2fbfa93c9b | |||
| 2c8c4650d8 | |||
| 218d9bda4e | |||
| cf9d910665 | |||
| acf15ca953 | |||
| f3d97b6984 | |||
| d6553828c5 | |||
| 4038292a72 |
@@ -1,45 +1,58 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Lato } from "next/font/google";
|
||||
import { Lora, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const lato = Lato({
|
||||
variable: "--font-lato", subsets: ["latin"],
|
||||
weight: ["100", "300", "400", "700", "900"],
|
||||
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: "Quick Creatives - AI Ad Generator for Static & Video Ads", description: "Generate professional static and video ads in seconds with AI. Perfect for agencies, e-commerce, SaaS, and any business category. Try free for 14 days.", keywords: "AI ad generator, video ads, static ads, ad creation, creative agency, marketing automation", metadataBase: new URL("https://quickcreatives.com"),
|
||||
alternates: {
|
||||
canonical: "https://quickcreatives.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Quick Creatives - AI-Powered Ad Generation", description: "Create stunning ads in seconds with AI. Scale your creative production and boost campaign performance.", type: "website", siteName: "Quick Creatives", url: "https://quickcreatives.com", images: [{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/a-cutting-edge-ai-dashboard-interface-sh-1772624561767-b98bd32c.png", alt: "Quick Creatives AI dashboard showing ad generation capabilities"
|
||||
}]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Quick Creatives - AI Ad Generator", description: "Generate professional ads in seconds. Static & video ads with AI.", images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/a-cutting-edge-ai-dashboard-interface-sh-1772624561767-b98bd32c.png"]
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true
|
||||
}
|
||||
};
|
||||
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,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body className={`${lato.variable} antialiased`}>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<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: `
|
||||
@@ -1407,7 +1420,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
548
src/app/page.tsx
548
src/app/page.tsx
@@ -6,12 +6,36 @@ 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 { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown } from "lucide-react";
|
||||
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, Award, Bolt, Target, Rocket, Flame } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [showComparison, setShowComparison] = useState(false);
|
||||
const [urlInput, setUrlInput] = useState("");
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [showMobileCTA, setShowMobileCTA] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 100);
|
||||
setShowMobileCTA(window.scrollY > 500);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const handleUrlSubmit = () => {
|
||||
if (urlInput.trim()) {
|
||||
window.location.href = `/thank-you?url=${encodeURIComponent(urlInput)}`;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -26,24 +50,54 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Quick Creatives"
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get Started Free", href: "#contact"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
<div className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled ? 'bg-background/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
|
||||
}`}>
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="studio ads"
|
||||
navItems={[
|
||||
{ name: "How it Works", id: "how-it-works" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get Your Free Ads → See 48-Hour Results", href: "#free-offer"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating WhatsApp Chat Button */}
|
||||
<div className="fixed bottom-6 right-6 z-40">
|
||||
<a
|
||||
href="https://wa.me/1234567890"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center w-14 h-14 rounded-full bg-primary-cta text-primary-cta-text hover:scale-110 transition-transform shadow-lg"
|
||||
aria-label="Chat on WhatsApp"
|
||||
>
|
||||
<MessageCircle size={24} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile-only CTA Bar */}
|
||||
{showMobileCTA && (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-40 md:hidden bg-primary-cta text-primary-cta-text p-4 shadow-lg">
|
||||
<button
|
||||
onClick={() => document.getElementById('free-offer')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="w-full py-3 px-4 bg-white text-primary-cta font-semibold rounded-full hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Get Your Free Ads
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="Create Stunning Ads in Seconds"
|
||||
description="AI-powered ad generation that transforms your ideas into professional static and video advertisements. Save time, scale creativity, and drive results for any business category."
|
||||
title="48-Hour Ad Creatives That Drive 40% ROAS"
|
||||
description="Cut production time from weeks to 2 days. Launch high-converting ads in 48 hours at half the cost of agencies. Get agency-quality video ads and static creatives faster, smarter, and cheaper."
|
||||
background={{ variant: "downward-rays-animated" }}
|
||||
avatars={[
|
||||
{
|
||||
@@ -56,38 +110,197 @@ export default function LandingPage() {
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", alt: "Business owner"
|
||||
}
|
||||
]}
|
||||
avatarText="Trusted by 500+ agencies & creators"
|
||||
avatarText="Trusted by 100+ agencies and brands"
|
||||
buttons={[
|
||||
{ text: "Start Creating Free", href: "#contact" },
|
||||
{ text: "View Examples", href: "#features" }
|
||||
{ text: "Start Free Project", href: "#free-offer" },
|
||||
{ text: "See Our Work", href: "#features" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Hero section - Quick Creatives AI ad generation platform"
|
||||
ariaLabel="Hero section - studio ads professional ad creatives in 48 hours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Metrics Strip Section */}
|
||||
<div id="metrics" data-section="metrics" className="py-12 md:py-16 bg-card border-y border-accent/10">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">$2.3M+</div>
|
||||
<p className="text-foreground/70 text-sm md:text-base">Ad Spend Managed</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">34%</div>
|
||||
<p className="text-foreground/70 text-sm md:text-base">Avg CPC Reduction</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">48hr</div>
|
||||
<p className="text-foreground/70 text-sm md:text-base">Delivery Time</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold text-primary-cta mb-2">200+</div>
|
||||
<p className="text-foreground/70 text-sm md:text-base">Creatives Delivered</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Platform Logo Strip */}
|
||||
<div id="platforms" data-section="platforms" className="py-8 md:py-12 bg-background">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<p className="text-center text-foreground/60 text-sm md:text-base mb-6 md:mb-8">We create ads optimized for all major platforms</p>
|
||||
<div className="flex flex-wrap justify-center items-center gap-6 md:gap-10">
|
||||
<div className="flex items-center gap-2 text-foreground/70 font-semibold">
|
||||
<span className="text-lg">f</span> Meta
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/70 font-semibold">
|
||||
<span className="text-lg">⏶</span> TikTok
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/70 font-semibold">
|
||||
<span className="text-lg">▶</span> YouTube
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/70 font-semibold">
|
||||
<span className="text-lg">G</span> Google
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground/70 font-semibold">
|
||||
<span className="text-lg">◻</span> Display
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Proven Results for Growing Brands"
|
||||
description="40% Average ROAS Increase. 3 Weeks Production Time Cut to 48 Hours. Real numbers from real clients achieving real results."
|
||||
tag="Social Proof"
|
||||
tagIcon={TrendingUp}
|
||||
names={["40% Average ROAS Increase", "3 Weeks Production Time Cut to 48 Hours", "95% Client Satisfaction", "10M+ Impressions Generated", "50% Cost Savings vs Agencies"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
buttons={[
|
||||
{ text: "View Success Stories", href: "#testimonials" }
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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-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>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
title="Powerful Features for Creative Success"
|
||||
description="Everything you need to generate, customize, and optimize high-performing ads with AI."
|
||||
title="Our Complete Creative Solutions"
|
||||
description="Everything you need to build winning ad campaigns, all in one platform."
|
||||
tag="Capabilities"
|
||||
tagIcon={Sparkles}
|
||||
features={[
|
||||
{
|
||||
title: "AI Video Generation", description: "Transform scripts into professional video ads with AI voiceovers, animations, and effects", bentoComponent: "animated-bar-chart"
|
||||
title: "Video Ads", description: "Professional 15-60 second video ads optimized for every platform. Cinematic, conversion-focused, and brand-consistent.", bentoComponent: "media-stack", items: [
|
||||
{ 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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Static Ad Designer", description: "Generate unlimited variations of static ads optimized for social media and display networks", bentoComponent: "globe"
|
||||
title: "Static Ad Creatives", description: "High-converting Instagram, Facebook, and Google Ads. Multiple sizes and formats ready to deploy.", bentoComponent: "reveal-icon", icon: Image
|
||||
},
|
||||
{
|
||||
title: "Real-Time Analytics", description: "Track performance metrics and optimize campaigns with actionable insights", bentoComponent: "line-chart"
|
||||
title: "Full-Funnel Packs", description: "Complete creative suites covering awareness, consideration, and conversion. Cohesive storytelling across all stages.", bentoComponent: "3d-stack-cards", items: [
|
||||
{ icon: Layers, title: "Awareness", subtitle: "Top of Funnel", detail: "Build brand recognition with impact" },
|
||||
{ icon: Play, title: "Consideration", subtitle: "Mid Funnel", detail: "Showcase value and benefits" },
|
||||
{ icon: CheckCircle, title: "Conversion", subtitle: "Bottom Funnel", detail: "Drive action and sales" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Brand Consistency", description: "Maintain your brand identity across all generated ads with smart templates", bentoComponent: "marquee", centerIcon: Shield,
|
||||
title: "Brand Consistency", description: "All creatives maintain your brand guidelines. Colors, fonts, messaging—perfectly aligned every time.", bentoComponent: "marquee", centerIcon: Shield,
|
||||
variant: "text", texts: ["Your Brand", "Every Time", "Consistent Style", "Perfect Fit"]
|
||||
},
|
||||
{
|
||||
title: "Multi-Category Support", description: "Create ads for e-commerce, SaaS, services, real estate, and any industry", bentoComponent: "orbiting-icons", centerIcon: Zap,
|
||||
title: "Multi-Category Support", description: "We create ads for SaaS, E-commerce, Real Estate, Services, and any industry you're in.", bentoComponent: "orbiting-icons", centerIcon: Zap,
|
||||
items: [
|
||||
{ icon: ShoppingCart, ring: 1 },
|
||||
{ icon: Package, ring: 1 },
|
||||
@@ -100,148 +313,206 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{ text: "Explore All Features", href: "#pricing" }
|
||||
{ text: "View All Features", href: "#how-it-works" }
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="advanced-features" data-section="advanced-features">
|
||||
<FeatureBorderGlow
|
||||
title="Enterprise-Grade Capabilities"
|
||||
description="Advanced tools designed for scaling your ad production and team collaboration"
|
||||
tag="Advanced"
|
||||
tagIcon={Zap}
|
||||
<div id="how-it-works" data-section="how-it-works">
|
||||
<FeatureBento
|
||||
title="How It Works: 4 Simple Steps"
|
||||
description="From brief to finished creatives in just 48 hours. No complexity, no delays."
|
||||
tag="Process"
|
||||
tagIcon={Clock}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Lightning Fast", description: "Generate professional ads in under 2 minutes, not days"
|
||||
title: "Step 1: Share Your Brief", description: "Tell us about your product, audience, and goals. Upload references and any brand assets.", bentoComponent: "reveal-icon", icon: Mail
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Team Collaboration", description: "Invite team members, manage approvals, and streamline workflows"
|
||||
title: "Step 2: Creative Strategy", description: "Our team develops concepts and creative directions tailored to your objectives.", bentoComponent: "reveal-icon", icon: Palette
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "API Integration", description: "Integrate with your existing marketing stack and automation tools"
|
||||
title: "Step 3: Production & Revisions", description: "We produce high-quality creatives and incorporate your feedback within 24 hours.", bentoComponent: "reveal-icon", icon: Play
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enterprise Security", description: "Enterprise-grade security and compliance for your peace of mind"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Performance Optimization", description: "AI-driven recommendations to maximize ad performance and ROI"
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Unlimited Variations", description: "Create infinite ad variations to find your perfect creative formula"
|
||||
}
|
||||
]}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request Demo", href: "#contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Quick Creatives has completely transformed how we produce ads. What used to take weeks now takes hours. Our ad spend is more efficient, and our creative quality has never been better."
|
||||
rating={5}
|
||||
author="Sarah Chen, Creative Director at Luna Studios"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", alt: "Sarah 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 2"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", alt: "Team member 3"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-creativ-1772624560648-c09f9055.png", alt: "Team member 4"
|
||||
}
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
ariaLabel="Customer testimonial from Luna Studios"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Transparent Pricing for Every Business"
|
||||
description="Choose the perfect plan to start generating ads today. Upgrade or downgrade anytime."
|
||||
tag="Plans"
|
||||
tagIcon={CreditCard}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Popular", badgeIcon: Sparkles,
|
||||
price: "$29/mo", subtitle: "Perfect for creators and small agencies", buttons: [
|
||||
{ text: "Start Free Trial", href: "#contact" }
|
||||
],
|
||||
features: [
|
||||
"100 ad generations per month", "Static & video ads", "Basic analytics", "Email support", "Brand kit customization"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "professional", badge: "Most Popular", badgeIcon: Zap,
|
||||
price: "$99/mo", subtitle: "Ideal for growing agencies", buttons: [
|
||||
{ text: "Start Free Trial", href: "#contact" }
|
||||
],
|
||||
features: [
|
||||
"500 ad generations per month", "Unlimited video formats", "Advanced analytics & insights", "Priority support", "Team collaboration (3 users)", "API access"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "Custom", badgeIcon: Crown,
|
||||
price: "Custom", subtitle: "For large teams and agencies", buttons: [
|
||||
{ text: "Contact Sales", href: "#contact" }
|
||||
],
|
||||
features: [
|
||||
"Unlimited ad generations", "Custom integrations", "Dedicated account manager", "Unlimited team members", "Custom training & onboarding", "SLA & compliance"
|
||||
]
|
||||
title: "Step 4: Launch & Optimize", description: "Receive final files in all formats. Deploy across channels and watch them perform.", bentoComponent: "reveal-icon", icon: CheckCircle
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Compare Plans", href: "#features" }
|
||||
{ text: "Start Your First Project", href: "#book-now" }
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get Started"
|
||||
title="Ready to Transform Your Ad Creation?"
|
||||
description="Join 500+ agencies and creators already using Quick Creatives. Try it free for 14 days—no credit card required."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "downward-rays-static-grid" }}
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
Schedule a Call
|
||||
</button>
|
||||
</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>
|
||||
</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>
|
||||
<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">
|
||||
<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="Marcus Chen, Founder"
|
||||
avatars={[
|
||||
{
|
||||
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-young-marketi-1772624560922-a81a2ec0.png", alt: "Team member"
|
||||
}
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Start Creating Free"
|
||||
termsText="By clicking Start Creating Free you're confirming that you agree with our Terms and Conditions. We'll send you a confirmation email shortly."
|
||||
ariaLabel="Newsletter signup and contact form"
|
||||
ariaLabel="Customer testimonial from Marcus Chen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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-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. 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. 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 immediately."
|
||||
},
|
||||
{
|
||||
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: "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"
|
||||
imageAlt="FAQ support team"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about working with studio ads."
|
||||
tag="Help"
|
||||
tagIcon={HelpCircle}
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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. Book a call today."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "downward-rays-static-grid" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Schedule a Call"
|
||||
termsText="✅ Quick consultation • 🚀 48-hour guarantee • ⚡ Cancel anytime"
|
||||
ariaLabel="Contact form and booking"
|
||||
containerClassName="max-w-2xl mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "API Documentation", href: "#" },
|
||||
{ label: "Status", href: "#" }
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -256,14 +527,15 @@ export default function LandingPage() {
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" }
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Quick Creatives. All rights reserved."
|
||||
copyrightText="© 2025 studio ads. All rights reserved."
|
||||
ariaLabel="Footer navigation and company information"
|
||||
containerClassName="max-w-6xl mx-auto px-4"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #684f7b;;
|
||||
--background-accent: #65417c;; */
|
||||
|
||||
--background: #050012;;
|
||||
--card: #040121;;
|
||||
--foreground: #f0e6ff;;
|
||||
--primary-cta: #c89bff;;
|
||||
--primary-cta-text: #050012;;
|
||||
--secondary-cta: #1d123b;;
|
||||
--secondary-cta-text: #f0e6ff;;
|
||||
--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;;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
125
src/app/thank-you/page.tsx
Normal file
125
src/app/thank-you/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { CheckCircle, ArrowRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ThankYouPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const url = searchParams.get("url") || "";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center px-4 py-20">
|
||||
<div className="max-w-2xl w-full">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-cta/20 mb-6">
|
||||
<CheckCircle size={32} className="text-primary-cta" />
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
|
||||
Thank You!
|
||||
</h1>
|
||||
<p className="text-lg text-foreground/70 mb-2">
|
||||
Your free 3 ad creatives are on the way.
|
||||
</p>
|
||||
{url && (
|
||||
<p className="text-base text-foreground/60 mb-8">
|
||||
We've received your website: <span className="font-semibold text-foreground">{url}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-card border border-accent/20 rounded-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">What's Next?</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary-cta text-primary-cta-text font-bold">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Check Your Email</h3>
|
||||
<p className="text-foreground/70">
|
||||
Within 1-2 hours, you'll receive a welcome email with next steps and our creative brief form.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary-cta text-primary-cta-text font-bold">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Fill Out the Brief</h3>
|
||||
<p className="text-foreground/70">
|
||||
Tell us about your product, target audience, and campaign goals. Upload any brand guidelines or reference materials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary-cta text-primary-cta-text font-bold">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Sit Back & Relax</h3>
|
||||
<p className="text-foreground/70">
|
||||
Our creative team will craft 3 premium ad creatives optimized for your platforms. You'll have them in 48 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary-cta text-primary-cta-text font-bold">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Review & Iterate</h3>
|
||||
<p className="text-foreground/70">
|
||||
Get your creatives and review them. We'll incorporate feedback within 24 hours. Once happy, deploy and start seeing results.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-primary-cta/10 to-accent/10 border border-primary-cta/20 rounded-lg p-6 mb-8">
|
||||
<h3 className="font-semibold text-foreground mb-3">💡 Pro Tips:</h3>
|
||||
<ul className="space-y-2 text-foreground/70">
|
||||
<li>• Be specific about your target audience demographics and interests</li>
|
||||
<li>• Share examples of ads you like (from competitors or other brands)</li>
|
||||
<li>• Provide clear brand guidelines and any assets you want us to use</li>
|
||||
<li>• Let us know your primary conversion goal (clicks, sales, signups, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-card border border-accent/20 text-foreground font-semibold rounded-full hover:bg-accent/5 transition-colors"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
<a
|
||||
href="https://wa.me/1234567890"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Chat with Us <ArrowRight size={18} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-foreground/60 text-sm mt-8">
|
||||
Questions? Chat with us on WhatsApp or reply to your confirmation email.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user