mirror of https://github.com/twentyhq/twenty.git synced 2026-06-11 01:16:55 -04:00

Files

Rashad Karanouh 7e034f711f feat(website): surface partner Categories (partnerScope) in marketplace, drop deploymentExpertise facet (#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 #21126.
- The new `partnerScope` options + data migration — signup app PR
#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
(#21039 / #21040) and the app PR (#21126). Run `lingui:extract` once
after #21039 merges so the `.po` files don't conflict twice. Deploy the
app + migrate before the website ships.

2026-06-02 10:32:54 +00:00

5.3 KiB

Raw Permalink Blame History

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:

Communicate credibility (real firm, real person, real work).
Surface fit signals fast (skills, region, languages, deployment expertise, budget range).
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

Typography carries the design. The brand has a serif/sans/mono trio. Hierarchy is set by scale + weight contrast, not by color or borders.
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.
Whitespace is a feature. Tight cards feel cheap. Pages should breathe.
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.
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/).

5.3 KiB Raw Permalink Blame History Unescape Escape