home/coding/monolith-hero

Monolith Hero

GPTClaudeDeepSeek··▲ 1,251 copies·updated 2026-07-14

monolith-hero.prompt

# Monolith

- **ID:** `monolith-hero`
- **Category:** Hero Section
- **Type:** hero

---

Build a single-page cinematic hero section for "Monolith" — a brutalist architecture and industrial-design studio. Confident, heavy, quiet. Use React + Vite + Tailwind CSS + TypeScript + lucide-react. Default Tailwind config, no other UI libraries.

FONTS
- Display (logo, headline): Anton (Google Fonts, 400) — a tall condensed grotesque; class `.font-display`
- Body (nav, description): Inter (400/500)
- Import both in `index.css` via Google Fonts `@import`; body uses Inter

COLORS
- --background: #0A0A0C (ink)
- --foreground: #F2F0EC (warm bone-white)
- --muted-foreground: rgba(242,240,236,0.60)
- --accent: #EF4D23 (single ember accent — used only on the index numerals and the CTA underline)

GLOBAL CSS (paste verbatim into `index.css`)

when to use it

Community prompt sourced from the open-source GitHub repo olbboy/motion-site-builder (MIT). A "Monolith Hero" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.