Abdullah.
465eb05aaf
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.
43 lines
1.1 KiB
JSON
43 lines
1.1 KiB
JSON
{
|
|
"name": "twenty-website-redone",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "npx next dev --port 3004",
|
|
"build": "npx next build",
|
|
"start": "npx next start --port 3004"
|
|
},
|
|
"dependencies": {
|
|
"@babel/runtime": "^7.27.6",
|
|
"@base-ui/react": "^1.3.0",
|
|
"@calcom/embed-react": "^1.5.3",
|
|
"@linaria/core": "^7.0.0",
|
|
"@linaria/react": "^7.0.1",
|
|
"@lingui/core": "^5.1.2",
|
|
"@lingui/react": "^5.1.2",
|
|
"@lottiefiles/dotlottie-react": "^0.18.10",
|
|
"@tabler/icons-react": "^3.41.1",
|
|
"@wyw-in-js/babel-preset": "^0.8.1",
|
|
"@wyw-in-js/transform": "^0.8.1",
|
|
"next": "^16.2.6",
|
|
"next-with-linaria": "^1.3.0",
|
|
"react": "19.2.3",
|
|
"react-dom": "19.2.3",
|
|
"server-only": "^0.0.1",
|
|
"stripe": "^20.3.1",
|
|
"three": "^0.184.0",
|
|
"twenty-shared": "workspace:*",
|
|
"twenty-ui": "workspace:*",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"devDependencies": {
|
|
"@lingui/cli": "^5.1.2",
|
|
"@lingui/conf": "5.1.2",
|
|
"@lingui/format-po": "5.1.2",
|
|
"@lingui/swc-plugin": "^5.11.0",
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"@types/three": "^0.184.1"
|
|
}
|
|
}
|