VoltAgent Terminal Emerald demo
VoltAgent Terminal Emerald

A deep-space dark terminal landing page with emerald green accents and monospace console styling, built for AI agent frameworks, engineering platforms, and developer SDKs.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 17.5 KB · 2441 words
# SYSTEM PROMPT — Build: "VoltAgent Terminal Emerald" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — no placeholders, no TODOs, no follow-up questions. Every rule below is mandatory unless explicitly marked as an exception.

**Mission:** Build a VoltAgent-inspired **deep-space terminal** landing page. Carbon-black canvas (#050507) framed by warm charcoal borders (#3d3a39). Emerald Signal Green (#00d992) is the sole chromatic energy — it glows from headlines, borders, and interactive elements like a live circuit. Code snippets are hero content. `npm install` is the primary CTA. Warm neutral grays (#3d3a39, #8b949e, #b8b3b0) prevent a clinical feel. All user-facing copy must be written in **English**.

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**0.1 Theme Identity**
Keywords: voltagent, terminal, emerald, deep-space, glow effects, warm charcoal, code-first, npm install, system-ui headings, Inter body. Era: 2024–2026 AI Agent Engineering. Mood: an engineer's console floating in deep space — precise, warm-neutral, signal-green energy only.

**0.2 Color System & Token Mapping** (define in `:root` as Dark default; Light values under `[data-theme="light"]`)

| Token | Dark (default) | Light |
|---|---|---|
| `--bg-primary` | `#050507` (Abyss Black) | `#f4f2ef` (warm paper — never `#ffffff`) |
| `--bg-secondary` | `#101010` (Carbon) | `#fefefe` |
| `--primary` | `#00d992` (Signal Green) | `#007857` (darkened for AA text contrast) |
| `--secondary` | `#2fd6a1` (Mint) | `#00966b` |
| `--text-primary` | `#f2f2f2` (Snow White) | `#101010` |
| `--text-secondary` | `#b8b3b0` (Parchment) | `#4a4744` |
| `--text-success` | `#00d992` | `#007857` |
| `--text-error` | `#ff5f56` | `#b3261e` |
| `--border-default` | `#3d3a39` (Warm Charcoal) | `#d9d5d1` |
| `--border-error` | `#ff5f56` | `#b3261e` |
| `--border-success` | `#00d992` | `#007857` |

Additional tokens: `--text-muted: #8b949e` (Steel); `--radius-sm: 6px` (buttons/inputs); `--radius-md: 8px` (cards/terminal windows); `--radius-lg: 14px` (large panels/modals); `--shadow-sm: 0 2px 8px rgba(0,0,0,0.45)`; `--shadow-md: 0 8px 24px rgba(0,0,0,0.55)`; `--shadow-dramatic: rgba(0,0,0,0.7) 0px 20px 60px`; `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`; `--transition-normal: 250ms`; `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 100`; `--z-modal: 200`; `--z-toast: 300`.

**0.3 Signature Effects**
- **Pulsing glow:** `@keyframes glow-pulse { 0%, 100% { filter: drop-shadow(0 0 2px var(--primary)); } 50% { filter: drop-shadow(0 0 8px var(--primary)); } }` — apply to the hero headline keyword, primary CTA, live status dot, and the "Most popular" pricing badge (~2.4s infinite cycle).
- **Deep dramatic shadow** (`--shadow-dramatic`) on cards, terminal windows, and overlays.
- **Background texture:** faint emerald radial gradient and/or 1px grid lines using `--border-default` at low opacity; optional scanline overlay at ≤ 4% opacity. Pure CSS — no image assets.
- **Terminal chrome:** code blocks rendered as terminal windows — carbon background, warm charcoal border, three decorative window dots (CSS-styled `<span>` circles), a filename tab, and `$` prompt styling.

**0.4 Typography & Iconography**
- Headings: `--font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` — hero H1 at `clamp(2.5rem, 6vw, 3.75rem)` (60px), **weight 400, line-height 1.0**; section H2s at `clamp(1.75rem, 4vw, 2.5rem)`, weight 400.
- Body: `--font-base: 'Inter', system-ui, sans-serif` (Google Fonts, weights 400/500/600).
- Code: `--font-code: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace` (Google Fonts, weights 400/500/600).
- Icons: Google Material Symbols (Rounded). No inline SVGs, no local icon files, no emoji as icons.

**0.5 Page Architecture & Per-Section Requirements** (in order)

1. **Sticky Header (minimal nav shell):** wordmark ("voltagent" with an emerald block-cursor `<span>`), anchor links (Features, How It Works, Pricing, FAQ), GitHub link with Material Symbol icon, and the **theme toggle**. Backdrop blur, warm charcoal bottom border, `--z-dropdown`. On mobile, collapse links behind a menu button (`aria-expanded`, panel closes on Esc/link click). Apply `scroll-margin-top` to sections so anchor jumps clear the sticky header.
2. **Hero:** two-column desktop layout (stacked on mobile). Left: status badge (pulsing emerald dot + "v1.0 — stable"), H1 with one keyword wrapped in a glow class, sub-headline, CTA row — **primary CTA is a terminal-style install command block** (`npm install @voltagent/core`) with a copy button; secondary ghost button ("Read the docs"). Right: terminal window card with a realistic TypeScript agent snippet, e.g.:
   ```ts
   import { Agent, createTool } from '@voltagent/core';

   const weather = createTool({
     name: 'weather',
     execute: async ({ city }) => getWeather(city),
   });

   export const assistant = new Agent({
     name: 'assistant',
     tools: [weather],
   });
   ```
3. **Features (3 cards):** responsive grid (1-col mobile → 3-col desktop). Each card: Material Symbol icon in an emerald-ringed square, H3, real descriptive copy. Suggested angles: type-safe agent APIs, built-in tools & memory, observability/tracing.
4. **How It Works (3 steps):** numbered `01 / 02 / 03` in emerald mono numerals with a connecting border on desktop, vertical stack on mobile. Steps: Install → Define → Deploy, each with short copy and an inline code fragment where natural.
5. **Testimonials:** 3 quote cards with quote text, author name + role, and initial-monogram avatars (emerald ring, carbon background, mono initials). No external images.
6. **Pricing (3 tiers):** Free/Hobby, Pro (featured — persistent emerald border, glow-pulse "Most popular" badge), Team. Each tier: price, billing note, feature list with Material Symbol check icons, CTA button (featured = primary variant; others = ghost). A monthly/annual toggle is optional; if included, it must be an accessible radiogroup or `aria-pressed` button pair with an `aria-live` region announcing updated prices.
7. **FAQ:** accordion with 5–6 real Q&As (installation requirements, framework support, pricing, self-hosting/data, licensing). See spec 2.5.
8. **Final CTA:** centered, large glow headline, short supporting line, the install command with copy button repeated as primary CTA, plus an **email capture form** (see spec 2.3).
9. **Footer:** secondary link groups (Product, Resources, Company/Legal), social links (Material Symbols), copyright with current year. `href="#"` links are acceptable but must carry meaningful accessible names.

---

## 1. STRICT RULES & ARCHITECTURE

### **1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** all design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — retheming the site must require editing only `style.css`, never the markup.

### **1.2 CSS Variables & Theme Tokens**
- All visual tokens from Section 0.2 must live in `:root` (Dark default) and `[data-theme="light"]`, referenced exclusively via `var(--...)`. No hardcoded hex values in component rules.
- **Contrast Pairing:** every light background token pairs with a dark text token and vice versa, in both themes. Critical pairings: `#f2f2f2` text on `#050507`/`#101010`; emerald `#00d992` text on dark backgrounds (≈10.9:1, passes); **emerald-filled surfaces (buttons, badges) must use `#050507` text — never `#f2f2f2`, which fails contrast on `#00d992`**; in Light mode, emerald-as-text must be the darkened `#007857`, with bright `#00d992` reserved for decorative glows/borders only.
- **Light Mode Background:** never pure white — use the warm paper tone; where a near-white is needed, use `#fefefe`, not `#ffffff`.

### **1.3 Mandatory Dark Mode (Default) & Theme Switching**
- Dark Mode tokens are the `:root` default; Light tokens switch via a `[data-theme="light"]` attribute on `<html>` — **no HTML restructuring may be required to switch themes**. Set the `color-scheme` CSS property and `<meta name="color-scheme" content="dark light">` so native controls render correctly.
- **Persistence:** store the choice in `localStorage` (key `voltagent-theme`, values `dark`/`light`); on first visit with no stored choice, fall back to `prefers-color-scheme`.
- **Toggle:** a visible header control using a Material Symbol icon, with correct `aria-pressed` state (true when Dark is active) and a dynamically updated `aria-label` ("Switch to light theme" / "Switch to dark theme").
- **Exception (theme spec):** Dark Mode is this theme's default and primary experience — it must be the fully polished reference implementation; the Light variant is secondary but must still satisfy every contrast-pairing and accessibility rule above.

### **1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (Tailwind `flex` utilities or custom classes).
- **Default Alignment Rule:** every flex container defaults to `align-items: center` (`items-center`) unless an explicitly justified exception applies (allowed exceptions: inner card content columns and accordion panels may use `flex-start`/`stretch` for reading alignment — comment the exception in CSS).
- **Mobile-Friendly First:** all rows convert to columns on small viewports (breakpoints ~640/768/1024px); no horizontal scrolling anywhere — use `min-width: 0` on flex children, `overflow-wrap` on text, and `overflow-x: auto` confined to `pre` blocks only.

### **1.5 Framework: Tailwind CSS (CDN) + Token Discipline**
- Use Tailwind CSS via CDN (`https://cdn.tailwindcss.com`) for layout, spacing, and responsive utilities only. This external CDN `<script src>` reference is permitted; the only other script is the single deferred `script.js` entry point.
- **All colors, fonts, radii, shadows, glows, and component states must come from `style.css` CSS variables and semantic reusable classes** (`.btn`, `.card`, `.terminal`, `.input-group`). Arbitrary-value utilities (e.g., `text-[#00d992]`) are forbidden — visual styling never lives in Tailwind classes.

### **1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Inter** and **JetBrains Mono** from Google Fonts via `<link>` with `preconnect` and `display=swap`; bind them to `--font-base` and `--font-code`.
- **Exception (theme spec):** the theme explicitly requires `system-ui` for headings — honor it for `--font-heading`; every other text face must be a Google Font.
- Icons: Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden.** Decorative elements (terminal dots, cursor block) must be `aria-hidden="true"`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### **2.1 Button Component**
Style a `.btn` base (BEM variants `.btn--primary`, `.btn--ghost`, `.btn--danger`) entirely via CSS classes, covering every state:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-sm)`. Primary = emerald fill with `#050507` text; ghost = transparent with `--border-default` and snow text.
- **Hover:** brightness/shadow shift plus emerald border glow; `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--primary); outline-offset: 2px;` visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** `.is-loading` disables pointer events, prevents double-clicks, renders a CSS spinner (border-based) or animated Material Symbol without changing button dimensions; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary `.is-success` / `.is-error` feedback driven by `--text-success` / `--text-error`, paired with an icon swap (never color alone) and announced via an `aria-live` region. The copy-to-clipboard button uses this: check icon + "Copied to clipboard" for ~2s.

