Styling updates to Newsletter CTAs, adding default, article, and home page variants

Author: webstackdev

src/components/CallToAction/Newsletter/client/__tests__/selectors.spec.ts

@@ -22,6 +22,7 @@ const defaultNewsletterProps: NewsletterProps = {
   description: 'Ensures selector utilities receive accurate markup',
   placeholder: 'user@example.com',
   buttonText: 'Subscribe',
+  variant: 'article',
 }
 
 describe('Newsletter selector utilities', () => {

src/components/Consent/Checkbox/client/__tests__/testUtils.ts

@@ -37,6 +37,7 @@ const defaultProps: CheckboxFixtureProps = {
   id: 'gdpr-consent',
   formId: 'contact-form',
   purpose: 'Responding to your inquiry',
+  variant: 'default',
   wrapInForm: true,
 }
 

src/components/Consent/Checkbox/newsletter-cta-home.astro

@@ -33,7 +33,14 @@ const {
       aria-labelledby={`${id}-label`}
       aria-describedby={`${id}-description`}
       aria-invalid="false"
-      class="relative border-2 border-content-offset rounded h-4 w-4 shrink-0 bg-transparent hover:border-content-active hover:bg-content-active/10 focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
+      class="relative h-4 w-4 shrink-0 appearance-none rounded border-2 border-content-offset bg-transparent
+        outline-none hover:border-content-active hover:bg-content-active/10 focus:outline-none
+        focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0
+        checked:border-content-active checked:bg-content-active/20 checked:after:content-['']
+        checked:after:absolute checked:after:inset-[3px] checked:after:rounded-[2px]
+        checked:after:bg-content-active after:pointer-events-none after:absolute after:inset-0
+        after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1
+        focus-visible:after:border-spotlight"
     />
     <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
     <span id={`${id}-description`} class="text-[10px] text-content-offset leading-tight">

src/components/Home/Skills/client/selectors.ts

@@ -1,7 +1,6 @@
 import type { EmblaCarouselType } from 'embla-carousel'
 import {
   isButtonElement,
-  isDivElement,
   isType1Element,
 } from '@components/scripts/assertions/elements'
 import { ClientScriptError } from '@components/scripts/errors'

src/components/Testimonials/client/__tests__/index.spec.ts

@@ -92,6 +92,7 @@ vi.mock('embla-carousel-autoplay', () => ({
 
 const defaultProps: TestimonialsProps = {
   title: 'Client Praise',
+  showControls: true,
 }
 
 const renderTestimonials = async (

src/components/Testimonials/client/index.ts

@@ -25,7 +25,7 @@ export class TestimonialsCarouselElement extends EmblaCarouselBase {
 
   // ────────────────────── Base class abstract implementations ──────────────────────
 
-  protected getConfig(): EmblaCarouselConfig {
+  protected override getConfig(): EmblaCarouselConfig {
     return {
       emblaOptions: {
         loop: true,
@@ -45,7 +45,7 @@ export class TestimonialsCarouselElement extends EmblaCarouselBase {
     }
   }
 
-  protected queryElements(): EmblaElementHandles {
+  protected override queryElements(): EmblaElementHandles {
     const { emblaRoot, viewport } = getTestimonialsEmblaSetupElements(this)
     return {
       emblaRoot: emblaRoot as EmblaElementHandles['emblaRoot'],
@@ -69,7 +69,7 @@ export class TestimonialsCarouselElement extends EmblaCarouselBase {
 
   protected override onInitialized(): void {
     this.autoplayToggleBtn = queryTestimonialsAutoplayToggleBtn(this)
-    this.ensureViewportId()
+    this.ensureTestimonialsViewportId()
     this.setupAriaControls()
     this.setupAutoplayToggle()
   }
@@ -103,7 +103,7 @@ export class TestimonialsCarouselElement extends EmblaCarouselBase {
 
   // ────────────────────── Private helpers ──────────────────────
 
-  private ensureViewportId(): void {
+  private ensureTestimonialsViewportId(): void {
     const vp = this.viewport
     if (!vp || this.viewportId) return
 

src/pages/hero.astro

@@ -6,208 +6,6 @@ const path = '/hero/'
 ---
 
 <BaseLayout description={pageDescription} noindex={true} pageTitle={pageTitle} path={path}>
-<!-- ============================================================
-     NEWSLETTER CTA VARIANTS - For Visual Comparison
-     ============================================================ -->
-
-<section class="py-16 space-y-16">
-  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-    <h2 class="text-2xl font-bold text-content mb-4">Newsletter CTA Variants</h2>
-
-    <div class="mb-16">
-      <p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">NEWSLETTER CTA VARIANTS - Variant 1: Enhanced Value Proposition</p>
-
-      <div class="relative overflow-hidden bg-page-offset border border-trim rounded-2xl shadow-lg group">
-        <!-- Decoration: Subtle tech grid background -->
-        <div class="absolute inset-0 opacity-5 pointer-events-none">
-          <svg class="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-            <defs>
-              <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
-                <path d="M0 40L40 0H20L0 20M40 40V20L20 40" stroke="currentColor" stroke-width="2" fill="none" class="text-primary"/>
-              </pattern>
-            </defs>
-            <rect width="100%" height="100%" fill="url(#grid-pattern)" />
-          </svg>
-        </div>
-
-        <!-- Decoration: Gradient glow top right -->
-        <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none"></div>
-
-        <!-- Legibility: Gradient wash to fade pattern behind text -->
-        <div class="absolute inset-0 bg-linear-to-r from-page-offset/95 via-page-offset/60 to-transparent pointer-events-none"></div>
-
-        <div class="relative p-8 md:p-10 flex flex-col lg:flex-row gap-10 items-center">
-
-          <!-- Left: Content with Icon -->
-          <div class="lg:flex-1 flex gap-6 md:gap-8">
-             <!-- Newsletter Cover Art / Graphic -->
-             <div class="hidden sm:flex w-24 md:w-32 bg-linear-to-br from-primary to-spotlight rounded-xl items-center justify-center shrink-0 shadow-lg shadow-primary/20 transform group-hover:scale-105 transition-transform duration-500 self-stretch relative overflow-hidden">
-                <!-- Inner Pattern -->
-                <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-white to-transparent"></div>
-
-                <!-- Abstract "Book/Magazine" spine effect -->
-                <div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20"></div>
-
-                <!-- Central Icon/Symbol -->
-                <div class="text-page-base flex flex-col items-center gap-2">
-                  <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
-                  </svg>
-                  <span class="text-[10px] font-bold uppercase tracking-widest rotate-180 writing-vertical-lr opacity-80 backdrop-blur-sm">Issue #42</span>
-                </div>
-             </div>
-
-            <div class="space-y-6 flex-1">
-              <div class="relative">
-                <div class="flex items-center gap-2 mb-2">
-                  <span class="px-2 py-0.5 rounded-full bg-primary/10 text-primary text-[10px] font-bold uppercase tracking-wider border border-primary/20 backdrop-blur-sm">Monthly Dispatch</span>
-                </div>
-                <h3 class="text-2xl md:text-3xl font-black text-content leading-tight drop-shadow-sm">
-                  Engineering at Scale
-                </h3>
-                <p class="text-base font-medium text-content-offset mt-2 max-w-lg">
-                  Join 2,000+ platform engineers. Get the operational patterns, post-mortems, and architectural decisions that don't make it into the docs.
-                </p>
-              </div>
-
-              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm font-medium text-content-offset">
-                <li class="flex items-start gap-2">
-                  <svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                  <span>Incident analysis</span>
-                </li>
-                <li class="flex items-start gap-2">
-                  <svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                  <span>Scaling strategies</span>
-                </li>
-                <li class="flex items-start gap-2">
-                  <svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                  <span>Tool evaluations</span>
-                </li>
-                <li class="flex items-start gap-2">
-                  <svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                  <span>Architecture reviews</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- Right: Action Card -->
-          <div class="lg:w-80 w-full shrink-0">
-            <div class="bg-page-base p-6 rounded-xl border border-trim shadow-sm hover:shadow-md transition-shadow duration-300 relative group/form">
-              <div class="absolute -top-3 -right-3">
-                <span class="relative flex h-6 w-6">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-spotlight opacity-75"></span>
-                  <span class="relative inline-flex rounded-full h-6 w-6 bg-spotlight items-center justify-center">
-                    <svg class="w-3 h-3 text-page-base" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
-                  </span>
-                </span>
-              </div>
-
-              <div class="space-y-4">
-                <div class="space-y-1">
-                  <label for="newsletter-work-email" class="text-xs font-bold text-content uppercase">Work Email</label>
-                  <input
-                    type="email"
-                    id="newsletter-work-email"
-                    placeholder="engineer@company.com"
-                    class="w-full px-4 py-3 border border-trim rounded-lg bg-page-offset text-sm focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-colors"
-                    disabled
-                  />
-                </div>
-
-                <button
-                  type="button"
-                  class="w-full px-6 py-3 bg-content text-page-base font-bold rounded-lg text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 group-hover/form:bg-primary"
-                  disabled
-                >
-                  Subscribe Free
-                  <svg class="w-4 h-4 transition-transform group-hover/form:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
-                </button>
-
-                <div class="pt-2 border-t border-trim/50">
-                  <label class="flex items-start gap-2 cursor-pointer">
-                    <input type="checkbox" class="mt-1 border-trim rounded text-primary focus:ring-primary" disabled />
-                    <span class="text-[10px] text-content-offset leading-tight">
-                      By subscribing, you agree to our <a href="/privacy" class="underline hover:text-primary">Privacy Policy</a>. No spam, just engineering.
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </div>
-
-    <!-- ============================================================
-         VARIANT 2: Terminal Aesthetic (Brand Differentiation)
-         Monospace/terminal-inspired, signals "for engineers"
-         ============================================================ -->
-    <div class="mb-16">
-      <p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">NEWSLETTER CTA VARIANTS - Variant 2: Terminal Aesthetic</p>
-
-      <div class="bg-content border border-trim rounded-xl p-6 md:p-8 font-mono">
-        <!-- Terminal header bar -->
-        <div class="flex items-center gap-2 mb-4 pb-4 border-b border-page-base/20">
-          <div class="w-3 h-3 rounded-full bg-danger"></div>
-          <div class="w-3 h-3 rounded-full bg-warning"></div>
-          <div class="w-3 h-3 rounded-full bg-success"></div>
-          <span class="text-xs text-page-base/50 ml-2">newsletter.subscribe</span>
-        </div>
-
-        <div class="space-y-3">
-          <p class="text-page-base">
-            <span class="text-success">$</span> subscribe --platform-engineering
-          </p>
-          <p class="text-page-base/70 text-sm">
-            <span class="text-page-base/50">&gt;</span> Monthly dispatches: infra migrations, observability stacks, and lessons from production incidents.
-          </p>
-
-          <!-- Form inline with terminal style -->
-          <div class="flex flex-col sm:flex-row gap-3 pt-4">
-            <div class="flex items-center gap-2 flex-1">
-              <span class="text-success">$</span>
-              <input
-                type="email"
-                placeholder="email: user@domain.com"
-                class="flex-1 px-3 py-2 bg-page-base/10 border border-page-base/20 rounded text-page-base text-sm placeholder:text-page-base/40 focus:border-primary focus:ring-0 focus:outline-none"
-                disabled
-              />
-            </div>
-            <button
-              type="button"
-              class="px-6 py-2 bg-primary hover:bg-primary-offset text-page-base font-semibold rounded text-sm transition-colors whitespace-nowrap"
-              disabled
-            >
-              → Subscribe
-            </button>
-          </div>
-
-          <!-- Consent in terminal style -->
-          <div class="pt-3 border-t border-page-base/20 mt-4">
-            <label class="flex items-start gap-2 cursor-pointer">
-              <span class="text-page-base/50 text-sm">[</span>
-              <input
-                type="checkbox"
-                class="border-2 border-page-base/30 rounded h-4 w-4 shrink-0 bg-transparent"
-                disabled
-              />
-              <span class="text-page-base/50 text-sm">]</span>
-              <span class="text-xs text-page-base/60 leading-relaxed">
-                --consent "I agree to data processing"
-                <a href="/privacy" class="text-primary underline">--privacy</a>
-                <a href="/consent" class="text-primary underline">--cookies</a>
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-
 <!-- ============================================================
      CONTACT CTA VARIANTS - For Visual Comparison
      ============================================================ -->