astro-component-kit 0.3.1 → 0.4.0

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

@@ -0,0 +1,144 @@
+---
+/**
+ * ChangelogSection — Release notes timeline with version tags, dates and
+ * categorised entries (new / improved / fixed), each labelled with text + icon.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{version: string, date: string, title: string, changes: Array<{type: 'new'|'improved'|'fixed', text: string}>}>} releases - Releases, newest first.
+ * @param {{label: string, href: string}} subscribe - Optional RSS/updates link.
+ * @param {string} variant - Layout (timeline|cards|compact).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Change { type: 'new' | 'improved' | 'fixed'; text: string }
+interface Release { version: string; date: string; title: string; changes: Change[] }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  releases?: Release[];
+  subscribe?: { label: string; href: string };
+  variant?: 'timeline' | 'cards' | 'compact';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Changelog',
+  subtitle = 'New components, improvements and fixes, shipped every week.',
+  releases = [
+    { version: 'v0.4.0', date: '2026-11-03', title: 'SVG charts & 24 new sections', changes: [
+      { type: 'new', text: '40 zero-dependency SVG charts with tooltips and table fallbacks.' },
+      { type: 'new', text: 'Waitlist, terminal and dashboard hero sections.' },
+      { type: 'improved', text: 'Chart color tokens validated for color-vision deficiency.' },
+    ] },
+    { version: 'v0.3.1', date: '2026-10-27', title: 'Localized SEO', changes: [
+      { type: 'improved', text: 'Meta titles and descriptions in English, Spanish and Russian.' },
+      { type: 'fixed', text: 'Code blocks no longer appear in search snippets.' },
+    ] },
+    { version: 'v0.3.0', date: '2026-10-12', title: 'Notes & categories', changes: [
+      { type: 'new', text: 'Browse-by-category section on the home page.' },
+      { type: 'fixed', text: 'Category titles resolve correctly in every locale.' },
+    ] },
+  ],
+  subscribe = { label: 'Subscribe via RSS', href: '#' },
+  variant = 'timeline',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `cls-${Math.random().toString(36).slice(2, 8)}`;
+const typeLabel = { new: 'New', improved: 'Improved', fixed: 'Fixed' };
+const typeIcon = {
+  new: '<path d="M12 5v14M5 12h14"/>',
+  improved: '<path d="M12 19V5M5 12l7-7 7 7"/>',
+  fixed: '<path d="M20 6 9 17l-5-5"/>',
+};
+const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+---
+
+<section class={`cls cls--${variant} cls--${size} ${className}`} aria-labelledby={id}>
+  <div class="cls__inner">
+    <header class="cls__head">
+      <div>
+        <h2 id={id} class="cls__title">{title}</h2>
+        <p class="cls__subtitle">{subtitle}</p>
+      </div>
+      {subscribe && (
+        <a class="cls__subscribe" href={subscribe.href}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" fill="currentColor" /></svg>
+          {subscribe.label}
+        </a>
+      )}
+    </header>
+    <ol class="cls__list">
+      {releases.map((r) => (
+        <li class="cls__release">
+          <div class="cls__when">
+            <span class="cls__version">{r.version}</span>
+            <time datetime={r.date}>{fmtDate(r.date)}</time>
+          </div>
+          <article class="cls__body">
+            <h3 class="cls__release-title">{r.title}</h3>
+            <ul class="cls__changes">
+              {r.changes.map((c) => (
+                <li>
+                  <span class={`cls__type cls__type--${c.type}`}>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" set:html={typeIcon[c.type]}></svg>
+                    {typeLabel[c.type]}
+                  </span>
+                  <span>{c.text}</span>
+                </li>
+              ))}
+            </ul>
+          </article>
+        </li>
+      ))}
+    </ol>
+  </div>
+</section>
+
+<style>
+  .cls {
+    --cls-py: 5.5rem;
+    padding: var(--cls-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .cls--sm { --cls-py: 3.5rem; }
+  .cls--lg { --cls-py: 7.5rem; }
+  .cls__inner { max-width: 920px; margin: 0 auto; }
+  .cls__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
+  .cls__title { margin: 0 0 0.5rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .cls__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .cls__subscribe { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-md, 12px); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-text-1, #fff); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
+  .cls__subscribe svg { color: #f59e0b; }
+  .cls__subscribe:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--c-text-1, #fff); }
+  .cls__subscribe:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+  .cls__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
+  .cls__release { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; position: relative; }
+  .cls--timeline .cls__release::before { content: ''; position: absolute; left: 196px; top: 10px; bottom: -2.5rem; width: 1px; background: rgba(255, 255, 255, 0.08); }
+  .cls--timeline .cls__release:last-child::before { bottom: 0; }
+  .cls--timeline .cls__body { position: relative; padding-left: 2rem; }
+  .cls--timeline .cls__body::before { content: ''; position: absolute; left: -21px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary-light, #d4a017); box-shadow: 0 0 0 4px var(--c-bg, #050505); }
+  .cls--cards .cls__body { padding: 1.5rem; border-radius: var(--r-lg, 18px); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
+  .cls--compact .cls__list { gap: 1.5rem; }
+  .cls--compact .cls__release { grid-template-columns: 1fr; gap: 0.5rem; }
+  .cls--compact .cls__when { flex-direction: row; align-items: center; }
+  .cls__when { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
+  .cls__version { padding: 0.2rem 0.6rem; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-mono, monospace); font-size: 0.8125rem; color: var(--c-text-1, #fff); }
+  .cls__when time { font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .cls__release-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; color: var(--c-text-1, #fff); letter-spacing: -0.015em; }
+  .cls__changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
+  .cls__changes li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--c-text-2, #c4c4c4); }
+  .cls__type { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; min-width: 5.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 650; }
+  .cls__type--new { background: rgba(57, 135, 229, 0.14); color: #a9cdf7; }
+  .cls__type--improved { background: rgba(144, 133, 233, 0.16); color: #c9c3f5; }
+  .cls__type--fixed { background: rgba(52, 195, 143, 0.14); color: #7ee2b8; }
+  @media (max-width: 680px) {
+    .cls__release { grid-template-columns: 1fr; gap: 0.75rem; }
+    .cls--timeline .cls__release::before { display: none; }
+    .cls--timeline .cls__body { padding-left: 0; }
+    .cls--timeline .cls__body::before { display: none; }
+    .cls__when { flex-direction: row; align-items: center; }
+  }
+</style>

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

@@ -0,0 +1,139 @@
+---
+/**
+ * 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;
+---
+
+<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="rgba(255,255,255,0.14)" />
+            : <circle cx={x * SX} cy={y * SY} r="0.75" fill="rgba(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>
+
+<style>
+  .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, rgba(255, 255, 255, 0.07)); background: rgba(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: rgba(255, 255, 255, 0.2); background: rgba(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, rgba(184, 134, 11, 0.14)); 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, rgba(255, 255, 255, 0.07)); background: radial-gradient(circle at 50% 40%, rgba(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 rgba(255, 255, 255, 0.12); font-size: 0.6875rem; font-weight: 600; color: var(--c-text-1, #fff); white-space: nowrap; }
+  @media (max-width: 860px) { .csm__inner { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .csm__ping { animation: none; } }
+</style>

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

@@ -0,0 +1,163 @@
+---
+/**
+ * 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)}`;
+---
+
+<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>
+
+<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>
+  .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, rgba(184, 134, 11, 0.2)), transparent 55%), #0c0c10;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .cns--glass .cns__box { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); backdrop-filter: blur(16px); }
+  .cns--bordered .cns__box { border: 1px solid rgba(255, 255, 255, 0.14); }
+  .cns__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(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 rgba(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, rgba(184, 134, 11, 0.25)); }
+  .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: #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); }
+  @media (max-width: 820px) {
+    .cns__box { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 460px) {
+    .cns__field { flex-direction: column; }
+  }
+</style>

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

@@ -0,0 +1,147 @@
+---
+/**
+ * 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)}`;
+---
+
+<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>
+
+<style>
+  .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, rgba(255, 255, 255, 0.08));
+    background: var(--c-bg-1, #0a0a0a);
+  }
+  .csi--outline .csi__box { background: transparent; border-color: rgba(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: #0a0a0a; }
+  .csi__btn--primary:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; }
+  .csi__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.15); color: var(--c-text-1, #fff); }
+  .csi__btn--ghost:hover { border-color: rgba(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%, rgba(212, 160, 23, 0.55), 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, rgba(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 rgba(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; } }
+  @media (max-width: 820px) {
+    .csi__box { grid-template-columns: 1fr; }
+    .csi__visual { min-height: 240px; }
+  }
+  @media (prefers-reduced-motion: reduce) { .csi__chip { animation: none; } }
+</style>