From dcf35a5731f0361de4fb8f4c031ac66e53fa536d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 15 Sep 2026 00:40:38 +0000
Subject: [PATCH] Add the travelling arrow to the components page CTAs

Matches the blog band. Four buttons carry the GitHub mark and a Clone
Repository label and none of them responded to a hover: the page's own closing
CTA, the two band demos, and the showcase example of the CTA component - which
should look like the real thing sitting below it.

The GitHub mark stays in front of the label and the arrow goes behind it. No
CSS needed; `.group:hover [data-icon="arrow-right"]` already matches what Icon
renders.

Checked at 1350px and 800px: every visible button animates and the GitHub mark
holds still. The LetterGlitch demo is hidden below 1024px, as intended.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BwJB1u6U3vdEZ9LrHRebST
---
 src/pages/components.astro | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/components.astro b/src/pages/components.astro
index 5be1998d1..efe2cb6df 100644
--- a/src/pages/components.astro
+++ b/src/pages/components.astro
@@ -822,6 +822,7 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
                 <Button>
                   <Icon name="github" size="sm" />
                   Clone Repository
+                  <Icon name="arrow-right" size="sm" />
                 </Button>
                 <Button variant="outline">Read Documentation</Button>
               </Fragment>
@@ -867,6 +868,7 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
                   <Button size="lg">
                     <Icon name="github" size="sm" />
                     Clone Repository
+                    <Icon name="arrow-right" size="sm" />
                   </Button>
                 </div>
               </CtaBand>
@@ -905,6 +907,7 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
                   <Button size="lg" class="hero-btn-brand">
                     <Icon name="github" size="sm" />
                     Clone Repository
+                    <Icon name="arrow-right" size="sm" />
                   </Button>
                 </div>
               </LetterGlitchBand>
@@ -2297,6 +2300,7 @@ import StackMarquee from '@/components/landing/StackMarquee.astro';
       <Button href="https://github.com/hansmartensdev/Astro-Rocket" target="_blank" class="hero-btn-brand">
         <Icon name="github" size="sm" />
         Clone Repository
+        <Icon name="arrow-right" size="sm" />
       </Button>
       <Button variant="outline" href="/blog">
         Read Documentation