feat(website): surface partner Categories (partnerScope) in marketplace, drop deploymentExpertise facet (twentyhq#21127)

## What

Rebinds the marketplace's expertise facet from `deploymentExpertise`
(Cloud / Self-host) to **`partnerScope`** — the five partner Categories:
Advisory & Discovery · Solutioning · Custom Development · Hosting &
Infrastructure · Training & Adoption.

Moves the card chip, the profile facts row, the dropdown filter, the
`?categories=` URL param, and the API-boundary normalization onto
`partnerScope`. The standalone Cloud/Self-host facet is **dropped**
(hosting is now the `HOSTING` category), per the harmonization decision.

## Depends on

- The app exposing `partnerScope` — companion app PR twentyhq#21126.
- The new `partnerScope` options + data migration — signup app PR
twentyhq#21040.

## Tests

TDD red→green on: `filter-partners`, both API normalizers,
`filter-url-helpers`, `PartnerCard`, `use-filter-state`. 53/53 pass;
typecheck + lint + format clean.

## Merge order (we'll decide)

Independent diff. Suggested last of the four, after the signup PRs
(twentyhq#21039 / twentyhq#21040) and the app PR (twentyhq#21126). Run `lingui:extract` once
after twentyhq#21039 merges so the `.po` files don't conflict twice. Deploy the
app + migrate before the website ships.

Author: rashad

DESIGN.md

@@ -0,0 +1,159 @@
+# Twenty Website — DESIGN.md
+
+> Visual system for the Twenty marketing site. Distilled from `packages/twenty-website/src/theme/`. Loaded by every `impeccable` invocation alongside PRODUCT.md.
+
+## Theme
+
+**Light by default.** A founder browsing a partner profile in daylight on a 14–27 inch monitor is the default scene. The site does ship a `data-scheme="dark"` override (see `css-variables.ts`), but no current public page opts into it. Treat dark as a deferred surface.
+
+## Color
+
+Palette is OKLCH-equivalent neutrals at the surface level. The brand accents (blue, pink, yellow, green) are present in the token system but used sparingly — none of them appear on the partner pages.
+
+### Strategy: Restrained
+
+Tinted neutrals + one accent ≤10%. The accent for partner pages is the deep ink black (`var(--color-black-100)`) used in CTAs and hover states. Anything beyond a hairline border, an icon glyph, or a primary CTA should question whether it needs color at all.
+
+### Tokens (from `src/theme/colors.ts` + `css-variables.ts`)
+
+Neutrals (the workhorses):
+
+| Token | Hex (computed) | Role |
+| --- | --- | --- |
+| `colors.primary.background[100]` | `#ffffff` | Page + card surface |
+| `colors.primary.text[100]` | `#1c1c1c` | Headlines, primary text |
+| `colors.primary.text[80]` | `#1c1c1ccc` | Body text |
+| `colors.primary.text[60]` | `#1c1c1c99` | Eyebrows, meta, captions |
+| `colors.primary.text[40]` | `#1c1c1c66` | Disabled / placeholder |
+| `colors.primary.text[20]` | `#1c1c1c33` | Subtle separators |
+| `colors.primary.text[10]` | `#1c1c1c1a` | Hairline borders |
+| `colors.primary.text[5]` | `#1c1c1c0d` | Subtle fills (rates panel, skill chips) |
+| `colors.primary.border[10]` | `#1c1c1c1a` | Default border |
+| `colors.primary.border[20]` | `#1c1c1c33` | Hover border |
+
+Reverse palette (for dark CTAs):
+
+| Token | Role |
+| --- | --- |
+| `colors.secondary.background[100]` | Filled CTA background (deep ink) |
+| `colors.secondary.text[100]` | Filled CTA text (white) |
+
+Brand accents (currently absent from partner pages; available if needed):
+
+- `colors.accent.blue` — `#4a38f5` / `#8174f8`
+- `colors.accent.pink` — `#ed87fc` / `#f3abfd`
+- `colors.accent.yellow` — `#feffb7` / `#feffd9`
+- `colors.accent.green` — `#89fc9a` / `#b0fdbe`
+- `colors.highlight` — same hue as blue accent
+
+**Do not introduce gradients, glass blurs, or saturated fills on partner pages.** Color is conviction here, not decoration.
+
+## Typography
+
+Three families, each load-balanced via CSS variables:
+
+| Family | Var | Use |
+| --- | --- | --- |
+| `theme.font.family.serif` | `--font-serif` | Headlines, partner names, headline values |
+| `theme.font.family.sans` | `--font-sans` | Body, prose, interactive labels |
+| `theme.font.family.mono` | `--font-mono` | Eyebrows, meta, currency labels, tabular numerics |
+| `theme.font.family.retro` | `--font-retro` | Reserved (not used on partner pages) |
+
+### Weight + Size Contrast
+
+Weights: `light: 300`, `regular: 400`, `medium: 500`. No bold. Hierarchy is driven by scale and family contrast, never by weight alone.
+
+Scale (`theme.font.size(n)` → `calc(var(--font-base) * n)`, where `--font-base: 0.25rem` ≈ 4px):
+
+- Display / h1: size 9–12 (36–48px)
+- h2 / section heads: size 7–8 (28–32px)
+- h3 / card heads: size 5–6 (20–24px)
+- Body / prose: size 4–5 (16–20px)
+- Eyebrow / meta: size 3 (12px) with `letter-spacing: 0.06–0.08em` and `text-transform: uppercase`
+
+Body line length: cap at 65–75ch (the existing `PartnerProfileIntro` uses `max-width: 62ch` — keep that order of magnitude).
+
+### Hierarchy contract
+
+- A serif `<h1>` at size 9 light reads as a partner's name on the detail page.
+- A mono eyebrow above or below it locates the partner (region · city · country).
+- A serif size 6 light reads as a section head.
+- Body prose is sans regular.
+- Currency values are serif (they read as headline numbers, not stats).
+- Currency labels and meta are mono.
+
+## Spacing & Layout
+
+Base unit `4px`. Spacing helper `theme.spacing(n)` returns `n * 4px`. Common rhythms on the partner pages:
+
+- Inter-section gap on the detail page: `theme.spacing(10–14)` — generous, editorial breathing room.
+- Inter-element gap inside a section: `theme.spacing(3–5)`.
+- Card padding: `theme.spacing(6)`.
+- Page horizontal padding: `theme.spacing(4)` mobile, `theme.spacing(10)` ≥ md breakpoint.
+
+### Radius
+
+`theme.radius(n)` returns `n * 2px`. The default card radius is `theme.radius(2)` = 4px. Pills use `999px`. No softer rounding than that.
+
+### Borders
+
+Borders are hairline (`1px solid theme.colors.primary.border[10]`). They define edges quietly. On hover they step to `border[20]`. Never use a chunky border as decoration.
+
+## Components
+
+### Card (PartnerCard, RatesPanel)
+
+White surface, hairline border, 4px radius, 24px padding, soft shadow on hover only:
+
+```css
+background-color: ${theme.colors.primary.background[100]};
+border: 1px solid ${theme.colors.primary.border[10]};
+border-radius: ${theme.radius(2)};
+padding: ${theme.spacing(6)};
+
+&:hover {
+  border-color: ${theme.colors.primary.border[20]};
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.18);
+  transform: translateY(-2px);
+}
+```
+
+### Chip / Pill
+
+Rounded `999px`, 1px border, subtle background fill (`primary.text[5]` for filter pills, transparent for chip rows), `text[80]` color, mono or sans font.
+
+### Button / LinkButton
+
+Lives in `@/design-system/components`. Two color modes: `primary` (deep ink fill, white text) and `secondary` (transparent fill, ink text + 1px border). `variant="contained"` is what partner pages use.
+
+### Avatar
+
+`PartnerAvatar` is a deterministic generated mark from name + slug. Used as fallback when `profilePictureUrl` is missing. The real photo overlays it at 120px circle on the detail page, 56px on the list card.
+
+## Motion
+
+- Hover transitions: 250ms, ease-out (cubic-bezier curve in `PartnerCard`: `0.25s ease`).
+- Card entrance: 700ms cubic-bezier `0.22, 1, 0.36, 1` (ease-out-quart), 90ms stagger per index.
+- All motion respects `@media (prefers-reduced-motion: reduce)` — animations stop, hover translate disabled.
+- **No bounce, no elastic, no parallax.** Editorial restraint.
+
+## Iconography
+
+`@tabler/icons-react`, 14–16px on body-level chips, 18–24px on buttons. Always `aria-hidden="true"` when decorative. Stroke width `2` (default).
+
+## Accessibility Defaults
+
+- Focus ring: `outline: 2px solid theme.colors.primary.text[100]; outline-offset: 4px` (already used on the card link).
+- Touch target ≥ 40×40px on mobile.
+- `aria-label` on icon-only buttons, `aria-labelledby` on sectioned regions.
+- All `<a target="_blank">` includes `rel="noopener noreferrer"`.
+- Color is never the sole carrier of meaning. The money pills carry both an icon and a text label.
+
+## Anti-patterns (project-specific)
+
+In addition to the impeccable shared absolute bans:
+
+- **Do not use the brand accent colors (blue/pink/yellow/green) on partner pages** unless we have a stronger reason than "to add color".
+- **No skeuomorphic shadows on cards.** The hover shadow is `0 12px 32px -16px rgba(0,0,0,0.18)` — that's the ceiling.
+- **No gradients on anything.** Including text, borders, and backgrounds.
+- **No floating "Trusted by" logo bars** on partner pages.

PRODUCT.md

@@ -0,0 +1,80 @@
+# Twenty Website — Product & Brand Context
+
+> Strategic context for design work on the Twenty marketing site (`packages/twenty-website`). Loaded by every `impeccable` invocation.
+
+## Register
+
+**Brand.** The marketing site is a public-facing surface where the design itself is part of the credibility argument. Prospects evaluate Twenty partly by how the site feels. The product app (`packages/twenty-front`) is a separate product-register surface, governed elsewhere.
+
+## Users & Purpose
+
+The primary audience varies by route, but the working assumption for partner-related pages is:
+
+- **Who:** A budget-holding decision maker (founder, RevOps lead, or COO) shopping for a CRM implementation partner. Already on Twenty's site, evaluating a shortlist of partners.
+- **Context:** Doing a side-by-side comparison across 2–5 candidates over a single browsing session. Will spend 30–90 seconds on each profile before deciding whether to book a call.
+- **Decision being made:** "Is this partner credible, the right size, the right specialty, and within budget? Do I trust them enough to commit 30 minutes to a discovery call?"
+
+What the partner pages must do, in priority order:
+1. Communicate credibility (real firm, real person, real work).
+2. Surface fit signals fast (skills, region, languages, deployment expertise, budget range).
+3. Give the visitor a confident "next step" affordance (book a call or vet via LinkedIn) without pressure.
+
+## Desired Outcome
+
+The redesign should make `/partners/profile/[slug]` feel like a *thoughtfully curated profile of a top-tier partner*, not a generic templated card. A visitor should leave thinking "this firm is serious" even if they don't book a call this session.
+
+Specifically:
+- **Confidence over information density.** A short, well-typeset profile beats a packed-but-busy one.
+- **Editorial restraint.** White space, deliberate type hierarchy, and a few well-chosen details say more than dozens of small components.
+- **Quiet conviction.** No hype copy, no growth-hack patterns, no "Trusted by" logo strips. The partner's own work and intro speak for themselves.
+
+## Brand Personality
+
+**Editorial · Founder-led · Considered.**
+
+The site reads like a thoughtful indie publication, not a SaaS landing page. Serif headlines, plenty of whitespace, deliberate typographic rhythm. Quietly opinionated — Twenty has a point of view about CRM (open-source, customizable, well-designed) and the site reflects that without shouting.
+
+Tonal anchors:
+- Stripe's documentation for clarity, Linear's marketing for restraint, an editorial print magazine for typography choices.
+
+## Anti-references
+
+**Reject these patterns. They make the work read as generic AI / generic SaaS:**
+
+- **Generic SaaS landing.** Big-number heroes, identical icon-grid cards, gradient text, navy + lime accent color schemes, "supercharge your workflow" language.
+- **Corporate enterprise tone.** Stock photos of diverse handshakes. "Trusted by Fortune 500" logo strips as the primary credibility move. Trust-badge bars.
+- **Bento templates.** Repetitive same-size cards. Vercel-style scroll-pin animations on every section.
+- **Side-stripe borders, gradient text, glassmorphism, hero-metric templates, identical card grids** — see impeccable's shared absolute bans.
+
+## Strategic Design Principles
+
+1. **Typography carries the design.** The brand has a serif/sans/mono trio. Hierarchy is set by scale + weight contrast, not by color or borders.
+2. **Restrained palette.** Tinted neutrals (black/white via CSS variables, with alpha-tone variants for text and borders) carry 90%+ of the surface. Accent color used sparingly when it appears at all.
+3. **Whitespace is a feature.** Tight cards feel cheap. Pages should breathe.
+4. **Asymmetry over grid.** A 12-col bento is the wrong shape for a profile page. Use asymmetric two-column layouts where one column does heavy lifting.
+5. **One opinionated detail per page.** Each surface should have one moment of editorial conviction (a typographic flourish, a precise micro-interaction, a deliberate space) rather than five generic flourishes.
+
+## Accessibility
+
+**WCAG AA + keyboard + screen reader baseline:**
+
+- All interactive elements reachable by keyboard, focus visible (`outline: 2px solid`, not just color shift).
+- Semantic landmarks: `<header>`, `<main>`, `<nav>`, `<section aria-labelledby=…>`, headings in order.
+- All images with informational content have alt text. Decorative icons have `aria-hidden="true"`.
+- Body text ≥ 4.5:1 contrast; large text (≥18pt or 14pt bold) ≥ 3:1.
+- Respect `prefers-reduced-motion`. Animations stop, don't slow.
+- Forms have explicit labels. Errors are announced.
+
+## Tech & Constraints
+
+- Next.js 16 app router (Server Components by default, `'use client'` for interactivity).
+- Linaria styled-components (`@linaria/react`) for zero-runtime CSS-in-JS.
+- Lingui (`@lingui/react`) for i18n; never hardcode user-visible strings.
+- Theme tokens in `packages/twenty-website/src/theme/`. Colors are CSS variables resolved to OKLCH-tinted neutrals.
+- `@tabler/icons-react` for iconography (no Heroicons, no custom SVGs unless purposeful).
+- `@radix-ui/react-*` for primitives (Popover etc) where headless behavior is needed.
+
+## Out of Scope for This File
+
+- Detailed visual tokens (colors, type scale, motion specs) live in `DESIGN.md`.
+- Per-page IA decisions live in shape briefs (`docs/superpowers/specs/`).

packages/twenty-website/package.json

@@ -22,6 +22,7 @@
     "@lingui/core": "^5.1.2",
     "@lingui/react": "^5.1.2",
     "@lottiefiles/dotlottie-react": "^0.18.10",
+    "@radix-ui/react-popover": "^1.1.15",
     "@tabler/icons-react": "^3.41.1",
     "@wyw-in-js/babel-preset": "^0.8.1",
     "framer-motion": "^11.18.0",

packages/twenty-website/src/app/[locale]/partners/list/MarketplaceClient.tsx

@@ -34,14 +34,18 @@ const FilterBarInner = styled(Container)`
 
 type MarketplaceClientProps = {
   partners: readonly MarketplacePartner[];
+  locale: string;
 };
 
-export function MarketplaceClient({ partners }: MarketplaceClientProps) {
+export function MarketplaceClient({
+  partners,
+  locale,
+}: MarketplaceClientProps) {
   const {
     criteria,
     toggleRegion,
     toggleLanguage,
-    toggleDeployment,
+    toggleCategory,
     clearAll,
     hasAnyFilter,
   } = useFilterState();
@@ -62,15 +66,15 @@ export function MarketplaceClient({ partners }: MarketplaceClientProps) {
             hasAnyFilter={hasAnyFilter}
             onToggleRegion={toggleRegion}
             onToggleLanguage={toggleLanguage}
-            onToggleDeployment={toggleDeployment}
+            onToggleCategory={toggleCategory}
             onClearAll={clearAll}
           />
         </FilterBarInner>
       </FilterBarOuter>
       {filteredPartners.length === 0 ? (
         <EmptyState onClearFilters={clearAll} />
       ) : (
-        <MarketplaceGrid partners={filteredPartners} />
+        <MarketplaceGrid partners={filteredPartners} locale={locale} />
       )}
     </>
   );

packages/twenty-website/src/app/[locale]/partners/list/__tests__/PartnerCard.test.tsx

@@ -17,22 +17,33 @@ const FIXTURE: MarketplacePartner = {
   name: 'Test Partner',
   introduction: 'A reliable partner for testing purposes.',
   calendarLink: 'https://calendly.com/test-partner',
-  deploymentExpertise: ['CLOUD', 'SELF_HOST'],
+  partnerScope: ['HOSTING', 'DEVELOPMENT'],
   region: ['EUROPE', 'US'],
   languagesSpoken: ['ENGLISH', 'FRENCH'],
+  hourlyRateUsd: null,
+  projectBudgetMinUsd: null,
+  projectBudgetTypicalUsd: null,
+  linkedinUrl: '',
+  profilePictureUrl: '',
+  city: '',
+  country: '',
+  skills: [],
 };
 
 const renderCard = () =>
   renderToStaticMarkup(
     <I18nProvider i18n={i18n}>
-      <PartnerCard partner={FIXTURE} index={0} />
+      <PartnerCard partner={FIXTURE} index={0} locale="en" />
     </I18nProvider>,
   );
 
 describe('PartnerCard', () => {
-  it('renders the partner name as the article heading', () => {
+  it('renders the partner name inside the detail-page link in the heading', () => {
     const html = renderCard();
-    expect(html).toMatch(new RegExp(`<h3[^>]*>${FIXTURE.name}</h3>`, 'i'));
+    expect(html).toMatch(
+      new RegExp(`<h3[^>]*>\\s*<a[^>]*>${FIXTURE.name}</a>\\s*</h3>`, 'i'),
+    );
+    expect(html).toContain(`href="/en/partners/profile/${FIXTURE.slug}"`);
   });
 
   it('renders the geo eyebrow with the first served region', () => {
@@ -50,7 +61,7 @@ describe('PartnerCard', () => {
     const expectedChipCount =
       FIXTURE.region.length +
       FIXTURE.languagesSpoken.length +
-      FIXTURE.deploymentExpertise.length;
+      FIXTURE.partnerScope.length;
     const liMatches = html.match(/<li[^>]*>/g) ?? [];
     expect(liMatches.length).toBe(expectedChipCount);
   });
@@ -74,9 +85,10 @@ describe('PartnerCard', () => {
         <PartnerCard
           partner={{ ...FIXTURE, calendarLink: unsafeLink }}
           index={0}
+          locale="en"
         />
       </I18nProvider>,
     );
-    expect(html).not.toContain('href=');
+    expect(html).not.toContain(`href="${unsafeLink}"`);
   });
 });