From 57f1a8d705f8cacc4896e085a167f40541fa9289 Mon Sep 17 00:00:00 2001
From: emil <emil28092005@gmail.com>
Date: Sat, 9 May 2026 15:03:28 +0300
Subject: [PATCH] seo: add How to use / When to use text blocks to all
 generator pages

Each page now has a subtle text section with keyword-rich content
for search engine indexing, without disrupting the tool UX.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/SeoBlock.astro       | 23 +++++++++++++++++++++++
 src/pages/generators/cards.astro    | 16 ++++++++++++++++
 src/pages/generators/coin.astro     | 16 ++++++++++++++++
 src/pages/generators/colors.astro   | 15 +++++++++++++++
 src/pages/generators/dice.astro     | 16 ++++++++++++++++
 src/pages/generators/list.astro     | 16 ++++++++++++++++
 src/pages/generators/lottery.astro  | 16 ++++++++++++++++
 src/pages/generators/numbers.astro  | 16 ++++++++++++++++
 src/pages/generators/password.astro | 16 ++++++++++++++++
 src/pages/generators/uuid.astro     | 16 ++++++++++++++++
 10 files changed, 166 insertions(+)
 create mode 100644 src/components/SeoBlock.astro

diff --git a/src/components/SeoBlock.astro b/src/components/SeoBlock.astro
new file mode 100644
index 0000000..7cb73cb
--- /dev/null
+++ b/src/components/SeoBlock.astro
@@ -0,0 +1,23 @@
+---
+interface Props {
+  howTo: string[];
+  whenTo: string[];
+}
+
+const { howTo, whenTo } = Astro.props;
+---
+
+<section class="mt-12 border-t border-zinc-800/60 pt-8 text-sm text-zinc-500 space-y-4">
+  <div>
+    <h2 class="text-xs font-semibold uppercase tracking-widest text-zinc-600 mb-2">How to use</h2>
+    <ol class="space-y-1 list-decimal list-inside">
+      {howTo.map((step) => <li>{step}</li>)}
+    </ol>
+  </div>
+  <div>
+    <h2 class="text-xs font-semibold uppercase tracking-widest text-zinc-600 mb-2">When to use</h2>
+    <ul class="space-y-1 list-disc list-inside">
+      {whenTo.map((item) => <li>{item}</li>)}
+    </ul>
+  </div>
+</section>
diff --git a/src/pages/generators/cards.astro b/src/pages/generators/cards.astro
index 1940cac..da4fef4 100644
--- a/src/pages/generators/cards.astro
+++ b/src/pages/generators/cards.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import CardGenerator from '../../components/generators/CardGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'cards')!;
 ---
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'cards')!;
       <CardGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Set how many cards to draw (1–52).',
