153 Commits

Author SHA1 Message Date
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
60de093eed Update src/app/page.tsx 2026-03-09 13:53:53 +00:00
51fea41093 Merge version_28 into main
Merge version_28 into main
2026-03-09 13:47:37 +00:00
0caadc2db6 Update src/app/page.tsx 2026-03-09 13:47:33 +00:00
60041290b4 Merge version_27 into main
Merge version_27 into main
2026-03-09 13:40:21 +00:00
662dde5c2e Update src/app/page.tsx 2026-03-09 13:40:17 +00:00
75fc83bab8 Update src/app/layout.tsx 2026-03-09 13:40:16 +00:00
1576cdc334 Merge version_26 into main
Merge version_26 into main
2026-03-09 13:36:42 +00:00
0b3045eda6 Update src/app/page.tsx 2026-03-09 13:36:38 +00:00
8ddb5d7b64 Update src/app/layout.tsx 2026-03-09 13:36:37 +00:00
dedf4b0752 Merge version_25 into main
Merge version_25 into main
2026-03-07 07:29:09 +00:00
f33b1d8ff5 Update src/app/page.tsx 2026-03-07 07:29:05 +00:00
8060f0dc6f Update src/app/layout.tsx 2026-03-07 07:29:04 +00:00
033937a08c Switch to version 23: modified src/app/page.tsx 2026-03-07 07:26:21 +00:00
1b63d1b19b Switch to version 23: modified src/app/layout.tsx 2026-03-07 07:26:20 +00:00
fc373efcec Merge version_24 into main
Merge version_24 into main
2026-03-07 07:23:55 +00:00
1df41c0c1e Update src/app/page.tsx 2026-03-07 07:23:50 +00:00
342d16373c Update src/app/layout.tsx 2026-03-07 07:23:50 +00:00
fa55e77820 Merge version_23 into main
Merge version_23 into main
2026-03-07 02:32:56 +00:00
1930d06fe2 Update src/app/page.tsx 2026-03-07 02:32:52 +00:00
9e8c6e67d1 Merge version_23 into main
Merge version_23 into main
2026-03-07 02:31:06 +00:00
6093c0b799 Update src/app/page.tsx 2026-03-07 02:31:02 +00:00
a2f8453fe9 Merge version_22 into main
Merge version_22 into main
2026-03-07 02:25:28 +00:00
73efafef66 Update src/app/page.tsx 2026-03-07 02:25:18 +00:00
3e77d4ef4e Merge version_21 into main
Merge version_21 into main
2026-03-07 02:20:55 +00:00
67c3e23ddd Update theme colors 2026-03-07 02:20:48 +00:00
1582bd7bfc Merge version_21 into main
Merge version_21 into main
2026-03-06 05:33:31 +00:00
ac78910b26 Update theme colors 2026-03-06 05:33:25 +00:00
768bfa6ce3 Merge version_21 into main
Merge version_21 into main
2026-03-06 05:32:46 +00:00
f884879659 Update theme colors 2026-03-06 05:32:40 +00:00
4764ffea99 Merge version_21 into main
Merge version_21 into main
2026-03-05 13:54:12 +00:00
cc382f7a71 Update src/app/page.tsx 2026-03-05 13:54:05 +00:00
cfe6423a01 Merge version_20 into main
Merge version_20 into main
2026-03-05 13:47:37 +00:00
9708909a0c Update src/app/page.tsx 2026-03-05 13:47:32 +00:00
234de6419c Update src/app/layout.tsx 2026-03-05 13:47:32 +00:00
83414f666a Merge version_19 into main
Merge version_19 into main
2026-03-05 13:42:53 +00:00
b0210d44ff Update src/app/thank-you/page.tsx 2026-03-05 13:42:49 +00:00
4ddd0fae64 Update src/app/page.tsx 2026-03-05 13:42:48 +00:00
96cf8fe822 Update src/app/layout.tsx 2026-03-05 13:42:48 +00:00
3c46b37f19 Merge version_18 into main
Merge version_18 into main
2026-03-05 13:35:39 +00:00
343dc3aa4b Update src/app/page.tsx 2026-03-05 13:35:35 +00:00
fa739da65f Update src/app/layout.tsx 2026-03-05 13:35:34 +00:00
dd9f8dd11b Merge version_17 into main
Merge version_17 into main
2026-03-05 13:31:46 +00:00
de7921dcf2 Update src/app/page.tsx 2026-03-05 13:31:42 +00:00
aaa107a8f2 Update src/app/layout.tsx 2026-03-05 13:31:41 +00:00
d58e0f6db4 Switch to version 15: modified src/app/styles/variables.css 2026-03-05 13:06:25 +00:00
09f71fe071 Switch to version 15: modified src/app/page.tsx 2026-03-05 13:06:25 +00:00
f741842e42 Switch to version 15: modified src/app/layout.tsx 2026-03-05 13:06:24 +00:00
e71f68d950 Switch to version 16: modified src/app/styles/variables.css 2026-03-05 13:01:59 +00:00
b29a136927 Switch to version 16: modified src/app/page.tsx 2026-03-05 13:01:58 +00:00
a334e75d98 Switch to version 16: modified src/app/layout.tsx 2026-03-05 13:01:58 +00:00
4cd4563a81 Switch to version 15: modified src/app/styles/variables.css 2026-03-05 12:59:05 +00:00
a2b7ffccfd Switch to version 15: modified src/app/page.tsx 2026-03-05 12:59:04 +00:00
e7dd8cffb4 Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:59:03 +00:00
158598b397 Switch to version 16: modified src/app/styles/variables.css 2026-03-05 12:57:12 +00:00
4f288a7aa8 Switch to version 16: modified src/app/page.tsx 2026-03-05 12:57:11 +00:00
f7957f64d5 Switch to version 16: modified src/app/layout.tsx 2026-03-05 12:57:10 +00:00
7725cff7ee Switch to version 15: modified src/app/styles/variables.css 2026-03-05 12:56:26 +00:00
92a2671031 Switch to version 15: modified src/app/page.tsx 2026-03-05 12:56:26 +00:00
762a6b788d Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:56:25 +00:00
8c13acb37e Switch to version 16: modified src/app/styles/variables.css 2026-03-05 12:56:13 +00:00
e654873cc1 Switch to version 16: modified src/app/page.tsx 2026-03-05 12:56:12 +00:00
582e372208 Switch to version 16: modified src/app/layout.tsx 2026-03-05 12:56:11 +00:00
b920d66603 Switch to version 15: added src/app/thank-you/page.tsx 2026-03-05 12:55:52 +00:00
28ea541a07 Switch to version 15: modified src/app/page.tsx 2026-03-05 12:55:52 +00:00
ecb51cf35c Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:55:51 +00:00
1d1cb3e25e Switch to version 14: remove src/app/thank-you/page.tsx 2026-03-05 12:21:26 +00:00
cd43b2423c Switch to version 14: modified src/app/page.tsx 2026-03-05 12:21:25 +00:00
bf14dde886 Switch to version 14: modified src/app/layout.tsx 2026-03-05 12:21:25 +00:00
775c58dd5f Switch to version 15: modified src/app/styles/variables.css 2026-03-05 12:21:12 +00:00
ca54c45148 Switch to version 15: modified src/app/page.tsx 2026-03-05 12:21:12 +00:00
b8a60846fa Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:21:11 +00:00
7df6cb9adc Merge version_16 into main
Merge version_16 into main
2026-03-05 12:20:42 +00:00
92ed70cb51 Update theme colors 2026-03-05 12:20:35 +00:00
2022cff594 Switch to version 16: modified src/app/styles/variables.css 2026-03-05 12:19:29 +00:00
a3fb84396d Switch to version 16: modified src/app/page.tsx 2026-03-05 12:19:28 +00:00
3c2670e684 Switch to version 16: modified src/app/layout.tsx 2026-03-05 12:19:28 +00:00
ff5e4fc53b Switch to version 15: added src/app/thank-you/page.tsx 2026-03-05 12:19:18 +00:00
9b56793461 Switch to version 15: modified src/app/page.tsx 2026-03-05 12:19:17 +00:00
761cea35b5 Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:19:17 +00:00
a9dd4797f0 Switch to version 14: modified src/app/page.tsx 2026-03-05 12:19:00 +00:00
1f8dcc0d2f Switch to version 13: modified src/app/page.tsx 2026-03-05 12:18:17 +00:00
4b299fa5eb Switch to version 12: modified src/app/page.tsx 2026-03-05 12:17:31 +00:00
1364284317 Switch to version 13: modified src/app/page.tsx 2026-03-05 12:17:14 +00:00
6ed9bf2554 Switch to version 14: remove src/app/thank-you/page.tsx 2026-03-05 12:16:50 +00:00
27c0ba48c9 Switch to version 14: modified src/app/page.tsx 2026-03-05 12:16:49 +00:00
b5f1ed8f9e Switch to version 14: modified src/app/layout.tsx 2026-03-05 12:16:48 +00:00
327c83d2c6 Switch to version 15: added src/app/thank-you/page.tsx 2026-03-05 12:15:53 +00:00
47798547bb Switch to version 15: modified src/app/page.tsx 2026-03-05 12:15:53 +00:00
bb0610599e Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:15:52 +00:00
b74202f2b1 Switch to version 14: remove src/app/thank-you/page.tsx 2026-03-05 12:15:42 +00:00
2e2b93e65c Switch to version 14: modified src/app/page.tsx 2026-03-05 12:15:42 +00:00
e9f886752a Switch to version 14: modified src/app/layout.tsx 2026-03-05 12:15:42 +00:00
cbdd5bd21a Switch to version 15: modified src/app/styles/variables.css 2026-03-05 12:15:37 +00:00
5b0ad54dc3 Switch to version 15: modified src/app/page.tsx 2026-03-05 12:15:36 +00:00
f0d015ede5 Switch to version 15: modified src/app/layout.tsx 2026-03-05 12:15:36 +00:00
3c53b25ead Merge version_16 into main
Merge version_16 into main
2026-03-05 12:15:13 +00:00
1727e38d3c Update theme colors 2026-03-05 12:15:07 +00:00
3e7815f595 Merge version_16 into main
Merge version_16 into main
2026-03-05 12:14:23 +00:00
0894ecbe8c Update theme colors 2026-03-05 12:14:16 +00:00
07badd52e6 Merge version_16 into main
Merge version_16 into main
2026-03-05 12:14:06 +00:00
ab1b99a53f Update theme colors 2026-03-05 12:13:59 +00:00
98102d181f Merge version_16 into main
Merge version_16 into main
2026-03-05 12:11:51 +00:00
9b9f3354a8 Update src/app/page.tsx 2026-03-05 12:11:46 +00:00
0b12075419 Update src/app/layout.tsx 2026-03-05 12:11:46 +00:00
dad477b06e Merge version_15 into main
Merge version_15 into main
2026-03-05 06:39:59 +00:00
ed40fec024 Add src/app/thank-you/page.tsx 2026-03-05 06:39:55 +00:00
34db2ddbf0 Update src/app/page.tsx 2026-03-05 06:39:54 +00:00
c08bfd11f8 Update src/app/layout.tsx 2026-03-05 06:39:54 +00:00
681266e374 Merge version_14 into main
Merge version_14 into main
2026-03-05 05:15:06 +00:00
df52fd53a5 Update src/app/page.tsx 2026-03-05 05:15:01 +00:00
7967ae572b Merge version_14 into main
Merge version_14 into main
2026-03-05 05:13:34 +00:00
b4deea5982 Update src/app/page.tsx 2026-03-05 05:13:30 +00:00
e489f74440 Merge version_13 into main
Merge version_13 into main
2026-03-05 05:10:36 +00:00
9a89f7be97 Update src/app/page.tsx 2026-03-05 05:10:32 +00:00
5548158ae2 Merge version_12 into main
Merge version_12 into main
2026-03-05 05:07:09 +00:00
6f11ebac09 Update src/app/page.tsx 2026-03-05 05:07:05 +00:00
45e956d16a Update src/app/layout.tsx 2026-03-05 05:07:05 +00:00
ff8938ec0f Merge version_11 into main
Merge version_11 into main
2026-03-05 05:04:11 +00:00
98f7cb8ba6 Update src/app/page.tsx 2026-03-05 05:04:07 +00:00
fe1b84e4d2 Update src/app/layout.tsx 2026-03-05 05:04:07 +00:00
2a8616b144 Merge version_10 into main
Merge version_10 into main
2026-03-05 05:01:16 +00:00
7105de1607 Update src/app/page.tsx 2026-03-05 05:01:12 +00:00
f09f245b63 Update src/app/layout.tsx 2026-03-05 05:01:12 +00:00
d77c1249bb Merge version_9 into main
Merge version_9 into main
2026-03-05 01:42:55 +00:00
f032927a66 Update src/app/page.tsx 2026-03-05 01:42:51 +00:00
6e76762078 Merge version_9 into main
Merge version_9 into main
2026-03-05 01:41:21 +00:00
9abc6caa07 Update src/app/page.tsx 2026-03-05 01:41:17 +00:00
d79fff57f6 Update src/app/layout.tsx 2026-03-05 01:41:17 +00:00
cef806d5ee Merge version_8 into main
Merge version_8 into main
2026-03-05 01:32:28 +00:00
1d7bdc8f07 Update src/app/page.tsx 2026-03-05 01:32:24 +00:00
3249eead64 Update src/app/layout.tsx 2026-03-05 01:32:24 +00:00
453c66bf08 Merge version_7 into main
Merge version_7 into main
2026-03-05 01:26:50 +00:00
1df8d4652a Update src/app/page.tsx 2026-03-05 01:26:46 +00:00
a9da569845 Merge version_6 into main
Merge version_6 into main
2026-03-04 23:32:35 +00:00
30e9ac1de5 Update src/app/page.tsx 2026-03-04 23:32:31 +00:00
8212671c23 Merge version_5 into main
Merge version_5 into main
2026-03-04 13:27:16 +00:00
92b0b4b577 Update src/app/page.tsx 2026-03-04 13:27:11 +00:00
5d022c1da4 Update src/app/layout.tsx 2026-03-04 13:27:10 +00:00
8b8e88ab3e Merge version_4 into main
Merge version_4 into main
2026-03-04 12:56:17 +00:00
4 changed files with 519 additions and 229 deletions

