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) { - + - +