Claude/hansmartens market positioning mlt89z

README.md

@@ -682,7 +682,7 @@ Astro Rocket includes 44 components across four categories. All UI components us
 | Layout | 2 | Header (with scroll progress bar), Footer |
 | Hero | 1 | Hero section with centered/split layouts, grid pattern, and typing effect |
 
-`src/components/` also holds components built for this site's own pages — blog, landing, SEO and theme-switching pieces, the `YouTube` embed for MDX, and the `Callout` and `LetterGlitchBand` patterns. They are outside the 44 that `component-registry.json` counts.
+`src/components/` also holds components built for this site's own pages — blog, landing, SEO and theme-switching pieces, the `YouTube` embed for MDX, and the `Callout`, `CtaBand` and `LetterGlitchBand` patterns. They are outside the 44 that `component-registry.json` counts.
 
 ### Usage Example
 

src/components/blog/BlogCta.astro

@@ -12,11 +12,12 @@
  * the same invitation wherever someone meets it; the copy is `blog.cta` in the
  * locale files, which makes changing it a content change.
  *
- * The arrangement is the one the old block used — a plain CTA on a phone, the
- * LetterGlitch band from `md` up — because that was already carrying this slot
- * on every blog page and there is no reason to move it.
+ * One band at every width. It used to be a pair — a flat CTA on a phone and
+ * the LetterGlitch band from `glitch` up — because the canvas cannot run below
+ * that breakpoint. A gradient has no such limit, so the duplicate is gone and
+ * every screen gets the same block.
  */
-import CTA from '@/components/ui/marketing/CTA/CTA.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
@@ -25,17 +26,22 @@ import { t } from '@/i18n';
 
 interface Props {
   locale: string;
-  /** Render the desktop LetterGlitch band beneath the mobile CTA. */
-  glitchBand?: boolean;
-  /** Classes for the mobile CTA element. */
-  ctaClass?: string;
-  /** Classes for the section wrapping the desktop band. */
-  bandSectionClass?: string;
-  /** Inner width of the desktop band. Matches LetterGlitchBand's own prop. */
-  bandMaxWidth?: '6xl' | '7xl';
+  /** Classes for the section wrapping the band — background, spacing. */
+  sectionClass?: string;
+  /** Inner width of the band. Matches CtaBand's own prop. */
+  maxWidth?: '6xl' | '7xl';
+  /**
+   * Swap the gradient band for the LetterGlitch canvas on desktop.
+   *
+   * Off everywhere but the post that documents the effect, which is the one
+   * page where a reader is there for it. Below `glitch` — 1024px and a fine
+   * pointer — the canvas cannot run, so those screens keep the gradient band
+   * and the page still closes on something.
+   */
+  glitch?: boolean;
 }
 
