HTML Guide - Hero + Top Nav Layout

Prompt preview

Create a fully self-contained, production-quality HTML guide file for my project. Do not use any external CSS frameworks or JS libraries - everything must be inline in one .html file.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PROJECT DETAILS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Project name: {{project_name}}
Brand name shown in navbar logo: {{brand_name}}
Hero tagline: {{hero_tagline}}
Hero description: {{hero_description}}
Technology chips (shown under hero): {{chips}}
Sections with nav anchors: {{sections}}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LAYOUT - HERO + TOP NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Structure:
1. Sticky top navbar (52px tall, backdrop-filter blur, semi-transparent dark bg)
 - Left: brand logo in display font (bold, accent color + second word in green)
 - Right: nav links for each section (12px, scroll to anchor on click)
2. Full-width hero section (centered, max-width 900px, 90px top padding)
 - Animated badge with pulsing green dot: "[GUIDE TYPE] · [YEAR]"
 - H1 with gradient text (blue → purple → teal, using -webkit-background-clip: text)
 - Description paragraph
 - Colored technology chip pills (6 color variants: blue, green, amber, purple, teal, red)
 - TOC grid: auto-fill cards (minmax 190px), each card links to section with number, label, sublabel
3. Main content area (max-width 920px, centered, 4rem top padding)
 - Each section separated by 88px bottom margin

Use a subtle grid background on the body:
body::before: fixed inset, repeating linear-gradient at rgba(91,143,255,0.03), 50px × 50px grid

Use these CSS variables:
--bg: #06090f
--bg2: #0b0f1c
--bg3: #111827
--bg4: #1a2236
--card: #0e1422
--border: rgba(120,160,255,0.1)
--border2: rgba(120,160,255,0.25)
--blue: #5b8fff
--blue2: #8ab4ff
--purple: #9b7fff
--green: #3ecf8e
--amber: #f5a623
--pink: #f472b6
--teal: #22d3ee
--red: #f87171
--text: #dde4f0
--text2: #8a9bb8
--text3: #4a5568

Typography (import from Google Fonts):
- Display font: 'Cabinet Grotesk' (weights 400 500 700 800 900) - all headings, TOC labels, navbar logo. Use font-weight 800 - 900 for h1, 700 - 800 for h2, 700 for h3/h4.
- Body font: 'Instrument Sans' (weights 300 400 500) - body paragraphs and descriptions. font-weight 300 for hero description.
- Mono font: 'JetBrains Mono' (weights 400 500) - code blocks, section numbers, chip/pill labels, inline code.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COMPONENTS TO USE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SECTION HEADER - every section opens with:
- A flex row: mono section number badge (blue bg, blue border, 10px mono text, 30px height, 4px radius) + horizontal divider line filling the rest
- h2 with Cabinet Grotesk 800 weight, letter-spacing -1px. Wrap key phrase in <em> for gradient (blue → purple, -webkit-background-clip: text)
- p in text2 color, 14px, line-height 1.8

