+
+ {[{ plan: "Starter", price: "Free", hi: false }, { plan: "All-Access", price: "$299", hi: true }, { plan: "Team", price: "Custom", hi: false }].map(pl => (
+
+
{pl.plan}
+
{pl.price}
+ {pl.hi &&
lifetime access
}
))}
@@ -368,353 +789,168 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
)}
{comps.includes("cta") && (
-
-
Start building today
-
Join thousands of developers worldwide.
-
Get started free →
+
+
Start building today
+
Join 120,000+ developers worldwide.
+
Get All-Access →
)}
-
+
);
}
// ---------------------------------------------------------------------------
-// DaisyUI
-// ---------------------------------------------------------------------------
-
-export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
- const theme = themeColor ?? DAISY_THEMES[0];
- const isDark = config ? config.mode === "dark" : (theme.bg ?? "#fff").match(/^#[012]/i) !== null;
-
- const bg = isDark ? (theme.bg ?? "#1d232a") : (theme.bg?.match(/^#[012]/) ? "#fff" : (theme.bg ?? "#fff"));
- const text = isDark ? (theme.textColor ?? "#a6adba") : (theme.textColor ?? "#1f2937");
- const muted = isDark ? (theme.mutedText ?? "rgba(255,255,255,0.4)") : (theme.mutedText ?? "#6b7280");
- const card = isDark ? (theme.cardBg ?? "rgba(255,255,255,0.04)") : (theme.cardBg ?? "#f9fafb");
- const border = isDark ? (theme.borderColor ?? "rgba(255,255,255,0.09)") : (theme.borderColor ?? "#e5e7eb");
-
- const bgStyle = config?.background ?? "solid";
- const navStyle = config?.nav ?? "standard";
- const hdrStyle = config?.header ?? "centered";
- const comps = config?.components ?? ["features", "pricing"];
- const ff = fontStack(config?.font);
-
- const heroBgLayer =
- bgStyle === "gradient" ? `radial-gradient(ellipse 80% 55% at 50% -5%, ${theme.primary}45, transparent)` :
- bgStyle === "noise" ? "none" : "none";
-
- return (
-
- {bgStyle === "pattern" &&
}
-
- {/* Nav */}
- {navStyle === "pill" ? (
-
-
-
- {["Features","Pricing","Docs","Blog"].map(i => {i} )}
- Get started
-
-
- ) : (
-
-
-
- {["Features","Pricing","Docs","Blog"].map(i => {i} )}
-
-
- Login
- Get started
-
-
- )}
-
- {/* Hero — centered */}
- {hdrStyle === "centered" && (
-
- {heroBgLayer &&
}
-
- ✦ {theme.label} theme · just shipped
-
-
Build faster,
-
The all-in-one platform that helps teams build, launch, and scale.
-
- Start for free
- See demo →
-
-
- )}
-
- {hdrStyle === "split" && (
-
- {heroBgLayer &&
}
-
-
✦ {theme.label}
-
Build faster,
-
The platform teams trust to ship faster.
-
- Start free
- Demo →
-
-
-
-
- {["#ff5f56","#ffbd2e","#27c93f"].map(c =>
)}
-
-
- {[["Revenue","$12k"],["Users","2.8k"],["Growth","+24%"]].map(([k,v]) => (
-
- ))}
-
-
-
- )}
-
- {hdrStyle === "stats" && (
-
- {heroBgLayer &&
}
-
Build faster,
-
Trusted by thousands of teams worldwide.
-
- Start free
- Demo →
-
-
- {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"]].map(([v, l]) => (
-
- ))}
-
-
- )}
-
- {/* Sections */}
- {comps.includes("logos") && (
-
- Trusted by
- {["Vercel","Stripe","Linear","Notion","Supabase"].map(b => {b} )}
-
- )}
-
- {comps.includes("features") && (
-
- {[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade" }, { icon: "📈", title: "Scales with you", desc: "0 to millions" }].map(f => (
-
-
{f.icon}
-
{f.title}
-
{f.desc}
-
- ))}
-
- )}
-
- {comps.includes("steps") && (
-
-
How it works
-
- {["Connect your repo","Configure stack","Deploy in seconds"].map((s, i) => (
-
- ))}
-
-
- )}
-
- {comps.includes("testimonials") && (
-
-
- {[{ q: "\"Deployed in 5 minutes.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut infra costs 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
-
-
{t.q}
-
{t.name} · {t.role}
-
- ))}
-
-
- )}
-
- {comps.includes("pricing") && (
-
-
Simple pricing
-
- {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
-
- ))}
-
-
- )}
-
- {comps.includes("faq") && (
-
-
FAQ
- {["What's included in free?","Can I upgrade anytime?","Team billing?"].map((q, i) => (
-
- {q}
- {i === 0 ? "−" : "+"}
-
- ))}
-
- )}
-
- {comps.includes("cta") && (
-
-
Ready to ship faster?
-
Join 50,000+ teams already on Acme.
-
Get started free →
-
- )}
-
-
-
- );
-}
-
-// ---------------------------------------------------------------------------
-// HeroUI
+// HeroUI — polished, premium
// ---------------------------------------------------------------------------
export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
const theme = themeColor ?? HEROUI_MARKETING_THEMES[0];
const isDark = config ? config.mode === "dark" : (theme.bg ?? "#fff") === "#09090b";
- const bg = isDark ? (theme.bg ?? "#09090b") : (theme.bg ?? "#fff");
- const text = isDark ? (theme.textColor ?? "#f4f4f5") : (theme.textColor ?? "#18181b");
- const muted = isDark ? (theme.mutedText ?? "#71717a") : (theme.mutedText ?? "#71717a");
- const card = isDark ? (theme.cardBg ?? "#18181b") : (theme.cardBg ?? "#fafafa");
- const border = isDark ? (theme.borderColor ?? "#27272a") : (theme.borderColor ?? "#f4f4f5");
+ const bg = isDark ? (theme.bg ?? "#09090b") : "#ffffff";
+ const text = isDark ? (theme.textColor ?? "#f4f4f5") : "#09090b";
+ const muted = isDark ? (theme.mutedText ?? "#71717a") : "#71717a";
+ const card = isDark ? (theme.cardBg ?? "#18181b") : "#fafafa";
+ const border = isDark ? (theme.borderColor ?? "#27272a") : "#f0f0f0";
const bgStyle = config?.background ?? "clean";
const navStyle = config?.nav ?? "blur";
const hdrStyle = config?.header ?? "animated-badge";
- const comps = config?.components ?? ["features", "metrics"];
+ const comps = config?.components ?? ["features","metrics"];
const ff = fontStack(config?.font);
const navBlur = navStyle === "blur";
- const navBg = navBlur ? (isDark ? "rgba(9,9,11,0.65)" : "rgba(255,255,255,0.65)") : navStyle === "minimal" ? "transparent" : bg;
+ const navBg = navBlur ? (isDark ? "rgba(9,9,11,0.65)" : "rgba(255,255,255,0.65)") : bg;
const heroBgOverlay =
- bgStyle === "gradient-mesh" ? `radial-gradient(ellipse 65% 55% at 25% 40%, ${theme.primary}22, transparent 55%), radial-gradient(ellipse 55% 50% at 78% 62%, #06b6d420, transparent 55%)` :
- bgStyle === "glass" ? `linear-gradient(130deg, ${theme.primary}12, ${isDark ? "#18181b" : "#fff"} 55%)` :
+ bgStyle === "gradient-mesh" ? `radial-gradient(ellipse 65% 55% at 20% 40%, ${theme.primary}22, transparent 55%), radial-gradient(ellipse 55% 50% at 80% 65%, #06b6d420, transparent 55%)` :
+ bgStyle === "glass" ? `linear-gradient(130deg, ${theme.primary}14, ${isDark ? "#18181b" : "#fff"} 55%)` :
bgStyle === "aurora" ? `radial-gradient(ellipse 80% 60% at 50% -10%, ${theme.primary}38, transparent 70%)` :
undefined;
return (
- {heroBgOverlay &&
}
+ {heroBgOverlay &&
}
- {/* Nav */}
-
-
-
Acme
+
-
+
{["Features","Pricing","Docs","Blog"].map(i => {i} )}
-
-
Login
-
Get started
+
+ Login
+ Get started
{hdrStyle === "animated-badge" && (
-
-
- 🚀 Now in public beta ·
Join 12k users
+
+
+ 🚀 Now in public beta · Join 12k users →
-
Build faster,
-
The all-in-one platform for teams that move fast.
-
-
Start for free
-
Live demo →
+
+ Build faster,
+
+ The all-in-one platform for teams that move fast. Deploy in seconds, scale to millions.
+
+
+ Start for free
+ Live demo →
+
)}
{hdrStyle === "split" && (
-
-
-
🚀 Beta
-
Build faster,
-
The platform for fast-moving teams.
-
-
Start free
-
Demo →
+
+
+
🚀 Now in beta
+
+ Build faster,
+
The platform for fast-moving teams.
+
+ Start free
+ Demo →
+
+
+ {[["50k+","Teams"],["99.9%","Uptime"]].map(([v,l]) => (
+
+ ))}
-
-
- {["#ff5f56","#ffbd2e","#27c93f"].map(c =>
)}
-
-
-
- {["Revenue $12k","Users 2.8k","Growth +24%","Churn 2.1%"].map(m => (
-
-
{m.split(" ")[0]}
-
{m.split(" ")[1]}
-
- ))}
-
-
+
+
)}
{hdrStyle === "gradient" && (
-
-
+
+
Build faster.
-
Everything your team needs in one platform.
-
Get started →
+
Everything your team needs in one platform.
+
+ Get started →
+ Learn more
+
+
- {[{ icon: "⚡", title: "10× faster deploys" }, { icon: "🔒", title: "Zero-trust security" }, { icon: "📦", title: "Any stack" }, { icon: "🌍", title: "Global CDN" }].map(f => (
-
- ))}
+
+
+
Built for what matters
+
Every feature designed around the way modern teams actually work.
+
+
+ {[
+ { icon: "bolt", title: "10× faster deploys", desc: "Zero-config CI/CD. Push and ship in under a minute." },
+ { icon: "shield", title: "Zero-trust security", desc: "SOC 2 compliant. End-to-end encryption by default." },
+ { icon: "layers", title: "Any stack", desc: "Node, Python, Go, Rust — we handle all of them." },
+ { icon: "globe", title: "Global CDN", desc: "300+ edge locations. Sub-10ms for every user." },
+ ].map(f => (
+
+ ))}
+
)}
{comps.includes("metrics") && (
-
-
-
Live metrics
-
- {["Revenue $128k","Users 24.8k","Growth +34%","Churn 1.4%"].map(m => (
-
-
{m.split(" ")[0]}
-
{m.split(" ")[1]}
+
+
+
Live metrics
+
+ {[["MRR","$128k"],[" Users","24.8k"],["Growth","+34%"],["Churn","1.4%"]].map(([l, v]) => (
+
))}
@@ -723,23 +959,30 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
)}
{comps.includes("avatars") && (
-
+
- {[theme.primary,"#2563eb","#0d9488","#e11d48"].map((c, i) => (
-
0 ? -9 : 0 }} />
+ {[theme.primary,"#2563eb","#0d9488","#e11d48","#7c3aed"].map((c, i) => (
+
0 ? -10 : 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
+ {String.fromCharCode(65+i)}
+
))}
-
Trusted by 50,000+ teams
+
50,000+ teams ship on Acme
)}
{comps.includes("pricing") && (
-
-
- {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
-
-
{p.plan}
-
{p.price}
+
+
+ {[
+ { plan: "Starter", price: "Free", hi: false },
+ { plan: "Pro", price: "$29/mo", hi: true },
+ { plan: "Enterprise", price: "Custom", hi: false },
+ ].map(pl => (
+
+
{pl.plan}
+
{pl.price}
+ {pl.hi &&
Most popular
}
))}
@@ -747,12 +990,18 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
)}
{comps.includes("testimonials") && (
-
-
- {[{ q: "\"Shipped 3× faster since switching.\"", name: "Sarah K." }, { q: "\"Cut infra costs by 40%.\"", name: "James R." }].map(t => (
-
-
{t.q}
-
{t.name}
+
+
+ {[
+ { q: "\"Shipped 3× faster since switching. Absolute game changer.\"", name: "Sarah K.", role: "CTO" },
+ { q: "\"Cut infrastructure costs by 40%. The ROI was immediate.\"", name: "James R.", role: "Eng Lead" },
+ ].map(t => (
+
+
+ {Array(5).fill(0).map((_, i) => ★ )}
+
+
{t.q}
+
{t.name} · {t.role}
))}
@@ -760,10 +1009,10 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
)}
{comps.includes("cta") && (
-
-
Ready to ship faster?
-
Join 50,000+ teams already on Acme.
-
Get started free →
+
+
Ready to ship faster?
+
Join 50,000+ teams already on Acme. Free forever.
+
Get started free →
)}
@@ -773,132 +1022,171 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
}
// ---------------------------------------------------------------------------
-// Tailwind only
+// Tailwind only — editorial, minimal, typographic
// ---------------------------------------------------------------------------
-export function MarketingTailwind({ themeColor, config }: {
- themeColor?: ThemeColor; config?: DesignConfig;
-}) {
+export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
const isDark = config?.mode === "dark";
const bgStyle = config?.background ?? "clean";
const navStyle = config?.nav ?? "minimal";
const hdrStyle = config?.header ?? "editorial";
- const comps = config?.components ?? ["features", "stats", "pricing"];
+ const comps = config?.components ?? ["features","stats","pricing"];
const ff = fontStack(config?.font);
- // Use themeColor accent if provided (shadcn palette)
- const accent = themeColor?.primary ?? "#09090b";
- const accentFg = themeColor?.primaryFg ?? "#fff";
+ const accent = themeColor?.primary ?? (isDark ? "#f4f4f5" : "#09090b");
+ const accentFg = themeColor?.primaryFg ?? (isDark ? "#09090b" : "#fff");
const bg = isDark ? "#09090b" : "#fff";
const text = isDark ? "#f4f4f5" : "#09090b";
- const muted = isDark ? "#71717a" : "#71717a";
- const card = isDark ? "#18181b" : "#f9fafb";
- const border= isDark ? "#27272a" : "#e5e7eb";
+ const muted = isDark ? "#71717a" : "#71717a";
+ const card = isDark ? "#18181b" : "#f9fafb";
+ const border= isDark ? "#27272a" : "#e5e7eb";
- const navBg = navStyle === "minimal" ? "transparent" : bg;
+ const useAccent = themeColor?.primary ?? text;
return (
-
+
{bgStyle === "dot-grid" && (
-
+
)}
{bgStyle === "lines" && (
-
+
)}
{/* Nav */}
-
- acme
-
- {["Features","Pricing","Blog"].map(i =>
{i} )}
+
+ acme
+
+ {["Features","Pricing","Blog","Docs"].map(i => {i} )}
-
-
Log in
-
Sign up
+
+ Log in
+ Sign up
{hdrStyle === "editorial" && (
-
-
Now in public beta
-
The platform
-
Everything your team needs to build, deploy, and monitor production applications.
-
-
Get started free
-
Documentation →
+
+
+
+ The platform
+
+ Everything your team needs to build, deploy, and monitor production applications — in one place.
+
+
+ Get started free
+ Documentation →
+
+ {/* Terminal mockup */}
+
+
+ {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) =>
)}
+
bash
+
+
+
$ git push origin main
+
✓ Build complete (2.1s)
+
→ Deploying to production…
+
✓ Live at acme.vercel.app (8.4s)
+
$
+
)}
{hdrStyle === "split" && (
-
-
-
Public beta
-
The platform
-
Deploy anywhere. Monitor everything.
-
-
Get started
-
Docs →
+
+
+
+
The platform
+
Deploy anywhere. Monitor everything. Sleep soundly.
+
+ Get started
+ Docs →
-
-
- {["#ff5f56","#ffbd2e","#27c93f"].map(c =>
)}
-
-
-
$ git push origin main
-
✓ Build complete · 2.1s
-
→ Deployed to prod
+
+
+
+ {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) =>
)}
+
+
+
$ git push origin main
+
✓ Build complete (2.1s)
+
→ Deploying to prod…
+
✓ Live at acme.app (8s)
+
)}
{hdrStyle === "centered" && (
-
-
The platform
-
Everything your team needs.
-
Get started free →
+
+
+ The platform
+
Everything your team needs.
+
Get started free →
)}
+ {/* Sections */}
{comps.includes("badge") && (
-
-
→ v2.0 released — see what's new
+
+ → v2.0 released — see what's new
)}
{comps.includes("logos") && (
-
- Trusted by
- {["Vercel","Stripe","Linear","Notion","Supabase"].map(b => {b} )}
-
- )}
-
- {comps.includes("features") && (
-
- {[{ title: "99.9% uptime SLA", desc: "Enterprise reliability" }, { title: "10ms avg latency", desc: "Edge-first network" }, { title: "SOC2 compliant", desc: "Security baked in" }, { title: "GDPR ready", desc: "Privacy by default" }].map(f => (
-
+
+ Trusted by
+ {["Vercel","Stripe","Linear","Notion","Supabase","Raycast"].map(b => (
+ {b}
))}
)}
+ {comps.includes("features") && (
+
+
Everything you need.
+
+ {[
+ { icon: "bolt", title: "99.9% uptime SLA", desc: "We guarantee it. Backed by automatic service credits." },
+ { icon: "shield", title: "SOC 2 compliant", desc: "Enterprise-grade security, privacy by default." },
+ { icon: "trend", title: "10ms avg latency", desc: "Edge-first network. Fast for every user, everywhere." },
+ { icon: "globe", title: "GDPR ready", desc: "Full data residency controls and audit trail." },
+ { icon: "code", title: "Any stack", desc: "Node, Python, Go, Rust, Ruby — we deploy everything." },
+ { icon: "layers", title: "Instant rollbacks", desc: "One click to revert. Zero-downtime deployments." },
+ ].map(f => (
+
+ ))}
+
+
+ )}
+
{comps.includes("stats") && (
-
+
- {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v, l], i) => (
-
-
{v}
-
{l}
+ {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v,l], i) => (
+
))}
@@ -906,12 +1194,18 @@ export function MarketingTailwind({ themeColor, config }: {
)}
{comps.includes("testimonials") && (
-
-
- {[{ q: "\"Shipped 3× faster.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut costs by 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
-
-
{t.q}
-
{t.name} · {t.role}
+
+
+ {[
+ { q: "\"Shipped 3× faster since switching. Zero regrets.\"", name: "Sarah K.", role: "CTO" },
+ { q: "\"Cut infra costs by 40% in our first month.\"", name: "James R.", role: "Eng Lead" },
+ ].map(t => (
+
+
+ {Array(5).fill(0).map((_, i) => ★ )}
+
+
{t.q}
+
{t.name} · {t.role}
))}
@@ -919,12 +1213,28 @@ export function MarketingTailwind({ themeColor, config }: {
)}
{comps.includes("pricing") && (
-
-
- {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
-
-
{p.plan}
-
{p.price}
+
+
Simple pricing.
+
+ {[
+ { plan: "Starter", price: "Free", period: "forever", hi: false, features: ["5 projects","100 deploys/mo","Community support"] },
+ { plan: "Pro", price: "$29", period: "/month", hi: true, features: ["Unlimited projects","Unlimited deploys","Priority support","Custom domains","Team members"] },
+ { plan: "Enterprise", price: "Custom", period: "", hi: false, features: ["Everything in Pro","SLA guarantee","SSO/SAML","Dedicated support"] },
+ ].map(pl => (
+
+
{pl.plan}
+
{pl.price}
+
{pl.period}
+
+ {pl.features.map(f => (
+
+ ))}
+
))}
@@ -932,25 +1242,33 @@ export function MarketingTailwind({ themeColor, config }: {
)}
{comps.includes("faq") && (
-
- {["What's included in free?","Can I upgrade anytime?","Do you offer team plans?"].map((q, i) => (
-
-
{q}
-
{i === 0 ? "−" : "+"}
+
+
FAQ
+ {[
+ ["What's included in free?","5 projects, 100 deploys/month, community support, and basic analytics."],
+ ["Can I upgrade anytime?","Yes. Changes are immediate. We prorate everything automatically."],
+ ["Do you offer team plans?","Yes — add members and manage billing centrally on any paid plan."],
+ ].map(([q, a], i) => (
+
+
+
{q}
+
{i === 0 ? "−" : "+"}
+
+ {i === 0 &&
{a}
}
))}
)}
{comps.includes("cta") && (
-
-
Ready to ship faster?
-
Join 50,000+ teams already on Acme.
-
Get started free →
+
+
Ready to ship faster?
+
Join 50,000+ teams already building on Acme. Free forever.
+
Get started free →
)}
-
+
);
}