From d58ec64e10b407ceef012b581e6100f73da6928c Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Fri, 26 Jun 2026 21:45:39 +0500
Subject: [PATCH] feat(website): swap product Demo for a register Signoff; make
signoff headings width-driven (#22232)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Summary
Reworks the product page's closing section, and in doing so makes every
signoff closer width-driven.
### 1. Replace the Demo section with a register Signoff (`6a5f0c34bf`)
The product page ended on a static `AppPreview` mockup ("Try it live").
Swap it for the shared `Signoff` closer — a focused register CTA, the
same component the customers / why-twenty / partners pages use — so the
page ends by driving sign-ups instead of re-showing the product.
- New `ProductSignoff`: heading "Start moving faster today.", a
supporting line, and the **Get started + Talk to us** pair (matching
`CustomersCatalogSignoff`). Uses `SITE_URLS.appWelcome` per the
site-urls rule rather than inlining the URL.
- Removes the now-unused `product-demo` section and its 192KB background
asset.
### 2. Make Signoff headings width-driven (`0365c0d2ea`)
The signoff headings forced their two-line break with a literal `\n` in
the translated string — against the site's typography principle (fluid
type + `text-wrap: balance`, no `
`).
- `Signoff` now carries one default **`615px`** heading measure; all
five closers drop `\n`.
- The width was **measured, not guessed**: each heading was rendered
headlessly in the real production fonts (Aleo 300 body, Host Grotesk 300
accent — each heading mixes both) at the desktop size with `text-wrap:
balance`, then I found the common window where every heading breaks
identically: whyTwenty `[565–820]`, customers `[425–800]`, partner
`[380–730]`, product `[380–660]` — `615` sits in all of them. Each was
then verified to reproduce its exact current break at 615px.
- **Affects 4 other pages** (why-twenty, customers, customers/[slug],
partners) — all verified to render identically, and headings now reflow
on narrow viewports instead of being pinned by `\n`.
- Drops the one-off `headingMaxWidth` prop (now unused).
## Test plan
- oxfmt, oxlint, check-conventions, typecheck — all green.
- Headless measurement confirms all five signoff headings reproduce
their current desktop break at 615px (no visual regression).
- Visually confirmed the product closer and the four sibling signoffs.
---
.../images/product/demo/background.webp | Bin 192968 -> 0 bytes
.../src/app/[locale]/(site)/product/page.tsx | 4 +-
.../CustomersCaseStudySignoff.tsx | 2 +-
.../CustomersCatalogSignoff.tsx | 2 +-
.../partner-signoff/PartnerSignoff.tsx | 2 +-
.../src/sections/product-demo/ProductDemo.tsx | 108 ------------------
.../src/sections/product-demo/index.ts | 1 -
.../product-signoff/ProductSignoff.tsx | 21 ++++
.../src/sections/product-signoff/index.ts | 1 +
.../why-twenty-signoff/WhyTwentySignoff.tsx | 2 +-
packages/twenty-website/src/ui/Signoff.tsx | 13 ++-
11 files changed, 38 insertions(+), 118 deletions(-)
delete mode 100644 packages/twenty-website/public/images/product/demo/background.webp
delete mode 100644 packages/twenty-website/src/sections/product-demo/ProductDemo.tsx
delete mode 100644 packages/twenty-website/src/sections/product-demo/index.ts
create mode 100644 packages/twenty-website/src/sections/product-signoff/ProductSignoff.tsx
create mode 100644 packages/twenty-website/src/sections/product-signoff/index.ts
diff --git a/packages/twenty-website/public/images/product/demo/background.webp b/packages/twenty-website/public/images/product/demo/background.webp
deleted file mode 100644
index 30e570a1c99af13ced93f05637e6fed2ccc63e81..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 192968
zcmeFYg;!kPvhRx%+}&Lphv4oS+=9CYcMl#UI0R|j-5r8UpmBG12(Eqk?epHfd!IAj
zKk(igqk4?hGP~EBy=u;?Z+%KlPFlM68VW*NO8kq~7hWAi2nY!DkH;oD1l=bHF~u*k
zM=FpIkYGA$*(
}0)x|O6N#9d&fp&yd|E9Sk2t71{)
zf~RijS|A?6f(X?WpXm1;zeL71<)F`J#>E2VkyYiQUyBJxm5LBPv56Y!WLHObQC$Ba
z6eVK8km$0I0sMe)K
z2O!1b49=Am3eRjAPTa|Q$L$f}3q1M~MFqmc$i*Yaltb@rq=?C=XFZI_$w>1H(30tO
zN)qP>yOaOYWmiIXYUdTK*524iIUjgjqkm|dpz;qsJRX)$4hsul%t7URgFVI;|2P*#Q)ZQ3h)QU;id
zuh8W0_T4u^WXwHt`;}^KyBHXDPX#H6;Rk0RuZT(}}EAaw8&Vuf!Kd^tJZl<(zF)m@WUlVV%udEgTg
zi3JE;*A@!q?n#7xa6jGC?dPO+c3&qLN}pYcm))o5B6qnnV1r!}S^
xJbE0vtLj%ts3M9^D?1$2?M@kL5a%6n6_h;CO5A)Zg$wldbgbyX{rD=HMEML
zSA>KD&L4b3LKpqcqk=HAEVB_(X;-0R8-;ZyNsMhtF(%%8?b@Oe$6HT)uh~~`{fEYQ
zkNes))Zo}`u9NuStnd8X=34u#v0%&Y=UO}VrLmsnwFUP&b9OMZr}1EC?HC9ShdF
zmBWPKtRIZtXN<+Zd-F8NWGV!s-8jzBqY4XQ;Ur%N230EPWM!bTJX+zS{9ed09P~P~
zyLONgz@02n$wv&LI%gM0kwTZQRM9&kyZ_0udIxh9R#9qi-pY{dZY5r?uRbaxH<|S3
zZBjXvZRxw{;HhzYX2iDE18f}_pVU`mQ{;2L`f>f%5U~Yk)%vojZp*l0)N&_CX1YM8
z!DPt8q`>9JOdgJ)u!f#d>NV
a*PC3BhC?_|YjLV~9ZQSXRcoLyJ65!h+~Ue!TtMF$pIN_(jpI6K
zMCS3(QEM1N8z@E@eq=VtIrsce49