CODE BLOCK - the most important component. Structure:
- Outer: .cb - dark bg (#040710), 1px border rgba(91,143,255,0.15), border-radius 12px
- Header bar: .ch - rgba(91,143,255,0.05) bg, flex between label and traffic lights. Label: mono 10px uppercase var(--blue). Traffic lights: 3 circles (8px each): red #f87171, yellow #f59e0b, green #34d399
- Code area: <pre> with 18px 20px padding, JetBrains Mono 12.5px, line-height 1.75
- Syntax color classes: .kw (keywords #c084fc), .str (strings #4ade80), .cm (comments #3d5166), .fn (functions #60a5fa), .cls (classes #fbbf24), .num (numbers #f472b6), .imp (imports #67e8f9), .op (operators #94a3b8)
- Inline code <code class="i">: rgba(91,143,255,0.1) bg, 1px border rgba(91,143,255,0.2), 4px radius, color #a5c1ff, mono font

CALLOUT / NOTE BOX.note class:
- Background var(--bg3), border 1px var(--border), border-left 3px solid [accent color], border-radius 0 10px 10px 0, padding 14px 18px
- Title: 11px mono uppercase, letter-spacing 1.2px, accent color (class .b=blue, .g=green, .a=amber, .p=purple, .r=red)
- Body: text2 color, 13.5px

DIAGRAM CONTAINER.dc class:
- var(--card) background, 1px var(--border) border, 14px border-radius, 28px 18px padding
- Title label above SVG: mono 10px uppercase letter-spacing 1.5px, text3 color, center-aligned, margin-bottom 16px
- SVG: width 100%, viewBox "0 0 800 [height]". Use these SVG styles:
  * Nodes: rect with rgba(accent,0.08) fill, rgba(accent,0.3) stroke, 8px rx
  * Text: Cabinet Grotesk for labels (font-weight 700, 13px), JetBrains Mono for sublabels (10px)
  * Arrows: 1.5px stroke, matching accent color, arrowhead marker defined in <defs>
  * Use multiple arrow colors: blue arrows for main flow, green for data flow, amber for responses
  * Group components into visual zones with dashed rect borders: rgba(accent,0.05) fill, rgba(accent,0.2) stroke, stroke-dasharray="6,4"

CARD GRID.cg class (grid auto-fit minmax 250px):
- Each .card: var(--card) bg, 1px border, 12px radius, 18px 20px padding
- Hover: border-color var(--border2), translateY(-2px) transform, 0.2s transition
- Icon: emoji or symbol, 20px, margin-bottom 10px
- h4: Cabinet Grotesk 0.93rem font-weight 700
- p: 13px text2

FLOW STEPS.flow container with .fstep rows:
- Each fstep: flex gap 16px, border-bottom 1px var(--border)
- Bubble: 34px circle, 1.5px border var(--blue), rgba(91,143,255,0.1) fill, mono 12px bold blue text
- Title: .ftitle - Cabinet Grotesk 0.95rem bold var(--text)
- Body: .fbody - 13.5px text2, line-height 1.7

COMPARISON CARDS.cmp grid (2 columns):
- .ccard: card bg, 12px radius, 1px border, 18px padding
- .ccard.ok: 2px solid var(--green) border-top
- .ccard.no: 2px solid var(--red) border-top
- Label: 10px mono uppercase (green/red). Content: 13px text2

PILL TAGS.pill class with color variants (b/g/a/p/t/r):
- 11px mono, 4px 13px padding, 20px border-radius
- Each variant: 7% opacity bg, 30% opacity border, matching text color

HIGHLIGHT BOX.hbox: rgba(62,207,142,0.05) bg, 1px solid rgba(62,207,142,0.2) border, 10px radius, 18px 20px padding

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SVG ARCHITECTURE DIAGRAMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
For the main system architecture section, create a detailed SVG diagram (viewBox 800×580) showing every major component. Rules:
- Define 3 arrow marker colors in <defs> (blue, green, amber)
- Group components into labeled zones with dashed rect borders
- Each component box: colored rect (accent + 0.08 opacity fill, 0.3 opacity stroke), Cabinet Grotesk label (font-weight 700, 13px), JetBrains Mono sublabel (10px, text3 color)
- Data flow arrows connect components in sequence
- Connection lines must not cross through component boxes
- Include a legend at the bottom explaining arrow colors

For other sections (database schema, API flow, deployment), create smaller SVG diagrams (viewBox 800×[appropriate height]).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Hero entrance: @keyframes fi - from opacity 0 translateY(18px) to opacity 1 translateY(0). Apply with staggered animation-delay:
- Badge: 0.05s, H1: 0.15s, description: 0.25s, chips: 0.35s, TOC: 0.45s

Badge dot: @keyframes pulse - opacity 1 → 0.4 → 1, 2s infinite

TOC hover cards: transition border-color 0.2s, transform translateY(-2px) 0.15s

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CONTENT INSTRUCTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
For each section I listed, write dense, technically accurate content. Do not use placeholder text. Each section should include at minimum:
- An SVG diagram OR a code block (ideally both for complex sections)
- At least one callout/note box with a key insight
- Either a card grid, flow steps, or comparison cards
- Pill tags for technology choices

Use real technology names, real code patterns, real configuration values. The guide must be genuinely usable by a developer building the project.

Footer: centered, border-top 1px var(--border), text3 color. Include project name and "Built [YEAR]".

Output the complete HTML file. No placeholders, no lorem ipsum - real content throughout.