Mark Henderson
9c8e1a5f34
Users can now compose their marketing site by selecting: - Mode (dark/light), Background style (gradient/beams/meteors/etc.), Nav style, Hero header layout, which Sections appear, and Font. All 4 marketing scaffolds (DaisyUI, HeroUI, Aceternity, Tailwind) respond live to config changes. Library capability cards + style options data defined per library. Aceternity shows actual background effects (beams, meteors, sparkles, wavy, dot-grid). Made-with: Cursor
832 lines
56 KiB
TypeScript
832 lines
56 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeColor, DesignConfig, DAISY_THEMES, HEROUI_MARKETING_THEMES } from "./types";
|
||
|
||
// Marketing Site surface — public-facing pages: hero, features, pricing, CTA
|
||
// Context: prospective users discovering the product, not signed-in users.
|
||
// All components accept a DesignConfig to drive live preview changes.
|
||
|
||
function fontStack(font?: string) {
|
||
if (font === "plus-jakarta") return '"Plus Jakarta Sans", system-ui, sans-serif';
|
||
if (font === "dm-sans") return '"DM Sans", system-ui, sans-serif';
|
||
if (font === "geist") return '"Geist", system-ui, sans-serif';
|
||
if (font === "inter") return '"Inter", system-ui, sans-serif';
|
||
if (font === "nunito") return '"Nunito", system-ui, sans-serif';
|
||
return "system-ui, sans-serif";
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// 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.08)") : (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);
|
||
|
||
// Background overlay applied to the hero area
|
||
const heroBgLayer =
|
||
bgStyle === "gradient" ? `radial-gradient(ellipse 80% 55% at 50% -5%, ${theme.primary}40, transparent)` :
|
||
bgStyle === "pattern" ? undefined : // handled as a full-page layer
|
||
bgStyle === "noise" ? undefined :
|
||
undefined;
|
||
|
||
const navBg = navStyle === "transparent" ? "transparent" : bg;
|
||
const navBorderB = navStyle === "transparent" ? "none" : `1px solid ${border}`;
|
||
|
||
const pillNav = navStyle === "pill";
|
||
|
||
const NavContent = () => (
|
||
<>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: 4, background: theme.primary }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 14, fontSize: 9.5, color: muted }}>
|
||
{["Features", "Pricing", "Docs", "Blog"].map(i => <span key={i}>{i}</span>)}
|
||
</div>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: `${border}`, color: text, border: "none", cursor: "pointer" }}>Login</button>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
|
||
</div>
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, color: text, overflow: "auto", position: "relative" }}>
|
||
{/* Dot-pattern full-page overlay */}
|
||
{bgStyle === "pattern" && (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${theme.primary}22 1px, transparent 1px)`, backgroundSize: "18px 18px", pointerEvents: "none", zIndex: 0 }} />
|
||
)}
|
||
|
||
{/* Nav */}
|
||
{pillNav ? (
|
||
<div style={{ display: "flex", justifyContent: "center", padding: "10px 22px", position: "relative", zIndex: 2 }}>
|
||
<nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "7px 18px", borderRadius: 30, background: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)", border: `1px solid ${border}` }}>
|
||
<NavContent />
|
||
</nav>
|
||
</div>
|
||
) : (
|
||
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 22px", background: navBg, borderBottom: navBorderB, position: "relative", zIndex: 2 }}>
|
||
<NavContent />
|
||
</nav>
|
||
)}
|
||
|
||
{/* Hero — centered */}
|
||
{hdrStyle === "centered" && (
|
||
<div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
{heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 700, marginBottom: 12, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>
|
||
✦ {theme.label} theme · v2.0
|
||
</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>The all-in-one platform that helps teams build, launch, and scale.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start for free</button>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — split layout */}
|
||
{hdrStyle === "split" && (
|
||
<div style={{ display: "flex", gap: 14, padding: "22px 22px 14px", alignItems: "center", position: "relative", zIndex: 1 }}>
|
||
{heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 16, fontSize: 8.5, fontWeight: 700, marginBottom: 10, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>✦ New · v2.0</div>
|
||
<h1 style={{ fontSize: 19, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.2 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.6 }}>The platform teams trust to ship faster.</p>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start free</button>
|
||
<button style={{ height: 28, padding: "0 12px", borderRadius: 18, fontSize: 9, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>Demo →</button>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: 130, flexShrink: 0, borderRadius: 10, overflow: "hidden", border: `1px solid ${border}`, background: card, boxShadow: "0 4px 16px rgba(0,0,0,0.12)" }}>
|
||
<div style={{ height: 18, display: "flex", alignItems: "center", gap: 4, padding: "0 8px", background: isDark ? "rgba(255,255,255,0.04)" : "#f5f5f5", borderBottom: `1px solid ${border}` }}>
|
||
{["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
|
||
</div>
|
||
<div style={{ padding: 8 }}>
|
||
{["Revenue $12k","Users 2.8k","Growth +24%"].map(m => (
|
||
<div key={m} style={{ marginBottom: 6, padding: "5px 7px", borderRadius: 6, background: `${theme.primary}10`, border: `1px solid ${theme.primary}22` }}>
|
||
<p style={{ fontSize: 7.5, color: muted }}>{m.split(" ")[0]}</p>
|
||
<p style={{ fontSize: 11, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — with stats */}
|
||
{hdrStyle === "stats" && (
|
||
<div style={{ padding: "22px 22px 12px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
{heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
|
||
<h1 style={{ fontSize: 21, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, maxWidth: 220, margin: "0 auto 14px", lineHeight: 1.6 }}>Trusted by thousands of teams worldwide.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 16 }}>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start free</button>
|
||
<button style={{ height: 28, padding: "0 12px", borderRadius: 20, fontSize: 9.5, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>Demo →</button>
|
||
</div>
|
||
<div style={{ display: "flex", justifyContent: "center", gap: 20 }}>
|
||
{[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"]].map(([v, l]) => (
|
||
<div key={l} style={{ textAlign: "center" }}>
|
||
<p style={{ fontSize: 16, fontWeight: 800, color: theme.primary }}>{v}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>{l}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Conditional sections */}
|
||
{comps.includes("logos") && (
|
||
<div style={{ padding: "8px 22px", display: "flex", alignItems: "center", gap: 12, overflow: "hidden", position: "relative", zIndex: 1 }}>
|
||
<span style={{ fontSize: 8, color: muted, whiteSpace: "nowrap" }}>Trusted by</span>
|
||
{["Vercel","Stripe","Linear","Notion","Supabase"].map(b => (
|
||
<span key={b} style={{ fontSize: 9, fontWeight: 700, color: muted, opacity: 0.6, whiteSpace: "nowrap" }}>{b}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "12px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade" }, { icon: "📈", title: "Scales with you", desc: "From 0 to millions" }].map(f => (
|
||
<div key={f.title} style={{ padding: "10px 12px", borderRadius: 10, textAlign: "center", background: card, border: `1px solid ${border}` }}>
|
||
<div style={{ fontSize: 16, marginBottom: 4 }}>{f.icon}</div>
|
||
<p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 2 }}>{f.title}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("steps") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 10 }}>How it works</p>
|
||
<div style={{ display: "flex", gap: 0 }}>
|
||
{["Connect your repo","Configure your stack","Deploy in seconds"].map((s, i) => (
|
||
<div key={s} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 6 }}>
|
||
<div style={{ width: 22, height: 22, borderRadius: "50%", background: theme.primary, color: theme.primaryFg, fontSize: 10, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</div>
|
||
<p style={{ fontSize: 8.5, color: muted, lineHeight: 1.4 }}>{s}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("testimonials") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{[{ q: "\"Deployed in 5 minutes. Incredible.\"", name: "Sarah K.", role: "CTO, Startup" }, { q: "\"Cut our infra costs by 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
|
||
<div key={t.name} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 8.5, color: muted, marginBottom: 8, lineHeight: 1.5 }}>{t.q}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 700, color: text }}>{t.name}</p>
|
||
<p style={{ fontSize: 7.5, color: muted }}>{t.role}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("pricing") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 8 }}>Simple pricing</p>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
{[{ plan: "Starter", price: "Free", highlight: false }, { plan: "Pro", price: "$29/mo", highlight: true }, { plan: "Enterprise", price: "Custom", highlight: false }].map(p => (
|
||
<div key={p.plan} style={{ flex: 1, padding: "8px 10px", borderRadius: 8, background: p.highlight ? theme.primary : "transparent", border: `1px solid ${p.highlight ? "transparent" : border}`, textAlign: "center" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: p.highlight ? theme.primaryFg : muted, marginBottom: 2 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 13, fontWeight: 800, color: p.highlight ? theme.primaryFg : text }}>{p.price}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("faq") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 8 }}>FAQ</p>
|
||
{["What's included in the free plan?","Can I upgrade anytime?","Do you offer team billing?"].map((q, i) => (
|
||
<div key={q} style={{ padding: "7px 0", borderBottom: `1px solid ${border}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||
<span style={{ fontSize: 9, color: i === 0 ? text : muted }}>{q}</span>
|
||
<span style={{ fontSize: 9, color: muted }}>{i === 0 ? "−" : "+"}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("cta") && (
|
||
<div style={{ margin: "12px 22px 18px", padding: "14px 18px", borderRadius: 12, background: `${theme.primary}14`, border: `1px solid ${theme.primary}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 12, fontWeight: 800, color: text, marginBottom: 4 }}>Ready to ship faster?</p>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 12 }}>Join 50,000+ teams already on Acme.</p>
|
||
<button style={{ height: 28, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// HeroUI
|
||
// ---------------------------------------------------------------------------
|
||
|
||
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 bgStyle = config?.background ?? "clean";
|
||
const navStyle = config?.nav ?? "blur";
|
||
const hdrStyle = config?.header ?? "animated-badge";
|
||
const comps = config?.components ?? ["features", "metrics"];
|
||
const ff = fontStack(config?.font);
|
||
|
||
const navBlur = navStyle === "blur";
|
||
const navBg = navBlur
|
||
? (isDark ? "rgba(9,9,11,0.7)" : "rgba(255,255,255,0.7)")
|
||
: navStyle === "minimal" ? "transparent"
|
||
: bg;
|
||
const navBorderB = navStyle === "minimal" ? "none" : `1px solid ${border}`;
|
||
|
||
const heroBgOverlay =
|
||
bgStyle === "gradient-mesh" ? `radial-gradient(ellipse 70% 60% at 30% 40%, ${theme.primary}25, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 60%, ${isDark ? "#06b6d422" : "#06b6d418"}, transparent 60%)` :
|
||
bgStyle === "glass" ? `linear-gradient(135deg, ${theme.primary}14, ${isDark ? "#18181b" : "#fff"} 60%)` :
|
||
bgStyle === "aurora" ? `radial-gradient(ellipse 80% 60% at 50% -10%, ${theme.primary}35, transparent 70%)` :
|
||
undefined;
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
|
||
{heroBgOverlay && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 260, background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}
|
||
|
||
{/* Nav */}
|
||
<nav style={{
|
||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||
padding: "9px 22px", borderBottom: navBorderB, position: "sticky", top: 0, zIndex: 10,
|
||
background: navBg,
|
||
backdropFilter: navBlur ? "blur(12px)" : undefined,
|
||
WebkitBackdropFilter: navBlur ? "blur(12px)" : undefined,
|
||
}}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: "50%", background: theme.primary }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 14, fontSize: 9.5, color: muted }}>
|
||
{["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
|
||
</div>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 16, border: `1px solid ${border}`, fontSize: 9.5, background: "none", color: muted, cursor: "pointer" }}>Login</button>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Get started</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Hero — animated badge style */}
|
||
{hdrStyle === "animated-badge" && (
|
||
<div style={{ padding: "24px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 600, marginBottom: 14, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}` }}>
|
||
🚀 Now in public beta
|
||
</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>The all-in-one platform for teams that move fast.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 14px ${theme.ring}` }}>Start for free</button>
|
||
<button style={{ height: 30, padding: "0 14px", borderRadius: 20, fontSize: 9.5, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — split layout */}
|
||
{hdrStyle === "split" && (
|
||
<div style={{ display: "flex", gap: 14, padding: "20px 22px 14px", alignItems: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 12, fontSize: 8.5, fontWeight: 600, marginBottom: 10, background: theme.activeBg, color: theme.activeFg }}>🚀 Beta</div>
|
||
<h1 style={{ fontSize: 20, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.2 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.6 }}>The platform for fast-moving teams.</p>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Start free</button>
|
||
<button style={{ height: 28, padding: "0 12px", borderRadius: 18, fontSize: 9, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: 130, flexShrink: 0, borderRadius: 12, overflow: "hidden", border: `1px solid ${border}`, boxShadow: `0 8px 24px rgba(0,0,0,0.12)`, background: card }}>
|
||
<div style={{ height: 18, display: "flex", alignItems: "center", gap: 4, padding: "0 8px", background: isDark ? "#27272a" : "#fafafa", borderBottom: `1px solid ${border}` }}>
|
||
{["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
|
||
</div>
|
||
<div style={{ padding: 8 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 5 }}>
|
||
{["Revenue $12k","Users 2.8k","Growth +24%","Churn 2.1%"].map(m => (
|
||
<div key={m} style={{ padding: "5px 6px", borderRadius: 7, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
|
||
<p style={{ fontSize: 7.5, color: muted }}>{m.split(" ")[0]}</p>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — gradient headline */}
|
||
{hdrStyle === "gradient" && (
|
||
<div style={{ padding: "28px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<h1 style={{ fontSize: 24, fontWeight: 900, lineHeight: 1.1, marginBottom: 10, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||
Build faster.<br />Ship smarter.
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>Everything your team needs in one platform.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer" }}>Get started →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Conditional sections */}
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ icon: "⚡", title: "10x faster deploys" }, { icon: "🔒", title: "Zero-trust security" }, { icon: "📦", title: "Any stack" }, { icon: "🌍", title: "Global CDN" }].map(f => (
|
||
<div key={f.title} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}`, display: "flex", alignItems: "center", gap: 8 }}>
|
||
<span style={{ fontSize: 16 }}>{f.icon}</span>
|
||
<p style={{ fontSize: 9.5, fontWeight: 600, color: text }}>{f.title}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("metrics") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ padding: "12px 16px", borderRadius: 12, border: `1px solid ${border}`, background: card, boxShadow: `0 4px 20px rgba(0,0,0,0.06)` }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{["Revenue $12k","Users 2.8k","Growth +24%","Churn 2.1%"].map((m, i) => (
|
||
<div key={m} style={{ padding: "8px 10px", borderRadius: 10, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 2 }}>{m.split(" ")[0]}</p>
|
||
<p style={{ fontSize: 14, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("avatars") && (
|
||
<div style={{ padding: "10px 22px", display: "flex", alignItems: "center", gap: 10, position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "flex" }}>
|
||
{["#7c3aed","#2563eb","#0d9488","#e11d48"].map((c, i) => (
|
||
<div key={c} style={{ width: 22, height: 22, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -8 : 0 }} />
|
||
))}
|
||
</div>
|
||
<span style={{ fontSize: 9, color: muted }}>Trusted by <strong style={{ color: text }}>50,000+</strong> teams</span>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("pricing") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
{[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
|
||
<div key={p.plan} style={{ flex: 1, padding: "10px", borderRadius: 10, background: p.hi ? theme.primary : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center", boxShadow: p.hi ? `0 4px 14px ${theme.ring}` : "none" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 3 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 14, fontWeight: 800, color: p.hi ? theme.primaryFg : text }}>{p.price}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("testimonials") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{[{ q: "\"Shipped 3x faster since switching.\"", name: "Sarah K." }, { q: "\"Cut infra costs by 40%.\"", name: "James R." }].map(t => (
|
||
<div key={t.name} style={{ padding: "10px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.5 }}>{t.q}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("cta") && (
|
||
<div style={{ margin: "12px 22px 18px", padding: "14px 18px", borderRadius: 12, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 12, fontWeight: 800, color: text, marginBottom: 4 }}>Ready to ship faster?</p>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 10 }}>Join 50,000+ teams already on Acme.</p>
|
||
<button style={{ height: 28, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Aceternity UI
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export function MarketingAceternity({ config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
|
||
const isDark = config?.mode !== "light";
|
||
const bgStyle = config?.background ?? "beams";
|
||
const navStyle = config?.nav ?? "minimal";
|
||
const hdrStyle = config?.header ?? "gradient-text";
|
||
const comps = config?.components ?? ["features", "moving-cards"];
|
||
const ff = fontStack(config?.font);
|
||
|
||
const bg = isDark ? "#030303" : "#f8fafc";
|
||
const text = isDark ? "#fff" : "#0f172a";
|
||
const muted = isDark ? "rgba(255,255,255,0.38)" : "#64748b";
|
||
const card = isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)";
|
||
const border= isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.08)";
|
||
|
||
// Background effects rendered as CSS
|
||
const BackgroundEffect = () => {
|
||
if (bgStyle === "beams") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
|
||
{/* Vertical beam lines */}
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<div key={i} style={{ position: "absolute", top: 0, bottom: 0, width: 1, left: `${10 + i * 12}%`, background: `linear-gradient(180deg, transparent, ${i % 2 === 0 ? "rgba(168,85,247,0.15)" : "rgba(59,130,246,0.1)"}, transparent)` }} />
|
||
))}
|
||
<div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,0.12), transparent)" }} />
|
||
</div>
|
||
);
|
||
if (bgStyle === "meteors") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
|
||
<div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(168,85,247,0.1), transparent)" }} />
|
||
{Array.from({ length: 6 }).map((_, i) => (
|
||
<div key={i} style={{ position: "absolute", top: `${5 + i * 12}%`, left: `${10 + i * 15}%`, width: 1, height: `${20 + i * 8}px`, background: "linear-gradient(180deg, #a855f7, transparent)", transform: "rotate(-35deg)", opacity: 0.4 + i * 0.08 }} />
|
||
))}
|
||
</div>
|
||
);
|
||
if (bgStyle === "sparkles") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
|
||
{Array.from({ length: 20 }).map((_, i) => (
|
||
<div key={i} style={{ position: "absolute", width: 3, height: 3, borderRadius: "50%", background: i % 3 === 0 ? "#a855f7" : i % 3 === 1 ? "#3b82f6" : "#22c55e", top: `${(i * 37) % 90}%`, left: `${(i * 53) % 90}%`, opacity: 0.3 + (i % 4) * 0.15 }} />
|
||
))}
|
||
</div>
|
||
);
|
||
if (bgStyle === "wavy") return (
|
||
<div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 200, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
|
||
<svg viewBox="0 0 400 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
|
||
<path d="M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 L400,100 L0,100 Z" fill="rgba(168,85,247,0.06)" />
|
||
<path d="M0,60 Q60,30 120,60 T240,60 T360,60 T400,60 L400,100 L0,100 Z" fill="rgba(59,130,246,0.05)" />
|
||
</svg>
|
||
</div>
|
||
);
|
||
if (bgStyle === "dot-grid") return (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(rgba(168,85,247,0.2) 1px, transparent 1px)", backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
|
||
);
|
||
// gradient (default radial glow)
|
||
return <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,0.15), transparent)", pointerEvents: "none", zIndex: 0 }} />;
|
||
};
|
||
|
||
const floatingNav = navStyle === "floating";
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
|
||
<BackgroundEffect />
|
||
|
||
{/* Nav */}
|
||
{floatingNav ? (
|
||
<div style={{ display: "flex", justifyContent: "center", padding: "10px 22px", position: "relative", zIndex: 10 }}>
|
||
<nav style={{ display: "flex", alignItems: "center", gap: 18, padding: "7px 18px", borderRadius: 30, background: "rgba(168,85,247,0.1)", border: "1px solid rgba(168,85,247,0.25)" }}>
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
{["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 9.5, color: muted }}>{i}</span>)}
|
||
<button style={{ height: 22, padding: "0 10px", borderRadius: 12, fontSize: 9, fontWeight: 600, color: "#fff", background: "rgba(168,85,247,0.4)", border: "1px solid rgba(168,85,247,0.4)", cursor: "pointer" }}>Get started</button>
|
||
</nav>
|
||
</div>
|
||
) : (
|
||
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}`, position: "relative", zIndex: 10 }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: 4, background: "linear-gradient(135deg,#a855f7,#3b82f6)" }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 14, fontSize: 9.5, color: muted }}>
|
||
{["Features","Pricing","Docs"].map(i => <span key={i}>{i}</span>)}
|
||
</div>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 5, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "rgba(168,85,247,0.2)", border: "1px solid rgba(168,85,247,0.3)", cursor: "pointer" }}>Get started</button>
|
||
</nav>
|
||
)}
|
||
|
||
{/* Hero — gradient text */}
|
||
{hdrStyle === "gradient-text" && (
|
||
<div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 500, marginBottom: 14, border: "1px solid rgba(168,85,247,0.3)", color: "rgba(168,85,247,0.9)" }}>
|
||
✦ Open source · 12k stars
|
||
</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, lineHeight: 1.15, background: isDark ? "linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.5) 100%)" : "linear-gradient(180deg,#0f172a 0%,rgba(15,23,42,0.5) 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||
Build the future<br />of the web
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 230, margin: "0 auto 16px", lineHeight: 1.6 }}>Beautifully crafted components built with Tailwind CSS and Framer Motion.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
|
||
<button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 9.5, color: muted, border: `1px solid ${border}`, background: "none", cursor: "pointer" }}>View components</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — lamp effect */}
|
||
{hdrStyle === "lamp" && (
|
||
<div style={{ padding: "20px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 200, height: 60, background: "radial-gradient(ellipse at top, rgba(168,85,247,0.4), transparent 70%)", borderRadius: "0 0 100px 100px", pointerEvents: "none" }} />
|
||
<div style={{ width: 80, height: 1, background: "linear-gradient(90deg, transparent, #a855f7, transparent)", margin: "0 auto 16px" }} />
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.15 }}>Build the future<br />of the web</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 14px", lineHeight: 1.6 }}>Powered by Framer Motion and Tailwind CSS.</p>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — typewriter */}
|
||
{hdrStyle === "typewriter" && (
|
||
<div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ fontSize: 9, color: "rgba(168,85,247,0.7)", letterSpacing: "0.2em", marginBottom: 12 }}>THE FUTURE IS HERE</div>
|
||
<h1 style={{ fontSize: 20, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.2 }}>
|
||
Build the future<br />
|
||
<span style={{ background: "linear-gradient(90deg,#a855f7,#3b82f6)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>of the web_</span>
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 14px", lineHeight: 1.6 }}>Components that bring your ideas to life.</p>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Conditional sections */}
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ label: "Animated", color: "#a855f7" }, { label: "Accessible", color: "#3b82f6" }, { label: "Open source", color: "#22c55e" }].map(f => (
|
||
<div key={f.label} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: 5, marginBottom: 6, background: `${f.color}22`, display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<div style={{ width: 7, height: 7, borderRadius: "50%", background: f.color }} />
|
||
</div>
|
||
<p style={{ fontSize: 9.5, fontWeight: 600, color: text, marginBottom: 2 }}>{f.label}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>Built for production</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("badge") && (
|
||
<div style={{ padding: "8px 22px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<span style={{ display: "inline-block", padding: "4px 12px", borderRadius: 20, fontSize: 9, border: "1px solid rgba(168,85,247,0.4)", color: "rgba(168,85,247,0.9)", background: "rgba(168,85,247,0.08)" }}>✦ v2.0 just shipped — see what's new →</span>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("moving-cards") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1, overflow: "hidden" }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 8, textAlign: "center" }}>What our users say</p>
|
||
<div style={{ display: "flex", gap: 10, overflow: "hidden" }}>
|
||
{[{ text: "\"Game changer for our team.\"", name: "Sarah K." }, { text: "\"Ships 3x faster.\"", name: "James R." }, { text: "\"Zero-config deploys.\"", name: "Mia L." }].map(t => (
|
||
<div key={t.name} style={{ minWidth: 140, padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid rgba(168,85,247,0.12)`, flexShrink: 0 }}>
|
||
<p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.5 }}>{t.text}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>— {t.name}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("bento") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gridTemplateRows: "auto auto", gap: 8 }}>
|
||
<div style={{ padding: "14px", borderRadius: 12, background: card, border: `1px solid rgba(168,85,247,0.12)`, gridRow: "1 / 3" }}>
|
||
<p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 4 }}>Analytics</p>
|
||
<div style={{ height: 40, background: "linear-gradient(to right, rgba(168,85,247,0.2), rgba(59,130,246,0.2))", borderRadius: 6, marginTop: 8 }} />
|
||
</div>
|
||
<div style={{ padding: "10px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 9, fontWeight: 600, color: text }}>Deploys</p>
|
||
<p style={{ fontSize: 16, fontWeight: 800, color: "#a855f7" }}>∞</p>
|
||
</div>
|
||
<div style={{ padding: "10px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 9, fontWeight: 600, color: text }}>Uptime</p>
|
||
<p style={{ fontSize: 14, fontWeight: 800, color: "#22c55e" }}>99.9%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("pricing") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
{[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
|
||
<div key={p.plan} style={{ flex: 1, padding: "10px", borderRadius: 10, background: p.hi ? "linear-gradient(135deg,rgba(168,85,247,0.25),rgba(59,130,246,0.2))" : card, border: `1px solid ${p.hi ? "rgba(168,85,247,0.4)" : border}`, textAlign: "center" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? "#c084fc" : muted, marginBottom: 2 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 13, fontWeight: 800, color: text }}>{p.price}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("cta") && (
|
||
<div style={{ margin: "12px 22px 18px", padding: "14px 18px", borderRadius: 12, background: "linear-gradient(135deg,rgba(168,85,247,0.12),rgba(59,130,246,0.1))", border: "1px solid rgba(168,85,247,0.2)", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 12, fontWeight: 800, color: text, marginBottom: 4 }}>Start building today</p>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 10 }}>Join thousands of developers worldwide.</p>
|
||
<button style={{ height: 28, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Tailwind only
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export function MarketingTailwind({ 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 ff = fontStack(config?.font);
|
||
|
||
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 accent = "#7c3aed";
|
||
|
||
const navBg = navStyle === "minimal" ? "transparent" : bg;
|
||
const navBorderB = navStyle === "minimal" ? "none" : `1px solid ${border}`;
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
|
||
{/* Background effects */}
|
||
{bgStyle === "dot-grid" && (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff18" : "#00000018"} 1px, transparent 1px)`, backgroundSize: "16px 16px", pointerEvents: "none" }} />
|
||
)}
|
||
{bgStyle === "lines" && (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(${isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"} 1px, transparent 1px), linear-gradient(90deg, ${isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"} 1px, transparent 1px)`, backgroundSize: "24px 24px", pointerEvents: "none" }} />
|
||
)}
|
||
{bgStyle === "noise" && (
|
||
<div style={{ position: "absolute", inset: 0, opacity: 0.03, backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")", pointerEvents: "none" }} />
|
||
)}
|
||
|
||
{/* Nav */}
|
||
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navBg, borderBottom: navBorderB, position: "relative", zIndex: 2 }}>
|
||
<span style={{ fontWeight: 900, fontSize: 12, color: text, letterSpacing: navStyle === "minimal" ? "0.05em" : 0 }}>acme</span>
|
||
<div style={{ display: "flex", gap: 14, fontSize: 9.5, color: muted }}>
|
||
{["Features","Pricing","Blog"].map(i => <span key={i}>{i}</span>)}
|
||
</div>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 24, padding: "0 10px", fontSize: 9.5, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
|
||
<button style={{ height: 24, padding: "0 10px", borderRadius: 5, fontSize: 9.5, fontWeight: 500, background: text, color: bg, border: "none", cursor: "pointer" }}>Sign up</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Hero — editorial big type */}
|
||
{hdrStyle === "editorial" && (
|
||
<div style={{ padding: "28px 22px 16px", position: "relative", zIndex: 1 }}>
|
||
<span style={{ fontSize: 8.5, fontWeight: 600, color: accent, letterSpacing: "0.14em", textTransform: "uppercase" }}>Now in public beta</span>
|
||
<h1 style={{ fontSize: 26, fontWeight: 900, color: text, marginTop: 6, marginBottom: 10, lineHeight: 1.05, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 260, marginBottom: 16, lineHeight: 1.6 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
<button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free</button>
|
||
<button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 9.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Documentation →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — split */}
|
||
{hdrStyle === "split" && (
|
||
<div style={{ display: "flex", gap: 16, padding: "22px 22px 14px", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
|
||
<div style={{ flex: 1 }}>
|
||
<span style={{ fontSize: 8.5, fontWeight: 600, color: accent, letterSpacing: "0.12em", textTransform: "uppercase" }}>Public beta</span>
|
||
<h1 style={{ fontSize: 20, fontWeight: 900, color: text, marginTop: 5, marginBottom: 8, lineHeight: 1.15, letterSpacing: "-0.01em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.6 }}>Deploy anywhere. Monitor everything.</p>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 28, padding: "0 12px", borderRadius: 6, fontSize: 9, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
|
||
<button style={{ height: 28, padding: "0 10px", borderRadius: 6, fontSize: 9, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Docs →</button>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: 120, flexShrink: 0, borderRadius: 8, overflow: "hidden", border: `1px solid ${border}`, background: card }}>
|
||
<div style={{ height: 16, display: "flex", alignItems: "center", gap: 3, padding: "0 6px", background: isDark ? "#27272a" : "#f5f5f5", borderBottom: `1px solid ${border}` }}>
|
||
{["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
|
||
</div>
|
||
<div style={{ padding: 7, fontFamily: "monospace", fontSize: 7.5, color: muted, lineHeight: 1.8 }}>
|
||
<div style={{ color: "#22c55e" }}>✓ Build complete</div>
|
||
<div>→ Deploying…</div>
|
||
<div style={{ color: "#3b82f6" }}>✓ Live in 2.1s</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Hero — centered minimal */}
|
||
{hdrStyle === "centered" && (
|
||
<div style={{ padding: "32px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.1, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>Everything your team needs.</p>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Conditional sections */}
|
||
{comps.includes("badge") && (
|
||
<div style={{ padding: "6px 22px", position: "relative", zIndex: 1 }}>
|
||
<span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 4, fontSize: 8.5, background: `${accent}14`, color: accent, fontWeight: 500 }}>→ v2.0 released — see what's new</span>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("logos") && (
|
||
<div style={{ padding: "8px 22px", display: "flex", alignItems: "center", gap: 12, overflow: "hidden", position: "relative", zIndex: 1 }}>
|
||
<span style={{ fontSize: 8, color: muted, whiteSpace: "nowrap" }}>Trusted by</span>
|
||
{["Vercel","Stripe","Linear","Notion","Supabase"].map(b => (
|
||
<span key={b} style={{ fontSize: 8.5, fontWeight: 700, color: muted, opacity: 0.5, whiteSpace: "nowrap" }}>{b}</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "12px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ 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 => (
|
||
<div key={f.title} style={{ display: "flex", alignItems: "flex-start", gap: 8, padding: "8px", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
|
||
<div style={{ width: 14, height: 14, borderRadius: "50%", background: text, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
|
||
<span style={{ color: bg, fontSize: 7, lineHeight: 1 }}>✓</span>
|
||
</div>
|
||
<div>
|
||
<p style={{ fontSize: 9, fontWeight: 600, color: text, marginBottom: 1 }}>{f.title}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>{f.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("stats") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "flex", gap: 0, borderRadius: 10, overflow: "hidden", border: `1px solid ${border}` }}>
|
||
{[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v, l], i) => (
|
||
<div key={l} style={{ flex: 1, textAlign: "center", padding: "10px 4px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
|
||
<p style={{ fontSize: 15, fontWeight: 800, color: text }}>{v}</p>
|
||
<p style={{ fontSize: 7.5, color: muted }}>{l}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("testimonials") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{[{ q: "\"Shipped 3x faster.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut costs by 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
|
||
<div key={t.name} style={{ padding: "10px", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 8, lineHeight: 1.5 }}>{t.q}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name} · <span style={{ fontWeight: 400, color: muted }}>{t.role}</span></p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("pricing") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
{[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
|
||
<div key={p.plan} style={{ flex: 1, padding: "10px", borderRadius: 8, background: p.hi ? text : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 500, color: p.hi ? bg : muted, marginBottom: 3 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 14, fontWeight: 800, color: p.hi ? bg : text }}>{p.price}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("faq") && (
|
||
<div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
{["What's included in free?","Can I upgrade anytime?","Do you offer team plans?"].map((q, i) => (
|
||
<div key={q} style={{ padding: "7px 0", borderBottom: `1px solid ${border}`, display: "flex", justifyContent: "space-between" }}>
|
||
<span style={{ fontSize: 9, color: i === 0 ? text : muted }}>{q}</span>
|
||
<span style={{ fontSize: 9, color: muted }}>{i === 0 ? "−" : "+"}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("cta") && (
|
||
<div style={{ margin: "12px 22px 18px", padding: "16px 18px", borderRadius: 10, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 12, fontWeight: 800, color: bg, marginBottom: 4 }}>Ready to ship faster?</p>
|
||
<p style={{ fontSize: 9, color: isDark ? "#71717a" : "#9ca3af", marginBottom: 10 }}>Join 50,000+ teams already on Acme.</p>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: bg, color: text, border: "none", cursor: "pointer" }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export { DAISY_THEMES, HEROUI_MARKETING_THEMES };
|