mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(design): modularize scaffolds into per-surface files + unique admin

Browse Source 
- Deleted monolithic design-scaffolds.tsx (1154 lines, 72KB)
- New folder: components/design-scaffolds/
  - types.ts       — ThemeColor interface + all theme palettes
  - web-app.tsx    — SaaS app: Dashboard / Users / Settings with AppShell
  - marketing.tsx  — Landing page: hero, features, pricing, CTA
  - admin.tsx      — NEW unique admin: System health (servers/CPU/mem/errors),
                     Moderation (user table + audit log + ban/impersonate),
                     Config (API keys, feature flags, webhooks)
  - mobile.tsx     — Phone frame previews: NativeWind / Gluestack
  - email.tsx      — React Email welcome template preview
  - docs.tsx       — Nextra + shadcn docs previews
  - index.ts       — SCAFFOLD_REGISTRY + THEME_REGISTRY (only import needed)
- Adding a new surface = create one file + add 2 lines to index.ts

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-05 19:54:38 -08:00
parent d30af447da
commit 57c283796f
9 changed files with 1315 additions and 1153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
components/design-scaffolds/marketing.tsx Normal file
View File

@@ -0,0 +1,211 @@
"use client";
import { ThemeColor, 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.
export function MarketingDaisy({ themeColor }: { themeColor?: ThemeColor }) {
const theme = themeColor ?? DAISY_THEMES[0];
const text = theme.textColor ?? "#f8f8f2";
const muted = theme.mutedText ?? "rgba(255,255,255,0.5)";
const card = theme.cardBg ?? "rgba(255,255,255,0.05)";
const border = theme.borderColor ?? "rgba(255,255,255,0.1)";
const bg = theme.bg ?? "#1d232a";
return (
<div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: bg, color: text, overflow: "auto" }}>
{/* Nav */}
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}` }}>
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
<div style={{ width: 20, height: 20, borderRadius: 4, background: theme.primary }} />
<span style={{ fontWeight: 800, fontSize: 12, color: text }}>Acme</span>
</div>
<div style={{ display: "flex", gap: 16, fontSize: 10, color: muted }}>
{["Features", "Pricing", "Docs", "Blog"].map(i => <span key={i}>{i}</span>)}
</div>
<div style={{ display: "flex", gap: 7 }}>
<button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: `${border}`, color: text, border: "none", cursor: "pointer" }}>Login</button>
<button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
</div>
</nav>
{/* Hero */}
<div style={{ padding: "28px 22px 18px", textAlign: "center" }}>
<div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 700, marginBottom: 14, 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: 260, margin: "0 auto 18px", lineHeight: 1.6 }}>The all-in-one platform that helps teams build, launch, and scale their products.</p>
<div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 22 }}>
<button style={{ height: 32, padding: "0 18px", 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 18px", borderRadius: 20, fontSize: 10, fontWeight: 700, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
</div>
</div>
{/* Feature cards */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "0 22px 18px" }}>
{[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade security" }, { icon: "📈", title: "Scales with you", desc: "From zero to millions" }].map(f => (
<div key={f.title} style={{ padding: "12px 14px", borderRadius: 12, textAlign: "center", background: card, border: `1px solid ${border}` }}>
<div style={{ fontSize: 18, marginBottom: 5 }}>{f.icon}</div>
<p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 3 }}>{f.title}</p>
<p style={{ fontSize: 9, color: muted }}>{f.desc}</p>
</div>
))}
</div>
{/* Pricing strip */}
<div style={{ padding: "0 22px" }}>
<div style={{ borderRadius: 12, padding: "14px 16px", background: card, border: `1px solid ${border}` }}>
<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: 9, 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>
</div>
</div>
);
}
export function MarketingHeroUI({ themeColor }: { themeColor?: ThemeColor }) {
const theme = themeColor ?? HEROUI_MARKETING_THEMES[0];
const bg = theme.bg ?? "#fff";
const text = theme.textColor ?? "#18181b";
const muted = theme.mutedText ?? "#71717a";
const card = theme.cardBg ?? "#fff";
const border = theme.borderColor ?? "#f4f4f5";
return (
<div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: bg, overflow: "auto" }}>
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}` }}>
<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: 10, color: muted }}>
{["Features", "Pricing", "Docs", "Blog"].map(i => <span key={i}>{i}</span>)}
</div>
<div style={{ display: "flex", gap: 7 }}>
<button style={{ height: 26, padding: "0 12px", borderRadius: 20, border: `1px solid ${border}`, fontSize: 10, background: "none", color: muted, cursor: "pointer" }}>Login</button>
<button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
</div>
</nav>
<div style={{ padding: "26px 22px 16px", textAlign: "center" }}>
<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}` }}>
🚀 {theme.label} theme — v2.0
</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: 260, 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", marginBottom: 18 }}>
<button style={{ height: 32, padding: "0 18px", borderRadius: 20, fontSize: 10, 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: 32, padding: "0 18px", borderRadius: 20, fontSize: 10, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
</div>
{/* Dashboard preview card */}
<div style={{ borderRadius: 16, overflow: "hidden", border: `1px solid ${border}`, maxWidth: 340, margin: "0 auto", background: card, boxShadow: `0 8px 30px rgba(0,0,0,0.08)` }}>
<div style={{ height: 22, display: "flex", alignItems: "center", gap: 5, padding: "0 10px", background: bg === "#09090b" ? "#27272a" : "#fafafa", borderBottom: `1px solid ${border}` }}>
{["#ff5f56", "#ffbd2e", "#27c93f"].map(c => <div key={c} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />)}
</div>
<div style={{ padding: 12 }}>
<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: 13, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}
export function MarketingAceternity() {
return (
<div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: "#030303", overflow: "auto" }}>
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
<div style={{ display: "flex", alignItems: "center", gap: 7 }}>
<div style={{ width: 20, height: 20, borderRadius: 4, background: "linear-gradient(135deg,#a855f7,#3b82f6)" }} />
<span style={{ fontWeight: 800, fontSize: 11, color: "#fff" }}>Acme</span>
</div>
<div style={{ display: "flex", gap: 14, fontSize: 10, color: "rgba(255,255,255,0.4)" }}>
{["Features", "Pricing", "Docs"].map(i => <span key={i}>{i}</span>)}
</div>
<button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 10, 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>
<div style={{ position: "relative", padding: "28px 22px 18px", textAlign: "center", overflow: "hidden" }}>
<div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 40% at 50% 0%,rgba(168,85,247,0.15),transparent)", pointerEvents: "none" }} />
<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 GitHub stars
</div>
<h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, lineHeight: 1.15, background: "linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.5) 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
Build the future<br />of the web
</h1>
<p style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.6 }}>Beautifully crafted components built with Tailwind CSS and Framer Motion.</p>
<div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 22 }}>
<button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
<button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, color: "rgba(255,255,255,0.6)", border: "1px solid rgba(255,255,255,0.1)", background: "none", cursor: "pointer" }}>View components</button>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
{["Animated", "Accessible", "Open source"].map((f, i) => (
<div key={f} style={{ padding: "10px 12px", borderRadius: 10, textAlign: "left", background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)" }}>
<div style={{ width: 20, height: 20, borderRadius: 5, marginBottom: 6, background: ["rgba(168,85,247,0.15)", "rgba(59,130,246,0.15)", "rgba(34,197,94,0.15)"][i], display: "flex", alignItems: "center", justifyContent: "center" }}>
<div style={{ width: 8, height: 8, borderRadius: "50%", background: ["#a855f7", "#3b82f6", "#22c55e"][i] }} />
</div>
<p style={{ fontSize: 9, fontWeight: 600, color: "#fff", marginBottom: 2 }}>{f}</p>
<p style={{ fontSize: 9, color: "rgba(255,255,255,0.3)" }}>Built for production</p>
</div>
))}
</div>
</div>
</div>
);
}
export function MarketingTailwind() {
return (
<div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: "#fff", overflow: "auto" }}>
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: "1px solid #e5e7eb" }}>
<span style={{ fontWeight: 900, fontSize: 12, color: "#09090b" }}>acme</span>
<div style={{ display: "flex", gap: 14, fontSize: 10, color: "#71717a" }}>
{["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: 10, color: "#71717a", background: "none", border: "none", cursor: "pointer" }}>Log in</button>
<button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 10, fontWeight: 500, background: "#09090b", color: "#fff", border: "none", cursor: "pointer" }}>Sign up</button>
</div>
</nav>
<div style={{ padding: "28px 22px" }}>
<div style={{ maxWidth: 320 }}>
<span style={{ fontSize: 9, fontWeight: 600, color: "#7c3aed", letterSpacing: "0.12em", textTransform: "uppercase" }}>Now in public beta</span>
<h1 style={{ fontSize: 22, fontWeight: 900, color: "#09090b", marginTop: 4, marginBottom: 8, lineHeight: 1.15 }}>The platform<br />built for scale</h1>
<p style={{ fontSize: 10, color: "#71717a", marginBottom: 18, lineHeight: 1.6 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
<div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
<button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 10, fontWeight: 500, background: "#09090b", color: "#fff", border: "none", cursor: "pointer" }}>Get started free</button>
<button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 10, fontWeight: 500, border: "1px solid #e5e7eb", color: "#71717a", background: "none", cursor: "pointer" }}>Documentation →</button>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
{["99.9% uptime SLA", "10ms avg latency", "SOC2 compliant", "GDPR ready"].map(f => (
<div key={f} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 9, color: "#71717a" }}>
<div style={{ width: 14, height: 14, borderRadius: "50%", background: "#09090b", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
<span style={{ color: "#fff", fontSize: 8, lineHeight: 1 }}>✓</span>
</div>
{f}
</div>
))}
</div>
</div>
</div>
</div>
);
}
export { DAISY_THEMES, HEROUI_MARKETING_THEMES };