|
|
|
|
@@ -12,8 +12,11 @@ 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, Calendar } from "lucide-react";
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
const [showComparison, setShowComparison] = useState(false);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
|
@@ -38,7 +41,7 @@ export default function LandingPage() {
|
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
button={{
|
|
|
|
|
text: "Get 3 Free Ads", href: "#free-offer"
|
|
|
|
|
text: "Claim Your 3 Free Ads Now", href: "#free-offer"
|
|
|
|
|
}}
|
|
|
|
|
animateOnLoad={true}
|
|
|
|
|
/>
|
|
|
|
|
@@ -62,7 +65,7 @@ export default function LandingPage() {
|
|
|
|
|
]}
|
|
|
|
|
avatarText="Trusted by 100+ agencies and brands"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Get 3 Free Ads", href: "#free-offer" },
|
|
|
|
|
{ text: "Claim Your 3 Free Ads Now", href: "#free-offer" },
|
|
|
|
|
{ text: "See Our Work", href: "#features" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
@@ -208,6 +211,73 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
|
|
|
<div className="relative">
|
|
|
|
|
<div className="flex justify-center mb-6">
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setShowComparison(!showComparison)}
|
|
|
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-button text-primary hover:opacity-80 transition-opacity"
|
|
|
|
|
aria-label="Toggle feature comparison"
|
|
|
|
|
>
|
|
|
|
|
<CheckCircle size={18} />
|
|
|
|
|
<span>{showComparison ? "Hide Comparison" : "Show Plan Comparison"}</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
{showComparison && (
|
|
|
|
|
<div className="mb-8 p-6 rounded-lg bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20">
|
|
|
|
|
<h3 className="text-lg font-semibold mb-4 text-foreground">Feature Comparison</h3>
|
|
|
|
|
<div className="overflow-x-auto">
|
|
|
|
|
<table className="w-full text-sm">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr className="border-b border-accent/20">
|
|
|
|
|
<th className="text-left py-2 px-3 font-semibold">Feature</th>
|
|
|
|
|
<th className="text-center py-2 px-3 font-semibold">Starter</th>
|
|
|
|
|
<th className="text-center py-2 px-3 font-semibold">Growth</th>
|
|
|
|
|
<th className="text-center py-2 px-3 font-semibold">Enterprise</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr className="border-b border-accent/10">
|
|
|
|
|
<td className="py-3 px-3">Projects/Month</td>
|
|
|
|
|
<td className="text-center py-3 px-3">4</td>
|
|
|
|
|
<td className="text-center py-3 px-3">Unlimited</td>
|
|
|
|
|
<td className="text-center py-3 px-3">Unlimited</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10">
|
|
|
|
|
<td className="py-3 px-3">Creatives/Month</td>
|
|
|
|
|
<td className="text-center py-3 px-3">Included</td>
|
|
|
|
|
<td className="text-center py-3 px-3">30+</td>
|
|
|
|
|
<td className="text-center py-3 px-3">Unlimited</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10">
|
|
|
|
|
<td className="py-3 px-3">Turnaround Time</td>
|
|
|
|
|
<td className="text-center py-3 px-3">48 hours</td>
|
|
|
|
|
<td className="text-center py-3 px-3">24 hours</td>
|
|
|
|
|
<td className="text-center py-3 px-3">24 hours</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10">
|
|
|
|
|
<td className="py-3 px-3">Account Manager</td>
|
|
|
|
|
<td className="text-center py-3 px-3">-</td>
|
|
|
|
|
<td className="text-center py-3 px-3">✓</td>
|
|
|
|
|
<td className="text-center py-3 px-3">✓</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr className="border-b border-accent/10">
|
|
|
|
|
<td className="py-3 px-3">API Access</td>
|
|
|
|
|
<td className="text-center py-3 px-3">-</td>
|
|
|
|
|
<td className="text-center py-3 px-3">-</td>
|
|
|
|
|
<td className="text-center py-3 px-3">✓</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td className="py-3 px-3">24/7 Support</td>
|
|
|
|
|
<td className="text-center py-3 px-3">-</td>
|
|
|
|
|
<td className="text-center py-3 px-3">-</td>
|
|
|
|
|
<td className="text-center py-3 px-3">✓</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<PricingCardEight
|
|
|
|
|
title="Simple, Transparent Pricing"
|
|
|
|
|
description="Choose the plan that fits your creative needs. Upgrade anytime."
|
|
|
|
|
@@ -216,7 +286,7 @@ export default function LandingPage() {
|
|
|
|
|
plans={[
|
|
|
|
|
{
|
|
|
|
|
id: "starter", badge: "Starter", badgeIcon: Sparkles,
|
|
|
|
|
price: "$1,500", subtitle: "Per Month", buttons: [
|
|
|
|
|
price: "$1,500", subtitle: "Per Month (Recurring)", buttons: [
|
|
|
|
|
{ text: "Get Started", href: "#free-offer" }
|
|
|
|
|
],
|
|
|
|
|
features: [
|
|
|
|
|
@@ -225,7 +295,7 @@ export default function LandingPage() {
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "growth", badge: "Most Popular", badgeIcon: Zap,
|
|
|
|
|
price: "$5,000", subtitle: "Per Month", buttons: [
|
|
|
|
|
price: "$5,000", subtitle: "Per Month (Recurring)", buttons: [
|
|
|
|
|
{ text: "Get Started", href: "#free-offer" }
|
|
|
|
|
],
|
|
|
|
|
features: [
|
|
|
|
|
@@ -245,9 +315,6 @@ export default function LandingPage() {
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Compare All Plans", href: "#features" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="opacity"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -261,7 +328,7 @@ export default function LandingPage() {
|
|
|
|
|
background={{ variant: "downward-rays-static-grid" }}
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
inputPlaceholder="Enter your email address"
|
|
|
|
|
buttonText="Get 3 Free Ads"
|
|
|
|
|
buttonText="Claim Your 3 Free Ads Now"
|
|
|
|
|
termsText="By claiming your free ads, 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 ad offer signup"
|
|
|
|
|
/>
|
|
|
|
|
@@ -330,7 +397,7 @@ export default function LandingPage() {
|
|
|
|
|
<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: "1", title: "How do you deliver in 48 hours?", content: "We deliver 3 premium ad creatives with a guaranteed 48-hour turnaround. Our streamlined workflow combines creative strategy, production, and revisions into a single efficient process. We have dedicated creative teams working around the clock to ensure your project gets the attention it deserves while meeting our 48-hour promise."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "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."
|
|
|
|
|
@@ -371,7 +438,7 @@ export default function LandingPage() {
|
|
|
|
|
background={{ variant: "downward-rays-static-grid" }}
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
inputPlaceholder="Enter your email address"
|
|
|
|
|
buttonText="Get 3 Free Ads"
|
|
|
|
|
buttonText="Claim Your 3 Free Ads Now"
|
|
|
|
|
termsText="By claiming your free ads, 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 ad offer signup"
|
|
|
|
|
/>
|
|
|
|
|
|
