Reworked website. (#21763)

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.
2026-06-18 14:55:24 +05:00
parent 1486203271
commit 465eb05aaf
1099 changed files with 117646 additions and 1191 deletions
@@ -74,6 +74,7 @@
      "packages/twenty-utils",
      "packages/twenty-zapier",
      "packages/twenty-website",
+      "packages/twenty-website-redone",
      "packages/twenty-docs",
      "packages/twenty-e2e-testing",
      "packages/twenty-shared",
@@ -0,0 +1,11 @@
+/node_modules
+/.next/
+/out/
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.env
+.env*
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,16 @@
+{
+  "$schema": "../../node_modules/oxlint/configuration_schema.json",
+  "ignorePatterns": [],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error",
+    "perf": "error"
+  },
+  "plugins": ["react", "typescript", "oxc", "unicorn"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "typescript/no-explicit-any": "error",
+    "typescript/consistent-type-definitions": ["error", "type"],
+    "no-unused-vars": "error"
+  }
+}
@@ -0,0 +1,30 @@
+const jestConfig = {
+  displayName: 'twenty-website-redone',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  // twenty-ui and twenty-shared ship ESM (.mjs) in their dist; transform them
+  // (everything else in node_modules stays ignored) so jest can load them.
+  transformIgnorePatterns: [
+    '/node_modules/(?!(twenty-ui|twenty-shared)/.*)',
+    '../../node_modules/(?!(twenty-ui|twenty-shared)/.*)',
+  ],
+  transform: {
+    '^.+\\.(ts|js|tsx|jsx|mjs)$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
+        },
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@lingui/core/macro$': '<rootDir>/test/lingui-macro-mock.ts',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'mjs'],
+  coverageDirectory: './coverage',
+};
+
+export default jestConfig;
@@ -0,0 +1,22 @@
+import { defineConfig } from '@lingui/conf';
+import { formatter } from '@lingui/format-po';
+import { SOURCE_LOCALE } from 'twenty-shared/translations';
+
+import { WEBSITE_LOCALE_LIST } from './src/platform/i18n/website-locale-list';
+
+export default defineConfig({
+  sourceLocale: SOURCE_LOCALE,
+  locales: [...WEBSITE_LOCALE_LIST],
+  fallbackLocales: {
+    default: SOURCE_LOCALE,
+  },
+  catalogs: [
+    {
+      path: '<rootDir>/src/locales/{locale}',
+      include: ['src'],
+    },
+  ],
+  catalogsMergePath: '<rootDir>/src/locales/generated/{locale}',
+  compileNamespace: 'ts',
+  format: formatter({ lineNumbers: false, printLinguiId: true }),
+});
@@ -0,0 +1,50 @@
+import path from 'path';
+import withLinaria, { type LinariaConfig } from 'next-with-linaria';
+
+import { localeToUrlSegment } from './src/platform/i18n/locale-to-url-segment';
+import { buildLocaleRewrites } from './src/platform/routing/locale-rewrite-patterns';
+import { WEBSITE_LOCALE_LIST } from './src/platform/i18n/website-locale-list';
+
+// Bundler decision: Next 16 defaults dev and build to Turbopack, and
+// next-with-linaria@1.3 branches on process.env.TURBOPACK to apply its
+// Turbopack loader config — the same combination the original twenty-website
+// already runs in dev. Webpack stays available behind `next dev --webpack`
+// as the escape hatch if a wyw-in-js edge case surfaces.
+const DEPLOYED_LOCALE_URL_SEGMENTS =
+  WEBSITE_LOCALE_LIST.map(localeToUrlSegment);
+
+const nextConfig: LinariaConfig = {
+  reactCompiler: true,
+  linaria: {
+    configFile: path.resolve(__dirname, 'wyw-in-js.config.cjs'),
+  },
+  experimental: {
+    swcPlugins: [
+      [
+        '@lingui/swc-plugin',
+        {
+          runtimeModules: {
+            i18n: ['@lingui/core', 'i18n'],
+            trans: ['@lingui/react', 'Trans'],
+          },
+        },
+      ],
+    ],
+  },
+  // Clean public URLs: the source locale is unprefixed, other locales get a
+  // short segment. Rewrites map unprefixed paths onto the internal /[locale]
+  // tree; redirects canonicalize away explicit source-locale prefixes.
+  async rewrites() {
+    return {
+      beforeFiles: buildLocaleRewrites(DEPLOYED_LOCALE_URL_SEGMENTS),
+    };
+  },
+  async redirects() {
+    return [
+      { source: '/en', destination: '/', statusCode: 301 },
+      { source: '/en/:path*', destination: '/:path*', statusCode: 301 },
+    ];
+  },
+};
+
+export default withLinaria(nextConfig);
@@ -0,0 +1,42 @@
+{
+  "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"
+  }
+}
@@ -0,0 +1,71 @@
+{
+  "name": "twenty-website-redone",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/twenty-website-redone/src",
+  "projectType": "application",
+  "tags": ["scope:website"],
+  "targets": {
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx next dev --port 3004"
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx next build"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx tsc -p tsconfig.json --noEmit"
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["^build"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx jest --config=jest.config.mjs"
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "node scripts/check-conventions.mjs && node scripts/check-translations.mjs && npx oxlint -c .oxlintrc.json . && npx oxfmt --check ."
+      },
+      "configurations": {
+        "fix": {
+          "command": "npx oxfmt ."
+        }
+      },
+      "dependsOn": [
+        {
+          "projects": ["twenty-ui"],
+          "target": "build"
+        }
+      ]
+    },
+    "lingui:extract": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "lingui extract --overwrite --clean"
+      }
+    },
+    "lingui:compile": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "lingui compile --typescript"
+      }
+    }
+  }
+}
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="GRAPHICS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2388 732">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #101214;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path id="Fora_Wordmark" data-name="Fora Wordmark" class="cls-1" d="M1917,460l125-345,141,345h-266ZM1452,348h-85V46h105c104,0,158,54,158,147,0,101-64,155-178,155ZM1782,716h60c-10-16-7-30,13-85l51-141h289l59,143c23,56,26,67,16,83h118c-16-24-24-43-37-75L2094,16h-89c16,40,15,73,1,110l-185,497c-22,56-32,74-60,74-38,0-61-34-106-145l-19-47c-34-83-73-123-137-134,136-5,221-68,221-180,0-110-83-175-229-175h-230c14,22,18,54,18,90v520c0,36-4,68-18,90h126c-16-22-20-54-20-90v-248h43c63,0,90,17,121,96l40,103c43,110,115,139,211,139ZM807,702c-163,0-270-133-270-336S644,30,807,30c164,0,272,133,272,336s-108,336-272,336ZM807,732c207,0,364-157,364-366S1014,0,807,0c-206,0-362,157-362,366s156,366,362,366ZM0,716h126c-16-22-20-54-20-90v-248h124c47,0,88,4,117,20v-70c-29,16-70,20-117,20h-124V46h149c59,0,100,11,148,39l-15-69H0c14,22,18,54,18,90v520c0,36-4,68-18,90Z"/>
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Camada_2" data-name="Camada 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122 23.18">
+  <g id="HEADER">
+    <g>
+      <rect x="49.1" y=".34" width="4.31" height="22.5"/>
+      <rect x="57.01" y=".34" width="4.31" height="22.5"/>
+      <polygon points="81.23 12.04 81.23 16.33 76.93 16.33 76.93 12.04 71.06 .34 64.92 .34 64.92 22.84 69.23 22.84 69.23 6.28 77.52 22.84 80.63 22.84 88.93 6.28 88.93 22.84 93.24 22.84 93.24 .34 87.08 .34 81.23 12.04"/>
+      <g>
+        <path d="M11.59,0h-2.98v4.3h-4.3v7.28h4.3v-7.28h2.98c4.02,0,7.28,3.27,7.28,7.28s-3.27,7.28-7.28,7.28-7.28-3.27-7.28-7.28H0c0,6.39,5.2,11.59,11.59,11.59s11.59-5.2,11.59-11.59S17.98,0,11.59,0Z"/>
+        <rect x="0" y="0" width="4.31" height="4.3"/>
+      </g>
+      <path d="M110.73.34h-3.13l-11.25,22.5h4.82l1.1-2.2h13.82l1.1,2.2h4.82L110.73.34ZM104.42,16.33l2.6-5.2v-4.29h4.3v4.29l2.6,5.2h-9.51Z"/>
+      <polygon points="24.86 4.39 33.03 4.39 33.03 22.84 37.33 22.84 37.33 4.39 45.5 4.39 45.5 .34 24.86 .34 24.86 4.39"/>
+    </g>
+  </g>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="175" height="41" viewBox="0 0 175 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0189 29.3764C33.0189 30.174 32.8868 30.9715 32.6227 31.6362C32.3585 32.3008 31.9623 32.9654 31.434 33.4971C30.9057 34.0288 30.3774 34.4276 29.5849 34.6934C28.9245 34.9593 28.1321 35.0922 27.3396 35.0922C26.5472 35.0922 25.7547 34.9593 25.0944 34.6934C24.434 34.4276 23.7736 34.0288 23.3774 33.4971C22.8491 32.9654 22.4528 32.3008 22.1887 31.6362C21.9245 30.9715 21.7925 30.174 21.7925 29.3764V12.3621H18.3585C17.434 12.3621 16.6415 13.1596 16.6415 14.0901V29.3764C16.6415 30.174 16.5094 30.9715 16.2453 31.6362C15.9811 32.3008 15.5849 32.9654 15.0566 33.4971C14.5283 34.0288 14 34.4276 13.3396 34.6934C12.6793 34.9593 11.8868 35.0922 11.0943 35.0922C10.3019 35.0922 9.64152 34.9593 8.84906 34.6934C8.18869 34.4276 7.52831 34.0288 7.13208 33.4971C6.60378 32.9654 6.20755 32.4337 5.9434 31.6362C5.4151 30.9715 5.28302 30.174 5.28302 29.3764V12.3621H1.71698C0.792453 12.3621 0 13.1596 0 14.223V29.5094C0 31.1045 0.264151 32.5666 0.924529 33.8959C1.45283 35.2251 2.24528 36.4215 3.30189 37.3519C4.09434 38.2824 5.28302 39.08 6.60378 39.6117C7.92453 40.1434 9.37737 40.5421 10.8302 40.5421C12.8113 40.5421 14.6604 40.0104 16.3774 39.08C17.434 38.4153 18.3585 37.6178 19.151 36.6873C19.9434 37.6178 20.8679 38.4153 21.9245 39.08C23.6415 40.0104 25.4906 40.5421 27.4717 40.5421C28.9245 40.5421 30.3774 40.2763 31.6981 39.6117C33.0189 39.08 34.2076 38.2824 35.1321 37.219C36.0566 36.2885 36.8491 35.0922 37.5095 33.763C38.0378 32.4337 38.434 30.9715 38.434 29.3764V12.3621H35C34.0755 12.3621 33.283 13.1596 33.283 14.0901V29.3764H33.0189Z" fill="#080927"/>
+<path d="M52.17 34.4274C51.1134 33.8957 50.1889 33.364 49.3965 32.4336C48.604 31.636 47.9436 30.7055 47.5474 29.5092C47.1512 28.4458 46.887 27.2495 46.887 26.0532C46.887 24.8568 47.1512 23.6605 47.5474 22.5971C48.0757 21.5337 48.604 20.4703 49.3965 19.6728C50.1889 18.8752 51.1134 18.2106 52.17 17.8118C53.2267 17.2801 54.4153 17.1472 55.604 17.1472C56.7927 17.1472 57.9814 17.413 59.038 17.8118C60.0946 18.3435 61.0191 18.8752 61.8116 19.6728C62.604 20.4703 63.2644 21.4008 63.6606 22.5971C64.1889 23.6605 64.321 24.8568 64.321 26.0532C64.321 27.2495 64.0568 28.4458 63.6606 29.5092C63.1323 30.5726 62.604 31.636 61.8116 32.4336C61.0191 33.2311 60.0946 33.8957 59.038 34.4274C56.9248 35.3579 54.2833 35.3579 52.17 34.4274ZM65.5097 15.9509C64.1889 14.6216 62.7361 13.6911 61.0191 12.8936C59.3021 12.0961 57.4531 11.8302 55.604 11.8302C53.6229 11.8302 51.9059 12.229 50.1889 12.8936C48.4719 13.6911 47.0191 14.6216 45.6983 15.9509C44.3776 17.2801 43.4531 18.7423 42.6606 20.4703C41.8682 22.1983 41.604 24.0593 41.604 26.0532C41.604 28.047 42.0002 29.908 42.6606 31.636C43.4531 33.364 44.3776 34.8262 45.6983 36.1555C47.0191 37.4847 48.4719 38.5481 50.1889 39.2127C51.9059 40.0103 53.755 40.409 55.604 40.409C57.9814 40.409 60.0946 39.8774 62.0757 38.814C62.8682 38.4152 63.7927 37.8835 64.4531 37.2189V39.8773H69.7361V26.1861C69.7361 24.1922 69.3399 22.3313 68.6795 20.6032C67.755 18.7423 66.8304 17.2801 65.5097 15.9509Z" fill="#080927"/>
+<path d="M73.3017 14.223V17.812H85.0565L72.5093 40.0104H93.2451V36.4214C93.2451 35.491 92.4527 34.6934 91.5282 34.6934H81.6225L94.1697 12.495H75.0187C74.0942 12.362 73.3017 13.1596 73.3017 14.223Z" fill="#080927"/>
+<path d="M143.434 12.8937L133.66 22.8631V0H130.226C129.302 0 128.509 0.797549 128.509 1.72802V39.8775H133.792V29.3764L143.962 39.8775H151.358L137.887 26.0533L151.358 12.2291H144.622C144.226 12.362 143.698 12.6279 143.434 12.8937Z" fill="#63DB00"/>
+<path d="M169.453 12.3621V29.3764C169.453 30.174 169.321 30.9715 169.057 31.6362C168.793 32.3008 168.396 32.9654 167.868 33.4971C167.34 34.0288 166.812 34.4276 166.151 34.6934C165.491 34.9593 164.698 35.0922 163.906 35.0922C163.113 35.0922 162.321 34.9593 161.661 34.6934C161 34.4276 160.34 34.0288 159.812 33.4971C159.283 32.9654 158.887 32.4337 158.623 31.6362C158.359 30.9715 158.227 30.174 158.227 29.3764V12.3621H154.793C153.868 12.3621 153.076 13.1596 153.076 14.0901V29.2435C153.076 30.8386 153.34 32.3008 154 33.63C154.529 34.9593 155.321 36.1556 156.378 37.0861C157.302 38.0166 158.491 38.8141 159.812 39.4787C161.132 40.0104 162.585 40.4092 164.038 40.4092C165.491 40.4092 166.944 40.1434 168.264 39.4787C169.585 38.947 170.774 38.1495 171.698 37.0861C172.623 36.1556 173.415 34.9593 174.076 33.63C174.604 32.3008 175 30.8386 175 29.2435V12.3621H169.453Z" fill="#63DB00"/>
+<path d="M119 29.6423C118.472 30.7057 117.944 31.6361 117.151 32.5666C116.359 33.3642 115.434 34.0288 114.378 34.5605C113.321 35.0922 112.133 35.2251 110.944 35.2251C109.755 35.2251 108.567 34.9593 107.51 34.5605C106.453 34.0288 105.529 33.4971 104.736 32.5666C103.944 31.7691 103.283 30.8386 102.887 29.6423C102.491 28.5789 102.227 27.3825 102.227 26.1862C102.227 24.9899 102.491 23.7936 102.887 22.7302C103.416 21.6668 103.944 20.6034 104.736 19.8058C105.529 19.0083 106.453 18.3436 107.51 17.9449C108.567 17.4132 109.755 17.2803 110.944 17.2803C112.133 17.2803 113.321 17.5461 114.378 17.9449C115.434 18.4766 116.359 19.0083 117.151 19.8058C117.944 20.6034 118.604 21.5338 119 22.7302C119.397 23.7936 119.661 24.9899 119.661 26.1862C119.661 27.3825 119.397 28.5789 119 29.6423ZM123.755 20.6034C122.963 18.8753 122.038 17.2803 120.717 16.0839C119.397 14.7547 117.944 13.8242 116.227 13.0267C114.51 12.2291 112.661 11.9633 110.812 11.9633C108.831 11.9633 107.114 12.362 105.397 13.1596C103.68 13.9571 102.227 14.8876 100.906 16.2169C99.5854 17.5461 98.6608 19.0083 97.8684 20.7363C97.0759 22.4643 96.8118 24.3253 96.8118 26.3191C96.8118 28.313 97.208 30.174 97.8684 31.902C98.1325 32.4337 98.2646 32.8325 98.5287 33.2312L96.6797 40.0104L103.151 38.2824C103.812 38.6812 104.472 39.0799 105.265 39.4787C106.982 40.2763 108.831 40.675 110.68 40.675C112.661 40.675 114.378 40.2763 116.095 39.4787C117.812 38.6812 119.265 37.7507 120.585 36.4214C121.906 35.0922 122.831 33.63 123.623 31.902C124.416 30.174 124.68 28.313 124.68 26.3191C124.812 24.1923 124.548 22.3314 123.755 20.6034Z" fill="#080927"/>
+</svg>
--- a/Show More
+++ b/Show More