## Overview
A portfolio cloned from a Figma frame ("Vorrel Prendergast Jr", Grid / Webflow / Process board). Two zones stacked vertically: a full-bleed photographic hero (black with yellow display type, condensed grotesque) and a white editorial about section set in a high-contrast display serif. The solo creative director / founder-led studio counterpoint to v1's plat4m clone.
## Colors
Two zones, two palettes. The hero is black + electric yellow; the about section is white + black. `--card` is repurposed as the editorial surface.
- **`--background`** (`#000000`): Pure black canvas behind the hero photo.
- **`--foreground`** (`#FFEE05`): Electric yellow — every piece of type in the hero, from the wordmark to the nav.
- **`--primary`** / **`--accent`** / **`--border`** (`#FFEE05`): All collapsed onto the same yellow so downstream blocks stay on-brand.
- **`--muted`** (`#141414`): Near-black for any subtle off-canvas surface.
- **`--card`** (`#FFFFFF`) / **`--card-foreground`** (`#000000`): The about section reads as a white editorial spread.
## Typography
- **Heading font**: Grotzec Cond — Feliciano Type Foundry's condensed grotesk, the exact font used in the source Figma. All 8 weights × 2 styles (Thin → Black, italic and upright) are loaded via `apps/shots/fonts/grotzec/font.ts` as one `grotzecCond` family. The display wordmark and every label in the hero render at weight 700 (Bold) to match the Figma.
- **Body font**: PP Editorial New (Pangram Pangram Foundry), the exact font used in the source Figma. All 7 weights × 2 styles (Thin → Heavy, italic and upright) are loaded via `apps/shots/fonts/pp-editorial-new/font.ts` as one `ppEditorialNew` family. The about section renders at weight 200 (Ultralight) to match the Figma.
- **Sibling cuts also loaded** (registered in `lib/fonts.ts`, available to future templates): `grotzecNarrow`, `grotzecXcond`, `grotzecXnarrow`, `grotzecPosterCond` — each a single Bold cut.
Sizing:
- Display wordmark: `clamp(64px, 14vw, 220px)`, `leading-[0.84]`.
- Corner labels ("Design director", "Brand creative"): `clamp(18px, 2.6vw, 36px)`, `leading-[0.84]`.
- Bottom nav (Home / Work / Info): `clamp(20px, 2.4vw, 32px)`, `leading-[0.84]`.
- About paragraph + link: `clamp(28px, 4.6vw, 64px)`, `leading-[1.4]`, `tracking-[-0.02em]`, weight 200 (Ultralight), PP Editorial New.
Casing is sentence case in the source (`<span>Vorrel</span>`), rendered uppercase via the `uppercase` utility.
## Layout
Hand-rolled, two-component stack — no blocks.
### `_components/hero.tsx`
- Full-viewport `<section>` at `h-svh min-h-[720px]`, `position: relative`, `overflow-hidden`.
- Full-bleed photographic background via a plain `<img>` absolutely positioned at `inset-0 size-full object-cover`, `opacity-90` so the yellow type pops without fully blowing out the portrait.
- Foreground content in a column: top row (flex justify-between) with the two corner labels, then the stacked wordmark, then `mt-auto` on the nav to pin it to the bottom.
- Name wordmark uses two stacked `<span className="block">` lines ("Vorrel", "Prendergast jr") rather than a `<br />`.
### `_components/about.tsx`
- `bg-card text-card-foreground` section (white/black), generous vertical padding (`py-40 md:py-56`) to match the Figma's tall whitespace above and below the copy.
- Inner column constrained to `max-w-[1149px]` to match the Figma text block.
- Two children separated by a parent `gap-20`: an Ultralight serif bio paragraph and an underlined "learn more" link.
## Assets
- `public/projects/agencies/assets/hero.jpg` — the Figma's portrait, 3091×2048 JPEG, exported from the Figma MCP asset endpoint.
## Do's and don'ts
- Do keep the hero a full viewport — the photo owns the first screen.
- Do use sentence case in source; apply `uppercase` in CSS.
- Do use stacked `<span className="block">` (or `<p>`) for multi-line display — never `<br />`.
- Don't add `tracking-tight` or `tracking-tighter` to the display wordmark; Grotzec Cond handles the condensing.
- Don't replace the hand-rolled hero with a block — no block in `@repo/design-system/blocks` supports a full-bleed photographic background with overlaid display type.
- Don't swap to Next/Image for the hero photo — match the existing `_components/` convention used by other brand templates.
- Don't switch the about section to Grotzec — the whole point of the serif is to break from the hero's condensed grotesque.