Scarlet DevTools Hero
A bold, brutalist hero section tailored for developer tools and CLI-first platforms.
Features
- Brutalist aesthetic — Raw, grid-lined dark background with hard edges and monospace typography
- Terminal preview — Animated code snippet block with syntax-colored output lines and blinking cursor
- Stats strip — Key metrics displayed in a compact border-left layout
- Feature cards — 4 icon-driven cards with hover accent transitions
- Dual CTA buttons — Primary scarlet action + outlined secondary
- Grid texture — Subtle background grid pattern for depth
- Dark mode native — Built on near-black background, naturally dark-mode ready
Dependencies
@/components/vue-ui/badge — Version badge@/components/vue-ui/button — CTA buttons@/components/vue-ui/separator — Visual dividerslucide-vue-next — Terminal, Arrow, and feature icons
Customization
- Code snippet: Edit
codeLines array with your own CLI commands
- Stats: Modify
stats array for your platform metrics
- Features: Swap icons and labels in
features array
- Colors: Replace
red-600 with your brand accent color
