Electric Phosphor Terminal Dev-Tool Pricing

Summary

A terminal/CRT-themed SaaS dev-tool pricing page for a prompt-library product, rendered as a near-black console UI with phosphor-green text, scanline overlay, monospaced type, and a shell-command motif (install lines, $ prompts, ./start CTAs). Layout is a single centered max-w-[1180px] column: announcement bar, sticky blurred nav, a plain-text hero, a monthly/annual billing toggle, a 3-tier card row (Free/Pro/Team, Pro highlighted), a man-page-style comparison matrix in a fake terminal window, an accordion FAQ, and a grid-lined footer.

Style

Electric-dark terminal aesthetic: pure-black canvas washed with faint green radial glows, a fixed CRT scanline overlay, and bright phosphor-green (#39ff7a) as the single accent doing all the work via text-shadow glows. Everything is monospaced; surfaces are barely-there off-black panels hairlined in dim green. Amber and cyan exist only as tiny accents (discount badge, traffic-light dots). The vibe is a console/REPL, not a glossy marketing page.

Layout & Structure

Single frameless responsive web page, vertically stacked, all content in one centered column at max-width 1180px (mx-auto max-w-[1180px] px-5 sm:px-6). Reads top-to-bottom: announcement bar, sticky nav, hero, billing-toggle header, 3 pricing cards, comparison terminal, FAQ, footer. The pricing cards reflow 3 -> 2 -> 1 column across lg/md/mobile breakpoints; the comparison swaps from a full matrix table on >=sm to per-tier stacked cards on mobile. Nav is sticky with a blurred translucent black background.

Announcement bar (top)

Sticky nav header

Hero

Billing toggle header (#pricing anchor)

Pricing cards (the core: 3 tiers, Pro highlighted)

Comparison matrix (man-page / fake terminal window)

FAQ (accordion)

Footer

Components

CRT scanline overlay

A fixed full-viewport overlay of faint horizontal lines that gives the whole page a glowing-monitor/CRT feel.

Phosphor glow text + halo

Green CRT-phosphor glow applied to headings, prices, the highlighted card, and accents.

ASCII checklist bullets

Feature/comparison rows use literal bracketed ASCII marks instead of icon ticks, reinforcing the terminal look.

Animated billing toggle (monthly/annual)

A custom switch that slides a glowing knob and live-swaps every price + suffix and the active label styling.

Blinking terminal cursor

A blinking block cursor / square used in the hero, footer echo line, and announcement dot to sell the live-terminal feel.

Fake terminal window (comparison panel)

The comparison matrix is framed as a macOS-style terminal window with a traffic-light title bar.

Special Notes

Frameless responsive web page (not a fixed-frame mockup): single centered max-w-[1180px] column, sticky blurred nav, and content that reflows by breakpoint — pricing cards 3->2->1 col (lg/md/sm), and the comparison matrix swaps from a full table (>=sm, with horizontal-scroll fallback at min-w-[560px]) to per-tier stacked cards on mobile so no paid column is ever hidden. Single-accent design system: phosphor green #39ff7a carries the entire UI via glow text-shadows; everything is monospaced (JetBrains Mono + IBM Plex Mono). Heavy terminal motif throughout — shell prompts ($), install lines (npx promptd init --tier), command-style CTAs (./start, ./contact-sales), man-page section headers (> select --plan, > faq --read), ASCII [✓]/[ ] bullets, blinking cursors, a CRT scanline overlay, and a fake-terminal comparison window. Built with Tailwind (CDN config maps the custom palette) + iconify-icon (lucide set); plain-JS billing toggle with data-monthly/data-annual attributes. Voice is warm and dev-native ('ping us and we'll sort it together'), no em-dashes.