Phosphor Pricing Cards
A terminal-inspired pricing section designed for developer tools and CLI-first platforms.
Features
- Terminal aesthetic — Cards styled as terminal windows with title bar dots and config file names
- Three-tier pricing — Starter (free), Pro (featured with green glow), Enterprise
- Feature checklists — Check/cross markers for included vs excluded features
- Animated header — Terminal command prompt with blinking cursor effect
- 'All plans include' badges — SSL, CDN, Git Integration, SLA, Auto Scaling, CLI Access
- Dot grid background — Subtle green-tinted dot pattern for depth
- Dark-native design — Built on near-black, optimized for dark environments
Dependencies
@/components/vue-ui/card — Pricing cards@/components/vue-ui/button — CTA buttons@/components/vue-ui/badge — Tags and 'includes' badges@/components/vue-ui/separator — Dividerslucide-vue-next — Feature icons
Customization
- Plans: Edit the
plans array to change pricing, features, and CTAs
- Includes: Modify the
includes array for base features
- Colors: Replace
#39FF14 (phosphor green) with your accent color
- Fonts: JetBrains Mono (monospace) loaded via Google Fonts, Geist uses system-ui fallback
