refactor(content): remove generic tool and home padding

src/routes/case-converter.js

@@ -6,7 +6,6 @@
 import { respondHTML, respondJSON } from "../utils/respond.js";
 import { createPageTemplate, createToolHeader } from "../utils/common-ui.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
@@ -116,33 +115,7 @@ function renderCaseConverterPage(lang = DEFAULT_LANGUAGE) {
       </div>
     </main>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
-      ${createEducationalSection(
-        [
-          {
-            title: "Naming Conventions Explained (camelCase/snake_case/etc)",
-            content:
-              "<p>Naming conventions are sets of rules for choosing the character sequence to be used for identifiers which denote variables, types, functions, and other entities in source code and documentation. <strong>camelCase</strong> (e.g., <code>myVariable</code>) starts with a lowercase letter and capitalizes the first letter of each subsequent word. <strong>snake_case</strong> (e.g., <code>my_variable</code>) uses underscores to separate words.</p><p><strong>PascalCase</strong> (e.g., <code>MyVariable</code>) capitalizes the first letter of every word, while <strong>kebab-case</strong> (e.g., <code>my-variable</code>) uses hyphens to separate words. These conventions are not just about aesthetics; they are critical for code readability, maintainability, and adhering to the idiomatic standards of different programming languages and frameworks.</p>",
-          },
-          {
-            title: "How to Use This Tool",
-            content:
-              '<ol><li>Type or paste your text into the "Input Text" area at the top of the page.</li><li>The tool will automatically convert your input into over a dozen different case styles in real-time.</li><li>Scroll through the "Conversion Results" grid to find the specific case style you need.</li><li>Click the "Copy" icon next to any result to save it to your clipboard.</li><li>Use the "Clear" button to remove all input and start a new conversion.</li></ol>',
-          },
-          {
-            title: "Common Use Cases",
-            content:
-              "<ul><li><strong>Refactoring Code:</strong> Quickly convert variable names when migrating code between languages with different standards (e.g., Java's camelCase to Python's snake_case).</li><li><strong>Web Development:</strong> Transform text into kebab-case for CSS class names or URL slugs to ensure SEO-friendly and valid identifiers.</li><li><strong>Database Design:</strong> Convert application-level camelCase identifiers into snake_case for database table and column names.</li><li><strong>Content Creation:</strong> Use Title Case or Sentence case to quickly format headings and body text for articles or documentation.</li></ul>",
-          },
-          {
-            title: "Pro Tips",
-            content:
-              "<ul><li>Be consistent within your project; even if you prefer one style, always follow the existing convention of the codebase you are working on.</li><li>Use descriptive names that convey meaning, rather than just following the case convention (e.g., <code>isUserLoggedIn</code> is better than <code>status</code>).</li><li>When working with APIs, be prepared to convert between cases, as backend systems often use <code>snake_case</code> while frontends prefer <code>camelCase</code>.</li></ul>",
-          },
-        ],
-        "case-converter",
-        currentLang,
-      )}
-    ${createRelatedToolsSection(relatedToolsData)}
+      ${createRelatedToolsSection(relatedToolsData)}
     </div>
   `;
 

src/routes/certificate-decoder.js

@@ -11,7 +11,6 @@ import {
   infoHint,
 } from "../utils/common-ui.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
@@ -209,53 +208,7 @@ function renderCertificateDecoderPage(lang = DEFAULT_LANGUAGE) {
       </div>
     </main>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
-      ${createEducationalSection(
-        [
-          {
-            title: "What are X.509 Certificates?",
-            content: `
-            <p>X.509 is a standard format for public key certificates, which are digital documents that securely bind a public key to an identity (such as a website, organization, or individual). These certificates are the foundation of the Public Key Infrastructure (PKI) used to secure the internet via HTTPS, as well as for signing emails and software.</p>
-            <p>An X.509 certificate contains the public key, the identity of the certificate holder, and the digital signature of the Certificate Authority (CA) that issued the certificate, proving its authenticity.</p>
-          `,
-          },
-          {
-            title: "How to Use This Tool",
-            content: `
-            <ol>
-              <li><strong>Paste your certificate:</strong> Copy your PEM-encoded certificate (including the BEGIN and END headers) and paste it into the input field.</li>
-              <li><strong>Parse:</strong> Click "Parse Certificate" to extract and analyze the data.</li>
-              <li><strong>Review Summary:</strong> Check the top cards for the Common Name (CN), Issuer, and validity dates.</li>
-              <li><strong>Inspect Details:</strong> Expand the sections below to see the full Subject, Issuer, SANs, and technical extensions.</li>
-              <li><strong>Check Status:</strong> Look at the status badge to see if the certificate is currently valid or expired.</li>
-            </ol>
-          `,
-          },
-          {
-            title: "Common Use Cases",
-            content: `
-            <ul>
-              <li><strong>SSL/TLS Troubleshooting:</strong> Diagnosing why a website is showing a "Not Secure" warning by checking for expiration or hostname mismatches.</li>
-              <li><strong>Security Auditing:</strong> Verifying that a certificate was issued by a trusted CA and uses strong signature algorithms (like SHA-256).</li>
-              <li><strong>Development:</strong> Inspecting self-signed certificates or CSRs (Certificate Signing Requests) during local development.</li>
-              <li><strong>Infrastructure Management:</strong> Checking the Subject Alternative Names (SANs) to ensure all required subdomains are covered by a single certificate.</li>
-            </ul>
-          `,
-          },
-          {
-            title: "Pro Tips",
-            content: `
-            <ul>
-              <li><strong>Check the SANs:</strong> Modern browsers rely on the Subject Alternative Name (SAN) extension rather than the Common Name (CN) for hostname verification. Always ensure your domain is listed in the SANs.</li>
-              <li><strong>Verify the Chain:</strong> If a certificate is valid but still untrusted, it may be missing intermediate certificates. Check the "Issuer" to identify which intermediate CA you need to include on your server.</li>
-              <li><strong>Fingerprints for Pinning:</strong> Use the SHA-256 Fingerprint provided by this tool if you need to implement certificate pinning in mobile applications or high-security APIs.</li>
-            </ul>
-          `,
-          },
-        ],
-        "certificate-decoder",
-        currentLang,
-      )}
-    ${createRelatedToolsSection(relatedToolsData)}
+      ${createRelatedToolsSection(relatedToolsData)}
     </div>
   `;
 

src/routes/cidr-calculator.js

@@ -11,9 +11,7 @@ import {
   infoHint,
 } from "../utils/common-ui.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
-  createVisibleArticle,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
 import {
@@ -75,15 +73,6 @@ function renderCIDRCalculatorPage(lang = DEFAULT_LANGUAGE) {
 
       ${toolHeader}
 
-      ${createVisibleArticle({
-        title: "Subnet math in the browser, not against a live network",
-        paragraphs: [
-          `Enter an IPv4 or IPv6 prefix and this planner derives network, broadcast (IPv4), host range, and reverse-DNS labels with integer arithmetic in the page. It does not ping hosts, query WHOIS, or walk a routing table.`,
-          `IPv4 still reserves network and broadcast addresses in a subnet, so a <code>/24</code> has 254 usable hosts. IPv6 assignments are usually <code>/64</code> on a LAN; compressing zeros is display only and does not change the prefix.`,
-          `Use it to size a VPC, check that two CIDRs overlap, or mint a PTR name before you write the zone file. The result is a calculation, not a guarantee that the addresses are free on the wire.`,
-        ],
-      })}
-
       <section class="grid gap-6 lg:grid-cols-[3fr,2fr]">
         <!-- Input Panel -->
         <div class="tool-card p-6 space-y-6">
@@ -360,33 +349,6 @@ function renderCIDRCalculatorPage(lang = DEFAULT_LANGUAGE) {
         </div>
       </section>
 
-      ${createEducationalSection(
-        [
-          {
-            title: "What is CIDR?",
-            content:
-              "Classless Inter-Domain Routing (CIDR) is a method for allocating IP addresses and IP routing. It replaced the older system based on classes (A, B, and C) to provide more flexibility and efficiency in address distribution.",
-          },
-          {
-            title: "How to Use This Tool",
-            content:
-              'Enter an IP address with a prefix (e.g., 192.168.1.0/24) or use the slider to adjust the prefix length. Click "Run analysis" to see network details, usable host ranges, and binary representations.',
-          },
-          {
-            title: "Common Use Cases",
-            content:
-              "Planning network subnets for cloud infrastructure (VPCs), troubleshooting routing issues, calculating host capacity for a given prefix, and converting between CIDR and subnet masks.",
-          },
-          {
-            title: "Pro Tips",
-            content:
-              "Remember that in IPv4, the first and last addresses in a subnet are typically reserved for the network ID and broadcast address. In IPv6, subnets are almost always /64 for standard local networks.",
-          },
-        ],
-        "cidr-calculator",
-        currentLang,
-      )}
-
       ${createCheatsheet("cidr-calculator", "Subnet Quick Reference", [
         {
           heading: "Common Subnets",

src/routes/code-minifier.js

@@ -11,7 +11,6 @@ import {
 } from "../utils/common-ui.js";
 import { respondHTML } from "../utils/respond.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
@@ -141,33 +140,7 @@ function renderCodeMinifierPage(lang = DEFAULT_LANGUAGE) {
       </div>
     </main>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
-      ${createEducationalSection(
-        [
-          {
-            title: "What is Minification?",
-            content:
-              "<p>Minification is the process of removing all unnecessary characters from source code without changing its functionality. This includes removing whitespace, newlines, comments, and sometimes shortening variable names. The goal is to reduce the file size of the code, which in turn reduces the amount of data that needs to be transferred over the network.</p><p>This leads to faster page load times and improved performance for web applications. While minification is essential for production environments, it makes the code nearly impossible for humans to read and debug. Therefore, it is typically performed as a final step in the build process before deploying to a live server.</p>",
-          },
-          {
-            title: "How to Use This Tool",
-            content:
-              '<ol><li>Select the programming language (JavaScript, CSS, or HTML) from the tabs at the top.</li><li>Paste your source code into the "Input Code" text area on the left.</li><li>Click the "Minify Code" button to reduce the file size for production use.</li><li>Alternatively, click "Beautify Code" to add indentation and formatting for better readability.</li><li>View the results in the "Output Code" area and click "Copy" or "Download" to save your optimized code.</li><li>Need to format or minify JSON? Use the <a href="/json-formatter" class="text-primary-600 dark:text-primary-400 underline">JSON Formatter</a> tool.</li></ol>',
-          },
-          {
-            title: "Common Use Cases",
-            content:
-              "<ul><li><strong>Production Deployment:</strong> Minify your JS and CSS files before uploading them to your web server to improve site speed and SEO.</li><li><strong>Email Templates:</strong> Minify HTML email code to ensure it stays under the size limits of various email clients and loads quickly for recipients.</li><li><strong>API Responses:</strong> Minify JSON data before sending it from your server to reduce bandwidth usage and egress costs.</li><li><strong>Code Auditing:</strong> Use the beautifier to format messy or minified code you've found online to understand how it works.</li></ul>",
-          },
-          {
-            title: "Pro Tips",
-            content:
-              "<ul><li>Always keep your original, unminified source code for development and only use the minified version for production deployment.</li><li>Use Source Maps to bridge the gap between minified production code and readable development code, allowing for efficient debugging in the browser.</li><li>Combine minification with Gzip or Brotli compression on your server for the maximum possible reduction in file size and transfer time.</li></ul>",
-          },
-        ],
-        "code-minifier",
-        currentLang,
-      )}
-    </div>
+      </div>
     ${createRelatedToolsSection(relatedToolsData)}
   `;
 

src/routes/color-converter.js

@@ -6,7 +6,6 @@
 import { respondHTML, respondJSON } from "../utils/respond.js";
 import { createPageTemplate, createToolHeader } from "../utils/common-ui.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
@@ -162,33 +161,7 @@ function renderColorConverterPage(lang = DEFAULT_LANGUAGE) {
       </div>
     </main>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
-      ${createEducationalSection(
-        [
-          {
-            title: "Color Models Explained (HEX/RGB/HSL)",
-            content:
-              "<p>Color models are mathematical systems for representing colors. <strong>HEX</strong> (Hexadecimal) is a 6-digit code used in HTML and CSS, representing Red, Green, and Blue components. <strong>RGB</strong> (Red, Green, Blue) uses decimal values from 0 to 255 for each channel, often used in digital imaging.</p><p><strong>HSL</strong> (Hue, Saturation, Lightness) is more intuitive for humans, as it describes color in terms of its base pigment (Hue), intensity (Saturation), and brightness (Lightness). Understanding these models helps in choosing the right format for your design and development needs, ensuring consistency across different platforms and devices.</p>",
-          },
-          {
-            title: "How to Use This Tool",
-            content:
-              '<ol><li>Use the visual color picker to select a color by dragging the cursor in the saturation/brightness square and the hue slider.</li><li>Alternatively, enter a specific value in the "Manual Input" field (supports #hex, rgb, or hsl formats).</li><li>Observe the "Preview" box to see the selected color in real-time.</li><li>View the converted values in the HEX, RGB, HSL, and HSV cards below.</li><li>Click the "Copy" icon on any card to save that specific format to your clipboard.</li></ol>',
-          },
-          {
-            title: "Common Use Cases",
-            content:
-              "<ul><li><strong>Web Design:</strong> Convert colors from design tools (often RGB/HSL) to HEX codes for use in CSS stylesheets.</li><li><strong>Brand Consistency:</strong> Ensure your brand colors are accurately represented across different digital formats and media.</li><li><strong>UI Development:</strong> Quickly generate lighter or darker variations of a base color by adjusting the Lightness value in HSL.</li><li><strong>Accessibility Testing:</strong> Use the preview to check if your chosen colors provide enough contrast for readable text and UI elements.</li></ul>",
-          },
-          {
-            title: "Pro Tips",
-            content:
-              "<ul><li>Use HSL when designing UI components like buttons, as it makes it easy to create hover states by simply adjusting the lightness value.</li><li>When working with transparency in CSS, prefer <code>rgba()</code> or <code>hsla()</code> for better readability and control over the alpha channel.</li><li>Always check for color contrast ratios to ensure your designs are accessible to users with visual impairments.</li></ul>",
-          },
-        ],
-        "color-converter",
-        currentLang,
-      )}
-    </div>
+      </div>
     ${createRelatedToolsSection(relatedToolsData)}
   `;
 

src/routes/cron-builder.js

@@ -7,11 +7,9 @@ import {
 } from "../utils/common-ui.js";
 import {
   createRelatedToolsSection,
-  createVisibleArticle,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";
 import {
-  DEFAULT_LANGUAGE,
   getToolTranslation,
   normalizeLanguage,
   resolveRequestLanguage,
@@ -48,15 +46,6 @@ export async function handleCronBuilderRoutes(request) {
         { toolId: "cron-builder" },
       )}
 
-      ${createVisibleArticle({
-        title: "Five-field crontab, explained in this tab",
-        paragraphs: [
-          `This builder speaks classic Vixie/crontab syntax: minute, hour, day of month, month, day of week. It does not accept a sixth seconds field, Quartz, or systemd <code>OnCalendar=</code>. If your scheduler wants those, this page will not silently translate them.`,
-          `The next-run list is computed in the browser from the expression and your current timezone. It is a preview, not a job runner. Nothing is stored and no webhook is registered.`,
-          `Day-of-week <code>0</code> and <code>7</code> are both Sunday. Lists, ranges, and steps (<code>1,15</code>, <code>1-5</code>, <code>*/5</code>) work; named months and days are accepted where crontab does. If the parser cannot read a field, the preview stays empty instead of inventing a schedule.`,
-        ],
-      })}
-
       <div class="flex-grow flex flex-col lg:flex-row gap-6 min-h-0">
 
         <!-- Left Column: Visual Builder (Editor) -->

src/routes/csp-builder.js

@@ -13,7 +13,6 @@ import {
   infoHint,
 } from "../utils/common-ui.js";
 import {
-  createEducationalSection,
   createRelatedToolsSection,
 } from "../utils/content-ui.js";
 import { TOOLS } from "../utils/tool-registry.js";