Landing Page Builder

---

name: landing-page-builder description: Build premium static landing pages with the Stomme/PolyTrader design system. Glass morphism, CSS custom properties, separated copy, responsive, Cloudflare Pages-ready. Use when building a website, landing page, marketing site, or product page. Produces static HTML/CSS/JS with no framework dependencies.

---

Landing Page Builder

Build premium static landing pages using the proven design system from polytrader.ai.

Stack

Static HTML/CSS/JS — no frameworks, no build tools

CSS custom properties for all theming

Google Fonts via preconnect

Cloudflare Pages deployment target

Procedure

1. Read content sources — all copy must come from provided markdown files, never invented 2. Read the design system reference — read references/design-system.md for the full CSS pattern library 3. Separate copy from layout — define ALL text in a js/copy.js data file, reference from HTML via data-copy attributes or JS injection. This enables i18n later. 4. Build pages using the section patterns from the design system 5. Include: _headers (security headers), _redirects, robots.txt, sitemap.xml, .gitignore 6. Generate validation scripts — adapt references/pre-push-check-template.sh and references/validate-live-template.js for the specific site (selectors, locales, CSS vars). Place in scripts/. Set up .githooks/pre-push. Wire into CI workflow. 7. Test: open in browser at desktop AND mobile viewports. Run bash scripts/pre-push-check.sh. Verify theme toggle (3 full cycles), lang switcher (all locales), contrast on all interactive elements. 8. Git init + commit (hooks path set to .githooks/) 9. Write BUILD-NOTES.md with Cloudflare Pages deployment instructions

Design System Principles

The reference file has the full implementation. Key principles:

Dual theme — dark premium default + light mode. Auto-detects prefers-color-scheme, user toggle in nav, localStorage persistence, inline script prevents flash

Glass morphism — .glass cards with backdrop-filter, subtle borders, inset shadows — adapts to both themes

CSS custom properties — every color, spacing value, and font through variables. Dark values in :root, light overrides in [data-theme="light"]

Gold/brand accent — gradient CTAs, accent moments, section kickers. Slightly deepened in light mode for contrast

Ambient backgrounds — layered radial-gradients for depth, NOT solid colors — both themes use them

Typography — Google Fonts (Plus Jakarta Sans or similar geometric sans), tight tracking on headings (-0.035em), generous body line-height (1.75)

Interactions — subtle translateY lifts on hover, gradient buttons with glow shadows

Theme toggle — sun/moon SVG icons in nav, localStorage key for persistence, OS change listener

Section Patterns (in order)

1. Sticky nav — frosted glass, pill shape or clean bar, brand + links + theme toggle + CTA 2. Hero — large headline, subheadline, dual CTAs (gradient primary + outline secondary), trust signals in glass card grid below 3. Value proposition — narrative text section explaining the core differentiator 4. How it works — numbered steps (01, 02, 03...) in glass cards, 2-column layout 5. Features — alternating layout (text left/visual right, then swap), glass cards 6. Pricing — tier cards with ring highlight on featured plan, checklist items with check icons 7. FAQ — 2-column glass card grid, question + answer 8. Bottom CTA — full-width banner, headline + CTA + supporting line 9. Footer — minimal, border-top, brand + links + legal

Theme Architecture

Every page must include:

1. Inline script (blocking, before CSS loads) — reads localStorage key, falls back to prefers-color-scheme, sets data-theme="light" on if light 2. :root — dark theme variables (default) 3. [data-theme="light"] — light theme variable overrides 4. --body-bg-gradient variable — ambient background through a custom property so it switches with theme 5. Theme toggle button in nav with sun/moon SVG icons, visibility driven by CSS --theme-icon-sun / --theme-icon-moon variables 6. JS in main.js — initTheme() function: toggle click handler, localStorage.setItem, OS change listener (respects manual override) 7. Smooth transitions — 300ms ease on color, background, border-color, box-shadow for themed elements 8. --btn-primary-text — button text color variable (dark on dark theme where bg is gold, white on light theme)

File Structure

site-root/
├── index.html
├── pricing.html
├── privacy.html
├── terms.html
├── 404.html
├── css/
│   └── style.css          # Full design system + page styles (dark + light themes)
├── js/
│   ├── copy.js            # ALL text content as exportable object
│   └── main.js            # Nav toggle, smooth scroll, theme toggle, minor interactions
├── img/
│   ├── favicon.svg
│   └── og-placeholder.png
├── _headers               # Cloudflare security headers
├── _redirects              # Cloudflare redirects
├── robots.txt
├── sitemap.xml
├── .gitignore
└── BUILD-NOTES.md

Post-Build Validation (MANDATORY)

Every build must include a scripts/ directory with two validation scripts. These are not optional — they are part of the deliverable, like _headers or sitemap.xml.

1. scripts/pre-push-check.sh — Static pre-push gate

Runs before every git push (via .githooks/pre-push). Checks:

All