refactor: harden website runtime, routing, and hero visual (#20113)

This centralizes routing/SEO ownership, replaces deprecated middleware
with proxy, adds safer lifecycle/runtime primitives, and introduces
visual error boundaries so broken WebGL/canvas-heavy visuals can fail
gracefully instead of taking down the page. It also hardens animation,
resize, visibility, cleanup, and WebGL fallback paths for a broader
range of browsers and devices.

The hero visual was split from large monolithic files into focused
domain folders for shell, pages, shared primitives, window interactions,
terminal conversation, prompt, editor, and traffic-light behavior.
Legacy unused section code was removed, visual configs were extracted,
state/geometry logic was moved into testable modules, and coverage was
added across routing, SEO, lifecycle, animation, visual runtime,
halftone behavior, and hero interactions.

More changes on the way, but this should make the website a lot more
stable - disabling WebGL on Firefox and loading the website does not
cause crashes on local any longer, will test on dev once this is merged.

Author: mabdullahabaid

packages/twenty-website-new/scripts/check-boundaries.mjs

@@ -31,6 +31,26 @@ const RULES = [
       'preference defaults.',
     ].join('\n      '),
   },
+  {
+    id: 'no-raw-animation-frame',
+    description:
+      '`requestAnimationFrame(...)` / `cancelAnimationFrame(...)` may only be used inside shared runtime primitives.',
+    pattern: /\b(?:window\.)?(?:requestAnimationFrame|cancelAnimationFrame)\s*\(/,
+    appliesTo: (rel) =>
+      rel.startsWith('src/') && /\.(ts|tsx|mjs|js|jsx)$/.test(rel),
+    exempt: (rel) =>
+      rel.startsWith('src/lib/animation/') ||
+      rel.startsWith('src/lib/visual-runtime/') ||
+      rel.includes('__tests__') ||
+      rel === 'src/app/[locale]/halftone/_lib/exporters.ts' ||
+      rel.endsWith('.d.ts'),
+    help: [
+      'Use `createAnimationFrameLoop` from `@/lib/animation` for one-shot',
+      'or UI frame scheduling. Use `createVisualRenderLoop` from',
+      '`@/lib/visual-runtime` for canvas/WebGL renderers so tab visibility,',
+      'element visibility, cleanup, and render failures are handled consistently.',
+    ].join('\n      '),
+  },
 ];
 
 const SKIP_DIRS = new Set([

packages/twenty-website-new/src/app/[locale]/(home)/page.tsx

@@ -11,7 +11,6 @@ import { MENU_DATA } from '@/sections/Menu/data';
 import { TRUSTED_BY_DATA } from '@/sections/TrustedBy/data';
 import { Body, Eyebrow, Heading, LinkButton } from '@/design-system/components';
 import { Pages } from '@/lib/pages';
-import { ArrowRightUpIcon } from '@/icons';
 import { fetchCommunityStats } from '@/lib/community/fetch-community-stats';
 import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels';
 import { Faq } from '@/sections/Faq/components';
@@ -22,23 +21,15 @@ import { Menu } from '@/sections/Menu/components';
 import { Problem } from '@/sections/Problem/components';
 import { Testimonials } from '@/sections/Testimonials/components';
 import { ThreeCards } from '@/sections/ThreeCards/components';
-import { buildLocalizedMetadata } from '@/lib/seo';
+import { buildRouteMetadata } from '@/lib/seo';
 import { TrustedBy } from '@/sections/TrustedBy/components';
 import { theme } from '@/theme';
 import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 
-export const generateMetadata = buildLocalizedMetadata({
-  path: '/',
-  title: 'Twenty | #1 open source CRM',
-  description:
-    'The #1 open source CRM for modern teams. Modular, scalable, and built to fit your business.',
-});
+export const generateMetadata = buildRouteMetadata('home');
 
 const HOME_TOP_BACKGROUND_COLOR = '#F4F4F4';
-const PRODUCT_HUNT_LAUNCH_URL =
-  'https://www.producthunt.com/products/twenty-crm?launch=twenty-2-0';
-const PRODUCT_HUNT_BRAND_COLOR = '#DA552F';
 
 const HeroHeadingGroup = styled.div`
   align-items: center;
@@ -52,58 +43,6 @@ const HeroHeadingGroup = styled.div`
   }
 `;
 
-const HeroLaunchChip = styled.a`
-  align-items: center;
-  background: ${theme.colors.primary.background[100]};
-  border: 1px solid ${theme.colors.primary.border[10]};
-  border-radius: 999px;
-  color: ${theme.colors.primary.text[100]};
-  display: inline-flex;
-  font-family: ${theme.font.family.mono};
-  font-size: ${theme.font.size(2.5)};
-  font-weight: ${theme.font.weight.medium};
-  gap: ${theme.spacing(2)};
-  line-height: ${theme.lineHeight(3)};
-  padding: ${theme.spacing(2)} ${theme.spacing(3)};
-  text-decoration: none;
-  text-transform: uppercase;
-  transition:
-    border-color 180ms ease,
-    color 180ms ease,
-    transform 180ms ease;
-  white-space: nowrap;
-
-  &:is(:hover, :focus-visible) {
-    border-color: ${PRODUCT_HUNT_BRAND_COLOR};
-    color: ${PRODUCT_HUNT_BRAND_COLOR};
-    transform: translateY(-1px);
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${theme.colors.highlight[100]};
-    outline-offset: 2px;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-
-const HeroLaunchChipDot = styled.span`
-  background: ${PRODUCT_HUNT_BRAND_COLOR};
-  border-radius: 999px;
-  display: block;
-  flex-shrink: 0;
-  height: ${theme.spacing(2)};
-  width: ${theme.spacing(2)};
-`;
-
-const HeroLaunchChipLabel = styled.span`
-  align-items: center;
-  display: inline-flex;
-  gap: ${theme.spacing(1.5)};
-`;
-
 const HeroIntroGroup = styled.div`
   align-items: center;
   display: flex;
@@ -177,17 +116,6 @@ export default async function HomePage() {
       <Hero.Root backgroundColor={HOME_TOP_BACKGROUND_COLOR} showHomeBackground>
         <HeroIntroGroup data-halftone-exclude>
           <HeroHeadingGroup>
-            <HeroLaunchChip
-              href={PRODUCT_HUNT_LAUNCH_URL}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <HeroLaunchChipDot />
-              <HeroLaunchChipLabel>
-                Live on Product Hunt
-                <ArrowRightUpIcon size={8} strokeColor="currentColor" />
-              </HeroLaunchChipLabel>
-            </HeroLaunchChip>
             <Hero.Heading page={Pages.Home} segments={HERO_DATA.heading} />
             <Hero.Body page={Pages.Home} body={HERO_DATA.body} size="sm" />
           </HeroHeadingGroup>

packages/twenty-website-new/src/app/[locale]/customers/page.tsx

@@ -14,15 +14,10 @@ import { Menu } from '@/sections/Menu/components';
 import { Signoff } from '@/sections/Signoff/components';
 import { TrustedBy } from '@/sections/TrustedBy/components';
 import { theme } from '@/theme';
-import { buildLocalizedMetadata } from '@/lib/seo';
+import { buildRouteMetadata } from '@/lib/seo';
 import { css } from '@linaria/core';
 
-export const generateMetadata = buildLocalizedMetadata({
-  path: '/customers',
-  title: 'Customers | Twenty',
-  description:
-    'Meet the teams running their business on Twenty. Real customer stories on how they shaped the CRM to fit their workflow.',
-});
+export const generateMetadata = buildRouteMetadata('customers');
 
 const HERO_HEADING = [
   { text: 'See how teams ', fontFamily: 'serif' as const },

packages/twenty-website-new/src/app/[locale]/enterprise/activate/EnterpriseActivateClient.tsx

@@ -5,6 +5,7 @@ import {
   buttonBaseStyles,
 } from '@/design-system/components/Button/BaseButton';
 import { Body, Heading } from '@/design-system/components';
+import { useTimeoutRegistry } from '@/lib/react';
 import { theme } from '@/theme';
 import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
@@ -133,6 +134,7 @@ const nextStepItemClassName = css`
 export function EnterpriseActivateClient() {
   const searchParams = useSearchParams();
   const sessionId = searchParams.get('session_id');
+  const timeoutRegistry = useTimeoutRegistry();
   const [result, setResult] = useState<ActivationResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
@@ -146,14 +148,21 @@ export function EnterpriseActivateClient() {
       return;
     }
 
+    const abortController = new AbortController();
+
     const activate = async () => {
       try {
         const response = await fetch(
           `/api/enterprise/activate?session_id=${encodeURIComponent(sessionId)}`,
+          { signal: abortController.signal },
         );
         const data: { error?: string } & Partial<ActivationResult> =
           await response.json();
 
+        if (abortController.signal.aborted) {
+          return;
+        }
+
         if (!response.ok) {
           setError(data.error ?? 'Activation failed');
 
@@ -170,13 +179,23 @@ export function EnterpriseActivateClient() {
           setError('Activation response was incomplete.');
         }
       } catch {
+        if (abortController.signal.aborted) {
+          return;
+        }
+
         setError('Failed to activate enterprise key. Please try again.');
       } finally {
-        setLoading(false);
+        if (!abortController.signal.aborted) {
+          setLoading(false);
+        }
       }
     };
 
     void activate();
+
+    return () => {
+      abortController.abort();
+    };
   }, [sessionId]);
 
   const handleCopy = async () => {
@@ -186,7 +205,7 @@ export function EnterpriseActivateClient() {
 
     await navigator.clipboard.writeText(result.enterpriseKey);
     setCopied(true);
-    setTimeout(() => {
+    timeoutRegistry.schedule(() => {
       setCopied(false);
     }, 2000);
   };

packages/twenty-website-new/src/app/[locale]/enterprise/activate/page.tsx

@@ -8,16 +8,11 @@ import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'
 import { Hero } from '@/sections/Hero/components';
 import { Menu } from '@/sections/Menu/components';
 import { theme } from '@/theme';
-import { buildLocalizedMetadata } from '@/lib/seo';
+import { buildRouteMetadata } from '@/lib/seo';
 import { Suspense } from 'react';
 import { styled } from '@linaria/react';
 
-export const generateMetadata = buildLocalizedMetadata({
-  path: '/enterprise/activate',
-  title: 'Enterprise activation | Twenty',
-  description:
-    'Complete activation for your Twenty self-hosted enterprise license.',
-});
+export const generateMetadata = buildRouteMetadata('enterpriseActivate');
 
 const ENTERPRISE_ACTIVATE_HEADING: HeadingType[] = [
   { text: 'Enterprise ', fontFamily: 'serif' },