small fixes on pricing (#19603)

## Summary
- update pricing card styling to use a 4px border radius
- make pricing card CTAs fill the available card width
- reduce spacing below the pricing cards section
- fix pricing copy casing and punctuation, including the tailor-made
plan banner
- make engagement band headings support a configurable size and default
them to the smaller variant

## Testing
- Not run (not requested)

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.',
   },
 };

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' },

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 <StyledHeading segments={segments} size="md" weight="light" />;
+export function Heading({ segments, size = 'sm' }: HeadingProps) {
+  return <StyledHeading segments={segments} size={size} weight="light" />;
 }

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) {
         </CardIllustrationEmbed>
       </CardHeader>
 
-      <LinkButton
-        color="secondary"
-        href="https://app.twenty.com/welcome"
-        label="Start for free"
-        type="anchor"
-        variant={highlighted ? 'contained' : 'outlined'}
-      />
+      <CtaWrapper>
+        <LinkButton
+          color="secondary"
+          href="https://app.twenty.com/welcome"
+          label="Start for free"
+          type="anchor"
+          variant={highlighted ? 'contained' : 'outlined'}
+        />
+      </CtaWrapper>
 
       <CardRule />
 

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)};