From 1b06532cb18450fc351b25c4884815090cc70db4 Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Thu, 2 Jul 2026 13:45:45 +0500
Subject: [PATCH] fix(website): tighten product-feature spotlight height and
 align bento spacing (#22428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Design polish on the product page's `ProductFeature` bento, from
designer review:

- **Spotlight height** — the first (spotlight) card's visual was
`min-height: 420px` on desktop vs the grid cards' `340px` (80px taller),
so it towered over the rest. Now **340px**, matching the grid cards.
- **Spacing consistency** — the spotlight visual used a uniform `margin`
(bottom margin included), unlike the other cards' `CardVisualFrame` (`…
0` bottom). Removed it so the visual→content gap is consistent across
every card.
- **Gap** — bumped the visual→content gap to `spacing(6)` (**24px**) on
desktop for all cards.

## Testing

- `nx lint twenty-website` ✓ (oxlint + oxfmt + check-conventions)
- `nx typecheck twenty-website` ✓
---
 .../src/sections/product-feature/components/TileContent.tsx | 4 ++--
 .../src/sections/product-feature/components/Tiles.tsx       | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-website/src/sections/product-feature/components/TileContent.tsx b/packages/twenty-website/src/sections/product-feature/components/TileContent.tsx
index 39ebb1688f..5b314c6cb3 100644
--- a/packages/twenty-website/src/sections/product-feature/components/TileContent.tsx
+++ b/packages/twenty-website/src/sections/product-feature/components/TileContent.tsx
@@ -24,7 +24,7 @@ const Content = styled.div`
   padding: ${spacing(4)} ${spacing(5)};
 
   ${mediaUp('md')} {
-    padding: ${spacing(5)} ${spacing(6)};
+    padding: ${spacing(6)} ${spacing(6)};
   }
 
   &[data-spotlight] {
@@ -33,7 +33,7 @@ const Content = styled.div`
 
     ${mediaUp('md')} {
       justify-content: center;
-      padding: ${spacing(8)} ${spacing(7)};
+      padding: ${spacing(6)} ${spacing(7)};
     }
   }
 `;
diff --git a/packages/twenty-website/src/sections/product-feature/components/Tiles.tsx b/packages/twenty-website/src/sections/product-feature/components/Tiles.tsx
index cedc694320..a702bd6829 100644
--- a/packages/twenty-website/src/sections/product-feature/components/Tiles.tsx
+++ b/packages/twenty-website/src/sections/product-feature/components/Tiles.tsx
@@ -73,13 +73,13 @@ const SpotlightContent = styled.div`
 const SpotlightVisual = styled.div`
   border: 1px solid ${color('black-20')};
   border-radius: ${radius(2)};
-  margin: ${spacing(4)};
+  margin: ${spacing(4)} ${spacing(4)} 0;
   min-height: 300px;
   overflow: hidden;
 
   ${mediaUp('md')} {
-    margin: ${spacing(5)};
-    min-height: 420px;
+    margin: ${spacing(5)} ${spacing(5)} 0;
+    min-height: 340px;
   }
 `;