refactor: share homepage section headers (#62) (thanks @luiginotmario)

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Dependencies: bump `@lucide/astro` to `0.577.0` and sync `bun.lock` (#99, thanks @dependabot).
 - CI: update Bun setup pin and move the install-smoke Node setup to the pinned `actions/setup-node` v6 SHA (#98, thanks @dependabot).
 - Installer: recover from older PATH-bound Node runtimes after install, but keep the fallback `openclaw` shim in `~/.local/bin` instead of mutating version-manager bins (#68, thanks @rolandkakonyi).
+- UI: extract a shared homepage section-header component to keep spacing and link treatment consistent (#62, thanks @luiginotmario).
 ## 2026-02-22
 
 - Installer: make gum behavior fully automatic (interactive TTYs get gum, headless shells get plain status), and remove manual gum toggles.

src/components/SectionHeader.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  title: string;
+  link?: {
+    href: string;
+    text: string;
+  };
+}
+
+const { title, link } = Astro.props;
+---
+
+<div class="section-header">
+  <h2 class="section-title">
+    <span class="claw-accent">⟩</span> {title}
+  </h2>
+  {link && (
+    <a href={link.href} class="section-link">
+      {link.text} <span class="sr-only">related content</span>
+      <span aria-hidden="true">→</span>
+    </a>
+  )}
+</div>
+
+<style>
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .section-title {
+    font-family: var(--font-display);
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .section-link {
+    font-size: 0.9rem;
+    color: var(--coral-bright);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease;
+  }
+
+  .section-link:hover {
+    color: var(--cyan-bright);
+  }
+
+  .claw-accent {
+    color: var(--coral-bright);
+    font-weight: 700;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Icon from '../components/Icon.astro';
+import SectionHeader from '../components/SectionHeader.astro';
 import testimonials from '../data/testimonials.json';
 import { getPublishedBlogPosts } from '../lib/blog';
 
@@ -107,14 +108,10 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
 
     <!-- Testimonials (moved up for social proof) -->
     <section class="testimonials">
-      <div class="section-header">
-        <h2 class="section-title">
-          <span class="claw-accent">⟩</span> What People Say
-        </h2>
-        <a href="/shoutouts" class="section-link">View all <span class="sr-only">community shoutouts</span>
-          <span aria-hidden="true">→</span>
-        </a>
-      </div>
+      <SectionHeader 
+        title="What People Say" 
+        link={{ href: "/shoutouts", text: "View all" }}
+      />
       <div class="testimonials-track">
         <div class="testimonials-row row-1" style={`--duration: ${duration1}s`}>
           {row1.map((t) => (
@@ -155,9 +152,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
 
     <!-- Quick Start -->
     <section class="quickstart">
-      <h2 class="section-title">
-        <span class="claw-accent">⟩</span> Quick Start
-      </h2>
+      <SectionHeader title="Quick Start" />
       <div class="code-block">
         <div class="code-header">
           <span class="code-dot"></span>
@@ -619,9 +614,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
 
     <!-- What It Does -->
     <section class="features">
-      <h2 class="section-title">
-        <span class="claw-accent">⟩</span> What It Does
-      </h2>
+      <SectionHeader title="What It Does" />
       <div class="features-grid">
         <a href="https://docs.openclaw.ai/getting-started" target="_blank" rel="noopener" class="feature-card">
           <div class="feature-icon"><Icon icon="lucide:home" color="var(--coral-bright)" size={28} /></div>
@@ -658,9 +651,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
 
     <!-- Integrations Preview -->
     <section class="integrations-preview">
-      <h2 class="section-title">
-        <span class="claw-accent">⟩</span> Works With Everything
-      </h2>
+      <SectionHeader title="Works With Everything" />
       <div class="integrations-row">
         {integrationPills.map((p) => (
           <span class="integration-pill">
@@ -678,9 +669,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
 
     <!-- Press Section -->
     <section class="press-section">
-      <h2 class="section-title">
-        <span class="claw-accent">⟩</span> Featured In
-      </h2>
+      <SectionHeader title="Featured In" />
       <div class="press-grid">
         <a href="https://www.macstories.net/stories/clawdbot-showed-me-what-the-future-of-personal-ai-assistants-looks-like/" target="_blank" rel="noopener" class="press-card press-featured">
           <div class="press-logo">
@@ -1102,6 +1091,11 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     gap: 10px;
   }
 
+  .newsletter-title .claw-accent {
+    color: var(--coral-bright);
+    font-weight: 700;
+  }
+
   .newsletter-desc {
     font-size: 0.95rem;
     color: var(--text-secondary);
@@ -1332,9 +1326,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     animation: fadeInUp 0.8s ease-out 0.65s both;
   }
 
-  .press-section .section-title {
-    margin-bottom: 20px;
-  }
 
   .press-grid {
     display: grid;
@@ -1417,39 +1408,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     animation: fadeInUp 0.8s ease-out 0.6s both;
   }
 
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-
-  .section-title {
-    font-family: var(--font-display);
-    font-size: 1.4rem;
-    font-weight: 600;
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .section-link {
-    font-size: 0.9rem;
-    color: var(--coral-bright);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.2s ease;
-  }
-
-  .section-link:hover {
-    color: var(--cyan-bright);
-  }
-
-  .claw-accent {
-    color: var(--coral-bright);
-    font-weight: 700;
-  }
 
   .code-block {
     background: var(--bg-elevated);
@@ -1994,7 +1952,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     padding: 0 24px;
   }
 
-  .testimonials .section-header {
+  .testimonials :global(.section-header) {
     padding: 0 24px;
   }
 
@@ -2134,8 +2092,8 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
       padding: 0 16px;
     }
 
-    .testimonials .section-title {
-      padding-left: 16px;
+    .testimonials :global(.section-header) {
+      padding: 0 16px;
     }
 
     .testimonials-track {