fix pricing at home page

apps/homepage/src/components/homepage/sections/PricingSection.module.css

@@ -14,14 +14,15 @@
   margin-inline: auto;
 }
 
+.pricingContainer {
+  inline-size: min(100%, 104rem);
+}
+
 .controls {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.5fr);
   gap: var(--space-5);
-  position: relative;
-  left: 50%;
-  inline-size: min(100vw - (var(--layout-gutter) * 2), 104rem);
-  transform: translateX(-50%);
+  inline-size: 100%;
   padding: var(--space-5);
   border: 1px solid var(--border-standard);
   border-radius: var(--radius-lg);
@@ -111,12 +112,9 @@
 
 .planGrid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: stretch;
-  position: relative;
-  left: 50%;
-  inline-size: min(100vw - (var(--layout-gutter) * 2), 104rem);
-  transform: translateX(-50%);
+  inline-size: 100%;
   gap: var(--space-5);
 }
 

apps/homepage/src/components/homepage/sections/PricingSection.tsx

@@ -33,7 +33,6 @@ interface PricingSectionProps {
 const accountSubscriptionPlanByPricingPlan: Record<Exclude<PricingPlanId, 'enterprise'>, AccountSubscriptionPlan> = {
   launch: 'STARTER',
   growth: 'GROWTH',
-  pro: 'PRO',
 };
 
 function analyticsContext(
@@ -105,7 +104,7 @@ export function PricingSection({
 
   return (
     <Section id="pricing" className={styles.section} aria-label={content.title}>
-      <Container>
+      <Container className={styles.pricingContainer}>
         <Stack gap="large">
           <SectionHeader
             className={styles.header ?? ''}

apps/homepage/src/content/locales/ar/homepage.json

@@ -200,27 +200,12 @@
         ],
         "cta": "احجز عرضًا لباقة Growth"
       },
-      {
-        "id": "pro",
-        "name": "Pro",
-        "audience": "للأساطيل القائمة التي تحتاج إلى تحكم متقدم عبر عمليات أكبر.",
-        "features": [
-          "كل ما تتضمنه Growth",
-          "حتى 150 مركبة نشطة",
-          "تقارير متقدمة",
-          "أدوار وصلاحيات الفريق",
-          "مسارات عمل ذات أولوية",
-          "وصول API",
-          "دعم مخصص"
-        ],
-        "cta": "احجز عرضًا لباقة Pro"
-      },
       {
         "id": "enterprise",
         "name": "مؤسسات",
         "audience": "للأساطيل الكبيرة والامتيازات والعمليات ذات احتياجات التكامل المعقدة.",
         "features": [
-          "كل ما تتضمنه Pro",
+          "كل ما تتضمنه Growth",
           "150+ مركبة نشطة",
           "تكاملات مخصصة ووصول إلى API",
           "أدوار وصلاحيات متقدمة",

apps/homepage/src/content/locales/en/homepage.json

@@ -212,27 +212,12 @@
         ],
         "cta": "Book a Growth demo"
       },
-      {
-        "id": "pro",
-        "name": "Pro",
-        "audience": "For established fleets that need advanced controls across larger operations.",
-        "features": [
-          "Everything in Growth",
-          "Up to 150 active vehicles",
-          "Advanced reports",
-          "Team roles and permissions",
-          "Priority workflows",
-          "API access",
-          "Dedicated support"
-        ],
-        "cta": "Book a Pro demo"
-      },
       {
         "id": "enterprise",
         "name": "Enterprise",
         "audience": "For large fleets, franchises, and operations with complex integration needs.",
         "features": [
-          "Everything in Pro",
+          "Everything in Growth",
           "150+ active vehicles",
           "Custom integrations and API access",
           "Advanced roles and permissions",

apps/homepage/src/content/locales/fr/homepage.json

@@ -231,27 +231,12 @@
         ],
         "cta": "Réserver une démo Growth"
       },
-      {
-        "id": "pro",
-        "name": "Pro",
-        "audience": "Pour les parcs établis qui ont besoin de contrôles avancés sur une exploitation plus large.",
-        "features": [
-          "Tout ce qui est inclus dans Growth",
-          "Jusqu’à 150 véhicules actifs",
-          "Rapports avancés",
-          "Rôles et autorisations d’équipe",
-          "Flux prioritaires",
-          "Accès API",
-          "Support dédié"
-        ],
-        "cta": "Réserver une démo Pro"
-      },
       {
         "id": "enterprise",
         "name": "Entreprise",
         "audience": "Pour les grands parcs, franchises et exploitations ayant des besoins d’intégration complexes.",
         "features": [
-          "Tout ce qui est inclus dans Pro",
+          "Tout ce qui est inclus dans Growth",
           "150+ véhicules actifs",
           "Intégrations personnalisées et accès API",
           "Rôles et autorisations avancés",

apps/homepage/src/content/pricing-config.ts

@@ -1,7 +1,7 @@
 export const fleetBandIds = ['small', 'growing', 'scale', 'enterprise'] as const;
 export type FleetBandId = (typeof fleetBandIds)[number];
 
-export const pricingPlanIds = ['launch', 'growth', 'pro', 'enterprise'] as const;
+export const pricingPlanIds = ['launch', 'growth', 'enterprise'] as const;
 export type PricingPlanId = (typeof pricingPlanIds)[number];
 
 export type BillingPeriod = 'monthly' | 'annual';
@@ -35,12 +35,6 @@ export const pricingCommercialConfig: PricingCommercialConfig = {
       scale: 299,
       enterprise: 299,
     },
-    pro: {
-      small: 399,
-      growing: 399,
-      scale: 399,
-      enterprise: 399,
-    },
     enterprise: {
       small: null,
       growing: null,
@@ -51,7 +45,7 @@ export const pricingCommercialConfig: PricingCommercialConfig = {
   recommendedPlanByFleetBand: {
     small: 'launch',
     growing: 'growth',
-    scale: 'pro',
+    scale: 'growth',
     enterprise: 'enterprise',
   },
 };

apps/homepage/src/lib/analytics/events.ts

@@ -45,7 +45,7 @@ export const analyticsContextSchema = z
     reason: safeText.optional(),
     fleetBand: z.enum(['small', 'growing', 'scale', 'enterprise']).optional(),
     billingPeriod: z.enum(['monthly', 'annual']).optional(),
-    plan: z.enum(['launch', 'growth', 'pro', 'enterprise']).optional(),
+    plan: z.enum(['launch', 'growth', 'enterprise']).optional(),
   })
   .strict();
 

apps/homepage/tests/browser/homepage.spec.ts

@@ -63,7 +63,7 @@ test('pricing recommends a plan from the selected fleet band', async ({ page })
     'true',
   );
   await page.getByLabel('76–150 vehicles').check();
-  await expect(page.locator('#pricing [data-plan="pro"]')).toHaveAttribute(
+  await expect(page.locator('#pricing [data-plan="growth"]')).toHaveAttribute(
     'data-recommended',
     'true',
   );

apps/homepage/tests/unit/homepage-content.test.ts

@@ -22,7 +22,7 @@ describe('homepage content model', () => {
     expect(content.modules.items).toHaveLength(6);
     expect(content.faq.items).toHaveLength(6);
     expect(content.pricing.fleetBands).toHaveLength(4);
-    expect(content.pricing.plans).toHaveLength(4);
+    expect(content.pricing.plans).toHaveLength(3);
     expect(content.hero.preview.rows).toHaveLength(2);
   });
 

apps/homepage/tests/unit/pricing-section.test.tsx

@@ -39,11 +39,11 @@ describe('PricingSection', () => {
 
     await user.click(screen.getByLabelText('76–150 vehicles'));
 
-    expect(container.querySelector('[data-plan="pro"]')).toHaveAttribute(
+    expect(container.querySelector('[data-plan="growth"]')).toHaveAttribute(
       'data-recommended',
       'true',
     );
-    expect(container.querySelector('[data-plan="growth"]')).not.toHaveAttribute('data-recommended');
+    expect(container.querySelector('[data-plan="launch"]')).not.toHaveAttribute('data-recommended');
   });
 
   it('renders approved public prices except for Enterprise custom pricing', async () => {
@@ -62,15 +62,14 @@ describe('PricingSection', () => {
     expect(screen.queryByText('Starting price pending approval')).not.toBeInTheDocument();
     expect(screen.getByText(/149/)).toBeInTheDocument();
     expect(screen.getByText(/299/)).toBeInTheDocument();
-    expect(screen.getByText(/399/)).toBeInTheDocument();
     expect(screen.getByText('Custom pricing')).toBeInTheDocument();
 
     await user.click(screen.getByLabelText(/Annual/));
 
     expect(screen.getByText(/Save 20%/)).toBeInTheDocument();
     expect(screen.getByText(/1,430/)).toBeInTheDocument();
-    expect(screen.getAllByText('/ year')).toHaveLength(3);
-    expect(screen.getAllByText('billed annually after full-payment discount')).toHaveLength(3);
+    expect(screen.getAllByText('/ year')).toHaveLength(2);
+    expect(screen.getAllByText('billed annually after full-payment discount')).toHaveLength(2);
   });
 
   it('links self-serve plan CTAs to account creation and opens a pricing form for Enterprise', () => {
@@ -93,10 +92,6 @@ describe('PricingSection', () => {
       'href',
       '/dashboard/sign-up?lang=en&theme=dark&plan=GROWTH',
     );
-    expect(screen.getByRole('link', { name: 'Book a Pro demo' })).toHaveAttribute(
-      'href',
-      '/dashboard/sign-up?lang=en&theme=dark&plan=PRO',
-    );
     expect(screen.getByRole('button', { name: 'Talk to sales' })).toHaveAttribute(
       'data-demo-source',
       'pricing',

apps/homepage/tests/unit/pricing.test.ts

@@ -11,8 +11,8 @@ describe('homepage pricing configuration', () => {
     expect(pricingCommercialConfig.annualDiscountPercent).toBe(20);
     expect(pricingCommercialConfig.monthlyPrices.launch.small).toBe(149);
     expect(pricingCommercialConfig.monthlyPrices.growth.growing).toBe(299);
-    expect(pricingCommercialConfig.monthlyPrices.pro.scale).toBe(399);
     expect(pricingCommercialConfig.monthlyPrices.enterprise.enterprise).toBeNull();
+    expect(pricingCommercialConfig.recommendedPlanByFleetBand.scale).toBe('growth');
   });
 
   it('maps every fleet band and plan from localized content', () => {
@@ -24,6 +24,6 @@ describe('homepage pricing configuration', () => {
       'scale',
       'enterprise',
     ]);
-    expect(pricing.plans.map((plan) => plan.id)).toEqual(['launch', 'growth', 'pro', 'enterprise']);
+    expect(pricing.plans.map((plan) => plan.id)).toEqual(['launch', 'growth', 'enterprise']);
   });
 });