[Website] i18n module, page-local sections, translatable copy (#21082)

**i18n** — collapsed the ~22 scattered i18n files into a single module
and turned on Spanish alongside French.

**Sections** — dropped the old compound pattern (`Section.Root`,
`Section.Heading`, …). Reusable layout shells moved to `src/templates/`,
atomic bits stay in `design-system/`, and each page now owns its copy in
local `_components` blocks instead of pulling it out of shared sections.
Data files hold arrays only, no prose.

**Copy → `<Trans>`** — A lot of headings were split across several
`<HeadingPart>`s just for font styling, which meant each piece was a
separate translation string. A translator got "Build your Enterprise
CRM" and "at AI Speed" as two unrelated strings and had no way to
reorder them for their language. Those are now single `<Trans>` units
with placeholders. Same idea for the old `\n` + `white-space: pre-line`
line-break trick: replaced with a small `ResponsiveLineBreak` element so
the break is doesn't quietly rot, and did a dead-code pass.

The de-fragmentation changes the message IDs, so around 60 strings will
fall back to English in fr/es until Crowdin re-syncs.

packages/twenty-website/src/sections/Problem/Problem.tsx

@@ -8,8 +8,8 @@ import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import type { ReactNode } from 'react';
 
-import { Points } from './ProblemPoints';
-import { Visual } from './components/Visual/Visual';
+export { Visual as ProblemVisual } from './components/Visual/Visual';
+export { Points as ProblemPoints } from './ProblemPoints';
 
 const StyledSection = styled.section`
   width: 100%;
@@ -57,9 +57,7 @@ const problemHeadingClassName = css`
   }
 `;
 
-type RootProps = { children: ReactNode };
-
-function Root({ children }: RootProps) {
+export function ProblemSection({ children }: { children: ReactNode }) {
   return (
     <StyledSection>
       <StyledContainer>{children}</StyledContainer>
@@ -67,13 +65,11 @@ function Root({ children }: RootProps) {
   );
 }
 
-type ContentProps = { children: ReactNode };
-
-function Content({ children }: ContentProps) {
+export function ProblemContent({ children }: { children: ReactNode }) {
   return <StyledContent>{children}</StyledContent>;
 }
 
-function Heading({
+export function ProblemHeading({
   as = 'h2',
   children,
   className,
@@ -91,11 +87,3 @@ function Heading({
     </BaseHeading>
   );
 }
-
-export const Problem = {
-  Root,
-  Visual,
-  Content,
-  Heading,
-  Points,
-};

packages/twenty-website/src/sections/Problem/ProblemPoints.tsx

@@ -1,5 +1,5 @@
 import { Body } from '@/design-system/components/Body';
-import { getServerI18n } from '@/lib/i18n/utils/get-server-i18n';
+import { getServerI18n } from '@/lib/i18n/server';
 import { theme } from '@/theme';
 import { styled } from '@linaria/react';
 import React from 'react';

packages/twenty-website/src/sections/Problem/index.ts

@@ -1,2 +1,8 @@
-export { Problem } from './Problem';
+export {
+  ProblemContent,
+  ProblemHeading,
+  ProblemPoints,
+  ProblemSection,
+  ProblemVisual,
+} from './Problem';
 export type { ProblemPointType } from './problem-point-type';