mirror of
https://github.com/hanzoai/agency.git
synced 2026-11-02 19:13:28 +00:00
54 lines
2.4 KiB
Plaintext
54 lines
2.4 KiB
Plaintext
# Page prompts
|
|
|
|
Drop-in prompts for whole sections. Each already carries the brand constraints,
|
|
so you can hand one to a model with only the specifics filled in. They assume the
|
|
system prompt (`system.md`) is already loaded and `styles.css` is imported.
|
|
|
|
## Hero
|
|
|
|
> Build a hero section for **{product}**. Dark, `--background`. Centered column,
|
|
> `--container-prose`, vertical rhythm `--hero-y`/`--hero-y-lg`. One `--type-hero`
|
|
> `h1` (≤ 7 words, scaling to `--text-7xl` on lg), one `--type-lead` subline
|
|
> (≤ 140 chars), one primary `<Button pill>` plus one `outline` secondary.
|
|
> Behind the column, a single `--glow-hero` radial — nothing else. Entry:
|
|
> `hanzo-fade-up`, `--duration-slow`, `--stagger` between the three elements.
|
|
|
|
## Feature grid
|
|
|
|
> Build a 3-column feature grid (1 column on mobile). Each cell: a `lucide-react`
|
|
> icon at h-6 in `--foreground` at 80%, a `--type-h3` title, a `--type-body`
|
|
> `--text-secondary` description. Cells use `--surface-card`, `--radius-lg`,
|
|
> `--border-card`. No shadows. Constrain to `--container-max`, gutters
|
|
> `--gutter*`. Stagger the cells in on scroll with `hanzo-slide-up-fade`.
|
|
|
|
## Pricing
|
|
|
|
> Build a 3-tier pricing row. Monochrome cards, `--surface-card`; emphasize the
|
|
> recommended tier with `--surface-card-emphasis` and a `--brand` hairline — not
|
|
> a colored fill. Price in `--type-h2`, cadence in `--text-helper`. "Free" and
|
|
> "Save N%" are the only colored text, `--state-success`. One primary CTA per
|
|
> card, the rest `outline`.
|
|
|
|
## CTA / resources block (every product page ends with this)
|
|
|
|
> Build the closing section: a top hairline (`--border-hairline`), centered
|
|
> `--container-prose`, a `--type-h2` "Get started", and a row of two or three
|
|
> links — "Read the docs", "View on GitHub", "Talk to us" — as `--text-primary`
|
|
> with underline-on-hover. No new color, no new component.
|
|
|
|
## Navigation + footer
|
|
|
|
> Build a fixed header: `--surface-header` with backdrop blur, `--header-height`
|
|
> tall, `--z-header`. Left: the H mark from `assets/logo.svg`. Right: text nav
|
|
> links at `--text-secondary`, hover `--text-primary`, and one primary
|
|
> `<Button pill size="sm">`. Footer: `--container-max`, columns of quiet
|
|
> `--text-tertiary` links over `--background`, a hairline on top.
|
|
|
|
## Rules that still apply
|
|
|
|
- One primary action per view.
|
|
- No hue outside the reserved semantics.
|
|
- Everything Tab-reachable, focus visible, reduced-motion honored.
|
|
|
|
After generating, run `prompts/rules.md` against the output.
|