Personal Landing

Build the "Personal Landing" kickstart — A playful one-pager of giant statements, sculpted clay and one pink word.

## Design
Playful and handmade, like finding a strange, lovely corner of the early web. The whole page is a slow reveal of four centred statements, each alone in its own tall band of warm charcoal, with no navigation competing for attention. Pink is the only accent colour for type and UI. It marks two or three meaningful words per statement and nothing else. The clay objects are the one exception to the one-colour rule: they are illustrations with their own tomato red, bubblegum pink, periwinkle blue, sky blue and chrome, lit from the top left like soft modelling clay. Nothing is flat-designed: no icons, no cards, no borders around content, and no shadows except the clay's own lighting. The top canvas (#2B2C29) ends in a 48px bottom radius over the darker floor (#1B1C1B) that holds the form and footer.

### Colour palette (use these exact values)
- Background: #2B2C29
- Surface / cards: #1B1C1B
- Primary text: #E8E5D8
- Secondary text: #A9A69C
- Accent (buttons, links, active state): #E7A6D4
- Text on accent: #2B2C29
- Borders / dividers: #3A3B37
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

### Typography
- Headings: 'Cal Sans', 'Arial Rounded MT Bold', system-ui, sans-serif
- Body: Cousine, ui-monospace, 'SFMono-Regular', Menlo, monospace
- Cal Sans at weight 400 for every statement. It is centred, set clamp(44px, 6.2vw, 88px) with 1.02 line-height and -0.032em tracking (relax to -0.02em under 600px), and wraps with text-wrap: balance at a max-width of 1120px. The Say hello heading is 46px at -0.04em. Cousine carries everything small: the form labels at 13px, the legend at 16px, the button at 14px and the footer link at 14px. The signature wordmark top-left is a handwriting face at 30px.

### Page structure
1. Header: only the owner's name as a small handwritten signature wordmark top-left, in the ink colour with 30px/56px padding; on phones a single menu button may sit top-right, with no other navigation
2. Hero: a three-line centred statement ending in “used to be”, then three chunky sculpted clay letters spelling Fun (red F, pink u, blue n) about 380px tall, touching and slightly rotated; the h1 carries “fun” as visually hidden text
3. Sameness question: a second statement in the same size, alone in a band about 150px tall above and below, ending with its closing phrase in the pink accent and a question mark
4. Joyful recall: a statement with two pink words, flanked by floating clay objects in the gutters (a sky-blue cloud top-left, a chrome capital E rotated -18deg lower-left, a pink seven-point star with a red smiley lower-right), then the one-word pink payoff “Pause.” at statement size with a hand-drawn pink underline swash
5. Promise panel: the last statement, introducing the owner by the configured name with two pink words, closing the charcoal canvas with its 48px bottom radius
6. Say hello: a centred Cal Sans h2 “Say hello.” over an 800px monospaced form: a Name legend with First Name and Last Name side by side, then Email, then a 100px Message box, each label followed by a muted “(required)”, then one Send button
7. Footer: one centred monospaced link to the owner's domain, underlined in pink

### Components and detailing
Form fields are filled with a deeper tint of the accent, #BE8AAF, at 38px tall with an 8px radius, no border, and typed text in #1B1C1B. Labels stay visible above every field and are never replaced by placeholders. The Send button is the only button on the page: an accent (#E7A6D4) rectangle with 6px radius, 20px/32px padding, and 14px Cousine in #2B2C29. Focus is a 2px ink outline offset 3px on every control, because a pink ring vanishes on pink fields. The clay objects are inline SVG: each shape (glyphs set in Cal Sans for the letters, simple blob and star paths for the rest) runs through one reusable filter. The filter dilates and blurs the alpha into a puffy body, displaces its edge with low-frequency fractal noise so it looks thumb-pressed, adds a fine grain to the height map, then lights it with feDiffuseLighting and a softer feSpecularLighting from azimuth 235 before clipping back to the body. The chrome E uses a brighter, glossier setting of the same filter. Every decorative object is aria-hidden and sits on a layer under the text; in the gutters at 1100px and up, never covering a letter. The “Pause.” underline is one inline SVG path with a round cap, 7px stroke, slightly tilted.

### Motion
Gentle and alive, rebuilt from the original's scroll feel. Each statement rises 40px and fades in over 0.9s with cubic-bezier(.2,.7,.2,1) when 20% of it enters the viewport, via one IntersectionObserver. Content is visible by default and only hidden once JS has added a class, so nothing is ever blank without JS. The floating clay objects bob 18px with a 3deg tilt on staggered 7–9s ease-in-out loops. The Pause underline draws itself with a stroke-dashoffset animation after a 0.4s delay. Under prefers-reduced-motion every reveal, bob and draw is replaced by the final static state.

## Tech stack
- Next.js (App Router)
- React Server Components
- TypeScript
- Plain CSS with custom properties
- Inline SVG with one reusable lighting filter for the clay objects
- Self-hosted Cal Sans and Cousine (both SIL OFL)
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Build a personal landing one-pager on the latest Next.js (App Router). Keep the owner's details in one typed site config: name (default “Your Name”), domain (default “yourname.com”), contact email, and the four statements with their accent words marked. The name feeds the signature wordmark, the promise statement, the page <title> and meta description, the footer link and the form's success message, so changing it once changes it everywhere, and a long name wraps rather than truncates. Build the Say hello form as a server action that validates first name, last name, email and message (all required, email format checked). Show inline errors under each field and move focus to the first invalid one. While sending, the button reads “Sending…” and is disabled. On success, replace the form with “Thanks — I'll write back soon.” and move focus to it. On failure, keep the input and offer a mailto link to the configured email. Without JavaScript the form still posts and the server responds with the same states. Send the message through a pluggable function that logs it in development, and document in the README where to connect an email provider. Include a README explaining how to change the name, copy, accent words, colours and the clay objects' shapes and colours. The finished site runs locally with no API keys, no external assets and no database.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.