diff --git a/README.md b/README.md index 57728f54f..b3fe094e5 100644 --- a/README.md +++ b/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 diff --git a/src/components/blog/BlogCta.astro b/src/components/blog/BlogCta.astro index a550a1732..3f4631387 100644 --- a/src/components/blog/BlogCta.astro +++ b/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'; --- - -

{t('blog.cta.heading', locale)}

-

{t('blog.cta.description', locale)}

+
+ +

+ {t('blog.cta.heading', locale)} +

+

+ {t('blog.cta.description', locale)} +

-
- -
- +
+ +
+ -{glitchBand && ( -
- + {glitch && ( +

{t('blog.cta.heading', locale)}

@@ -87,5 +97,5 @@ const repoUrl = -
-)} + )} +
diff --git a/src/components/blog/views/BlogIndexView.astro b/src/components/blog/views/BlogIndexView.astro index b652804f8..e88e6b5bc 100644 --- a/src/components/blog/views/BlogIndexView.astro +++ b/src/components/blog/views/BlogIndexView.astro @@ -148,7 +148,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT); 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'}`} /> diff --git a/src/components/blog/views/BlogPageView.astro b/src/components/blog/views/BlogPageView.astro index 4dd8b6753..756d07e62 100644 --- a/src/components/blog/views/BlogPageView.astro +++ b/src/components/blog/views/BlogPageView.astro @@ -110,7 +110,6 @@ const topTags = collectTopTags(posts, BLOG_TAG_CLOUD_LIMIT); diff --git a/src/components/blog/views/BlogTagView.astro b/src/components/blog/views/BlogTagView.astro index fd47115cb..dc0aacebc 100644 --- a/src/components/blog/views/BlogTagView.astro +++ b/src/components/blog/views/BlogTagView.astro @@ -112,7 +112,6 @@ const countKey = posts.length === 1 ? 'blog.tagCountOne' : 'blog.tagCountOther'; diff --git a/src/components/pages/views/AboutView.astro b/src/components/pages/views/AboutView.astro index 8b77c0db7..420881de6 100644 --- a/src/components/pages/views/AboutView.astro +++ b/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.badge} - +

{cta.heading}

{cta.description}

- -
- - - -

- {cta.heading} -

-

- {cta.description} -

- - +
diff --git a/src/components/pages/views/HomeView.astro b/src/components/pages/views/HomeView.astro index e1cf21a86..48384bb9a 100644 --- a/src/components/pages/views/HomeView.astro +++ b/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,12 +474,7 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`;
- -
- - - {cta.badge} - +

{cta.heading}

@@ -487,36 +482,16 @@ const basedInDisplay = `${city ?? 'Your City'}${country ? `, ${country}` : ''}`; {cta.description}

- -
-
- - - -

- {cta.heading} -

-

- {cta.description} -

-
- - -
- +