Mark Henderson
e95761cc61
- New 'shader' background: bold diagonal purple→pink→orange→yellow gradient with subtle repeating line overlay (mirrors ui.aceternity.com lines-gradient-shader) - Aurora background: now renders on light bg (#f8f9ff) with soft lavender/blue blurs - Sparkles: forces black base with white star particles and glow box-shadow - Meteors: horizontal streaks with glow, animate diagonally like shooting stars - Beams: switched to SVG lines radiating from a central vanishing point - Auto-adapt text/nav colours for forced-dark (shader, sparkles) and forced-light (aurora) - LIBRARY_STYLE_OPTIONS: 8 Aceternity background options, default changed to gradient Made-with: Cursor
959 lines
64 KiB
TypeScript
959 lines
64 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeColor, DesignConfig, DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETERNITY_THEMES } from "./types";
|
||
|
||
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";
|
||
}
|
||
|
||
// CSS keyframes injected once per component render (scoped names prevent conflicts)
|
||
const ACE_KEYFRAMES = `
|
||
@keyframes ace-blob1 {
|
||
0%,100% { transform: translate(0%,0%) scale(1); }
|
||
33% { transform: translate(28%,-22%) scale(1.12); }
|
||
66% { transform: translate(-18%,18%) scale(0.9); }
|
||
}
|
||
@keyframes ace-blob2 {
|
||
0%,100% { transform: translate(0%,0%) scale(1); }
|
||
33% { transform: translate(-24%,14%) scale(0.95); }
|
||
66% { transform: translate(20%,-24%) scale(1.08); }
|
||
}
|
||
@keyframes ace-blob3 {
|
||
0%,100% { transform: translate(0%,0%) rotate(0deg); }
|
||
50% { transform: translate(12%,-14%) rotate(180deg); }
|
||
}
|
||
@keyframes ace-blob4 {
|
||
0%,100% { transform: translate(0%,0%) scale(1); }
|
||
50% { transform: translate(-16%,20%) scale(1.1); }
|
||
}
|
||
@keyframes ace-meteor {
|
||
0% { transform: translateX(0) translateY(0) rotate(-35deg); opacity: 1; }
|
||
70% { opacity: 0.6; }
|
||
100% { transform: translateX(160px) translateY(160px) rotate(-35deg); opacity: 0; }
|
||
}
|
||
@keyframes ace-sparkle {
|
||
0%,100% { opacity:0; transform:scale(0.4); }
|
||
40%,60% { opacity:1; transform:scale(1); }
|
||
}
|
||
@keyframes ace-cursor {
|
||
0%,100% { opacity:1; } 50% { opacity:0; }
|
||
}
|
||
@keyframes ace-marquee {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
@keyframes ace-beam-pulse {
|
||
0%,100% { opacity:0.08; } 50% { opacity:0.22; }
|
||
}
|
||
@keyframes ace-lamp {
|
||
0%,100% { opacity:0.6; transform:scaleX(1); }
|
||
50% { opacity:1; transform:scaleX(1.15); }
|
||
}
|
||
`;
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Aceternity UI
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export function MarketingAceternity({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
|
||
const accent = themeColor ?? ACETERNITY_THEMES[0];
|
||
const p = accent.primary;
|
||
const p2 = accent.ring.replace("0.4)", "1)").replace("rgba(", "rgb("); // second accent
|
||
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);
|
||
|
||
// sparkles forces black; aurora forces light; shader always dark-text-over-vibrant
|
||
const forcedDark = bgStyle === "sparkles" || bgStyle === "shader";
|
||
const forcedLight = bgStyle === "aurora";
|
||
const effectiveDark = forcedDark ? true : forcedLight ? false : isDark;
|
||
|
||
const bg = forcedDark ? "#000" : forcedLight ? "#f8f9ff" : isDark ? "#050010" : "#fafafa";
|
||
const text = effectiveDark ? "#fff" : "#0f172a";
|
||
const muted = effectiveDark ? "rgba(255,255,255,0.38)" : "#64748b";
|
||
const card = effectiveDark ? "rgba(255,255,255,0.035)" : "rgba(0,0,0,0.03)";
|
||
const border= effectiveDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)";
|
||
|
||
// ── Background layers ──────────────────────────────────────────────────────
|
||
const BgLayer = () => {
|
||
// Animated gradient blobs — mirrors Aceternity's Background Gradient Animation
|
||
if (bgStyle === "gradient") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: isDark ? "rgb(8,0,20)" : "rgb(240,235,255)" }}>
|
||
<div style={{ position: "absolute", inset: 0, filter: "blur(50px)", mixBlendMode: isDark ? "hard-light" : "multiply" }}>
|
||
<div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
|
||
<div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
|
||
<div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
|
||
<div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// Lines Gradient Shader — bold diagonal rainbow band: purple→pink→orange→yellow
|
||
if (bgStyle === "shader") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: isDark ? "#09090b" : "#fafafa" }}>
|
||
{/* Diagonal gradient band */}
|
||
<div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #7c3aed 0%, #db2777 35%, #ea580c 65%, #ca8a04 100%)", opacity: isDark ? 0.9 : 0.85 }} />
|
||
{/* Subtle line overlay */}
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(135deg, transparent 0px, transparent 12px, rgba(255,255,255,0.04) 12px, rgba(255,255,255,0.04) 13px)", pointerEvents: "none" }} />
|
||
{/* Soft vignette */}
|
||
<div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%)", pointerEvents: "none" }} />
|
||
</div>
|
||
);
|
||
|
||
// Background Beams — SVG-style radial beams on dark bg
|
||
if (bgStyle === "beams") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
|
||
<svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 400 600" preserveAspectRatio="xMidYMid slice">
|
||
<defs>
|
||
<radialGradient id="beam-glow" cx="50%" cy="0%" r="70%">
|
||
<stop offset="0%" stopColor={p} stopOpacity="0.18" />
|
||
<stop offset="100%" stopColor={p} stopOpacity="0" />
|
||
</radialGradient>
|
||
</defs>
|
||
<rect width="400" height="600" fill="url(#beam-glow)" />
|
||
{Array.from({ length: 12 }).map((_, i) => {
|
||
const x = 200 + (i - 6) * 34;
|
||
return (
|
||
<line key={i} x1={200} y1={0} x2={x} y2={600}
|
||
stroke={i % 3 === 0 ? p : i % 3 === 1 ? "#3b82f6" : "#06b6d4"}
|
||
strokeWidth={i % 4 === 0 ? 0.6 : 0.3}
|
||
strokeOpacity={0.12 + (i % 3) * 0.04}
|
||
style={{ animation: `ace-beam-pulse ${3 + i * 0.5}s ease-in-out ${i * 0.25}s infinite` }}
|
||
/>
|
||
);
|
||
})}
|
||
</svg>
|
||
</div>
|
||
);
|
||
|
||
// Meteors — diagonal shooting-star streaks with glow tails
|
||
if (bgStyle === "meteors") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
|
||
<div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 60% 40% at 50% 0%, ${p}15, transparent)` }} />
|
||
{Array.from({ length: 12 }).map((_, i) => (
|
||
<div key={i} style={{
|
||
position: "absolute",
|
||
top: `${(i * 31 + 5) % 65}%`,
|
||
right: `${(i * 47) % 90}%`,
|
||
width: `${36 + i * 8}px`, height: "1px",
|
||
background: `linear-gradient(90deg, ${p}ee, rgba(255,255,255,0.7), transparent)`,
|
||
transform: "rotate(-35deg)",
|
||
animation: `ace-meteor ${1.2 + (i % 5) * 0.5}s linear ${i * 0.55}s infinite`,
|
||
borderRadius: "50%",
|
||
boxShadow: `0 0 4px ${p}80`,
|
||
}} />
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
// Sparkles — true black bg with small twinkling star particles
|
||
if (bgStyle === "sparkles") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "#000" }}>
|
||
{Array.from({ length: 40 }).map((_, i) => {
|
||
const size = i % 6 === 0 ? 3 : i % 3 === 0 ? 2 : 1.5;
|
||
return (
|
||
<div key={i} style={{
|
||
position: "absolute",
|
||
width: size, height: size,
|
||
borderRadius: "50%",
|
||
background: "#fff",
|
||
boxShadow: `0 0 ${size * 2}px ${i % 4 === 0 ? p : "rgba(255,255,255,0.8)"}`,
|
||
top: `${(i * 37 + 5) % 92}%`,
|
||
left: `${(i * 53 + 3) % 94}%`,
|
||
animation: `ace-sparkle ${1.4 + (i % 7) * 0.3}s ease-in-out ${(i * 0.18) % 2.2}s infinite`,
|
||
}} />
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
|
||
// Aurora — soft lavender/blue glow on a LIGHT background (matches Aceternity's Aurora)
|
||
if (bgStyle === "aurora") return (
|
||
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "#f8f9ff" }}>
|
||
<div style={{ position: "absolute", top: "-30%", left: "-10%", width: "70%", height: "70%", borderRadius: "50%", background: "radial-gradient(circle, rgba(196,181,253,0.55) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob1 18s ease infinite" }} />
|
||
<div style={{ position: "absolute", top: "-20%", right: "-5%", width: "60%", height: "60%", borderRadius: "50%", background: "radial-gradient(circle, rgba(147,197,253,0.45) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob2 22s reverse infinite" }} />
|
||
<div style={{ position: "absolute", top: "20%", left: "30%", width: "50%", height: "50%", borderRadius: "50%", background: "radial-gradient(circle, rgba(216,180,254,0.35) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob3 26s linear infinite" }} />
|
||
</div>
|
||
);
|
||
|
||
if (bgStyle === "wavy") return (
|
||
<div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "55%", zIndex: 0, overflow: "hidden" }}>
|
||
<svg viewBox="0 0 400 120" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
|
||
<defs>
|
||
<linearGradient id="wg1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stopColor={p} stopOpacity="0.12" />
|
||
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0.08" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0,40 Q50,10 100,40 T200,40 T300,40 T400,40 L400,120 L0,120 Z" fill="url(#wg1)" />
|
||
<path d="M0,60 Q60,28 120,60 T240,60 T360,60 T400,60 L400,120 L0,120 Z" fill={`${p}08`} />
|
||
<path d="M0,80 Q80,55 160,80 T320,80 T400,80 L400,120 L0,120 Z" fill={`${p}06`} />
|
||
</svg>
|
||
</div>
|
||
);
|
||
if (bgStyle === "dot-grid") return (
|
||
<div style={{ position: "absolute", inset: 0, zIndex: 0, backgroundImage: `radial-gradient(${p}28 1px, transparent 1px)`, backgroundSize: "20px 20px" }} />
|
||
);
|
||
return <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 70% 50% at 50% 0%, ${p}18, transparent)`, zIndex: 0 }} />;
|
||
};
|
||
|
||
const floatingNav = navStyle === "floating";
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
|
||
<style>{ACE_KEYFRAMES}</style>
|
||
<BgLayer />
|
||
|
||
{/* Nav */}
|
||
{floatingNav ? (
|
||
<div style={{ display: "flex", justifyContent: "center", padding: "12px", position: "relative", zIndex: 10 }}>
|
||
<nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "8px 20px", borderRadius: 40, background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)", border: `1px solid ${p}40`, backdropFilter: "blur(12px)" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
<div style={{ width: 16, height: 16, borderRadius: 4, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
{["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: `${p}55`, border: `1px solid ${p}60`, 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, backdropFilter: "blur(8px)", background: isDark ? "rgba(5,0,16,0.6)" : "rgba(255,255,255,0.6)" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: 4, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 16, fontSize: 9.5, color: muted }}>
|
||
{["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
|
||
</div>
|
||
<button style={{ height: 24, padding: "0 12px", borderRadius: 6, fontSize: 9, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started</button>
|
||
</nav>
|
||
)}
|
||
|
||
{/* Hero */}
|
||
{hdrStyle === "gradient-text" && (
|
||
<div style={{ padding: "28px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 12px", borderRadius: 20, fontSize: 8.5, fontWeight: 500, marginBottom: 14, border: `1px solid ${p}40`, color: `${p}cc`, background: `${p}10` }}>
|
||
✦ Open source · 12k GitHub stars
|
||
</div>
|
||
<h1 style={{ fontSize: 24, fontWeight: 900, marginBottom: 10, lineHeight: 1.1, background: isDark ? `linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.35) 100%)` : `linear-gradient(180deg, #0f172a 30%, rgba(15,23,42,0.4) 100%)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
|
||
Build the future<br />of the web
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 230, margin: "0 auto 18px", lineHeight: 1.65 }}>
|
||
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 18px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${p}40` }}>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>
|
||
)}
|
||
|
||
{hdrStyle === "lamp" && (
|
||
<div style={{ padding: "20px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
{/* Lamp cone */}
|
||
<div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "60%", height: 80, background: `conic-gradient(from 265deg at 50% 0%, transparent 0deg, ${p}30 20deg, ${p}18 40deg, transparent 60deg)`, pointerEvents: "none" }} />
|
||
<div style={{ width: 90, height: 1.5, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 18px", animation: "ace-lamp 3s ease-in-out infinite" }} />
|
||
<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 16px", lineHeight: 1.65 }}>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,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${p}35` }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
{hdrStyle === "typewriter" && (
|
||
<div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ fontSize: 8.5, letterSpacing: "0.22em", color: `${p}90`, marginBottom: 12, textTransform: "uppercase" }}>The future is here</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.2 }}>
|
||
Build the future<br />
|
||
<span style={{ background: `linear-gradient(90deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>of the web</span>
|
||
<span style={{ display: "inline-block", width: 2, height: "1em", background: p, verticalAlign: "text-bottom", marginLeft: 2, animation: "ace-cursor 0.9s step-end infinite" }} />
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 16px", lineHeight: 1.65 }}>Components that bring ideas to life.</p>
|
||
<button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Sections */}
|
||
{comps.includes("badge") && (
|
||
<div style={{ padding: "4px 22px 10px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<span style={{ display: "inline-block", padding: "4px 14px", borderRadius: 20, fontSize: 8.5, border: `1px solid ${p}45`, color: `${p}dd`, background: `${p}0e` }}>✦ v2.0 just shipped — see what's new →</span>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ label: "Animated", icon: "✦", c: p }, { label: "Accessible", icon: "◎", c: "#3b82f6" }, { label: "Open source", icon: "⬡", c: "#22c55e" }].map(f => (
|
||
<div key={f.label} style={{ padding: "12px", borderRadius: 10, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
|
||
<div style={{ width: 22, height: 22, borderRadius: 6, marginBottom: 8, background: `${f.c}18`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, color: f.c }}>{f.icon}</div>
|
||
<p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 3 }}>{f.label}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>Built for production</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("moving-cards") && (
|
||
<div style={{ padding: "10px 0", position: "relative", zIndex: 1, overflow: "hidden" }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 8, textAlign: "center" }}>Trusted by developers worldwide</p>
|
||
<div style={{ display: "flex", width: "200%", animation: "ace-marquee 18s linear infinite" }}>
|
||
{[...Array(2)].map((_, pass) => (
|
||
<div key={pass} style={{ display: "flex", gap: 10, paddingRight: 10, width: "50%", flexShrink: 0 }}>
|
||
{[
|
||
{ text: "\"Game changer for our team.\"", name: "Sarah K.", role: "CTO" },
|
||
{ text: "\"Ships 3× faster than before.\"", name: "James R.", role: "Eng Lead" },
|
||
{ text: "\"Zero-config deploys.\"", name: "Mia L.", role: "Founder" },
|
||
{ text: "\"Best DX I've ever had.\"", name: "Tom W.", role: "Developer" },
|
||
].map(t => (
|
||
<div key={t.name + pass} style={{ minWidth: 140, flexShrink: 0, padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${p}20`, backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.55 }}>{t.text}</p>
|
||
<p style={{ fontSize: 8, fontWeight: 700, color: text }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
|
||
</div>
|
||
))}
|
||
</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 ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>Analytics</p>
|
||
<p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 10 }}>$128k MRR</p>
|
||
<div style={{ height: 44, position: "relative" }}>
|
||
<svg viewBox="0 0 100 44" style={{ width: "100%", height: "100%", overflow: "visible" }}>
|
||
<defs>
|
||
<linearGradient id="chartg" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor={p} stopOpacity="0.5" />
|
||
<stop offset="100%" stopColor={p} stopOpacity="0" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0,40 L12,32 L24,28 L36,22 L48,15 L60,10 L72,6 L84,4 L100,2" stroke={p} strokeWidth="1.5" fill="none" />
|
||
<path d="M0,40 L12,32 L24,28 L36,22 L48,15 L60,10 L72,6 L84,4 L100,2 L100,44 L0,44 Z" fill="url(#chartg)" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div style={{ padding: "12px", borderRadius: 12, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 8.5, color: muted }}>Deploys</p>
|
||
<p style={{ fontSize: 18, fontWeight: 900, color: p }}>∞</p>
|
||
</div>
|
||
<div style={{ padding: "12px", borderRadius: 12, background: `${p}12`, border: `1px solid ${p}28`, backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 8.5, color: muted }}>Uptime</p>
|
||
<p style={{ fontSize: 16, fontWeight: 800, color: text }}>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(pl => (
|
||
<div key={pl.plan} style={{ flex: 1, padding: "12px 10px", borderRadius: 10, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}50` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 8.5, color: pl.hi ? `${p}dd` : muted, marginBottom: 3 }}>{pl.plan}</p>
|
||
<p style={{ fontSize: 15, fontWeight: 800, color: text }}>{pl.price}</p>
|
||
{pl.hi && <div style={{ marginTop: 4, fontSize: 7.5, color: `${p}aa` }}>Most popular</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("cta") && (
|
||
<div style={{ margin: "12px 22px 18px", padding: "16px 18px", borderRadius: 14, background: `linear-gradient(135deg, ${p}15, #3b82f610)`, border: `1px solid ${p}25`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(4px)" }}>
|
||
<p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 4 }}>Start building today</p>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 12 }}>Join thousands of developers worldwide.</p>
|
||
<button style={{ height: 28, padding: "0 18px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 14px ${p}35` }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// 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 (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, color: text, overflow: "auto", position: "relative" }}>
|
||
{bgStyle === "pattern" && <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${theme.primary}20 1px, transparent 1px)`, backgroundSize: "18px 18px", pointerEvents: "none" }} />}
|
||
|
||
{/* Nav */}
|
||
{navStyle === "pill" ? (
|
||
<div style={{ display: "flex", justifyContent: "center", padding: "10px", position: "relative", zIndex: 2 }}>
|
||
<nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "7px 18px", borderRadius: 30, background: isDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.04)", border: `1px solid ${border}` }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
<div style={{ width: 18, height: 18, borderRadius: 4, background: theme.primary }} />
|
||
<span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
|
||
</div>
|
||
{["Features","Pricing","Docs","Blog"].map(i => <span key={i} style={{ fontSize: 9.5, color: muted }}>{i}</span>)}
|
||
<button style={{ height: 24, padding: "0 12px", borderRadius: 16, fontSize: 9, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
|
||
</nav>
|
||
</div>
|
||
) : (
|
||
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navStyle === "transparent" ? "transparent" : bg, borderBottom: navStyle === "transparent" ? "none" : `1px solid ${border}`, position: "relative", zIndex: 2 }}>
|
||
<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: 16, 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 12px", borderRadius: 16, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
|
||
</div>
|
||
</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 12px", borderRadius: 20, fontSize: 8.5, fontWeight: 700, marginBottom: 14, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>
|
||
✦ {theme.label} theme · just shipped
|
||
</div>
|
||
<h1 style={{ fontSize: 24, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.1 }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>The all-in-one platform that helps teams build, launch, and scale.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start for free</button>
|
||
<button style={{ height: 32, padding: "0 16px", borderRadius: 20, fontSize: 10, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{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` }}>✦ {theme.label}</div>
|
||
<h1 style={{ fontSize: 20, 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.65 }}>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.5, 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.5, 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 20px rgba(0,0,0,0.15)" }}>
|
||
<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(([k,v]) => (
|
||
<div key={k} style={{ marginBottom: 5, padding: "5px 7px", borderRadius: 6, background: `${theme.primary}10`, border: `1px solid ${theme.primary}22` }}>
|
||
<p style={{ fontSize: 7.5, color: muted }}>{k}</p>
|
||
<p style={{ fontSize: 11, fontWeight: 700, color: text }}>{v}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{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: 22, 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.65 }}>Trusted by thousands of teams worldwide.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 18 }}>
|
||
<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: 24 }}>
|
||
{[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"]].map(([v, l]) => (
|
||
<div key={l}>
|
||
<p style={{ fontSize: 18, fontWeight: 900, color: theme.primary }}>{v}</p>
|
||
<p style={{ fontSize: 8.5, color: muted }}>{l}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 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.5 }}>{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: "0 to millions" }].map(f => (
|
||
<div key={f.title} style={{ padding: "12px", borderRadius: 12, textAlign: "center", background: card, border: `1px solid ${border}` }}>
|
||
<div style={{ fontSize: 18, marginBottom: 6 }}>{f.icon}</div>
|
||
<p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 3 }}>{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" }}>
|
||
{["Connect your repo","Configure 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: 24, height: 24, 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.45 }}>{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.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut infra costs 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.55 }}>{t.q}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 700, color: text }}>{t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></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", 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 : "transparent", border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 2 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 15, fontWeight: 800, color: p.hi ? 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 free?","Can I upgrade anytime?","Team billing?"].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: 12, background: `${theme.primary}15`, border: `1px solid ${theme.primary}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 13, 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 18px", 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.65)" : "rgba(255,255,255,0.65)") : navStyle === "minimal" ? "transparent" : 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 === "aurora" ? `radial-gradient(ellipse 80% 60% at 50% -10%, ${theme.primary}38, 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: 280, background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}
|
||
|
||
{/* Nav */}
|
||
<nav style={{
|
||
display: "flex", alignItems: "center", justifyContent: "space-between",
|
||
padding: "10px 22px", borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`,
|
||
position: "sticky", top: 0, zIndex: 10,
|
||
background: navBg,
|
||
backdropFilter: navBlur ? "blur(14px)" : undefined,
|
||
WebkitBackdropFilter: navBlur ? "blur(14px)" : undefined,
|
||
}}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
|
||
<div style={{ width: 20, height: 20, 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: 26, padding: "0 12px", borderRadius: 16, border: `1px solid ${border}`, fontSize: 9.5, background: "none", color: muted, cursor: "pointer" }}>Login</button>
|
||
<button style={{ height: 26, padding: "0 12px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 12px ${theme.ring}` }}>Get started</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{hdrStyle === "animated-badge" && (
|
||
<div style={{ padding: "26px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 12px", borderRadius: 20, fontSize: 9, fontWeight: 600, marginBottom: 14, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}`, boxShadow: `0 0 0 3px ${theme.ring}44` }}>
|
||
🚀 Now in public beta · <span style={{ fontWeight: 700 }}>Join 12k users</span>
|
||
</div>
|
||
<h1 style={{ fontSize: 26, fontWeight: 900, color: theme.primary, marginBottom: 10, lineHeight: 1.05, letterSpacing: "-0.02em" }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 250, margin: "0 auto 18px", lineHeight: 1.65 }}>The all-in-one platform for teams that move fast.</p>
|
||
<div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
|
||
<button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${theme.ring}` }}>Start for free</button>
|
||
<button style={{ height: 32, padding: "0 16px", borderRadius: 20, fontSize: 10, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{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, border: `1px solid ${theme.ring}` }}>🚀 Beta</div>
|
||
<h1 style={{ fontSize: 22, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.15, letterSpacing: "-0.01em" }}>Build faster,<br />ship smarter</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.65 }}>The platform for fast-moving teams.</p>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9.5, 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.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: 132, flexShrink: 0, borderRadius: 14, overflow: "hidden", border: `1px solid ${border}`, boxShadow: `0 12px 30px rgba(0,0,0,0.14)`, 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: 8, 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>
|
||
)}
|
||
|
||
{hdrStyle === "gradient" && (
|
||
<div style={{ padding: "30px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<h1 style={{ fontSize: 28, fontWeight: 900, lineHeight: 1.0, marginBottom: 12, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: "-0.02em" }}>
|
||
Build faster.<br />Ship smarter.
|
||
</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>Everything your team needs in one platform.</p>
|
||
<button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${theme.ring}` }}>Get started →</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Sections */}
|
||
{comps.includes("features") && (
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
|
||
{[{ icon: "⚡", title: "10× faster deploys" }, { icon: "🔒", title: "Zero-trust security" }, { icon: "📦", title: "Any stack" }, { icon: "🌍", title: "Global CDN" }].map(f => (
|
||
<div key={f.title} style={{ padding: "12px", borderRadius: 12, background: card, border: `1px solid ${border}`, display: "flex", alignItems: "center", gap: 8, boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}>
|
||
<span style={{ fontSize: 18 }}>{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: "14px 16px", borderRadius: 14, border: `1px solid ${border}`, background: card, boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 10, textTransform: "uppercase", letterSpacing: "0.08em" }}>Live metrics</p>
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
|
||
{["Revenue $128k","Users 24.8k","Growth +34%","Churn 1.4%"].map(m => (
|
||
<div key={m} style={{ padding: "10px 12px", 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: 16, fontWeight: 800, 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" }}>
|
||
{[theme.primary,"#2563eb","#0d9488","#e11d48"].map((c, i) => (
|
||
<div key={c} style={{ width: 24, height: 24, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -9 : 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: "12px", borderRadius: 12, background: p.hi ? theme.primary : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center", boxShadow: p.hi ? `0 4px 18px ${theme.ring}` : "none" }}>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 3 }}>{p.plan}</p>
|
||
<p style={{ fontSize: 16, 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 3× faster since switching.\"", name: "Sarah K." }, { q: "\"Cut infra costs by 40%.\"", name: "James R." }].map(t => (
|
||
<div key={t.name} style={{ padding: "10px 12px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.55 }}>{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: "16px 18px", borderRadius: 14, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 13, 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 18px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 12px ${theme.ring}` }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ height: 20 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Tailwind only
|
||
// ---------------------------------------------------------------------------
|
||
|
||
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 ff = fontStack(config?.font);
|
||
|
||
// Use themeColor accent if provided (shadcn palette)
|
||
const accent = themeColor?.primary ?? "#09090b";
|
||
const accentFg = themeColor?.primaryFg ?? "#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 navBg = navStyle === "minimal" ? "transparent" : bg;
|
||
|
||
return (
|
||
<div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
|
||
{bgStyle === "dot-grid" && (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff18" : "#00000015"} 1px, transparent 1px)`, backgroundSize: "18px 18px", pointerEvents: "none" }} />
|
||
)}
|
||
{bgStyle === "lines" && (
|
||
<div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(${isDark ? "#ffffff08" : "#00000008"} 1px, transparent 1px), linear-gradient(90deg, ${isDark ? "#ffffff08" : "#00000008"} 1px, transparent 1px)`, backgroundSize: "24px 24px", pointerEvents: "none" }} />
|
||
)}
|
||
|
||
{/* Nav */}
|
||
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navBg, borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`, position: "relative", zIndex: 2 }}>
|
||
<span style={{ fontWeight: 900, fontSize: 12, color: text, letterSpacing: "-0.02em" }}>acme</span>
|
||
<div style={{ display: "flex", gap: 16, 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: 26, padding: "0 10px", fontSize: 9.5, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
|
||
<button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 9.5, fontWeight: 600, background: accent, color: accentFg, border: "none", cursor: "pointer" }}>Sign up</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{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: 28, fontWeight: 900, color: text, marginTop: 6, marginBottom: 10, lineHeight: 1.0, letterSpacing: "-0.03em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 260, marginBottom: 18, lineHeight: 1.65 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
|
||
<div style={{ display: "flex", gap: 8 }}>
|
||
<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>
|
||
<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>
|
||
)}
|
||
|
||
{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: 22, fontWeight: 900, color: text, marginTop: 5, marginBottom: 8, lineHeight: 1.1, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.65 }}>Deploy anywhere. Monitor everything.</p>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button style={{ height: 28, padding: "0 14px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
|
||
<button style={{ height: 28, padding: "0 12px", borderRadius: 6, fontSize: 9.5, 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: 8, fontFamily: "monospace", fontSize: 7.5, color: muted, lineHeight: 1.9 }}>
|
||
<div>$ git push origin main</div>
|
||
<div style={{ color: "#22c55e" }}>✓ Build complete · 2.1s</div>
|
||
<div style={{ color: "#3b82f6" }}>→ Deployed to prod</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{hdrStyle === "centered" && (
|
||
<div style={{ padding: "32px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<h1 style={{ fontSize: 26, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.05, letterSpacing: "-0.03em" }}>The platform<br />built for scale</h1>
|
||
<p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>Everything your team needs.</p>
|
||
<button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free →</button>
|
||
</div>
|
||
)}
|
||
|
||
{comps.includes("badge") && (
|
||
<div style={{ padding: "0 22px 8px", 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: 14, overflow: "hidden", position: "relative", zIndex: 1, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: card }}>
|
||
<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.45, 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: "9px", 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 }}>✓</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", 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: "12px 4px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
|
||
<p style={{ fontSize: 16, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{v}</p>
|
||
<p style={{ fontSize: 8, 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 3× 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 12px", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
|
||
<p style={{ fontSize: 9, color: muted, marginBottom: 8, lineHeight: 1.55 }}>{t.q}</p>
|
||
<p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name} <span style={{ fontWeight: 400 }}>· {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: "12px", 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: 16, fontWeight: 900, color: p.hi ? bg : text, letterSpacing: "-0.02em" }}>{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: "8px 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: "18px", borderRadius: 10, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
|
||
<p style={{ fontSize: 13, fontWeight: 900, color: bg, marginBottom: 4, letterSpacing: "-0.01em" }}>Ready to ship faster?</p>
|
||
<p style={{ fontSize: 9, color: isDark ? "#6b7280" : "#9ca3af", marginBottom: 12 }}>Join 50,000+ teams already on Acme.</p>
|
||
<button style={{ height: 28, padding: "0 16px", 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, ACETERNITY_THEMES };
|