### **2.2 Card Component**
- **Default:** flexible Flexbox layout, `--bg-secondary` background, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `--shadow-sm`.
- **Hover (interactive cards — pricing tiers, linked feature cards):** `transform: translateY(-2px)` plus shift to `--shadow-dramatic` and an emerald border glow.
- **Focus-within:** card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** define a `.skeleton` shimmer animation in CSS (part of the component contract) so future dynamic content never causes layout jumps.
- **Empty State:** define a structured fallback layout — Google Icon plus clear guidance text — as reusable classes.
- **Featured pricing card:** persistent emerald border and the glow-pulse badge.

### **2.3 Form & Input Requirements** (Final CTA email capture)
- **Structure:** flex `.input-group` wrapping a `<label>`, the input field, and a dedicated error-feedback container with `aria-live="polite"`.
- **States — all styled via CSS classes:** Empty, Focused (emerald outline ring), Filled, Valid (success border + check icon), Invalid (error border, error text + icon, message text in the live region), Disabled, Read-only.
- **Behavior (script.js):** validate on submit and on blur; never color-only feedback (icon + text always); loading state on the submit button prevents double submission; show a success confirmation message.

### **2.4 Modal / Popup (Conditional)**
This brief does not require a modal — do not add one unless a genuine overlay need arises (e.g., a "Compare plans" dialog). If implemented, it must cover: **Opening, Open, Loading, Success/Error, Closing** states, all animated via CSS transitions; a centered flex overlay (`align-items: center`) with a dimmed, blurred backdrop; a Material Symbol close button; keyboard focus trapping; `role="dialog"` with `aria-modal="true"`; closing via `Esc` and overlay clicks; focus restored to the triggering element.