+        'Toggle Allow duplicates if you want cards to repeat.',
+        'Click Draw — cards are shown as mini card tiles.',
+        'Click Copy to copy the result (e.g. A♠, K♥) to your clipboard.',
+      ]}
+      whenTo={[
+        'Drawing a random hand for card games.',
+        'Practising card probability and statistics.',
+        'Simulating a random card pull for magic tricks or puzzles.',
+        'Running fair draws without a physical deck.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/coin.astro b/src/pages/generators/coin.astro
index 4283f34..d2bc588 100644
--- a/src/pages/generators/coin.astro
+++ b/src/pages/generators/coin.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import CoinGenerator from '../../components/generators/CoinGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'coin')!;
 ---
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'coin')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><CoinGenerator /></main>
+    <SeoBlock
+      howTo={[
+        'Drag the slider to choose how many coins to flip (1–20).',
+        'Click Flip — each coin shows H for heads or T for tails.',
+        'When flipping more than one coin, the heads/tails count is shown below.',
+        'Click Copy to copy all results to the clipboard.',
+      ]}
+      whenTo={[
+        'Making a quick heads-or-tails decision.',
+        'Simulating a coin toss for a sports match or game.',
+        'Demonstrating probability and the law of large numbers.',
+        'Settling a fair 50/50 choice between two options.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/colors.astro b/src/pages/generators/colors.astro
index 4811afe..dc361c1 100644
--- a/src/pages/generators/colors.astro
+++ b/src/pages/generators/colors.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import ColorGenerator from '../../components/generators/ColorGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'colors')!;
 ---
@@ -54,6 +55,20 @@ const generator = generators.find((g) => g.slug === 'colors')!;
       <ColorGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Click Generate to produce a random color.',
+        'Switch between HEX, RGB, and HSL tabs to see the value in your preferred format.',
+        'Click the color value or the copy icon to copy it to the clipboard.',
+      ]}
+      whenTo={[
+        'Finding inspiration for a new design palette.',
+        'Picking a placeholder color while prototyping.',
+        'Selecting a random theme color for a project or presentation.',
+        'Teaching or exploring color theory and formats.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/dice.astro b/src/pages/generators/dice.astro
index 327c527..e95ab86 100644
--- a/src/pages/generators/dice.astro
+++ b/src/pages/generators/dice.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import DiceGenerator from '../../components/generators/DiceGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'dice')!;
 ---
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'dice')!;
       <DiceGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Select the die type: d4, d6, d8, d10, d12, d20, or d100.',
+        'Set how many dice to roll (1–20).',
+        'Click Roll — each die result appears with the total sum.',
+        'Maximum rolls are highlighted in purple; ones are highlighted in red.',
+      ]}
+      whenTo={[
+        'Rolling dice for D&D, Pathfinder, or any tabletop RPG.',
+        'Replacing physical dice in board games.',
+        'Simulating probability outcomes in statistics or education.',
+        'Settling disputes with a fair digital dice roll.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/list.astro b/src/pages/generators/list.astro
index 6aa409d..eb27484 100644
--- a/src/pages/generators/list.astro
+++ b/src/pages/generators/list.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import ListGenerator from '../../components/generators/ListGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'list')!;
 ---
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'list')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><ListGenerator /></main>
+    <SeoBlock
+      howTo={[
+        'Type or paste your items into the text area — one item per line.',
+        'Set how many items to pick in the Pick field.',
+        'Toggle Allow duplicates if the same item can be chosen more than once.',
+        'Click Pick (or press Ctrl+Enter) — the selected items appear as chips.',
+      ]}
+      whenTo={[
+        'Choosing a random winner for a giveaway or contest.',
+        'Picking who presents first in a meeting or class.',
+        'Organising a Secret Santa or gift exchange draw.',
+        'Selecting a random movie, restaurant, or activity from a list.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/lottery.astro b/src/pages/generators/lottery.astro
index 3b091d4..d00bffe 100644
--- a/src/pages/generators/lottery.astro
+++ b/src/pages/generators/lottery.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import LotteryGenerator from '../../components/generators/LotteryGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'lottery')!;
 ---
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'lottery')!;
       <LotteryGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Set the From and To fields to define your number range (e.g. 1 to 49).',
+        'Enter how many numbers to pick in the Pick field.',
+        'Click Draw — a sorted set of unique numbers appears.',
+        'Click Copy to copy all numbers to the clipboard.',
+      ]}
+      whenTo={[
+        'Generating lottery or lotto ticket numbers.',
+        'Running a fair raffle draw with unique entries.',
+        'Selecting a random sample from a numbered list.',
+        'Choosing lottery numbers for Powerball, EuroMillions, or local draws.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/numbers.astro b/src/pages/generators/numbers.astro
index 17a2a03..04deb31 100644
--- a/src/pages/generators/numbers.astro
+++ b/src/pages/generators/numbers.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import NumberGenerator from '../../components/generators/NumberGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'numbers')!;
 ---
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'numbers')!;
       <NumberGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Enter the minimum value in the From field.',
+        'Enter the maximum value in the To field.',
+        'Click Generate — a random number within your range appears instantly.',
+        'Click the number to copy it to the clipboard.',
+      ]}
+      whenTo={[
+        'Picking a winner in a giveaway or raffle.',
+        'Choosing a random starting player in a board game.',
+        'Making a quick decision between numbered options.',
+        'Generating test data with values in a specific range.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/password.astro b/src/pages/generators/password.astro
index 2ff91bf..8c83bbb 100644
--- a/src/pages/generators/password.astro
+++ b/src/pages/generators/password.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import PasswordGenerator from '../../components/generators/PasswordGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'password')!;
 ---
@@ -54,6 +55,21 @@ const generator = generators.find((g) => g.slug === 'password')!;
       <PasswordGenerator />
     </main>
 
+    <SeoBlock
+      howTo={[
+        'Drag the length slider to set how many characters you need (4–64).',
+        'Toggle uppercase, lowercase, digits, and symbols on or off.',
+        'Click Generate — a new password appears instantly.',
+        'Click the password to copy it to your clipboard.',
+      ]}
+      whenTo={[
+        'Creating a strong password for a new account.',
+        'Generating a temporary access credential.',
+        'Producing a random secret key for development or testing.',
+        'Replacing a weak or reused password.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>
diff --git a/src/pages/generators/uuid.astro b/src/pages/generators/uuid.astro
index 2c7f501..9aa09ae 100644
--- a/src/pages/generators/uuid.astro
+++ b/src/pages/generators/uuid.astro
@@ -3,6 +3,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import UuidGenerator from '../../components/generators/UuidGenerator.astro';
 import AdBanner from '../../components/AdBanner.astro';
 import { generators } from '../../data/generators';
+import SeoBlock from '../../components/SeoBlock.astro';
 
 const generator = generators.find((g) => g.slug === 'uuid')!;
 ---
@@ -33,6 +34,21 @@ const generator = generators.find((g) => g.slug === 'uuid')!;
       <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
     </header>
     <main><UuidGenerator /></main>
+    <SeoBlock
+      howTo={[
+        'Choose a token type: UUID v4, Hex, or Base64.',
+        'For Hex and Base64, set the byte length (4–64 bytes).',
+        'Enter how many tokens to generate (1–20).',
+        'Click Generate, then Copy all to copy every token to the clipboard.',
+      ]}
+      whenTo={[
+        'Generating unique IDs for database records or API resources.',
+        'Creating random session tokens or API keys during development.',
+        'Producing test data with realistic-looking identifiers.',
+        'Generating a one-time secret for environment variables or config files.',
+      ]}
+    />
+
     <div class="mt-12 flex justify-center">
       <AdBanner size="tile" />
     </div>