Ports twenty-website PR #21710 (Rashad) into `twenty-website-redone`.
The old site's partner application form was reworked last week —
required fields, a skills rethink, and fail-fast validation — after the
redone had already ported the form, so the redone was running the
pre-rework behavior. This brings it to parity.
Re-derived into the redone's own conventions rather than copied: it
reuses the redone's `STEP_REQUIRED_FIELDS`/`STEP_FORMAT_CHECKS`
validator, keeps one-export-per-file, and injects the new `searchPool`
as an opt-in prop.
Prep for deleting the twenty-website package and renaming
twenty-website-redone to take its place.
- Copy the 37 root-README documentation assets (public/images/readme/)
plus the README header logo (public/images/core/logo.svg). Files only —
the root README's references are left untouched; they resolve
automatically after the rename.
- Copy the three served verification files into public/.well-known/
(security.txt, openai-apps-challenge,
microsoft-identity-association.json).
- Add a tailored .env.example derived from the package's actual env
reads. Same variable names, dropped unused variables.
### Full-bleed backgrounds on wide screens
Decorative section backgrounds were capped at the 1512px content width,
leaving large empty gutters on ultra-wide viewports.
- Added an opt-in `fullBleedBackground` prop to `SectionShell` that
lifts the background layer off the content-width cap (default unchanged,
so every other section is untouched).
- Applied it to `HomeHero` (bridge halftone field) and both testimonials
sections.
- Capped the `NotchedCardShape` notch at its width at the content cap,
so the white/dark card can span the full viewport while the notch stays
fixed and centered. The footer and any other capped card are unaffected.
<img width="3024" height="1718" alt="image"
src="https://github.com/user-attachments/assets/a2200677-58af-4740-9257-77f6385ade28"
/>
<img width="3024" height="1224" alt="image"
src="https://github.com/user-attachments/assets/73aa6745-b766-405e-b736-8c0c7591232e"
/>
### Navigation restructure
- Removed **Product** from the menu and footer nav, and promoted **Why**
out of the Resources dropdown to a top-level item in Product's place.
(The Product page itself is unchanged).
- Resources dropdown polish: tightened the preview frame height now that
the list is shorter; restored the cleaner/brighter User Guide and
Developers preview assets from `twenty-website`; gave User Guide a
center + 2× image scale so its halftone fills the frame like Developers,
and raised `NextImage` `sizes` to keep the fine halftone crisp through
that magnification.
- Restored the **current-page highlight** in the Resources dropdown
(active icon/label in highlight blue + marker bar), matching the old
`NavDropdown`.
<p>
<img width="1509" height="323" alt="image"
src="https://github.com/user-attachments/assets/d5702761-31f5-4b4d-9fcc-c33d5c7ae6ab"
/>
</p>
### OpenNext / Cloudflare deployment config
Ported the Cloudflare Workers deployment setup from `twenty-website` so
the same CI/deploy pipeline works against the redone package:
- `open-next.config.ts` (R2 incremental cache + regional cache + skew
protection), `wrangler.jsonc` (dev/prod envs — **worker names, routes,
R2 buckets kept identical** for a seamless cutover),
`initOpenNextCloudflareForDev()` in `next.config.ts`, the
`preview`/`deploy:*`/`cf-typegen` scripts, the `@opennextjs/cloudflare`
+ `wrangler` devDependencies, a `.dev.vars.example` template, and the
relevant `.gitignore` entries.
twenty-website had accumulated structural problems that were cheaper to
fix by rebuilding than to refactor in place:
- Drift had no guardrails. Values were matched at call sites instead of
single-sourced, so things silently diverged — e.g. the radius token base
was wrong for days (every radius() consumer rendered double) because
nothing measured it against the old site's CSS variables.
- A whole tree escaped quality checks. src/lib/ (~9.8k lines) was never
format-checked, because oxfmt silently ignores directories named lib/.
- Inconsistent rhythm. Hero spacing varied 24–88px between pages
(CEO-flagged), because section spacing wasn't a token.
- Over-extraction. -config.ts sprawl pulled single-component
configuration out into the wrong place.
The goal: a ground-up rebuild where drift is structurally impossible,
held to a Linear / Railway / Notion / Attio quality bar. The old site is
treated as source of intent only — nothing is blindly ported; every
piece is re-decided and A/B-verified.
**Rebuild**
A full rebuild on Next 16 + Turbopack + Linaria (zero-runtime CSS),
~1,100 files. Marketing pages (home, product, pricing, partners +
marketplace, customers/case-studies, why-twenty, releases, legal), the
interactive AppPreview product mockup, the platform/visuals WebGL system
(engine + rigs, three code-split off every initial chunk), and the
standalone /halftone studio (the dev tool that generates the site's
halftone art — engine, exporters, and full UI ported as an isolated
island).
**Architecture & guarantees**
- Parity by construction. src/tokens/definitions.ts is the only file
with raw values; the :root CSS-variable block is generated from it at
build time and accessors derive var names through the same helpers —
derived alpha tokens appear in served CSS without ever being
hand-written.
- Mobile-first by API shape. mediaUp() is the only media helper (no
max-width helper exists, on purpose).
- Section rhythm is a token (RHYTHM.section) — the hero-spacing
inconsistency class is fixed by construction.
- Fluid type ramps interpolate font-size and line-height between
designed endpoints [390px → md]; TYPE_SCALE is the single source.
- three.js never enters an initial chunk — confined to platform/visuals
heavy zones, reached only via dynamic(ssr:false), enforced by
check-visual-bundle.
Abdullah.