Files
vibn-frontend/components/design-scaffolds
Mark Henderson 0a237e1e8f Ground-up rewrite of all 4 marketing scaffolds to premium SaaS quality
Core problems fixed:
- Emoji icons (🔒📈) removed → replaced with clean inline SVG paths
- No product visualization → all heroes now include a real DashMockup component
- Generic flat sections → proper shadowed cards, feature lists, star testimonials
- Small unimpressive text → 42-56px display headlines with tight letter-spacing

New shared infrastructure:
- DashMockup: browser chrome + sidebar + 3 KPI cards + gradient line chart
  with accent colour theming; used in DaisyUI/HeroUI/Aceternity heroes
- Ico/ICO system: 12 SVG icons (bolt, shield, trend, globe, code, layers,
  clock, target, cpu, zap, users, sparkle) replace all emoji

DaisyUI improvements:
- 3 hero layouts: centered (CTA + full-width dashboard), split (left text +
  right dashboard), stats (big metrics row + dashboard)
- Feature section: 6 cards with SVG icons, proper copy, realistic shadows
- Steps section: numbered with editorial style
- Testimonials: 4 cards with star ratings and avatar initials
- Pricing: 3 tiers with full feature bullet lists and checkmarks
- FAQ: expand/collapse style

Aceternity improvements:
- Hero text increased to 48-52px
- Floating tilted card animations via CSS keyframes (ace-float, ace-float2)
- Feature cards with SVG icons instead of emoji
- Better moving-cards testimonials (wider, more realistic copy)
- Better bento grid with real chart

HeroUI improvements:
- All 3 header styles now include DashMockup (animated-badge, split, gradient)
- Feature section: 2-col with left-aligned icon + text (not centered emoji)
- Metrics bento with 4 KPIs
- Avatar trust stack with initials
- Pricing with popular tag

Tailwind improvements:
- Editorial header: huge 56px headline + real terminal mockup
  (git push → build 2.1s → deployed to prod) with syntax highlighting
- Split header: text + terminal side by side
- Feature grid: 6 cards with SVG icons
- Stats bar with 4 metrics
- Pricing: 3 tiers with checkmark feature lists
- Inverted CTA banner (bg=text, color=bg)

Made-with: Cursor
2026-03-05 21:34:57 -08:00
..