View File

@@ -1,10 +1,19 @@
import type { Metadata } from "next";
import "./styles/variables.css";
import { Lora, Inter } from "next/font/google";
import "./globals.css";
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 - Agency-Quality Ad Creatives in 48 Hours", description: "Get stunning video ads, static creatives, and full-funnel packs delivered in 48 hours. Perfect for agencies, brands, and creators."
};
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,
@@ -12,9 +21,37 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<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={{
@@ -1385,4 +1422,4 @@ export default function RootLayout({
</body>
</html>
);
}
}

View File

@@ -6,14 +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 SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import { BarChart3, Briefcase, CreditCard, Mail, Package, Palette, Shield, ShoppingCart, TrendingUp, Users, Zap, Sparkles, Database, Crown, Play, Image, Layers, Clock, CheckCircle, HelpCircle } from "lucide-react";
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"
@@ -28,26 +50,54 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Quick Creatives"
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" }
]}
button={{
text: "Get My 3 Free Creatives", href: "#free-offer"
}}
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="Agency-Quality Ad Creatives. Delivered in 48 Hours."
description="Get 40% faster delivery at half the traditional cost. Skip the lengthy production cycles and get stunning video ads, static creatives, and full-funnel packs in 48 hours. Perfect for agencies, brands, and creators who refuse to compromise on quality."
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={[
{
@@ -62,21 +112,69 @@ export default function LandingPage() {
]}
avatarText="Trusted by 100+ agencies and brands"
buttons={[
{ text: "Get My 3 Free Creatives", href: "#free-offer" },
{ text: "Start Free Project", href: "#free-offer" },
{ text: "See Our Work", href: "#features" }
]}
buttonAnimation="slide-up"
ariaLabel="Hero section - Quick Creatives agency-quality ads in 48 hours"
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="Real numbers from real clients achieving real results"
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={["200+ Ad Variations", "48-Hour Turnaround", "95% Client Satisfaction", "10M+ Impressions Generated", "3x Faster Production"]}
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}
@@ -88,45 +186,89 @@ export default function LandingPage() {
/>
</div>
<div id="pain-points" data-section="pain-points">
<FeatureBorderGlow
title="The Old Way vs. The Quick Creatives Way"
description="Stop wasting weeks on ad production. Here's how we're different."
tag="Why Switch"
tagIcon={Zap}
features={[
{
icon: Clock,
title: "Weeks of Back-and-Forth", description: "Traditional agencies take weeks for approvals and revisions. We deliver in 48 hours."
},
{
icon: Users,
title: "Managing Multiple Vendors", description: "Juggling designers, videographers, and copywriters. We handle everything under one roof."
},
{
icon: Palette,
title: "Limited Creative Variations", description: "You get one option and hope it works. We create 10+ variations to maximize ROI."
},
{
icon: TrendingUp,
title: "Unknown Performance", description: "Guessing which creatives will perform best. We optimize based on real data insights."
},
{
icon: CreditCard,
title: "Unpredictable Costs", description: "Hidden fees and scope creep add up fast. Our pricing is transparent and fixed."
},
{
icon: Sparkles,
title: "Poor Quality at Scale", description: "Agencies cut corners when scaling. We maintain premium quality every single time."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Experience the Difference", href: "#features" }
]}
/>
<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">
@@ -138,7 +280,7 @@ export default function LandingPage() {
features={[
{
title: "Video Ads", description: "Professional 15-60 second video ads optimized for every platform. Cinematic, conversion-focused, and brand-consistent.", bentoComponent: "media-stack", items: [
{ videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=1" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", imageAlt: "Video ad sample" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png", imageAlt: "Creative sample" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", imageAlt: "Creative sample" }
]
@@ -201,180 +343,165 @@ 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="pricing" data-section="pricing">
<PricingCardEight
title="Simple, Transparent Pricing"
description="Choose the plan that fits your creative needs. Upgrade anytime."
tag="Plans"
tagIcon={CreditCard}
plans={[
{
id: "starter", badge: "Starter", badgeIcon: Sparkles,
price: "$1,500", subtitle: "Per Month", buttons: [
{ text: "Get Started", 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: "growth", badge: "Most Popular", badgeIcon: Zap,
price: "$3,000", subtitle: "Per Month", buttons: [
{ text: "Get Started", href: "#free-offer" }
],
features: [
"Unlimited ad projects", "Video ads with unlimited variations", "Static creatives (unlimited)", "Full-funnel packs included", "24-hour turnaround available", "A/B testing variations", "Performance analytics", "Priority support", "Dedicated account manager"
]
},
{
id: "scale", badge: "Scale", badgeIcon: Crown,
price: "$5,500", subtitle: "Per Month", buttons: [
{ text: "Contact Sales", href: "#free-offer" }
],
features: [
"Everything in Growth +", "Custom creative strategy sessions", "Unlimited team members", "API access", "White-label options", "Custom integrations", "24/7 dedicated support", "Quarterly strategy reviews", "Enterprise SLA"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Compare All Plans", href: "#features" }
]}
buttonAnimation="opacity"
/>
<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', '_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="free-offer" data-section="free-offer">
<ContactCenter
tag="Free Trial - Risk Free"
title="Claim Your 3 Free Creatives Now"
description="Try our service risk-free with no credit card required. See exactly what we deliver in 48 hours. Includes 30-day money-back guarantee on paid plans. No follow-up sales calls. No obligations."
tagIcon={Sparkles}
background={{ variant: "downward-rays-static-grid" }}
useInvertedBackground={true}
inputPlaceholder="Enter your email address"
buttonText="Get My 3 Free Creatives"
termsText="By claiming your free creatives, you agree to our Terms and Conditions. We'll send you everything via email. No credit card required. No follow-up calls. No obligations."
ariaLabel="Free creative offer signup"
/>
</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">
<TestimonialCardFifteen
testimonial="We went from spending 3 weeks on ad production to 48 hours. The quality is exceptional and our ROAS improved by 40%. Quick Creatives is a game-changer for our agency."
testimonial="We went from spending 3 weeks on ad production to 48 hours. The quality is exceptional and our ROAS improved by 40%. studio ads is a game-changer for our agency."
rating={5}
author="Emma Rodriguez, Creative Director"
author="Marcus Chen, Founder"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", alt: "Emma Rodriguez"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", alt: "Marcus Chen"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png", alt: "Team member"
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", alt: "Team member"
}
]}
ratingAnimation="slide-up"
avatarsAnimation="blur-reveal"
useInvertedBackground={true}
ariaLabel="Customer testimonial from Emma Rodriguez"
ariaLabel="Customer testimonial from Marcus Chen"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
faqs={[
{
id: "1", title: "How do you deliver in 48 hours?", content: "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: "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: "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: "5", title: "Can I get unlimited revisions?", content: "Revision allowances vary by plan. Our Growth and Scale plans include comprehensive revision options. We work with you until you're happy with the results—we succeed when you succeed."
},
{
id: "6", title: "What's included in the free 3 creatives 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, no follow-up sales calls—just quality work to show what we can do."
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=2"
imageAlt="FAQ support team"
title="Frequently Asked Questions"
description="Everything you need to know about working with Quick Creatives."
tag="Help"
tagIcon={HelpCircle}
mediaAnimation="slide-up"
faqsAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
mediaPosition="left"
/>
<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">
<ContactCenter
tag="Get Started"
title="Ready to Scale Your Creative Output?"
description="Join 100+ brands and agencies already transforming their ad production with Quick Creatives. Start with your free 3 creatives today. 30-day money-back guarantee. Cancel anytime."
tagIcon={Mail}
background={{ variant: "downward-rays-static-grid" }}
useInvertedBackground={true}
inputPlaceholder="Enter your email address"
buttonText="Get My 3 Free Creatives"
termsText="By claiming your free creatives, you're confirming that you agree with our Terms and Conditions. 30-day money-back guarantee on paid plans. Cancel anytime, no questions asked."
ariaLabel="Contact form and creative offer signup"
/>
<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">
@@ -383,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" }
]
},
{
@@ -404,10 +531,11 @@ export default function LandingPage() {
]
}
]}
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>
);
}
}

View File

@@ -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
View 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>
);
}