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