astro-component-kit 0.3.0 → 0.4.0

package/src/components/lib/overlays/FloatingFeedbackWidget.astro

@@ -0,0 +1,203 @@
+---
+/**
+ * FloatingFeedbackWidget — Fixed corner floating pill that expands into an interactive feedback survey card.
+ * 
+ * @param {string} title - Widget title. Default is 'Was this helpful?'.
+ * @param {string} position - Screen anchor ('bottom-right' | 'bottom-left'). Default is 'bottom-right'.
+ */
+interface Props {
+  title?: string;
+  position?: 'bottom-right' | 'bottom-left';
+}
+
+const {
+  title = 'Send Feedback',
+  position = 'bottom-right',
+} = Astro.props;
+---
+
+<div class:list={['fb-widget', `fb-widget--${position}`]} data-feedback-widget>
+  <button type="button" class="fb-widget__trigger" aria-label="Open feedback modal" data-fb-trigger>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    </svg>
+    <span>Feedback</span>
+  </button>
+
+  <div class="fb-widget__card" data-fb-card hidden>
+    <div class="fb-widget__head">
+      <h5 class="fb-widget__title">{title}</h5>
+      <button type="button" class="fb-widget__close" aria-label="Close" data-fb-close>×</button>
+    </div>
+
+    <div class="fb-widget__emojis">
+      <button type="button" class="emoji-btn" aria-label="Sad">🙁</button>
+      <button type="button" class="emoji-btn" aria-label="Neutral">😐</button>
+      <button type="button" class="emoji-btn emoji-btn--selected" aria-label="Happy">😊</button>
+      <button type="button" class="emoji-btn" aria-label="Love it">🤩</button>
+    </div>
+
+    <textarea
+      placeholder="Any details to share? (optional)"
+      class="fb-widget__textarea"
+      rows="2"
+    ></textarea>
+
+    <button type="button" class="fb-widget__send" data-fb-send>
+      Send Feedback
+    </button>
+  </div>
+</div>
+
+<style>
+  .fb-widget {
+    position: fixed;
+    z-index: 90;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .fb-widget--bottom-right { bottom: 1.5rem; right: 1.5rem; }
+  .fb-widget--bottom-left  { bottom: 1.5rem; left: 1.5rem; }
+
+  .fb-widget__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0.6rem 1.1rem;
+    background: rgba(14, 14, 18, 0.9);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: var(--r-full, 9999px);
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.82rem;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    transition: transform 0.2s ease, border-color 0.2s ease;
+  }
+
+  .fb-widget__trigger:hover {
+    transform: translateY(-2px);
+    border-color: rgba(184, 134, 11, 0.4);
+    color: var(--c-primary-light, #d4a017);
+  }
+
+  .fb-widget__card {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    right: 0;
+    width: 280px;
+    padding: 1.2rem;
+    background: rgba(12, 12, 16, 0.95);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: var(--r-xl, 20px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .fb-widget__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .fb-widget__title {
+    font-size: 0.88rem;
+    font-weight: 800;
+    color: var(--c-text-1, #ffffff);
+    margin: 0;
+  }
+
+  .fb-widget__close {
+    background: transparent;
+    border: none;
+    color: var(--c-text-3, #737373);
+    font-size: 1.2rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .fb-widget__emojis {
+    display: flex;
+    justify-content: space-between;
+    gap: 6px;
+  }
+
+  .emoji-btn {
+    flex: 1;
+    font-size: 1.4rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-md, 10px);
+    padding: 6px 0;
+    cursor: pointer;
+    transition: transform 0.2s ease, background 0.2s ease;
+  }
+
+  .emoji-btn:hover,
+  .emoji-btn--selected {
+    transform: scale(1.15);
+    background: rgba(184, 134, 11, 0.2);
+    border-color: rgba(184, 134, 11, 0.4);
+  }
+
+  .fb-widget__textarea {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-sm, 8px);
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.8rem;
+    padding: 8px;
+    resize: none;
+    outline: none;
+    font-family: inherit;
+  }
+
+  .fb-widget__send {
+    padding: 0.6rem;
+    background: linear-gradient(135deg, #d4a017, #b8860b);
+    border: none;
+    border-radius: var(--r-sm, 8px);
+    color: #050505;
+    font-size: 0.8rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+
+  .fb-widget__send:hover {
+    opacity: 0.9;
+  }
+</style>
+
+<script>
+  function setupFeedbackWidgets() {
+    document.querySelectorAll('[data-feedback-widget]').forEach((widget) => {
+      const trigger = widget.querySelector('[data-fb-trigger]');
+      const card = widget.querySelector('[data-fb-card]') as HTMLElement;
+      const close = widget.querySelector('[data-fb-close]');
+      const send = widget.querySelector('[data-fb-send]');
+      if (!trigger || !card) return;
+
+      trigger.addEventListener('click', () => {
+        card.hidden = !card.hidden;
+      });
+
+      close?.addEventListener('click', () => {
+        card.hidden = true;
+      });
+
+      send?.addEventListener('click', () => {
+        card.innerHTML = `<p style="text-align:center;font-size:0.85rem;color:#10b981;font-weight:700;margin:1rem 0;">✓ Thank you for your feedback!</p>`;
+        setTimeout(() => { card.hidden = true; }, 2000);
+      });
+    });
+  }
+
+  setupFeedbackWidgets();
+  document.addEventListener('astro:page-load', setupFeedbackWidgets);
+</script>

package/src/components/lib/overlays/ImageCompareSlider.astro

@@ -0,0 +1,172 @@
+---
+/**
+ * ImageCompareSlider — Interactive dual-image split compare slider with draggable separator bar.
+ * 
+ * @param {string} beforeImage - URL of original / before image.
+ * @param {string} afterImage - URL of modified / after image.
+ * @param {string} beforeLabel - Label tag. Default is 'Before'.
+ * @param {string} afterLabel - Label tag. Default is 'After'.
+ * @param {number} initialPosition - Starting separator position (0 to 100). Default is 50.
+ */
+interface Props {
+  beforeImage?: string;
+  afterImage?: string;
+  beforeLabel?: string;
+  afterLabel?: string;
+  initialPosition?: number;
+}
+
+const {
+  beforeImage = 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&auto=format&fit=crop&q=80',
+  afterImage = 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&auto=format&fit=crop&q=80',
+  beforeLabel = 'Before (Wireframe)',
+  afterLabel = 'After (Production)',
+  initialPosition = 50,
+} = Astro.props;
+---
+
+<div class="img-compare" data-img-compare style={`--pos: ${initialPosition}%;`}>
+  <div class="img-compare__layer img-compare__layer--after">
+    <img src={afterImage} alt={afterLabel} loading="lazy" />
+    <span class="img-compare__tag img-compare__tag--after">{afterLabel}</span>
+  </div>
+
+  <div class="img-compare__layer img-compare__layer--before" data-compare-before>
+    <img src={beforeImage} alt={beforeLabel} loading="lazy" />
+    <span class="img-compare__tag img-compare__tag--before">{beforeLabel}</span>
+  </div>
+
+  <div class="img-compare__handle" data-compare-handle aria-hidden="true">
+    <div class="handle-line"></div>
+    <div class="handle-button">
+      <span>‹</span>
+      <span>›</span>
+    </div>
+  </div>
+
+  <input
+    type="range"
+    min="0"
+    max="100"
+    value={initialPosition}
+    class="img-compare__range"
+    aria-label="Drag to compare images"
+    data-compare-range
+  />
+</div>
+
+<style>
+  .img-compare {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    border-radius: var(--r-xl, 20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+    user-select: none;
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+
+  .img-compare__layer {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .img-compare__layer img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    pointer-events: none;
+  }
+
+  .img-compare__layer--before {
+    clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
+  }
+
+  .img-compare__tag {
+    position: absolute;
+    top: 14px;
+    padding: 4px 10px;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(8px);
+    color: #ffffff;
+    font-size: 0.72rem;
+    font-weight: 700;
+    border-radius: var(--r-full, 9999px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    pointer-events: none;
+  }
+
+  .img-compare__tag--before { left: 14px; }
+  .img-compare__tag--after { right: 14px; }
+
+  .img-compare__handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: var(--pos);
+    transform: translateX(-50%);
+    pointer-events: none;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .handle-line {
+    width: 2px;
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
+  }
+
+  .handle-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: #ffffff;
+    color: #050505;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 0.95rem;
+    font-weight: 900;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
+  }
+
+  .img-compare__range {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: ew-resize;
+    z-index: 10;
+  }
+</style>
+
+<script>
+  function setupImageCompare() {
+    document.querySelectorAll('[data-img-compare]').forEach((comp) => {
+      const range = comp.querySelector('[data-compare-range]') as HTMLInputElement;
+      if (!range) return;
+
+      range.addEventListener('input', () => {
+        (comp as HTMLElement).style.setProperty('--pos', `${range.value}%`);
+      });
+    });
+  }
+
+  setupImageCompare();
+  document.addEventListener('astro:page-load', setupImageCompare);
+</script>

package/src/components/lib/overlays/index.ts

@@ -21,3 +21,6 @@ export { default as SplashIntroOverlay } from './SplashIntroOverlay.astro';
 export { default as SpotlightIndicator } from './SpotlightIndicator.astro';
 export { default as ToastStackOverlay } from './ToastStackOverlay.astro';
 export { default as TooltipActionTray } from './TooltipActionTray.astro';
+export { default as CookiePreferencesDrawer } from './CookiePreferencesDrawer.astro';
+export { default as ImageCompareSlider } from './ImageCompareSlider.astro';
+export { default as FloatingFeedbackWidget } from './FloatingFeedbackWidget.astro';

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

@@ -0,0 +1,131 @@
+---
+/**
+ * BlogGridSection — Latest articles section with one featured post and a grid of
+ * smaller posts. Covers are CSS gradients by default (pass `image` for photos).
+ *
+ * @param {string} title - Section heading.
+ * @param {{label: string, href: string}} viewAll - Link to the full blog.
+ * @param {Array<{title: string, excerpt: string, category: string, date: string, readTime: string, author: string, href: string, image?: string}>} posts - Posts (first is featured).
+ * @param {string} variant - Card style (cards|minimal|overlay).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Post { title: string; excerpt: string; category: string; date: string; readTime: string; author: string; href: string; image?: string }
+interface Props {
+  title?: string;
+  viewAll?: { label: string; href: string };
+  posts?: Post[];
+  variant?: 'cards' | 'minimal' | 'overlay';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'From the blog',
+  viewAll = { label: 'View all posts', href: '#' },
+  posts = [
+    { title: 'Building zero-JS charts with SVG and Astro', excerpt: 'How we replaced a 200 kB charting library with build-time SVG, without losing tooltips or accessibility.', category: 'Engineering', date: '2026-10-28', readTime: '8 min', author: 'Marcus Lee', href: '#' },
+    { title: 'Designing for dark mode first', excerpt: 'Contrast, elevation and color tokens that hold up at night.', category: 'Design', date: '2026-10-21', readTime: '5 min', author: 'Sofía Ruiz', href: '#' },
+    { title: 'The accessibility checklist we run on every component', excerpt: 'Focus, keyboard, contrast and screen readers — our exact process.', category: 'Accessibility', date: '2026-10-14', readTime: '6 min', author: 'Priya Natarajan', href: '#' },
+    { title: 'Landing page anatomy: 7 sections that convert', excerpt: 'A data-backed look at hero, proof, pricing and FAQ placement.', category: 'Growth', date: '2026-10-07', readTime: '7 min', author: 'Alicia Gómez', href: '#' },
+  ],
+  variant = 'cards',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `bgs-${Math.random().toString(36).slice(2, 8)}`;
+const gradients = [
+  'radial-gradient(circle at 20% 20%, rgba(57,135,229,.65), transparent 55%), radial-gradient(circle at 80% 80%, rgba(144,133,233,.55), transparent 50%), #101018',
+  'radial-gradient(circle at 70% 30%, rgba(212,160,23,.6), transparent 50%), #15120a',
+  'radial-gradient(circle at 30% 70%, rgba(25,158,112,.6), transparent 55%), #0b1411',
+  'radial-gradient(circle at 60% 40%, rgba(213,81,129,.55), transparent 55%), #150b10',
+];
+const fmtDate = (d: string) => new Date(`${d}T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+---
+
+<section class={`bgs bgs--${variant} bgs--${size} ${className}`} aria-labelledby={id}>
+  <div class="bgs__inner">
+    <header class="bgs__head">
+      <h2 id={id} class="bgs__title">{title}</h2>
+      {viewAll && (
+        <a class="bgs__all" href={viewAll.href}>
+          {viewAll.label}
+          <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="M5 12h14M13 6l6 6-6 6" /></svg>
+        </a>
+      )}
+    </header>
+    <ul class="bgs__grid">
+      {posts.map((p, i) => (
+        <li class:list={['bgs__post', { 'bgs__post--featured': i === 0 }]}>
+          <article class="bgs__card">
+            <div class="bgs__cover" style={p.image ? undefined : `background:${gradients[i % gradients.length]}`}>
+              {p.image && <img src={p.image} alt="" loading="lazy" decoding="async" />}
+            </div>
+            <div class="bgs__body">
+              <p class="bgs__meta">
+                <span class="bgs__cat">{p.category}</span>
+                <time datetime={p.date}>{fmtDate(p.date)}</time>
+                <span aria-hidden="true">·</span>
+                <span>{p.readTime} read</span>
+              </p>
+              <h3 class="bgs__post-title"><a href={p.href}>{p.title}</a></h3>
+              <p class="bgs__excerpt">{p.excerpt}</p>
+              <p class="bgs__author">By {p.author}</p>
+            </div>
+          </article>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .bgs {
+    --bgs-py: 5.5rem;
+    padding: var(--bgs-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .bgs--sm { --bgs-py: 3.5rem; }
+  .bgs--lg { --bgs-py: 7.5rem; }
+  .bgs__inner { max-width: 1180px; margin: 0 auto; }
+  .bgs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
+  .bgs__title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .bgs__all { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; color: var(--c-primary-light, #d4a017); text-decoration: none; }
+  .bgs__all:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 4px; }
+  .bgs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
+  .bgs__post--featured { grid-column: 1 / -1; }
+  .bgs__card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--r-lg, 20px); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; }
+  .bgs--cards .bgs__card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
+  .bgs__card:hover, .bgs__card:focus-within { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
+  .bgs__post--featured .bgs__card { display: grid; grid-template-columns: 1.2fr 1fr; }
+  .bgs__cover { aspect-ratio: 16 / 9; position: relative; }
+  .bgs__post--featured .bgs__cover { aspect-ratio: auto; min-height: 280px; }
+  .bgs__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .bgs--minimal .bgs__cover { border-radius: var(--r-lg, 20px); }
+  .bgs__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
+  .bgs--minimal .bgs__body { padding: 1.25rem 0 0; }
+  .bgs__post--featured .bgs__body { justify-content: center; padding: clamp(1.5rem, 4vw, 2.75rem); }
+  .bgs--overlay .bgs__card { min-height: 320px; }
+  .bgs--overlay .bgs__cover { position: absolute; inset: 0; aspect-ratio: auto; }
+  .bgs--overlay .bgs__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 70%); }
+  .bgs--overlay .bgs__body { position: relative; margin-top: auto; }
+  .bgs--overlay .bgs__post--featured .bgs__card { display: flex; }
+  .bgs__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .bgs__cat { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--c-text-1, #fff); font-weight: 600; font-size: 0.75rem; }
+  .bgs__post-title { margin: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
+  .bgs__post--featured .bgs__post-title { font-size: clamp(1.5rem, 3vw, 2rem); }
+  .bgs__post-title a { color: var(--c-text-1, #fff); text-decoration: none; }
+  .bgs__post-title a::after { content: ''; position: absolute; inset: 0; }
+  .bgs__post-title a:focus-visible { outline: none; }
+  .bgs__card:has(a:focus-visible) { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .bgs__excerpt { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .bgs__author { margin: auto 0 0; padding-top: 0.5rem; font-size: 0.8125rem; color: var(--c-text-3, #8a8a8a); }
+  @media (max-width: 900px) {
+    .bgs__grid { grid-template-columns: 1fr 1fr; }
+    .bgs__post--featured .bgs__card { grid-template-columns: 1fr; }
+    .bgs__post--featured .bgs__cover { min-height: 200px; }
+  }
+  @media (max-width: 600px) { .bgs__grid { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .bgs__card { transition: none; } }
+</style>

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

@@ -0,0 +1,139 @@
+---
+/**
+ * CareersOpenings — Job listings section grouped by department, with location,
+ * type and remote badges, plus perks strip and a general-application CTA.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{title: string, department: string, location: string, type: string, remote?: boolean, href: string}>} jobs - Open roles.
+ * @param {string[]} perks - Short perk labels.
+ * @param {{label: string, href: string}} cta - General application link.
+ * @param {string} variant - Row style (list|cards|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Job { title: string; department: string; location: string; type: string; remote?: boolean; href: string }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  jobs?: Job[];
+  perks?: string[];
+  cta?: { label: string; href: string };
+  variant?: 'list' | 'cards' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Join the team',
+  subtitle = 'We’re a small, remote-first crew building tools for the open web.',
+  jobs = [
+    { title: 'Senior Frontend Engineer', department: 'Engineering', location: 'Europe', type: 'Full-time', remote: true, href: '#' },
+    { title: 'Design Systems Engineer', department: 'Engineering', location: 'Americas', type: 'Full-time', remote: true, href: '#' },
+    { title: 'Product Designer', department: 'Design', location: 'Barcelona', type: 'Full-time', href: '#' },
+    { title: 'Developer Advocate', department: 'Marketing', location: 'Anywhere', type: 'Contract', remote: true, href: '#' },
+  ],
+  perks = ['Remote-first', '4-day work week', 'Learning budget', 'Equity for everyone'],
+  cta = { label: 'Send an open application', href: '#' },
+  variant = 'list',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `co-${Math.random().toString(36).slice(2, 8)}`;
+const departments = [...new Set(jobs.map((j) => j.department))];
+---
+
+<section class={`co co--${variant} co--${size} ${className}`} aria-labelledby={id}>
+  <div class="co__inner">
+    <header class="co__head">
+      <div>
+        <h2 id={id} class="co__title">{title}</h2>
+        <p class="co__subtitle">{subtitle}</p>
+      </div>
+      <span class="co__count">{jobs.length} open roles</span>
+    </header>
+
+    <ul class="co__perks" aria-label="Perks">
+      {perks.map((p) => <li>{p}</li>)}
+    </ul>
+
+    {departments.map((d) => (
+      <div class="co__dept">
+        <h3 class="co__dept-title">{d}</h3>
+        <ul class="co__jobs">
+          {jobs.filter((j) => j.department === d).map((j) => (
+            <li>
+              <a class="co__job" href={j.href}>
+                <span class="co__job-title">{j.title}</span>
+                <span class="co__meta">
+                  <span class="co__tag">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></svg>
+                    {j.location}
+                  </span>
+                  <span class="co__tag">{j.type}</span>
+                  {j.remote && <span class="co__tag co__tag--remote">Remote</span>}
+                </span>
+                <svg class="co__arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9" /></svg>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))}
+
+    {cta && (
+      <p class="co__cta">Don’t see your role? <a href={cta.href}>{cta.label}</a></p>
+    )}
+  </div>
+</section>
+
+<style>
+  .co {
+    --co-py: 5.5rem;
+    padding: var(--co-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .co--sm { --co-py: 3.5rem; }
+  .co--lg { --co-py: 7.5rem; }
+  .co__inner { max-width: 960px; margin: 0 auto; }
+  .co__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
+  .co__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); }
+  .co__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .co__count { padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(52, 195, 143, 0.12); color: #7ee2b8; font-size: 0.8125rem; font-weight: 650; }
+  .co__perks { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .co__perks li { padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .co__dept + .co__dept { margin-top: 2rem; }
+  .co__dept-title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .co__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
+  .co--list .co__jobs { gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
+  .co__job {
+    display: grid;
+    grid-template-columns: 1fr auto 24px;
+    align-items: center;
+    gap: 1rem;
+    min-height: 64px;
+    padding: 0.85rem 1rem;
+    color: inherit;
+    text-decoration: none;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+  .co--list .co__job { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
+  .co--cards .co__job { border-radius: var(--r-md, 14px); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); }
+  .co--minimal .co__job { padding-inline: 0; }
+  .co__job:hover { background: rgba(255, 255, 255, 0.035); }
+  .co__job:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; border-radius: 10px; }
+  .co__job-title { font-size: 1.0625rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .co__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
+  .co__tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 0.75rem; color: var(--c-text-2, #a3a3a3); }
+  .co__tag--remote { background: rgba(57, 135, 229, 0.14); color: #a9cdf7; }
+  .co__arrow { color: var(--c-text-3, #8a8a8a); transition: transform 0.2s ease, color 0.2s ease; }
+  .co__job:hover .co__arrow { transform: translate(2px, -2px); color: var(--c-text-1, #fff); }
+  .co__cta { margin: 2.5rem 0 0; text-align: center; color: var(--c-text-2, #a3a3a3); }
+  .co__cta a { color: var(--c-primary-light, #d4a017); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
+  @media (max-width: 640px) {
+    .co__job { grid-template-columns: 1fr 24px; }
+    .co__meta { grid-column: 1; grid-row: 2; justify-content: flex-start; }
+    .co__arrow { grid-row: 1 / span 2; grid-column: 2; }
+  }
+</style>