fix(website): tighten product-feature spotlight height and align bento spacing (#22428)

## 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` ✓

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

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