astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/sections/ContactSplitMap.astro

@@ -0,0 +1,141 @@
+---
+/**
+ * ContactSplitMap — Contact section with office cards and contact channels on
+ * one side and a stylised SVG dot-map with location pins on the other.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{city: string, address: string, x: number, y: number}>} offices - Offices with map coords (0–100).
+ * @param {Array<{label: string, value: string, href: string, icon: 'mail'|'phone'|'chat'}>} channels - Contact channels.
+ * @param {string} variant - Map style (dots|grid|plain).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Office { city: string; address: string; x: number; y: number }
+interface Channel { label: string; value: string; href: string; icon: 'mail' | 'phone' | 'chat' }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  offices?: Office[];
+  channels?: Channel[];
+  variant?: 'dots' | 'grid' | 'plain';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Talk to a human',
+  subtitle = 'We’re distributed across three time zones, so someone is usually awake.',
+  offices = [
+    { city: 'San Francisco', address: '548 Market St, CA 94104', x: 17, y: 40 },
+    { city: 'Barcelona', address: 'Carrer de Pallars 99, 08018', x: 49, y: 36 },
+    { city: 'Singapore', address: '1 Raffles Place, 048616', x: 77, y: 58 },
+  ],
+  channels = [
+    { label: 'Email', value: 'hello@example.com', href: 'mailto:hello@example.com', icon: 'mail' },
+    { label: 'Phone', value: '+1 (555) 010-2030', href: 'tel:+15550102030', icon: 'phone' },
+    { label: 'Live chat', value: 'Mon–Fri, 9am–6pm', href: '#', icon: 'chat' },
+  ],
+  variant = 'dots',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `csm-${Math.random().toString(36).slice(2, 8)}`;
+const icon = {
+  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/>',
+  phone: '<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>',
+  chat: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+};
+
+// Very rough continent silhouettes as a coarse dot grid (deterministic).
+const land = (x: number, y: number) =>
+  (x > 8 && x < 30 && y > 22 && y < 52) ||
+  (x > 22 && x < 34 && y > 52 && y < 88) ||
+  (x > 44 && x < 58 && y > 22 && y < 46) ||
+  (x > 46 && x < 60 && y > 46 && y < 80) ||
+  (x > 58 && x < 88 && y > 20 && y < 56) ||
+  (x > 78 && x < 92 && y > 68 && y < 84);
+const dots: Array<[number, number]> = [];
+for (let y = 6; y < 94; y += 3) for (let x = 2; x < 98; x += 2) if (land(x, y)) dots.push([x, y]);
+
+// The map box is 16:11, so the SVG uses the same aspect ratio and scales 0–100 coords onto it.
+const VW = 160;
+const VH = 110;
+const SX = VW / 100;
+const SY = VH / 100;
+---
+
+<div class="cq-contact-split-map-cq">
+<section class={`csm csm--${variant} csm--${size} ${className}`} aria-labelledby={id}>
+  <div class="csm__inner">
+    <div class="csm__info">
+      <h2 id={id} class="csm__title">{title}</h2>
+      <p class="csm__subtitle">{subtitle}</p>
+      <ul class="csm__channels">
+        {channels.map((c) => (
+          <li>
+            <a class="csm__channel" href={c.href}>
+              <span class="csm__icon" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" set:html={icon[c.icon]}></svg></span>
+              <span><span class="csm__label">{c.label}</span><span class="csm__value">{c.value}</span></span>
+            </a>
+          </li>
+        ))}
+      </ul>
+      <ul class="csm__offices">
+        {offices.map((o) => (
+          <li><address><strong>{o.city}</strong>{o.address}</address></li>
+        ))}
+      </ul>
+    </div>
+    <div class="csm__map" role="img" aria-label={`Map showing offices in ${offices.map((o) => o.city).join(', ')}`}>
+      <svg viewBox={`0 0 ${VW} ${VH}`} aria-hidden="true">
+        {variant !== 'plain' && dots.map(([x, y]) => (
+          variant === 'grid'
+            ? <rect x={x * SX - 0.8} y={y * SY - 0.8} width="1.6" height="1.6" fill="rgb(var(--ink-rgb, 255 255 255) / 0.14)" />
+            : <circle cx={x * SX} cy={y * SY} r="0.75" fill="rgb(var(--ink-rgb, 255 255 255) / 0.18)" />
+        ))}
+        {offices.map((o) => (
+          <g>
+            <circle class="csm__ping" cx={o.x * SX} cy={o.y * SY} r="3" fill="none" stroke="var(--c-primary-light, #d4a017)" stroke-width="0.4" />
+            <circle cx={o.x * SX} cy={o.y * SY} r="1.6" fill="var(--c-primary-light, #d4a017)" />
+          </g>
+        ))}
+      </svg>
+      {offices.map((o) => (
+        <span class="csm__pin" style={`left:${o.x}%; top:${o.y}%`} aria-hidden="true">{o.city}</span>
+      ))}
+    </div>
+  </div>
+</section>
+</div>
+<style>
+  .cq-contact-split-map-cq { container-type: inline-size; }
+  .csm {
+    --csm-py: 5.5rem;
+    padding: var(--csm-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .csm--sm { --csm-py: 3.5rem; }
+  .csm--lg { --csm-py: 7.5rem; }
+  .csm__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
+  .csm__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .csm__subtitle { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .csm__channels { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; }
+  .csm__channel { display: flex; align-items: center; gap: 0.9rem; min-height: 60px; padding: 0.6rem 0.9rem; border-radius: var(--r-md, 14px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); background: rgb(var(--ink-rgb, 255 255 255) / 0.02); color: inherit; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
+  .csm__channel:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2); background: rgb(var(--ink-rgb, 255 255 255) / 0.04); }
+  .csm__channel:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .csm__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 14%, transparent)); color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .csm__label { display: block; font-size: 0.75rem; color: var(--c-text-3, #8a8a8a); }
+  .csm__value { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .csm__offices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
+  .csm__offices address { font-style: normal; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
+  .csm__offices strong { display: block; font-size: 0.9375rem; color: var(--c-text-1, #fff); }
+  .csm__map { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-xl, 24px); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); background: radial-gradient(circle at 50% 40%, rgb(var(--ink-rgb, 255 255 255) / 0.04), transparent 70%), var(--c-bg-1, #0a0a0a); overflow: hidden; }
+  .csm__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .csm__ping { transform-box: fill-box; transform-origin: center; animation: csm-ping 2.4s ease-out infinite; }
+  @keyframes csm-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
+  .csm__pin { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 0.2rem 0.55rem; border-radius: 6px; background: rgba(10, 10, 12, 0.85); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); font-size: 0.6875rem; font-weight: 600; color: var(--c-text-1, #fff); white-space: nowrap; }
+  @container (max-width: 860px) { .csm__inner { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .csm__ping { animation: none; } }
+</style>

package/src/components/lib/sections/CtaAppDownload.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-cta-app-download-cq">
 <section class={`app-download-section ${className}`} aria-labelledby="app-title">
   <div class="container">
     <div class="app-card">
@@ -72,8 +73,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cta-app-download-cq { container-type: inline-size; }
   .app-download-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -86,7 +88,7 @@ const {
 
   .app-card {
     background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-2xl, 24px);
     padding: clamp(2rem, 5vw, 4rem);
     display: grid;
@@ -103,7 +105,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -134,8 +136,8 @@ const {
 
   .feat-pill {
     padding: 0.4rem 0.85rem;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 9999px;
     font-size: 0.82rem;
     color: #cbd5e1;
@@ -153,7 +155,7 @@ const {
     gap: 0.75rem;
     padding: 0.65rem 1.25rem;
     background: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border-radius: 12px;
     color: #fff;
     text-decoration: none;
@@ -161,8 +163,8 @@ const {
   }
 
   .store-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.3);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3);
   }
 
   .store-btn__text {
@@ -192,7 +194,7 @@ const {
     width: 250px;
     height: 400px;
     background: #020617;
-    border: 3px solid rgba(255, 255, 255, 0.2);
+    border: 3px solid rgb(var(--ink-rgb, 255 255 255) / 0.2);
     border-radius: 36px;
     padding: 12px;
     box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
@@ -244,13 +246,13 @@ const {
 
   .phone-card-mini {
     padding: 0.5rem;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     border-radius: 8px;
     font-size: 0.72rem;
     color: #cbd5e1;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .app-card {
       grid-template-columns: 1fr;
     }

package/src/components/lib/sections/CtaGlowBanner.astro

@@ -27,6 +27,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-cta-glow-banner-cq">
 <section class={`cta-banner-section ${className}`} aria-labelledby="cta-title">
   <div class="container">
     <div class="cta-banner-card">
@@ -75,8 +76,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-cta-glow-banner-cq { container-type: inline-size; }
   .cta-banner-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -127,7 +129,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.15);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent);
     color: #facc15;
     border: 1px solid rgba(234, 179, 8, 0.3);
     margin-bottom: var(--sp-4, 1.25rem);
@@ -163,7 +165,7 @@ const {
     align-items: center;
     gap: 0.5rem;
     background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     border-radius: 12px;
     padding: 0.35rem;
     max-width: 460px;
@@ -211,16 +213,16 @@ const {
   }
 
   .cta-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     height: 48px;
     box-sizing: border-box;
   }
 
   .cta-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
   }
 
   .cta-trust-row {
@@ -230,7 +232,7 @@ const {
     justify-content: center;
     gap: 1.5rem;
     padding-top: 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
 
   .trust-item {
@@ -246,7 +248,7 @@ const {
     color: #eab308;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .cta-form {
       flex-direction: column;
       background: transparent;
@@ -256,7 +258,7 @@ const {
     .cta-input {
       width: 100%;
       background: rgba(0, 0, 0, 0.4);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
       border-radius: 8px;
       box-sizing: border-box;
     }

package/src/components/lib/sections/CtaNewsletterSection.astro

@@ -0,0 +1,165 @@
+---
+/**
+ * CtaNewsletterSection — Newsletter signup band with benefits list, accessible
+ * email form, inline validation and privacy note.
+ *
+ * @param {string} title - Heading.
+ * @param {string} subtitle - Supporting copy.
+ * @param {string[]} perks - Short benefit bullets.
+ * @param {string} action - Form action URL.
+ * @param {string} buttonLabel - Submit label.
+ * @param {string} privacy - Privacy note under the form.
+ * @param {string} variant - Band style (gradient|glass|bordered).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  perks?: string[];
+  action?: string;
+  buttonLabel?: string;
+  privacy?: string;
+  variant?: 'gradient' | 'glass' | 'bordered';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Get new components every week',
+  subtitle = 'One short email with fresh sections, charts and Astro tips. Join 12,000+ developers.',
+  perks = ['Weekly, never spam', 'Early access to new blocks', 'Unsubscribe in one click'],
+  action = '#',
+  buttonLabel = 'Subscribe',
+  privacy = 'We respect your privacy. Read our privacy policy.',
+  variant = 'gradient',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `cns-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<div class="cq-cta-newsletter-section-cq">
+<section class={`cns cns--${variant} cns--${size} ${className}`} aria-labelledby={id}>
+  <div class="cns__box">
+    <div class="cns__copy">
+      <span class="cns__icon" aria-hidden="true">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 7-10 6L2 7" /></svg>
+      </span>
+      <h2 id={id} class="cns__title">{title}</h2>
+      <p class="cns__subtitle">{subtitle}</p>
+      <ul class="cns__perks">
+        {perks.map((p) => (
+          <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{p}</li>
+        ))}
+      </ul>
+    </div>
+    <form class="cns__form" action={action} method="post" novalidate>
+      <label class="cns__label" for={`${id}-email`}>Email address</label>
+      <div class="cns__field">
+        <input class="cns__input" id={`${id}-email`} name="email" type="email" required autocomplete="email" placeholder="you@company.com" aria-describedby={`${id}-msg ${id}-privacy`} />
+        <button class="cns__btn" type="submit">{buttonLabel}</button>
+      </div>
+      <p id={`${id}-msg`} class="cns__msg" role="status" aria-live="polite"></p>
+      <p id={`${id}-privacy`} class="cns__privacy">{privacy}</p>
+    </form>
+  </div>
+</section>
+</div>
+<script>
+  document.querySelectorAll<HTMLFormElement>('.cns__form').forEach((form) => {
+    const input = form.querySelector<HTMLInputElement>('.cns__input');
+    const msg = form.querySelector<HTMLElement>('.cns__msg');
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      if (!input || !msg) return;
+      if (!input.value || !input.checkValidity()) {
+        input.setAttribute('aria-invalid', 'true');
+        msg.dataset.state = 'error';
+        msg.textContent = 'Please enter a valid email address.';
+        input.focus();
+        return;
+      }
+      input.removeAttribute('aria-invalid');
+      msg.dataset.state = 'ok';
+      msg.textContent = 'Thanks! Please confirm your subscription in your inbox.';
+      input.value = '';
+    });
+  });
+</script>
+
+<style>
+  .cq-cta-newsletter-section-cq { container-type: inline-size; }
+  .cns {
+    --cns-py: 5rem;
+    padding: var(--cns-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .cns--sm { --cns-py: 3rem; }
+  .cns--lg { --cns-py: 7rem; }
+  .cns__box {
+    max-width: 1080px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1.2fr 1fr;
+    gap: 2.5rem;
+    align-items: center;
+    padding: clamp(2rem, 5vw, 3.5rem);
+    border-radius: var(--r-xl, 28px);
+  }
+  .cns--gradient .cns__box {
+    background: radial-gradient(circle at 100% 0%, rgba(144, 133, 233, 0.22), transparent 55%), radial-gradient(circle at 0% 100%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent)), transparent 55%), #0c0c10;
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+  }
+  .cns--glass .cns__box { background: rgb(var(--ink-rgb, 255 255 255) / 0.035); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08)); backdrop-filter: blur(16px); }
+  .cns--bordered .cns__box { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14); }
+  .cns__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 14px; background: rgb(var(--ink-rgb, 255 255 255) / 0.06); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1); color: var(--c-text-1, #fff); }
+  .cns__title { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--c-text-1, #fff); }
+  .cns__subtitle { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .cns__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
+  .cns__perks li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--c-text-1, #fff); }
+  .cns__perks svg { color: var(--chart-pos, #34c38f); }
+  .cns__label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .cns__field { display: flex; gap: 0.5rem; }
+  .cns__input {
+    flex: 1;
+    min-width: 0;
+    min-height: 50px;
+    padding: 0 1rem;
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
+    background: rgba(0, 0, 0, 0.35);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 1rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .cns__input::placeholder { color: var(--c-text-3, #737373); }
+  .cns__input:focus { outline: none; border-color: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 3px var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent)); }
+  .cns__input[aria-invalid='true'] { border-color: var(--chart-neg, #f06a6a); }
+  .cns__btn {
+    min-height: 50px;
+    padding: 0 1.4rem;
+    border: 0;
+    border-radius: var(--r-md, 12px);
+    background: var(--c-text-1, #fff);
+    color: var(--c-on-primary, #0a0a0a);
+    font: inherit;
+    font-weight: 650;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  .cns__btn:hover { background: var(--c-accent, #fef3c7); }
+  .cns__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .cns__msg { min-height: 1.4rem; margin: 0.6rem 0 0; font-size: 0.875rem; }
+  .cns__msg[data-state='error'] { color: #ff9b9b; }
+  .cns__msg[data-state='ok'] { color: #7ee2b8; }
+  .cns__privacy { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--c-text-3, #8a8a8a); }
+  @container (max-width: 820px) {
+    .cns__box { grid-template-columns: 1fr; }
+  }
+  @container (max-width: 460px) {
+    .cns__field { flex-direction: column; }
+  }
+</style>

package/src/components/lib/sections/CtaSplitImage.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * CtaSplitImage — Conversion banner split into copy + CTA and a decorative
+ * visual panel (CSS gradient mesh with floating stat chips). Optional real image.
+ *
+ * @param {string} title - Heading.
+ * @param {string} text - Supporting copy.
+ * @param {{label: string, href: string}} primary - Primary CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA.
+ * @param {string} image - Optional image URL (replaces the CSS visual).
+ * @param {string} imageAlt - Alt text when an image is used.
+ * @param {Array<{value: string, label: string}>} chips - Floating stat chips on the visual.
+ * @param {string} variant - Panel style (mesh|solid|outline).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  text?: string;
+  primary?: { label: string; href: string };
+  secondary?: { label: string; href: string };
+  image?: string;
+  imageAlt?: string;
+  chips?: Array<{ value: string; label: string }>;
+  variant?: 'mesh' | 'solid' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Ready to ship your best page yet?',
+  text = 'Join thousands of teams building fast, accessible Astro sites. Free forever for personal projects.',
+  primary = { label: 'Get started free', href: '#' },
+  secondary = { label: 'Talk to sales', href: '#' },
+  image,
+  imageAlt = '',
+  chips = [
+    { value: '99.9%', label: 'uptime' },
+    { value: '< 50ms', label: 'TTFB' },
+    { value: '100', label: 'Lighthouse' },
+  ],
+  variant = 'mesh',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `csi-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<div class="cq-cta-split-image-cq">
+<section class={`csi csi--${variant} csi--${size} ${className}`} aria-labelledby={id}>
+  <div class="csi__box">
+    <div class="csi__copy">
+      <h2 id={id} class="csi__title">{title}</h2>
+      <p class="csi__text">{text}</p>
+      <div class="csi__actions">
+        <a class="csi__btn csi__btn--primary" href={primary.href}>{primary.label}</a>
+        {secondary && <a class="csi__btn csi__btn--ghost" href={secondary.href}>{secondary.label}</a>}
+      </div>
+    </div>
+    <div class="csi__visual">
+      {image ? (
+        <img src={image} alt={imageAlt} loading="lazy" decoding="async" />
+      ) : (
+        <div class="csi__mesh" aria-hidden="true">
+          {chips.map((c, i) => (
+            <span class="csi__chip" style={`--i:${i}`}><strong>{c.value}</strong>{c.label}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</section>
+</div>
+<style>
+  .cq-cta-split-image-cq { container-type: inline-size; }
+  .csi {
+    --csi-py: 5rem;
+    padding: var(--csi-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .csi--sm { --csi-py: 3rem; }
+  .csi--lg { --csi-py: 7rem; }
+  .csi__box {
+    max-width: 1180px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border-radius: var(--r-xl, 28px);
+    overflow: hidden;
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
+    background: var(--c-bg-1, #0a0a0a);
+  }
+  .csi--outline .csi__box { background: transparent; border-color: rgb(var(--ink-rgb, 255 255 255) / 0.15); }
+  .csi__copy { padding: clamp(2rem, 6vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
+  .csi__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-text-1, #fff); text-wrap: balance; }
+  .csi__text { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); max-width: 460px; }
+  .csi__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+  .csi__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: var(--r-md, 12px); font-weight: 650; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
+  .csi__btn--primary { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); }
+  .csi__btn--primary:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); }
+  .csi__btn--ghost { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15); color: var(--c-text-1, #fff); }
+  .csi__btn--ghost:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.32); color: var(--c-text-1, #fff); }
+  .csi__btn:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .csi__visual { position: relative; min-height: 320px; }
+  .csi__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .csi__mesh {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+  }
+  .csi--mesh .csi__mesh {
+    background:
+      radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--c-primary-light, #d4a017) 55%, transparent), transparent 45%),
+      radial-gradient(circle at 80% 30%, rgba(144, 133, 233, 0.55), transparent 45%),
+      radial-gradient(circle at 50% 90%, rgba(57, 135, 229, 0.5), transparent 50%),
+      #121218;
+  }
+  .csi--solid .csi__mesh { background: linear-gradient(135deg, #1a1408, #0c0c10); }
+  .csi--outline .csi__mesh { background: repeating-linear-gradient(45deg, rgb(var(--ink-rgb, 255 255 255) / 0.03) 0 12px, transparent 12px 24px); }
+  .csi__chip {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding: 0.75rem 1.1rem;
+    border-radius: var(--r-md, 14px);
+    background: rgba(10, 10, 12, 0.6);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
+    backdrop-filter: blur(12px);
+    color: var(--c-text-2, #c4c4c4);
+    font-size: 0.875rem;
+    animation: csi-float 6s ease-in-out infinite;
+    animation-delay: calc(var(--i) * -2s);
+  }
+  .csi__chip:nth-child(2) { transform: translateX(2.5rem); }
+  .csi__chip:nth-child(3) { transform: translateX(-2rem); }
+  .csi__chip strong { font-size: 1.25rem; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  @keyframes csi-float { 50% { translate: 0 -8px; } }
+  @container (max-width: 820px) {
+    .csi__box { grid-template-columns: 1fr; }
+    .csi__visual { min-height: 240px; }
+  }
+  @media (prefers-reduced-motion: reduce) { .csi__chip { animation: none; } }
+</style>