astro-component-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1,113 @@
+---
+/**
+ * AgencyServicesList — Numbered, expandable service rows: big service names, short pitch,
+ * deliverable chips, typical timeline and "from" price, with a hover/focus reveal.
+ *
+ * @param {string} eyebrow - Small label. Default 'What we do'.
+ * @param {string} title - Section heading. Default 'Services that move the needle'.
+ * @param {Array<{name: string, pitch: string, deliverables?: string[], timeline?: string, from?: string, href?: string}>} services - Rows.
+ * @param {number} open - Index opened by default (-1 for none). Default 0.
+ * @param {boolean} exclusive - Opening one row closes the others. Default true.
+ * @param {string} variant - Style (lines|cards). Default 'lines'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: native <details>/<summary> rows (keyboard and screen-reader friendly); each row
+ * has a heading; the decorative number and arrow are aria-hidden.
+ */
+interface Service { name: string; pitch: string; deliverables?: string[]; timeline?: string; from?: string; href?: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  services?: Service[];
+  open?: number;
+  exclusive?: boolean;
+  variant?: 'lines' | 'cards';
+  className?: string;
+}
+
+const {
+  eyebrow = 'What we do',
+  title = 'Services that move the needle',
+  services = [
+    { name: 'Brand identity', pitch: 'Positioning, naming, logo systems and guidelines that make you unmistakable.', deliverables: ['Strategy workshop', 'Visual identity', 'Brand book', 'Launch kit'], timeline: '6–8 weeks', from: '€18k' },
+    { name: 'Websites', pitch: 'Fast, accessible Astro sites with a CMS your team will actually enjoy.', deliverables: ['UX & content', 'Design system', 'Astro build', 'CMS & analytics'], timeline: '8–12 weeks', from: '€24k' },
+    { name: 'Growth marketing', pitch: 'Performance campaigns, SEO and CRO run by people who read the numbers.', deliverables: ['Paid social', 'SEO', 'A/B testing', 'Monthly reporting'], timeline: 'Monthly', from: '€6k / mo' },
+    { name: 'Content & social', pitch: 'Always-on content engines: shoots, short video, copy and community.', deliverables: ['Editorial calendar', 'Production', 'Community'], timeline: 'Monthly', from: '€4k / mo' },
+  ],
+  open = 0,
+  exclusive = true,
+  variant = 'lines',
+  className = '',
+} = Astro.props;
+---
+
+<div class="cq-agency-services">
+<section class:list={['asl', `asl--${variant}`, className]} aria-labelledby="asl-title" data-services data-exclusive={exclusive ? '' : undefined}>
+  <header class="asl__head">
+    <p class="asl__eyebrow">{eyebrow}</p>
+    <h2 class="asl__title" id="asl-title">{title}</h2>
+  </header>
+  <div class="asl__list">
+    {services.map((s, i) => (
+      <details class="asl__row" open={i === open}>
+        <summary class="asl__summary">
+          <span class="asl__num" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
+          <h3 class="asl__name">{s.name}</h3>
+          {s.from && <span class="asl__from">from {s.from}</span>}
+          <span class="asl__arrow" aria-hidden="true">↗</span>
+        </summary>
+        <div class="asl__body">
+          <p class="asl__pitch">{s.pitch}</p>
+          {s.deliverables && <ul class="asl__chips">{s.deliverables.map((d) => <li>{d}</li>)}</ul>}
+          <p class="asl__meta">{s.timeline && <span>Timeline · <strong>{s.timeline}</strong></span>}{s.href && <a href={s.href}>Learn more →</a>}</p>
+        </div>
+      </details>
+    ))}
+  </div>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-services][data-exclusive]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const rows = Array.from(root.querySelectorAll<HTMLDetailsElement>('details'));
+    rows.forEach((d) => d.addEventListener('toggle', () => { if (d.open) rows.forEach((o) => { if (o !== d) o.open = false; }); }));
+  });
+</script>
+
+<style>
+  .cq-agency-services { container-type: inline-size; }
+  .asl { color: var(--c-text-1, #fff); }
+  .asl__head { display: grid; gap: var(--sp-2, 0.5rem); margin-bottom: var(--sp-6, 1.5rem); }
+  .asl__eyebrow { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .asl__title { margin: 0; max-width: 18ch; font-size: clamp(2.2rem, 6cqi, 4.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; }
+  .asl__list { border-top: 1.5px solid currentColor; }
+  .asl--cards .asl__list { display: grid; gap: var(--sp-3, 0.75rem); border: 0; }
+  .asl__row { border-bottom: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.15)); }
+  .asl--cards .asl__row { border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); border-radius: 24px; padding: 0 var(--sp-5, 1.25rem); }
+  .asl__summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 48px; align-items: center; gap: var(--sp-4, 1rem); min-height: 96px; cursor: pointer; list-style: none; }
+  .asl__summary::-webkit-details-marker { display: none; }
+  .asl__summary:focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 4px; border-radius: 12px; }
+  .asl__num { font-size: 0.85rem; font-weight: 700; color: var(--c-text-3, #737373); font-variant-numeric: tabular-nums; }
+  .asl__name { margin: 0; font-size: clamp(1.6rem, 4.4cqi, 3rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+  .asl__summary:hover .asl__name { transform: translateX(10px); }
+  .asl__from { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.2)); font-size: 0.82rem; font-weight: 700; color: var(--c-text-2, #a3a3a3); white-space: nowrap; }
+  .asl__arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 1.1rem; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
+  .asl__row[open] .asl__arrow { transform: rotate(90deg); background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); border-color: transparent; }
+  .asl__body { display: grid; gap: var(--sp-4, 1rem); padding: 0 0 var(--sp-6, 1.5rem) calc(56px + var(--sp-4, 1rem)); animation: asl-in 0.35s ease-out; }
+  @keyframes asl-in { from { opacity: 0; transform: translateY(-6px); } }
+  .asl__pitch { margin: 0; max-width: 46rem; font-size: 1.1rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .asl__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
+  .asl__chips li { padding: 8px 14px; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.07); font-size: 0.85rem; font-weight: 600; }
+  .asl__meta { display: flex; flex-wrap: wrap; gap: var(--sp-5, 1.25rem); margin: 0; font-size: 0.88rem; color: var(--c-text-2, #a3a3a3); }
+  .asl__meta strong { color: var(--c-text-1, #fff); }
+  .asl__meta a { color: var(--c-text-1, #fff); font-weight: 700; }
+
+  @container (max-width: 640px) {
+    .asl__summary { grid-template-columns: 36px minmax(0, 1fr) 44px; min-height: 80px; }
+    .asl__from { display: none; }
+    .asl__arrow { width: 44px; height: 44px; }
+    .asl__body { padding-left: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) { .asl__name, .asl__arrow, .asl__body { transition: none; animation: none; } }
+</style>

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

@@ -0,0 +1,111 @@
+---
+/**
+ * AgencyTeamGrid — Team portraits with name, role, location, a personal "fun fact" revealed on
+ * hover/focus and social links, plus an optional "we're hiring" card.
+ *
+ * @param {string} eyebrow - Small label. Default 'The studio'.
+ * @param {string} title - Heading. Default 'Small team, senior people'.
+ * @param {string} text - Intro paragraph.
+ * @param {Array<{name: string, role: string, location?: string, fact?: string, photo?: string, links?: {label: string, href: string}[]}>} people - Team members.
+ * @param {{title: string, text: string, href: string, label?: string}} hiring - Hiring card (optional).
+ * @param {number} columns - Desktop columns (3–4). Default 4.
+ * @param {string} variant - Style (portrait|compact). Default 'portrait'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each person is an article with a heading; the fun fact is real text (visible on
+ * hover and on keyboard focus of the card); social links have descriptive labels.
+ */
+interface Person { name: string; role: string; location?: string; fact?: string; photo?: string; links?: Array<{ label: string; href: string }> }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  text?: string;
+  people?: Person[];
+  hiring?: { title: string; text: string; href: string; label?: string };
+  columns?: 3 | 4;
+  variant?: 'portrait' | 'compact';
+  className?: string;
+}
+
+const {
+  eyebrow = 'The studio',
+  title = 'Small team, senior people',
+  text = 'No juniors hidden behind account managers. You work directly with the people who do the work.',
+  people = [
+    { name: 'Marta Ibáñez', role: 'Founder & creative director', location: 'Madrid', fact: 'Designed her first logo at 12 — for her cat.', links: [{ label: 'LinkedIn', href: '#' }] },
+    { name: 'Jonas Weber', role: 'Head of design', location: 'Berlin', fact: 'Owns 41 typefaces, uses three.', links: [{ label: 'Dribbble', href: '#' }] },
+    { name: 'Aisha Bello', role: 'Growth lead', location: 'Lisbon', fact: 'Ran a marathon and a product launch the same week.', links: [{ label: 'LinkedIn', href: '#' }] },
+    { name: 'Leo Martins', role: 'Lead developer', location: 'Remote', fact: 'Ships to production from a sailboat.', links: [{ label: 'GitHub', href: '#' }] },
+  ],
+  hiring = { title: 'We are hiring', text: 'Senior designers and Astro developers — remote in Europe.', href: '#', label: 'See open roles' },
+  columns = 4,
+  variant = 'portrait',
+  className = '',
+} = Astro.props;
+
+const hues = [80, 280, 20, 190, 330, 140];
+const initials = (n: string) => n.split(/\s+/).slice(0, 2).map((p) => p[0]).join('');
+---
+
+<div class="cq-agency-team">
+<section class:list={['atg', `atg--${variant}`, className]} style={`--cols: ${columns}`} aria-labelledby="atg-title">
+  <header class="atg__head">
+    <p class="atg__eyebrow">{eyebrow}</p>
+    <h2 class="atg__title" id="atg-title">{title}</h2>
+    {text && <p class="atg__text">{text}</p>}
+  </header>
+  <div class="atg__grid">
+    {people.map((p, i) => (
+      <article class="atg__person" tabindex="0" aria-labelledby={`atg-p-${i}`}>
+        <div class="atg__photo" style={`--h: ${hues[i % hues.length]}`}>
+          {p.photo ? <img src={p.photo} alt={`Portrait of ${p.name}`} loading="lazy" decoding="async" /> : <span class="atg__initials" aria-hidden="true">{initials(p.name)}</span>}
+          {p.fact && <p class="atg__fact"><span>Fun fact</span>{p.fact}</p>}
+        </div>
+        <h3 class="atg__name" id={`atg-p-${i}`}>{p.name}</h3>
+        <p class="atg__role">{p.role}{p.location && <span> · {p.location}</span>}</p>
+        {p.links && <p class="atg__links">{p.links.map((l) => <a href={l.href} aria-label={`${p.name} on ${l.label}`}>{l.label}</a>)}</p>}
+      </article>
+    ))}
+    {hiring && (
+      <a class="atg__hiring" href={hiring.href}>
+        <strong>{hiring.title}</strong>
+        <span>{hiring.text}</span>
+        <em>{hiring.label ?? 'Open roles'} ↗</em>
+      </a>
+    )}
+  </div>
+</section>
+</div>
+
+<style>
+  .cq-agency-team { container-type: inline-size; }
+  .atg { color: var(--c-text-1, #fff); }
+  .atg__head { display: grid; gap: var(--sp-2, 0.5rem); max-width: 46rem; margin-bottom: var(--sp-8, 2rem); }
+  .atg__eyebrow { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .atg__title { margin: 0; font-size: clamp(2.2rem, 6cqi, 4.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; }
+  .atg__text { margin: var(--sp-2, 0.5rem) 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .atg__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(1rem, 2.5cqi, 1.75rem); }
+  .atg__person { display: grid; gap: 4px; outline: none; }
+  .atg__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 80% 70%), transparent 60%), hsl(var(--h) 40% 22%); margin-bottom: var(--sp-3, 0.75rem); }
+  .atg--compact .atg__photo { aspect-ratio: 1; }
+  .atg__photo img { width: 100%; height: 100%; object-fit: cover; }
+  .atg__initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(3rem, 9cqi, 5.5rem); font-weight: 900; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.9); }
+  .atg__fact { position: absolute; inset: auto 10px 10px; margin: 0; padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); border-radius: 16px; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 0.88rem; font-weight: 600; line-height: 1.4; opacity: 0; transform: translateY(12px) rotate(-1.5deg); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+  .atg__fact span { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
+  .atg__person:hover .atg__fact, .atg__person:focus-within .atg__fact, .atg__person:focus .atg__fact { opacity: 1; transform: rotate(-1.5deg); }
+  .atg__person:focus-visible .atg__photo { outline: 3px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .atg__name { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
+  .atg__role { margin: 0; font-size: 0.88rem; color: var(--c-text-2, #a3a3a3); }
+  .atg__links { display: flex; gap: var(--sp-3, 0.75rem); margin: 4px 0 0; }
+  .atg__links a { min-height: 32px; display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--c-text-1, #fff); text-decoration: underline; text-underline-offset: 3px; }
+  .atg__links a:focus-visible, .atg__hiring:focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .atg__hiring { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-2, 0.5rem); aspect-ratio: 4 / 5; padding: var(--sp-6, 1.5rem); border-radius: 24px; border: 2px dashed var(--c-border, rgba(255, 255, 255, 0.25)); color: inherit; text-decoration: none; transition: background 0.3s ease, border-color 0.3s ease; }
+  .atg__hiring:hover { background: var(--agency-accent, var(--c-primary-light, #d4a017)); border-color: transparent; color: var(--c-on-primary, #050505); }
+  .atg__hiring strong { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
+  .atg__hiring span { font-size: 0.92rem; opacity: 0.8; }
+  .atg__hiring em { font-style: normal; font-weight: 800; }
+  @container (max-width: 900px) { .atg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @container (max-width: 460px) { .atg__grid { grid-template-columns: 1fr; } .atg__hiring { aspect-ratio: auto; min-height: 200px; } }
+  @media (hover: none) { .atg__fact { position: static; opacity: 1; transform: none; margin: var(--sp-2, 0.5rem); } .atg__photo { display: flex; flex-direction: column; justify-content: flex-end; } }
+  @media (prefers-reduced-motion: reduce) { .atg__fact, .atg__hiring { transition: none; } }
+</style>

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

@@ -0,0 +1,147 @@
+---
+/**
+ * AgencyWorkGrid — Case-study grid with category filter chips: large art tiles, client, title,
+ * services and a headline result, in an alternating big/small rhythm.
+ *
+ * @param {string} eyebrow - Small label. Default 'Selected work'.
+ * @param {string} title - Heading. Default 'Work we are proud of'.
+ * @param {Array<{slug: string, client: string, title: string, category: string, services?: string[], result?: string, year?: string, hue?: number, image?: string, href?: string}>} projects - Case studies.
+ * @param {boolean} filters - Show category chips. Default true.
+ * @param {{label: string, href: string}} link - "All work" link (optional).
+ * @param {string} variant - Layout (mosaic|grid). Default 'mosaic'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each card is one link with a heading; filter chips are toggle buttons and the
+ * number of visible projects is announced; art is decorative.
+ */
+interface Project { slug: string; client: string; title: string; category: string; services?: string[]; result?: string; year?: string; hue?: number; image?: string; href?: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  projects?: Project[];
+  filters?: boolean;
+  link?: { label: string; href: string };
+  variant?: 'mosaic' | 'grid';
+  className?: string;
+}
+
+const {
+  eyebrow = 'Selected work',
+  title = 'Work we are proud of',
+  projects = [
+    { slug: 'nordlys', client: 'Nordlys', title: 'A Nordic skincare brand that sold out its launch', category: 'Brand', services: ['Identity', 'Packaging'], result: '+212% preorders', year: '2026', hue: 190 },
+    { slug: 'pace', client: 'Pace', title: 'A running app redesign that doubled retention', category: 'Product', services: ['UX', 'UI'], result: '2× day-30 retention', year: '2025', hue: 80 },
+    { slug: 'casa-alba', client: 'Casa Alba', title: 'Direct bookings for a boutique hotel group', category: 'Web', services: ['Website', 'SEO'], result: '+64% direct revenue', year: '2025', hue: 25 },
+    { slug: 'fintrack', client: 'Fintrack', title: 'Paid social that halved the cost per signup', category: 'Growth', services: ['Paid social', 'CRO'], result: '−48% CPA', year: '2026', hue: 280 },
+  ],
+  filters = true,
+  link = { label: 'All case studies', href: '#' },
+  variant = 'mosaic',
+  className = '',
+} = Astro.props;
+
+const cats = Array.from(new Set(projects.map((p) => p.category)));
+---
+
+<div class="cq-agency-work">
+<section class:list={['awg', `awg--${variant}`, className]} aria-labelledby="awg-title" data-work>
+  <header class="awg__head">
+    <div>
+      <p class="awg__eyebrow">{eyebrow}</p>
+      <h2 class="awg__title" id="awg-title">{title}</h2>
+    </div>
+    {link && <a class="awg__all" href={link.href}>{link.label} <span aria-hidden="true">↗</span></a>}
+  </header>
+  {filters && cats.length > 1 && (
+    <div class="awg__chips" role="group" aria-label="Filter by discipline">
+      <button type="button" aria-pressed="true" data-cat="">All <sup>{projects.length}</sup></button>
+      {cats.map((c) => <button type="button" aria-pressed="false" data-cat={c}>{c} <sup>{projects.filter((p) => p.category === c).length}</sup></button>)}
+    </div>
+  )}
+  <p class="sr-only" aria-live="polite" data-announce></p>
+  <ul class="awg__grid">
+    {projects.map((p, i) => (
+      <li class:list={['awg__item', { 'awg__item--wide': variant === 'mosaic' && i % 3 === 0 }]} data-cat={p.category}>
+        <a class="awg__card" href={p.href ?? '#'}>
+          <span class="awg__art" style={`--h: ${p.hue ?? 80}`} aria-hidden="true">
+            {p.image ? <img src={p.image} alt="" loading="lazy" decoding="async" /> : <span class="awg__glyph">{p.client.slice(0, 1)}</span>}
+            {p.result && <span class="awg__result">{p.result}</span>}
+          </span>
+          <span class="awg__meta"><span>{p.client}</span>{p.year && <span>{p.year}</span>}</span>
+          <h3 class="awg__name">{p.title}</h3>
+          {p.services && <span class="awg__tags">{p.services.map((s) => <span>{s}</span>)}</span>}
+        </a>
+      </li>
+    ))}
+  </ul>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-work]:not([data-bound])').forEach((root) => {
+    root.dataset.bound = '';
+    const chips = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-cat]')).filter((b) => b.tagName === 'BUTTON');
+    const items = Array.from(root.querySelectorAll<HTMLElement>('li[data-cat]'));
+    const announce = root.querySelector<HTMLElement>('[data-announce]')!;
+    chips.forEach((c) => c.addEventListener('click', () => {
+      const cat = c.dataset.cat || '';
+      chips.forEach((x) => x.setAttribute('aria-pressed', String(x === c)));
+      let n = 0;
+      items.forEach((it) => { const show = !cat || it.dataset.cat === cat; it.hidden = !show; if (show) n++; });
+      announce.textContent = `${n} ${n === 1 ? 'project' : 'projects'} shown`;
+    }));
+  });
+</script>
+
+<style>
+  .cq-agency-work { container-type: inline-size; }
+  .awg { color: var(--c-text-1, #fff); }
+  .awg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4, 1rem); margin-bottom: var(--sp-5, 1.25rem); }
+  .awg__eyebrow { margin: 0 0 var(--sp-2, 0.5rem); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .awg__title { margin: 0; font-size: clamp(2.2rem, 6cqi, 4.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; }
+  .awg__all { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 1.2rem; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font-weight: 800; text-decoration: none; white-space: nowrap; }
+  .awg__all:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); }
+  .awg__chips { display: flex; gap: 6px; margin-bottom: var(--sp-6, 1.5rem); overflow-x: auto; scrollbar-width: none; }
+  .awg__chips button { min-height: 42px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.2)); background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
+  .awg__chips sup { font-size: 0.65rem; opacity: 0.7; }
+  .awg__chips [aria-pressed='true'] { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); border-color: var(--c-text-1, #fff); }
+
+  .awg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3cqi, 2rem); margin: 0; padding: 0; list-style: none; }
+  .awg--grid .awg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .awg__item[hidden] { display: none; }
+  .awg__item--wide { grid-column: 1 / -1; }
+  .awg__card { display: grid; gap: var(--sp-2, 0.5rem); color: inherit; text-decoration: none; }
+  .awg__art {
+    position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 4 / 3;
+    border-radius: 24px;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 25% 25%, hsl(var(--h) 85% 65%), transparent 55%),
+      radial-gradient(circle at 80% 80%, hsl(calc(var(--h) + 50) 80% 55%), transparent 55%),
+      hsl(var(--h) 45% 18%);
+    transition: border-radius 0.4s ease;
+  }
+  .awg__item--wide .awg__art { aspect-ratio: 21 / 9; }
+  .awg__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .awg__glyph { font-size: clamp(6rem, 22cqi, 16rem); font-weight: 900; letter-spacing: -0.08em; line-height: 1; color: rgba(255, 255, 255, 0.92); mix-blend-mode: overlay; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
+  .awg__card:hover .awg__glyph { transform: scale(1.08) rotate(-4deg); }
+  .awg__card:hover .awg__art { border-radius: 48px; }
+  .awg__result { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 0.88rem; font-weight: 800; transform: rotate(-2deg); }
+  .awg__meta { display: flex; justify-content: space-between; margin-top: var(--sp-2, 0.5rem); font-size: 0.85rem; font-weight: 700; color: var(--c-text-2, #a3a3a3); }
+  .awg__name { margin: 0; font-size: clamp(1.25rem, 2.6cqi, 1.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
+  .awg__card:hover .awg__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
+  .awg__tags { display: flex; flex-wrap: wrap; gap: 6px; }
+  .awg__tags span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.18)); font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .awg :is(a, button):focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 4px; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 720px) {
+    .awg__grid, .awg--grid .awg__grid { grid-template-columns: 1fr; }
+    .awg__item--wide .awg__art { aspect-ratio: 4 / 3; }
+    .awg__head { flex-direction: column; align-items: flex-start; }
+  }
+  @media (prefers-reduced-motion: reduce) { .awg__glyph, .awg__art { transition: none; } }
+</style>

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

@@ -0,0 +1,133 @@
+---
+/**
+ * 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%, color-mix(in srgb, var(--c-primary-light, #d4a017) 60%, transparent), 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' });
+---
+
+<div class="cq-blog-grid-section-cq">
+<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>
+</div>
+<style>
+  .cq-blog-grid-section-cq { container-type: inline-size; }
+  .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: rgb(var(--ink-rgb, 255 255 255) / 0.025); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); }
+  .bgs__card:hover, .bgs__card:focus-within { transform: translateY(-3px); border-color: rgb(var(--ink-rgb, 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: rgb(var(--ink-rgb, 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); }
+  @container (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; }
+  }
+  @container (max-width: 600px) { .bgs__grid { grid-template-columns: 1fr; } }
+  @media (prefers-reduced-motion: reduce) { .bgs__card { transition: none; } }
+</style>

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

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Buttons", subtitle = "Interactive button components with premium styles and animations." } = Astro.props;
 ---
 
+<div class="cq-buttons-showcase-cq">
 <section class="buttons-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -34,8 +35,9 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-buttons-showcase-cq { container-type: inline-size; }
   .buttons-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -52,8 +54,8 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -75,7 +77,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -107,37 +109,37 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   }
   .btn--primary {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
   .btn--glass {
-    background: rgba(255,255,255,0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
     backdrop-filter: blur(12px);
     color: var(--c-text-1);
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
   .btn--glass:hover {
-    background: rgba(255,255,255,0.1);
-    border-color: rgba(184,134,11,0.3);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--glow {
     background: transparent;
     color: var(--c-primary-light);
     border: 1px solid var(--c-primary);
-    box-shadow: 0 0 12px rgba(184,134,11,0.2);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--c-primary, #b8860b) 20%, transparent);
   }
   .btn--glow:hover {
-    box-shadow: 0 0 24px rgba(184,134,11,0.5);
+    box-shadow: 0 0 24px color-mix(in srgb, var(--c-primary, #b8860b) 50%, transparent);
     transform: translateY(-2px);
   }
   .btn--shimmer {
     background: linear-gradient(110deg, #b8860b 0%, #d4a017 40%, #fef3c7 50%, #d4a017 60%, #b8860b 100%);
     background-size: 200% 100%;
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     animation: shimmer 3s linear infinite;
   }
   @keyframes shimmer {
@@ -147,10 +149,10 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   .btn--neumorphic {
     background: #1a1a1a;
     color: var(--c-text-1);
-    box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -4px -4px 12px rgba(255,255,255,0.05);
+    box-shadow: 4px 4px 12px rgba(0,0,0,0.5), -4px -4px 12px rgb(var(--ink-rgb, 255 255 255) / 0.05);
   }
   .btn--neumorphic:hover {
-    box-shadow: 2px 2px 8px rgba(0,0,0,0.4), -2px -2px 8px rgba(255,255,255,0.04);
+    box-shadow: 2px 2px 8px rgba(0,0,0,0.4), -2px -2px 8px rgb(var(--ink-rgb, 255 255 255) / 0.04);
   }
   .btn--ghost {
     background: transparent;
@@ -165,7 +167,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -174,7 +176,7 @@ const { title = "Buttons", subtitle = "Interactive button components with premiu
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .button-grid { gap: var(--sp-3); }
     .btn { min-width: 100px; padding: 0.6rem 1.2rem; font-size: 0.85rem; }
     .preview-stage { padding: var(--sp-8) var(--sp-4); }