## Overview
Personal injury v2 is the editorial-poster direction for the personal-injury directory brand. Where v1 (the original neo-brutalist exploration) used Barlow Condensed headlines, full-width hero stamps, and a sticky white nav, v2 builds the same brand on top of a Bebas Neue / DM Sans pairing and stages it like a magazine: a black hero with a gradient pink-to-yellow display headline, a full-bleed gradient pull quote, a Manifesto card with offset shadow, and an asymmetric blog grid sitting on a cyan-to-purple gradient. The personality is the same — tech-savvy, playful, reassuring — but the layout reads like a printed feature instead of a directory homepage.
## Colors
Inherits the project palette but reshuffles the semantic roles for an editorial mood:
- `--background` — `#FFFFFF` paper white
- `--foreground` — `#1A1919` ink (used for borders, type, and the hero stage)
- `--primary` — `#EFF136` electric yellow (Manifesto card, mission card, the third Difference card)
- `--secondary` — `#FFD4EB` bubblegum pink (CTA pill in nav, footer ground, second Difference card)
- `--accent` — `#16C381` mint green (first Difference card — the only token that breaks from the v1 palette and gives v2 a chromatic anchor)
- `--muted` — `#9BF1FF` cyan (used as the top stop of the blog grid gradient)
- `--border` — `#1A1919` (every chunky black border on every card)
Two custom gradients live inline (not as tokens) because they only appear in two places each:
- Pink-to-yellow display gradient — used on the hero headline and the `.law` lockup in the navbar/footer
- Yellow-to-pink stage gradient — used as the full-bleed pull-quote background
## Typography
- **Heading** — `bebasNeue` from the registry. Bebas at 400 is already condensed and bold; pushed to `clamp(72px, 11vw, 168px)` for the hero, ~`clamp(160px, 22vw, 360px)` for the oversized 01/02/03 numerals in The Difference, and ~`clamp(56px, 8vw, 96px)` for the Manifesto card.
- **Body** — `dmSans`. 20px / 1.6 inside the Manifesto, 16px / 1.7 inside cards, 22px / 1.55 in the hero subhead.
- All headlines are uppercase. Letter-spacing is held at +0.005em across the heading scale to keep the condensed Bebas readable at extreme sizes.
## Sections
1. **Navbar** — white ground, "personal.injury" lockup (the `.injury` half is the pink→yellow gradient, clipped to text), centered nav, pink CTA pill on the right.
2. **Hero** — black stage. Three-line gradient display headline ("Personal / injury but / smart"), pink subhead, pill CTA with an inset shadow that fakes a chunky 3D edge, two decorative `✳` flourishes flanking the bottom of the section, and a full-bleed editorial photo with a soft radial darkening overlay so it bleeds into the next section.
3. **Quote** — full-bleed yellow-to-pink gradient stage with one large pull quote in Bebas. No padding around the type — the quote IS the section.
4. **Manifesto** — yellow card on white, chunky black border, +7/+7 offset shadow, three-paragraph manifesto inside DM Sans.
5. **Justice marquee** — thin black-bordered band, Bebas word + `✳` separator, scrolling.
6. **The Difference** — pink-to-yellow gradient stage with three alternating cards (mint / pink / yellow), each paired with an oversized 01 / 02 / 03 numeral on the opposite side. Cards alternate which side they sit on, and the offset shadow direction flips with them.
7. **Trending topics marquee** — same band style as Justice, different word.
8. **BlogGrid** — cyan-to-purple gradient ground, asymmetric 12-column layout: a 7-col featured post + a 5-col secondary post on the top row, then three 4-col posts across the bottom. Cards have black borders, no rounding (intentional — softer rounding lives in v1).
9. **Mission marquee** — same band, third repetition.
10. **MissionCta** — two-up: editorial photo on the left, yellow card on the right (border + offset shadow + inset-shadow pill CTA, mirroring the hero CTA).
11. **Footer** — pink ground, lockup left, copy + privacy center, two square social tiles right.
## Components
All sections are hand-rolled in `_components/`. Only the marquee reuses `@repo/design-system/components/magicui/marquee` from the design system. Everything else (Hero, Difference, BlogGrid, MissionCta, Footer, Manifesto, Quote, Navbar) is local to this template.
## Do's and don'ts
- **Do** keep the heading scale extreme — the 01/02/03 numerals and the hero headline are the brand. Don't shrink them at desktop.
- **Do** keep every card on a chunky 2px black border with an offset shadow. The shadow direction (`-7px / 7px` vs `7px / 7px`) alternates with the card position.
- **Do** lean on the two custom gradients sparingly — they only appear on the hero headline, the `.law` lockup, the pull-quote stage, and (separately) the Difference stage and the BlogGrid stage.
- **Do** use the inset-shadow trick on pill CTAs (`box-shadow: inset -5px -8px 0 0 #1A1919`) instead of an offset drop shadow. This is the v2 CTA signature.
- **Don't** use Barlow Condensed anywhere. That's v1's heading typeface — v2 must read distinctly different at first glance.
- **Don't** introduce rounded card corners in the blog grid or Difference cards. Sharp corners are the editorial poster cue. Pill CTAs are the only rounded element.
- **Don't** invent new accent colors. Mint green (`#16C381`) is the only color v2 adds beyond v1's palette and it should stay tied to the first Difference card.
- **Don't** swap the hero photo for a stock corporate "law office" image. The brand intentionally uses a candid editorial photograph (currently a cyclist) that contrasts with the legal-services subject matter.