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

Upgrade marketing scaffolds: real CSS animations, 18 DaisyUI themes, Aceternity accents

Browse Source 
- MarketingAceternity: animated gradient blobs (mix-blend-mode hard-light), meteor
  streaks, sparkle dots, CSS marquee testimonials, lamp cone, typewriter cursor,
  bento grid — all using namespaced CSS keyframes
- MarketingDaisy: DaisyUI-style layouts (split hero with mockup, stats hero, step
  guide), testimonials, FAQ accordion, logo strip; full 18-theme palette
- MarketingHeroUI: blur backdrop nav, gradient-mesh/glass/aurora backgrounds,
  metric cards with active-bg tint, avatar stack, glassmorphism cards
- MarketingTailwind: editorial typography, dot-grid/lines backgrounds, terminal
  deploy mockup, checklist features, stats bar, high-contrast CTA
- types.ts: expanded DAISY_THEMES to 18 themes (cyberpunk, halloween, valentine,
  aqua, luxury, night, coffee, nord, dim, sunset); added ACETERNITY_THEMES palette
- index.ts: export ACETERNITY_THEMES, wire aceternity + tailwind-only into THEME_REGISTRY

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-05 20:55:21 -08:00
parent b020f73ca7
commit e79c2fe5c5
3 changed files with 528 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/design-scaffolds/index.ts
View File

