From 91f8f7329a25663c633942ecf7e75fd0adec4916 Mon Sep 17 00:00:00 2001 From: Thomas des Francs Date: Tue, 7 Apr 2026 17:02:48 +0200 Subject: [PATCH] improve pricing card header [website] (#19385) ## Summary - Reduce the plan title size from `md` to `xs` - Switch the pricing card header layout from grid to flex for tighter title/price control - Tighten the title line-height and add a `black/60` color override for the `/month...` suffix - Add a 4px gap between the price amount and suffix - Reduce the illustration height to 80px and shift it slightly right on desktop ## Testing - Not run (not requested) Co-authored-by: Charles Bochet --- .../sections/Plans/components/Card/Card.tsx | 57 +++++++++++++++---- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx b/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx index 9c8e20bed4..09fd391637 100644 --- a/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx +++ b/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx @@ -4,6 +4,7 @@ import { Body, Heading, LinkButton } from '@/design-system/components'; import { CheckIcon } from '@/icons/informative/Check'; import type { PlanCardType } from '@/sections/Plans/types'; import { theme } from '@/theme'; +import { css } from '@linaria/core'; import { PlanCardVisual } from './PlanCardVisual'; @@ -27,27 +28,46 @@ const StyledCard = styled.div` `; const CardHeader = styled.div` - display: grid; - grid-template-columns: 1fr; - justify-content: space-between; - overflow: hidden; + display: flex; + flex-direction: column; + overflow: visible; @media (min-width: ${theme.breakpoints.md}px) { - grid-template-columns: 1fr auto; + align-items: flex-start; + flex-direction: row; + justify-content: space-between; } `; const CardHeaderInfo = styled.div` - display: grid; - grid-template-columns: 1fr; + display: flex; + flex: 1; + flex-direction: column; min-width: 0; overflow: hidden; - row-gap: ${theme.spacing(4)}; + gap: ${theme.spacing(4)}; +`; + +const cardPlanTitleClassName = css` + &[data-size='xs'] { + line-height: ${theme.lineHeight(5)}; + } + + @media (min-width: ${theme.breakpoints.md}px) { + &[data-size='xs'] { + line-height: ${theme.lineHeight(6)}; + } + } +`; + +const priceBodyClassName = css` + color: ${theme.colors.primary.text[60]}; `; const PriceLine = styled.div` align-items: baseline; display: flex; + gap: ${theme.spacing(1)}; white-space: nowrap; `; @@ -57,12 +77,14 @@ const CardIllustrationEmbed = styled.div` border-radius: ${theme.radius(2)}; display: block; flex-shrink: 0; - height: 112px; + height: 80px; overflow: hidden; width: 197px; @media (min-width: ${theme.breakpoints.md}px) { - justify-self: end; + display: block; + margin-left: auto; + transform: translateX(${theme.spacing(4)}); } `; @@ -104,7 +126,13 @@ export function Card({ card, highlighted = false, maxBullets }: CardProps) { - + - +