-const { locale, glitchBand = true, ctaClass, bandSectionClass, bandMaxWidth } = Astro.props;
+const { locale, sectionClass, maxWidth = '6xl', glitch = false } = Astro.props;
 
 /**
  * The repo, taken from the site's own links so a fork points at its own rather
@@ -46,27 +52,31 @@ const repoUrl =
   'https://github.com/hansmartensdev/astro-rocket';
 ---
 
-<CTA variant="default" size="md" maxWidth="lg" glow={false} data-reveal class={ctaClass}>
-  <h2 slot="heading" class="!text-4xl">{t('blog.cta.heading', locale)}</h2>
-  <p slot="description" class="!text-lg text-balance">{t('blog.cta.description', locale)}</p>
+<section class={sectionClass}>
+  <CtaBand maxWidth={maxWidth} class={glitch ? 'glitch:hidden' : undefined}>
+    <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
+      {t('blog.cta.heading', locale)}
+    </h2>
+    <p class="text-lg text-foreground-muted mb-8 text-balance">
+      {t('blog.cta.description', locale)}
+    </p>
 
-  <div class="flex justify-center">
-    <Button
-      size="lg"
-      href={repoUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="gap-2 cta-btn-brand"
-    >
-      <Icon name="github" size="sm" />
-      {t('blog.cta.button', locale)}
-    </Button>
-  </div>
-</CTA>
+    <div class="flex justify-center">
+      <Button
+        size="lg"
+        href={repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="gap-2"
+      >
+        <Icon name="github" size="sm" />
+        {t('blog.cta.button', locale)}
+      </Button>
+    </div>
+  </CtaBand>
 
-{glitchBand && (
-  <section class={bandSectionClass}>
-    <LetterGlitchBand maxWidth={bandMaxWidth}>
+  {glitch && (
+    <LetterGlitchBand maxWidth={maxWidth}>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {t('blog.cta.heading', locale)}
       </h2>
@@ -87,5 +97,5 @@ const repoUrl =
         </Button>
       </div>
     </LetterGlitchBand>
-  </section>
-)}
+  )}
+</section>

src/components/blog/views/BlogIndexView.astro

@@ -148,7 +148,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT);
   <!-- Closing CTA -->
   <BlogCta
     locale={locale}
-    ctaClass={['glitch:hidden', featuredPosts.length > 0 && '!bg-background-secondary'].filter(Boolean).join(' ')}
-    bandSectionClass={`hidden glitch:block relative z-10 py-[var(--space-section-md)] ${featuredPosts.length > 0 ? 'bg-background-secondary' : 'bg-background'}`}
+    sectionClass={`relative z-10 py-[var(--space-section-md)] ${featuredPosts.length > 0 ? 'bg-background-secondary' : 'bg-background'}`}
   />
 </PageLayout>

src/components/blog/views/BlogPageView.astro

@@ -110,7 +110,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT);
 
   <BlogCta
     locale={locale}
-    ctaClass="glitch:hidden"
-    bandSectionClass="hidden glitch:block relative z-10 py-[var(--space-section-md)] bg-background"
+    sectionClass="relative z-10 py-[var(--space-section-md)] bg-background"
   />
 </PageLayout>

src/components/blog/views/BlogTagView.astro

@@ -112,7 +112,6 @@ const countKey = posts.length === 1 ? 'blog.tagCountOne' : 'blog.tagCountOther';
 
   <BlogCta
     locale={locale}
-    ctaClass="glitch:hidden"
-    bandSectionClass="hidden glitch:block relative z-10 py-[var(--space-section-md)] bg-background"
+    sectionClass="relative z-10 py-[var(--space-section-md)] bg-background"
   />
 </PageLayout>

src/components/pages/views/AboutView.astro

@@ -21,7 +21,7 @@ import { Hero } from '@/components/hero';
 import ProjectImageSVG from '@/components/projects/ProjectImageSVG.astro';
 import TypingEffect from '@/components/ui/TypingEffect.astro';
 import TechStack from '@/components/landing/TechStack.astro';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import { t, tData, defaultLocale } from '@/i18n';
 
 interface Props {
@@ -286,37 +286,18 @@ const cta = tData<{ badge: string; heading: string; description: string; button:
 
   <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="rocket" size="sm" />
-        {cta.badge}
-      </Badge>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
       <p class="text-lg text-foreground-muted mb-8 text-balance">
         {cta.description}
       </p>
-      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="cta-btn-brand">
+      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
         {cta.button}
         <Icon name="arrow-right" size="sm" />
       </Button>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <Button size="lg" href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="hero-btn-brand">
-        {cta.button}
-        <Icon name="arrow-right" size="sm" />
-      </Button>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>
 

src/components/pages/views/HomeView.astro

@@ -18,7 +18,7 @@ import Card from '@/components/ui/data-display/Card/Card.astro';
 import ProofTile from '@/components/ui/data-display/ProofTile/ProofTile.astro';
 import Icon from '@/components/ui/primitives/Icon/Icon.astro';
 import BlogCard from '@/components/blog/BlogCard.astro';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import StackMarquee from '@/components/landing/StackMarquee.astro';
 import { getCollection } from 'astro:content';
 import siteConfig from '@/config/site.config';
@@ -474,49 +474,24 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`;
 
  <!-- CTA — `secondary` so it alternates with the `background` Blog section above and the `background` Footer below. -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background-secondary border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {cta.badge}
-      </Badge>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
       <p class="text-lg text-foreground-muted mb-8 text-balance">
         {cta.description}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {cta.primary}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {cta.secondary}
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
-          {cta.primary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
-          {cta.secondary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 
 <script>

src/components/pages/views/ServicesView.astro

@@ -15,7 +15,7 @@ import Card from '@/components/ui/data-display/Card/Card.astro';
 import ProofTile from '@/components/ui/data-display/ProofTile/ProofTile.astro';
 import Button from '@/components/ui/form/Button/Button.astro';
 import { Hero } from '@/components/hero';
-import LetterGlitchBand from '@/components/patterns/LetterGlitchBand.astro';
+import CtaBand from '@/components/patterns/CtaBand.astro';
 import { t, tData, defaultLocale, localizedPath } from '@/i18n';
 
 interface Props {
@@ -318,49 +318,24 @@ const aboutUrl = localizedPath('/about', locale);
 
   <!-- CTA -->
   <section class="relative z-10 py-[var(--space-section-md)] bg-background border-t border-border">
-    <!-- Mobile: flat section, no card -->
-    <div class="glitch:hidden mx-auto max-w-2xl px-6 text-center" data-reveal>
-      <Badge variant="brand" pill class="mb-6">
-        <Icon name="message-circle" size="sm" />
-        {cta.badge}
-      </Badge>
+    <CtaBand>
       <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
         {cta.heading}
       </h2>
       <p class="text-lg text-foreground-muted mb-8 text-balance">
         {cta.description}
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="cta-btn-brand">
+        <Button size="lg" href={contactUrl}>
           {cta.primary}
           <Icon name="arrow-right" size="sm" />
         </Button>
-        <Button size="lg" variant="brand-outline" href={aboutUrl}>
+        <Button size="lg" variant="outline" class="cta-btn-brand" href={aboutUrl}>
           {cta.secondary}
           <Icon name="arrow-right" size="sm" />
         </Button>
       </div>
-    </div>
-
-    <!-- Desktop: contained LetterGlitch band with glass card -->
-    <LetterGlitchBand>
-      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">
-        {cta.heading}
-      </h2>
-      <p class="text-lg text-foreground-muted mb-8 text-balance">
-        {cta.description}
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg" href={contactUrl} class="hero-btn-brand">
-          {cta.primary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-        <Button size="lg" variant="outline" href={aboutUrl}>
-          {cta.secondary}
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
-    </LetterGlitchBand>
+    </CtaBand>
   </section>
 </PageLayout>