### **2.5 FAQ Accordion**
- Each item: `<h3><button>` trigger with `aria-expanded` and `aria-controls`, controlling a panel with `role="region"` and `aria-labelledby`.
- Animated expand/collapse via the CSS `grid-template-rows: 0fr → 1fr` technique (no JS height calculations); chevron Material Symbol rotates 180°.
- Full keyboard operability (native button semantics), visible `:focus-visible` and hover states on the question row; multiple panels may be open simultaneously.

### **2.6 Terminal Code Block & Copy-to-Clipboard**
- `.terminal` component: window chrome (dots, filename tab), `pre/code` in `--font-code`, syntax highlighting via CSS token classes (`.tok-key`, `.tok-str`, `.tok-fn`, `.tok-comment`) mapped to emerald/mint/parchment/steel; `overflow-x: auto` on the `pre` only.
- The install command block (`npm install @voltagent/core`) carries a copy button implementing all Button states; use `navigator.clipboard` with a fallback; success/failure announced through an `aria-live` region.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid `clamp()` typography, standard breakpoints, zero horizontal overflow at every viewport from 320px up.
- **Smooth Animations:** CSS transitions (`var(--transition-normal)`) on every state change; `glow-pulse` on signature elements; optional scroll-reveal via `IntersectionObserver` adding a visibility class — **content must be fully visible if JavaScript fails** (reveal classes may only be applied by JS). `scroll-behavior: smooth` and all animations must be disabled or reduced under `prefers-reduced-motion: reduce` (fall back to a static `drop-shadow(0 0 4px var(--primary))`).
- **Accessibility (a11y):** WCAG AA contrast in both Dark and Light modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`), a single `h1` with logical heading hierarchy; correct ARIA roles/labels on the nav menu, accordion, theme toggle, and any custom widget; logical DOM/focus order; full keyboard operability (no mouse-only interactions); a "Skip to main content" link; `aria-live` regions for dynamic feedback (copy confirmations, form errors, loading states).
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive/Distinct Actions:** any `.btn--danger` usage must be visually distinct in both themes.

---

## 4. DELIVERABLES & OUTPUT FORMAT

- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. External references allowed: Google Fonts `<link>` tags, Material Symbols, and the Tailwind CDN. **No inline `<script>` blocks and no inline `style` attributes**; `script.js` is referenced once with `defer`.
- **Naming Convention:** BEM consistently across the entire deliverable (`.hero__title`, `.card--featured`, `.btn--primary`, `.faq__trigger`). Never mix conventions — Tailwind utilities are permitted for layout/spacing only; all visual styling belongs to BEM component classes driven by CSS variables.
- **Copy Rules:** all user-facing copy in **English**, written in a confident, developer-focused terminal voice. No lorem ipsum, no TODOs, no stub sections — write real headlines, feature descriptions, testimonials, pricing details, and FAQ answers. Placeholders are permitted only for genuinely unspecified data (e.g., a placeholder company name in testimonials).
- **Completeness:** deliver the entire landing page — header, all 8 requested sections, footer — fully coded with both themes working, every component state implemented, on the first attempt. Include `<meta name="viewport">`, a descriptive `<title>`, and `theme-color` meta tags for both themes.