@@ -11,7 +11,7 @@
export type { ThemeColor, DesignConfig, StyleOption, LibraryStyleOptions } from "./types";
export {
SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
DAISY_THEMES, HEROUI_MARKETING_THEMES,
DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETERNITY_THEMES,
} from "./types";
import { WebAppShadcn, WebAppMantine, WebAppHeroUI, WebAppTremor } from "./web-app";
@@ -24,7 +24,7 @@ import { DocsNextra, DocsShadcnCustom } from "./docs";
import type { ThemeColor, DesignConfig } from "./types";
import {
SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
DAISY_THEMES, HEROUI_MARKETING_THEMES,
DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETERNITY_THEMES,
} from "./types";
// ---------------------------------------------------------------------------
@@ -74,8 +74,10 @@ export const THEME_REGISTRY: Record<string, Record<string, ThemeColor[]>> = {
tremor: TREMOR_THEMES,
},
"marketing": {
"daisy-ui": DAISY_THEMES,
"hero-ui": HEROUI_MARKETING_THEMES,
"daisy-ui": DAISY_THEMES,
"hero-ui": HEROUI_MARKETING_THEMES,
"aceternity": ACETERNITY_THEMES,
"tailwind-only": SHADCN_THEMES,
},
"admin": {
mantine: MANTINE_THEMES,

913
components/design-scaffolds/marketing.tsx
View File

File diff suppressed because it is too large Load Diff

35
components/design-scaffolds/types.ts
View File

@@ -93,14 +93,33 @@ export const TREMOR_THEMES: ThemeColor[] = [
];
export const DAISY_THEMES: ThemeColor[] = [
{ id: "dark", label: "Dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" },
{ id: "light", label: "Light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" },
{ id: "cupcake", label: "Cupcake", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" },
{ id: "synthwave", label: "Synth", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)", activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" },
{ id: "dracula", label: "Dracula", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)",activeFg: "#ff79c6", ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" },
{ id: "forest", label: "Forest", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" },
{ id: "retro", label: "Retro", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" },
{ id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" },
{ id: "dark", label: "Dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" },
{ id: "light", label: "Light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" },
{ id: "cupcake", label: "Cupcake", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" },
{ id: "synthwave", label: "Synthwave", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)", activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" },
{ id: "cyberpunk", label: "Cyberpunk", primary: "#ff7598", primaryFg: "#1a103d", activeBg: "rgba(255,117,152,0.2)", activeFg: "#ff7598", ring: "rgba(255,117,152,0.5)", bg: "#ffff00", cardBg: "#ffef00", textColor: "#1a103d", borderColor: "#ff7598", mutedText: "rgba(26,16,61,0.55)" },
{ id: "halloween", label: "Halloween", primary: "#f28c18", primaryFg: "#fff", activeBg: "rgba(242,140,24,0.15)", activeFg: "#f28c18", ring: "rgba(242,140,24,0.4)", bg: "#212121", cardBg: "#2a2a2a", textColor: "#f4f4f4", borderColor: "#383838", mutedText: "#888" },
{ id: "valentine", label: "Valentine", primary: "#e96d7b", primaryFg: "#fff", activeBg: "rgba(233,109,123,0.1)", activeFg: "#e96d7b", ring: "rgba(233,109,123,0.3)", bg: "#fae6eb", cardBg: "#fff5f7", textColor: "#632935", borderColor: "#f4c2cb", mutedText: "#9a5468" },
{ id: "aqua", label: "Aqua", primary: "#09ecf3", primaryFg: "#1a1a1a", activeBg: "rgba(9,236,243,0.15)", activeFg: "#09ecf3", ring: "rgba(9,236,243,0.4)", bg: "#0f172a", cardBg: "#1e293b", textColor: "#e2e8f0", borderColor: "#334155", mutedText: "#94a3b8" },
{ id: "luxury", label: "Luxury", primary: "#dca54c", primaryFg: "#09090b", activeBg: "rgba(220,165,76,0.15)", activeFg: "#dca54c", ring: "rgba(220,165,76,0.4)", bg: "#09090b", cardBg: "#171717", textColor: "#f5f5f4", borderColor: "#262626", mutedText: "#737373" },
{ id: "night", label: "Night", primary: "#38bdf8", primaryFg: "#0c1a2a", activeBg: "rgba(56,189,248,0.15)", activeFg: "#38bdf8", ring: "rgba(56,189,248,0.4)", bg: "#0f1923", cardBg: "#1a2535", textColor: "#cbd5e1", borderColor: "#1e3a5f", mutedText: "#64748b" },
{ id: "coffee", label: "Coffee", primary: "#db924b", primaryFg: "#fff", activeBg: "rgba(219,146,75,0.15)", activeFg: "#db924b", ring: "rgba(219,146,75,0.4)", bg: "#20100e", cardBg: "#2c1810", textColor: "#e8d5c4", borderColor: "#3d2319", mutedText: "#8b6355" },
{ id: "dracula", label: "Dracula", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)", activeFg: "#ff79c6", ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" },
{ id: "forest", label: "Forest", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" },
{ id: "retro", label: "Retro", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" },
{ id: "nord", label: "Nord", primary: "#5e81ac", primaryFg: "#fff", activeBg: "rgba(94,129,172,0.15)", activeFg: "#88c0d0", ring: "rgba(94,129,172,0.4)", bg: "#2e3440", cardBg: "#3b4252", textColor: "#eceff4", borderColor: "#434c5e", mutedText: "#9198a1" },
{ id: "dim", label: "Dim", primary: "#9fb8d8", primaryFg: "#1c2638", activeBg: "rgba(159,184,216,0.15)", activeFg: "#9fb8d8", ring: "rgba(159,184,216,0.4)", bg: "#2a303c", cardBg: "#242933", textColor: "#c6cdd8", borderColor: "#3d4451", mutedText: "#717d8a" },
{ id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" },
{ id: "sunset", label: "Sunset", primary: "#ff865b", primaryFg: "#fff", activeBg: "rgba(255,134,91,0.15)", activeFg: "#ff865b", ring: "rgba(255,134,91,0.4)", bg: "#1a0a00", cardBg: "#270f00", textColor: "#f4c09a", borderColor: "#3d1a00", mutedText: "#8b5a3a" },
];
// Aceternity UI accent colour palettes
export const ACETERNITY_THEMES: ThemeColor[] = [
{ id: "purple-blue", label: "Purple / Blue", primary: "#a855f7", primaryFg: "#fff", activeBg: "rgba(168,85,247,0.15)", activeFg: "#c084fc", ring: "rgba(168,85,247,0.4)" },
{ id: "cyan-teal", label: "Cyan / Teal", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.15)", activeFg: "#67e8f9", ring: "rgba(6,182,212,0.4)" },
{ id: "pink-rose", label: "Pink / Rose", primary: "#ec4899", primaryFg: "#fff", activeBg: "rgba(236,72,153,0.15)", activeFg: "#f9a8d4", ring: "rgba(236,72,153,0.4)" },
{ id: "green-emerald", label: "Green / Emerald", primary: "#10b981", primaryFg: "#fff", activeBg: "rgba(16,185,129,0.15)", activeFg: "#6ee7b7", ring: "rgba(16,185,129,0.4)" },
{ id: "amber-orange", label: "Amber / Orange", primary: "#f59e0b", primaryFg: "#fff", activeBg: "rgba(245,158,11,0.15)", activeFg: "#fcd34d", ring: "rgba(245,158,11,0.4)" },
];
export const HEROUI_MARKETING_THEMES: ThemeColor[] = [