fix: show single tile ad banner per generator page instead of three

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/generators/cards.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'cards')!;
       <CardGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/coin.astro

@@ -33,8 +33,8 @@ const generator = generators.find((g) => g.slug === 'coin')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><CoinGenerator /></main>
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" /><AdBanner size="tile" /><AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
+      <AdBanner size="tile" />
     </div>
   </div>
 </BaseLayout>

src/pages/generators/colors.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'colors')!;
       <ColorGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/dice.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'dice')!;
       <DiceGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/list.astro

@@ -33,8 +33,8 @@ const generator = generators.find((g) => g.slug === 'list')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><ListGenerator /></main>
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" /><AdBanner size="tile" /><AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
+      <AdBanner size="tile" />
     </div>
   </div>
 </BaseLayout>

src/pages/generators/lottery.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'lottery')!;
       <LotteryGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/numbers.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'numbers')!;
       <NumberGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/password.astro

@@ -54,9 +54,7 @@ const generator = generators.find((g) => g.slug === 'password')!;
       <PasswordGenerator />
     </main>
 
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" />
-      <AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
   </div>

src/pages/generators/uuid.astro

@@ -33,8 +33,8 @@ const generator = generators.find((g) => g.slug === 'uuid')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><UuidGenerator /></main>
-    <div class="mt-12 grid grid-cols-3 gap-3">
-      <AdBanner size="tile" /><AdBanner size="tile" /><AdBanner size="tile" />
+    <div class="mt-12 flex justify-center">
+      <AdBanner size="tile" />
     </div>
   </div>
 </BaseLayout>