[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-152-Portfolio-Dev-Full-Stack":3},"# System Prompt: Build \"Portfolio Dev Full-Stack\" Landing Page (Dark Tech & Cyber Theme)\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below without exception.\n\n**Theme:** Portfolio Dev Full-Stack — Minimal, Dark, Professional, 2020s Developer aesthetic.\n**Keywords:** developer portfolio, full-stack, projects gallery, clean layout, minimal, dark and cyan, code, tech stack, personal brand.\n**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is **forbidden** in HTML.\n* Target all design properties, layout rules, and states via class or ID selectors only.\n* Keep HTML semantic and styling-agnostic: changing the look must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n\n* **Colors:** `--primary: #00BCD4` (cyan accent), `--secondary`, `--bg-primary: #1A1A1A`, `--bg-secondary: #000000`, `--text-primary: #FFFFFF`, `--text-secondary: #E0E0E0`, `--text-success`, `--text-error`, `--border-default: #333333`, `--border-error`, `--border-success`.\n* **Radius\u002FShadows:** `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px`, `--shadow-sm`, `--shadow-md: 0 2px 10px rgba(0,0,0,0.3)`.\n* **Spacing\u002FTransitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Dark Mode**\n* This theme is **dark-first**: `#1A1A1A` background with `#FFFFFF` text is the default token set.\n* Additionally define a light-mode token set under `@media (prefers-color-scheme: light)` and a `.light` class override, using `#fefefe` (never `#ffffff`) as the light background paired with dark text (`#333333`). Enforce contrast pairing in both themes.\n* Provide a visible theme toggle button with correct `aria-pressed` and `aria-label` states; persist the choice in `localStorage`, falling back to `prefers-color-scheme` on first visit.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layout structures with Flexbox (and CSS Grid for the projects\u002Ffeatures\u002Ftestimonials galleries).\n* Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.\n* Desktop uses a two-column layout (bio\u002Fprojects); all rows collapse to a single column below `768px`. No horizontal scrolling at any viewport width.\n\n**1.5 Framework**\n* Use plain CSS with a fixed utility\u002Fclass set (`.btn`, `.card`, `.badge`, `.section`, `.container`). One consistent naming convention (BEM, e.g. `.hero__title`, `.pricing__card--featured`) across the entire deliverable — never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **JetBrains Mono** (headings\u002Fcode accents) and **Inter** (body) from Google Fonts via `\u003Clink>`; bind to `--font-base` and `--font-mono`.\n* Use **Google Material Symbols** for all icons. Raw inline SVGs and local icon files are **forbidden**.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44x44px touch target.\n* Hover: brightness\u002Fshadow shift, `cursor: pointer`. Focus: distinct focus ring via `outline`\u002F`box-shadow` using `--primary`. Active: `transform: scale(0.97)`.\n* Loading: disabled interaction, CSS spinner (Google Icon animation), no dimension distortion. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* Primary CTA uses `--primary` (cyan) on dark background; `.btn-danger` (Final CTA destructive action, if any) must be visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n* Default: Flexbox layout, `--bg-secondary`, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-md)`.\n* Hover: `transform: translateY(-2px)` + shadow shift. `:focus-within` highlights the card border with `--primary`.\n* Tech stack badges: bordered pill badges (`1px solid var(--border-default)`, JetBrains Mono, cyan text) — no background fill.\n* Hover on links\u002Fcards: **animated underline** (pseudo-element scaling from 0 to 100% width) plus the soft scale.\n* Skeleton shimmer styles defined in CSS for any async content.\n\n**2.3 FAQ (Accordion)**\n* Each FAQ item: `\u003Cbutton>` trigger with `aria-expanded`, collapsible answer panel animated via CSS `max-height`\u002Fgrid transitions. Full keyboard operable. Never color-only state communication (icon rotates + border highlight).\n\n**2.4 Forms & Dynamic Feedback**\n* Final CTA email capture (if included): flex input group with label, input, and dedicated error container. States: empty, focused (cyan ring), valid (success border), invalid (`--border-error`, red text, error icon), disabled.\n* All dynamic feedback (form errors, theme toggle confirmation, submission status) announced via an `aria-live=\"polite\"` region.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTIONS\n\n* **Responsive by default:** fluid `clamp()` typography, breakpoints at 480\u002F768\u002F1024px, zero horizontal overflow.\n* **Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable transforms\u002Fshimmer).\n* **Accessibility:** WCAG-compliant contrast in dark and light themes (cyan `#00BCD4` on `#1A1A1A` passes; verify all pairs). Semantic HTML5 (`header`, `main`, `section`, `nav`, `footer`), logical focus order, skip-to-content link, ARIA labels on the FAQ accordion and theme toggle.\n* **Visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Pricing:** middle tier marked \"Most Popular\" with cyan border and slight elevation — communicated by text label AND border, never color alone.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form validation only). No inline `\u003Cscript>` beyond one deferred entry-point reference. No inline CSS.\n* **Copy:** All user-facing copy in **English**. Write realistic, professional developer-portfolio copy (real project names, tech stacks like React\u002FNode\u002FPostgreSQL, testimonial names\u002Froles, pricing tiers with features). No lorem ipsum.\n* **Footer:** secondary links (Projects, Blog, GitHub, LinkedIn, Contact) plus copyright.\n* **Hero:** two-column desktop layout — left: name, role (\"Full-Stack Developer\"), bio, primary + secondary CTA; right: code-block-styled card or terminal window mock with syntax-highlight-colored spans using theme tokens.\n\nBuild the complete landing page now, in one pass, following every rule above.\n",1791954982210]