Bolt Marketing Site

Static, mobile-responsive marketing homepage built 1:1 from Figma node 2251:108 (Bolt Marketing Site → Home Page w/ Trades dropdown selected).

Run

cd bolt-marketing-site
python3 -m http.server 8087
# open http://localhost:8087

Or just open index.html directly in a browser (fonts load from Google Fonts, so stay online).

Structure

bolt-marketing-site/
├── index.html      # all sections, semantic markup
├── styles.css      # design tokens + responsive layout (breakpoints 1024 / 768 / 480)
├── script.js       # mobile nav toggle + "Why ___ pros trust Bolt" word switcher
└── assets/
    ├── logo-wordmark.png      # bolt brand wordmark (cropped from AppStore icon, transparent)
    ├── hero-bg.png            # hero background (bolt-dot pattern + gradient)
    ├── hero-phone.png         # hero device shot
    ├── word-switcher.mp4      # "Why ___ pros trust Bolt" switcher (autoplays, loops)
    ├── reviews-bg.jpg         # construction-framing testimonial bg
    ├── blueprint-bg.png       # "sign up" section blueprint bg
    ├── num-1..4.png           # hand-drawn step numbers
    ├── ellipse-1..4.svg       # gold hand-drawn rings around each step mockup
    ├── line.svg               # (reference) dashed step divider — drawn in CSS
    └── sketch-*.png           # hand-drawn step mockups (trade, warm/calm, jobs, schedule)

Sections (top → bottom)

Nav (+ Trades dropdown) · Hero · Trust statement (3 cards) · Reviews · "More jobs. Less hassle." band · Sign-up 4-step (blueprint) · Pricing (chevron) · Subscribe / pre-footer · Footer.

Design tokens

token	value
navy	#180a53
blue (CTA)	#2b7ffd
yellow (CTA)	#fcbd11
body gray	#839393
off-white bg	#f9fbff
footer bg	#e0e0e0
fonts	Inter (body) · Permanent Marker (display) · Poppins (captions)

Notes

• Pricing chevron is the real Figma asset (per request). On desktop it renders full-width and crisp; on mobile it scales to fit so the whole FREE + $99 offer stays visible.
• Nav links, footer links, and the dropdown are real <a> elements (Figma exported them as flattened vectors); social + form icons are inline SVG.