diff --git a/packages/twenty-website-new/src/app/pricing/_constants/engagement-band.ts b/packages/twenty-website-new/src/app/pricing/_constants/engagement-band.ts index 0dd078380b..82016d4577 100644 --- a/packages/twenty-website-new/src/app/pricing/_constants/engagement-band.ts +++ b/packages/twenty-website-new/src/app/pricing/_constants/engagement-band.ts @@ -2,10 +2,10 @@ import type { EngagementBandDataType } from '@/sections/EngagementBand/types'; export const ENGAGEMENT_BAND_DATA: EngagementBandDataType = { heading: { - text: 'Want a tailored made plan?', + text: 'Want a tailor-made plan?', fontFamily: 'serif', }, body: { - text: 'Help customers implement, customize,and succeed with Twenty. Combine sales and services to grow your business.', + text: 'Help customers implement, customize, and succeed with Twenty. Combine sales and services to grow your business.', }, }; diff --git a/packages/twenty-website-new/src/app/pricing/_constants/plans.ts b/packages/twenty-website-new/src/app/pricing/_constants/plans.ts index 5861e678ac..f1b4716307 100644 --- a/packages/twenty-website-new/src/app/pricing/_constants/plans.ts +++ b/packages/twenty-website-new/src/app/pricing/_constants/plans.ts @@ -5,7 +5,7 @@ const ORGANIZATION_HEADING = { }; const PRO_FEATURES_TITLE = { text: 'Key Features' }; -const ORGANIZATION_FEATURES_TITLE = { text: 'everything in pro +' }; +const ORGANIZATION_FEATURES_TITLE = { text: 'Everything in Pro +' }; const PRO_BULLETS_DEFAULT = [ { text: 'Full customisation' }, diff --git a/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx index 79f5d07f93..3466e2d710 100644 --- a/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx @@ -1,4 +1,5 @@ import { Heading as BaseHeading } from '@/design-system/components'; +import type { HeadingSize } from '@/design-system/components/Heading/Heading'; import type { HeadingType } from '@/design-system/components/Heading/types/Heading'; import { theme } from '@/theme'; import { styled } from '@linaria/react'; @@ -13,8 +14,9 @@ const StyledHeading = styled(BaseHeading)` type HeadingProps = { segments: HeadingType; + size?: HeadingSize; }; -export function Heading({ segments }: HeadingProps) { - return ; +export function Heading({ segments, size = 'sm' }: HeadingProps) { + return ; } 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 7d5eaf2b49..495c0d6928 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 @@ -12,7 +12,7 @@ const FIXED_ROWS = 4; const StyledCard = styled.div` background-color: ${theme.colors.primary.background[100]}; border: 1px solid transparent; - border-radius: ${theme.radius(1)}; + border-radius: ${theme.radius(2)}; display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; @@ -93,6 +93,15 @@ const CardRule = styled.div` width: 100%; `; +const CtaWrapper = styled.div` + width: 100%; + + > * { + display: flex; + width: 100%; + } +`; + const FeaturesList = styled.ul` display: grid; grid-template-columns: 1fr; @@ -152,13 +161,15 @@ export function Card({ card, highlighted = false, maxBullets }: CardProps) { - + + + diff --git a/packages/twenty-website-new/src/sections/Plans/components/Root/Root.tsx b/packages/twenty-website-new/src/sections/Plans/components/Root/Root.tsx index ae51710fe5..d5fa7174f3 100644 --- a/packages/twenty-website-new/src/sections/Plans/components/Root/Root.tsx +++ b/packages/twenty-website-new/src/sections/Plans/components/Root/Root.tsx @@ -11,14 +11,14 @@ const StyledContainer = styled(Container)` display: grid; grid-template-columns: 1fr; justify-items: center; - padding-bottom: ${theme.spacing(12)}; + padding-bottom: 0; padding-left: ${theme.spacing(4)}; padding-right: ${theme.spacing(4)}; padding-top: ${theme.spacing(12)}; row-gap: ${theme.spacing(8)}; @media (min-width: ${theme.breakpoints.md}px) { - padding-bottom: ${theme.spacing(20)}; + padding-bottom: 0; padding-left: ${theme.spacing(10)}; padding-right: ${theme.spacing(10)}; padding-top: ${theme.spacing(20)};