From b486c71bde106a80366f40744707df91640c3e10 Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com>
Date: Tue, 25 Aug 2026 18:35:05 +0200
Subject: [PATCH] fix(blog): the newsletter promise sat in a gray slab across
 the middle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A visitor pointed at the blog newsletter block and asked to get rid of the
gray area. The only opaque fill inside it was the promise strip — "100% free
/ No ads / Unsubscribe anytime" — wrapped in `bg-surface-raised rounded-lg
p-6` (#f1f1f1 light, #171A15 dark). Everything else in the block, and every
ancestor up to the page canvas, is transparent, so that slab was the gray
area: a filled band cutting the block in half between the headline and the
signup form, for three lines of text that need no container of their own.

Drop the fill and the padding, keep the three-column grid and its spacing.
The redundant wrapper div collapses into the grid it wrapped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/components/blog/NewsletterSignup.tsx | 38 +++++++++++-------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/blog/NewsletterSignup.tsx b/src/components/blog/NewsletterSignup.tsx
index 91eed55cb..bf9549603 100644
--- a/src/components/blog/NewsletterSignup.tsx
+++ b/src/components/blog/NewsletterSignup.tsx
@@ -37,28 +37,26 @@ export default function NewsletterSignup() {
         </div>
 
         {/* Newsletter Promise */}
-        <div className="bg-surface-raised rounded-lg p-6 mb-8">
-          <div className="grid sm:grid-cols-3 gap-4 text-sm">
-            <div className="flex items-start gap-2">
-              <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
-              <div>
-                <p className="font-semibold text-text-primary">{t('free')}</p>
-                <p className="text-text-secondary">{t('freeDesc')}</p>
-              </div>
+        <div className="grid sm:grid-cols-3 gap-4 text-sm mb-8">
+          <div className="flex items-start gap-2">
+            <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold text-text-primary">{t('free')}</p>
+              <p className="text-text-secondary">{t('freeDesc')}</p>
             </div>
-            <div className="flex items-start gap-2">
-              <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
-              <div>
-                <p className="font-semibold text-text-primary">{t('noAds')}</p>
-                <p className="text-text-secondary">{t('noAdsDesc')}</p>
-              </div>
+          </div>
+          <div className="flex items-start gap-2">
+            <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold text-text-primary">{t('noAds')}</p>
+              <p className="text-text-secondary">{t('noAdsDesc')}</p>
             </div>
-            <div className="flex items-start gap-2">
-              <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
-              <div>
-                <p className="font-semibold text-text-primary">{t('unsubscribe')}</p>
-                <p className="text-text-secondary">{t('unsubscribeDesc')}</p>
-              </div>
+          </div>
+          <div className="flex items-start gap-2">
+            <Check className="w-5 h-5 text-action shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold text-text-primary">{t('unsubscribe')}</p>
+              <p className="text-text-secondary">{t('unsubscribeDesc')}</p>
             </div>
           </div>
         </div>