astro-component-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,161 @@
+---
+/**
+ * AgencyHeader — Floating pill navigation for agency and studio sites: logo, links, theme toggle,
+ * "Start a project" CTA and an animated full-screen mobile menu.
+ *
+ * @param {string} brand - Logo text. Default 'Volta'.
+ * @param {string} brandHref - Logo link. Default '/'.
+ * @param {Array<{label: string, href: string}>} links - Menu links.
+ * @param {{label: string, href: string}} cta - Call to action. Default 'Start a project'.
+ * @param {string} currentHref - Marks the active link with aria-current.
+ * @param {boolean} themeToggle - Show the light/dark toggle. Default true.
+ * @param {boolean} sticky - Float over the page while scrolling. Default true.
+ * @param {string} variant - Style (pill|bar). Default 'pill'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: nav landmark; the mobile menu is a disclosure (aria-expanded) closed with
+ * Escape, which returns focus to the toggle; links have 44px targets.
+ */
+interface Props {
+  brand?: string;
+  brandHref?: string;
+  links?: Array<{ label: string; href: string }>;
+  cta?: { label: string; href: string };
+  currentHref?: string;
+  themeToggle?: boolean;
+  sticky?: boolean;
+  variant?: 'pill' | 'bar';
+  className?: string;
+}
+
+const {
+  brand = 'Volta',
+  brandHref = '/',
+  links = [
+    { label: 'Work', href: '#work' },
+    { label: 'Services', href: '#services' },
+    { label: 'Studio', href: '#team' },
+    { label: 'Contact', href: '#contact' },
+  ],
+  cta = { label: 'Start a project', href: '#contact' },
+  currentHref,
+  themeToggle = true,
+  sticky = true,
+  variant = 'pill',
+  className = '',
+} = Astro.props;
+---
+
+<header class:list={['ah', `ah--${variant}`, { 'ah--sticky': sticky }, className]} data-agency-header>
+  <div class="ah__bar">
+    <a class="ah__brand" href={brandHref}><span class="ah__dot" aria-hidden="true"></span>{brand}</a>
+    <nav class="ah__nav" id="ah-nav" aria-label="Main" data-nav>
+      <ul>
+        {links.map((l) => <li><a href={l.href} aria-current={l.href === currentHref ? 'page' : undefined}>{l.label}</a></li>)}
+      </ul>
+      {cta && <a class="ah__cta ah__cta--mobile" href={cta.href}>{cta.label} <span aria-hidden="true">↗</span></a>}
+    </nav>
+    <div class="ah__actions">
+      {themeToggle && (
+        <button class="ah__icon" type="button" aria-label="Switch theme" data-theme-btn>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg>
+        </button>
+      )}
+      {cta && <a class="ah__cta" href={cta.href}>{cta.label} <span aria-hidden="true">↗</span></a>}
+      <button class="ah__icon ah__burger" type="button" aria-expanded="false" aria-controls="ah-nav" aria-label="Menu" data-burger>
+        <span aria-hidden="true"></span><span aria-hidden="true"></span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-agency-header]:not([data-bound])').forEach((h) => {
+    h.dataset.bound = '';
+    const burger = h.querySelector<HTMLButtonElement>('[data-burger]');
+    const nav = h.querySelector<HTMLElement>('[data-nav]');
+    const set = (open: boolean) => {
+      burger?.setAttribute('aria-expanded', String(open));
+      nav?.classList.toggle('is-open', open);
+      h.classList.toggle('is-menu', open);
+      document.documentElement.style.overflow = open ? 'hidden' : '';
+    };
+    burger?.addEventListener('click', () => set(burger.getAttribute('aria-expanded') !== 'true'));
+    nav?.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => set(false)));
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && burger?.getAttribute('aria-expanded') === 'true') { set(false); burger.focus(); }
+    });
+    h.querySelector('[data-theme-btn]')?.addEventListener('click', () => {
+      const root = document.documentElement;
+      const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+      root.dataset.theme = next;
+      try { window.localStorage.setItem('ack-theme', next); } catch { /* ignore */ }
+    });
+    const onScroll = () => h.classList.toggle('is-scrolled', window.scrollY > 12);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+  });
+</script>
+
+<style>
+  .ah { position: relative; z-index: 60; padding: 14px clamp(0.75rem, 2vw, 1.5rem); color: var(--c-text-1, #fff); }
+  .ah--sticky { position: sticky; top: 0; }
+  .ah__bar {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4, 1rem);
+    max-width: 1280px;
+    min-height: 60px;
+    margin: 0 auto;
+    padding: 0 8px 0 22px;
+    border-radius: 999px;
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1));
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.75);
+    backdrop-filter: blur(16px) saturate(1.4);
+    transition: box-shadow 0.3s ease, background 0.3s ease;
+  }
+  .ah--bar .ah__bar { border-radius: 0; border-width: 0 0 1px; max-width: none; }
+  .ah.is-menu .ah__bar { backdrop-filter: none; background: transparent; border-color: transparent; box-shadow: none; }
+  .ah.is-scrolled .ah__bar { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
+  .ah__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.05em; color: inherit; text-decoration: none; }
+  .ah__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--agency-accent, var(--c-primary-light, #d4a017)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agency-accent, var(--c-primary-light, #d4a017)) 30%, transparent); }
+  .ah__nav { margin: 0 auto; }
+  .ah__nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
+  .ah__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; color: var(--c-text-2, #a3a3a3); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
+  .ah__nav a:hover, .ah__nav a[aria-current] { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .ah__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+  .ah__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
+  .ah__icon:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.07); }
+  .ah__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 1.25rem; border-radius: 999px; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-weight: 800; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease; }
+  .ah__cta:hover { transform: translateY(-1px) rotate(-1deg); color: var(--c-on-primary, #050505); }
+  .ah__cta--mobile { display: none; }
+  .ah :is(a, button):focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .ah__burger { display: none; flex-direction: column; gap: 6px; }
+  .ah__burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease; }
+  .ah__burger[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
+  .ah__burger[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
+
+  @media (max-width: 860px) {
+    .ah__burger { display: grid; place-content: center; }
+    .ah__actions > .ah__cta { display: none; }
+    .ah__nav {
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--sp-8, 2rem);
+      padding: 100px 28px 40px;
+      background: var(--c-bg, #050505);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s ease, visibility 0.3s ease;
+    }
+    .ah__nav.is-open { opacity: 1; visibility: visible; }
+    .ah__nav ul { flex-direction: column; gap: 4px; }
+    .ah__nav a { min-height: 64px; padding: 0; font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; color: var(--c-text-1, #fff); background: none !important; }
+    .ah__cta--mobile { display: inline-flex; align-self: flex-start; font-size: 1rem; min-height: 54px; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ah__nav, .ah__bar, .ah__cta, .ah__burger span { transition: none; } }
+</style>

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

@@ -0,0 +1,172 @@
+---
+/**
+ * AgencyHeroKinetic — Agency hero with an oversized headline whose last word rotates through a
+ * list (highlighted like a marker stroke), intro text, CTAs, client proof and rotating stickers.
+ *
+ * @param {string} before - Headline text before the rotating word. Default 'We build brands people'.
+ * @param {string[]} words - Rotating words. Default ['remember', 'share', 'choose', 'love'].
+ * @param {string} text - Intro paragraph.
+ * @param {{label: string, href: string}} primary - Main CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA (optional).
+ * @param {{count: string, label: string, people?: string[]}} proof - Client proof with avatar initials.
+ * @param {string[]} stickers - Small rotated badges around the headline (max 3).
+ * @param {number} interval - Rotation speed in ms. Default 2200.
+ * @param {string} variant - Layout (left|centered). Default 'left'.
+ * @param {string} size - Type scale (md|lg|xl). Default 'lg'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the h1 contains the full sentence for screen readers (first word); the rotating
+ * copy is aria-hidden; rotation stops with prefers-reduced-motion and pauses on hover/focus.
+ */
+interface Props {
+  before?: string;
+  words?: string[];
+  text?: string;
+  primary?: { label: string; href: string };
+  secondary?: { label: string; href: string };
+  proof?: { count: string; label: string; people?: string[] };
+  stickers?: string[];
+  interval?: number;
+  variant?: 'left' | 'centered';
+  size?: 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const {
+  before = 'We build brands people',
+  words = ['remember', 'share', 'choose', 'love'],
+  text = 'Volta is an independent studio for brand, web and growth. We turn ambitious companies into the obvious choice in their category.',
+  primary = { label: 'Start a project', href: '#contact' },
+  secondary = { label: 'See our work', href: '#work' },
+  proof = { count: '120+', label: 'brands launched since 2016', people: ['Ana R', 'Ben K', 'Cleo M', 'Dev P'] },
+  stickers = ['Brand', 'Web', 'Growth'],
+  interval = 2200,
+  variant = 'left',
+  size = 'lg',
+  className = '',
+} = Astro.props;
+
+const hues = [80, 280, 20, 190];
+---
+
+<div class="cq-agency-hero">
+<section class:list={['ahk', `ahk--${variant}`, `ahk--${size}`, className]} data-kinetic data-interval={interval}>
+  <div class="ahk__inner">
+    <h1 class="ahk__title">
+      <span>{before} </span>
+      <span class="sr-only">{words[0]}.</span>
+      <span class="ahk__rotor" aria-hidden="true">
+        {words.map((w, i) => <span class:list={['ahk__word', { 'is-active': i === 0 }]}>{w}</span>)}
+      </span>
+    </h1>
+
+    {stickers.slice(0, 3).map((s, i) => <span class:list={['ahk__sticker', `ahk__sticker--${i + 1}`]} aria-hidden="true">{s}</span>)}
+
+    <div class="ahk__foot">
+      {text && <p class="ahk__text">{text}</p>}
+      <div class="ahk__ctas">
+        {primary && <a class="ahk__btn ahk__btn--primary" href={primary.href}>{primary.label}<span aria-hidden="true">↗</span></a>}
+        {secondary && <a class="ahk__btn" href={secondary.href}>{secondary.label}</a>}
+      </div>
+      {proof && (
+        <p class="ahk__proof">
+          {proof.people && (
+            <span class="ahk__faces" aria-hidden="true">
+              {proof.people.map((p, i) => <span style={`--h: ${hues[i % hues.length]}`}>{p.split(' ').map((x) => x[0]).join('')}</span>)}
+            </span>
+          )}
+          <span><strong>{proof.count}</strong> {proof.label}</span>
+        </p>
+      )}
+    </div>
+  </div>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-kinetic]:not([data-bound])').forEach((hero) => {
+    hero.dataset.bound = '';
+    const words = Array.from(hero.querySelectorAll<HTMLElement>('.ahk__word'));
+    if (words.length < 2 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    let i = 0;
+    let paused = false;
+    hero.addEventListener('mouseenter', () => { paused = true; });
+    hero.addEventListener('mouseleave', () => { paused = false; });
+    hero.addEventListener('focusin', () => { paused = true; });
+    hero.addEventListener('focusout', () => { paused = false; });
+    window.setInterval(() => {
+      if (paused || document.hidden) return;
+      words[i].classList.remove('is-active');
+      words[i].classList.add('is-leaving');
+      const prev = words[i];
+      window.setTimeout(() => prev.classList.remove('is-leaving'), 500);
+      i = (i + 1) % words.length;
+      words[i].classList.add('is-active');
+    }, Number(hero.dataset.interval) || 2200);
+  });
+</script>
+
+<style>
+  .cq-agency-hero { container-type: inline-size; }
+  .ahk { --fs: clamp(3rem, 10cqi, 8.5rem); position: relative; padding: clamp(3rem, 9cqi, 7rem) clamp(1rem, 4cqi, 2.5rem) clamp(2.5rem, 6cqi, 5rem); color: var(--c-text-1, #fff); overflow: hidden; }
+  .ahk--md { --fs: clamp(2.6rem, 8cqi, 6.5rem); }
+  .ahk--xl { --fs: clamp(3.4rem, 12cqi, 10.5rem); }
+  .ahk__inner { position: relative; max-width: 1280px; margin: 0 auto; }
+  .ahk--centered .ahk__inner { text-align: center; }
+  .ahk__title { margin: 0; font-size: var(--fs); font-weight: 900; line-height: 0.92; letter-spacing: -0.06em; text-wrap: balance; }
+  .ahk__rotor { position: relative; display: inline-grid; vertical-align: top; }
+  .ahk__word {
+    grid-area: 1 / 1;
+    padding: 0 0.12em;
+    border-radius: 0.12em;
+    background: var(--agency-accent, var(--c-primary-light, #d4a017));
+    color: var(--c-on-primary, #050505);
+    opacity: 0;
+    transform: translateY(40%) rotate(3deg);
+    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .ahk__word.is-active { opacity: 1; transform: rotate(-2deg); }
+  .ahk__word.is-leaving { opacity: 0; transform: translateY(-40%) rotate(-6deg); }
+
+  .ahk__sticker {
+    position: absolute;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    border: 1.5px solid currentColor;
+    background: var(--c-bg, #050505);
+    font-size: 0.85rem;
+    font-weight: 800;
+    letter-spacing: 0.02em;
+    animation: ahk-float 6s ease-in-out infinite;
+  }
+  .ahk__sticker--1 { top: -2%; right: 8%; transform: rotate(8deg); }
+  .ahk__sticker--2 { top: 38%; right: -1%; transform: rotate(-10deg); animation-delay: -2s; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); border-color: transparent; }
+  .ahk__sticker--3 { top: 18%; right: 26%; transform: rotate(-4deg); animation-delay: -4s; }
+  @keyframes ahk-float { 50% { translate: 0 -8px; } }
+
+  .ahk__foot { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--sp-6, 1.5rem) var(--sp-10, 2.5rem); align-items: end; margin-top: clamp(2rem, 5cqi, 3.5rem); padding-top: var(--sp-6, 1.5rem); border-top: 1.5px solid currentColor; }
+  .ahk--centered .ahk__foot { grid-template-columns: 1fr; justify-items: center; }
+  .ahk__text { margin: 0; max-width: 34rem; font-size: 1.1rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .ahk__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem); }
+  .ahk__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font-size: 1rem; font-weight: 800; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
+  .ahk__btn:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); }
+  .ahk__btn--primary { background: var(--agency-accent, var(--c-primary-light, #d4a017)); border-color: transparent; color: var(--c-on-primary, #050505); }
+  .ahk__btn--primary:hover { background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); transform: translateY(-2px) rotate(-1.5deg); }
+  .ahk__btn:focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .ahk__proof { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3, 0.75rem); margin: 0; font-size: 0.92rem; color: var(--c-text-2, #a3a3a3); }
+  .ahk__proof strong { color: var(--c-text-1, #fff); }
+  .ahk__faces { display: inline-flex; }
+  .ahk__faces span { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--c-bg, #050505); background: hsl(var(--h) 70% 55%); color: #0b0b0b; font-size: 0.7rem; font-weight: 800; }
+  .ahk__faces span:first-child { margin-left: 0; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 760px) {
+    .ahk__foot { grid-template-columns: 1fr; }
+    .ahk__sticker--1, .ahk__sticker--3 { display: none; }
+    .ahk__sticker--2 { top: auto; bottom: 32%; right: 4%; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ahk__sticker { animation: none; }
+    .ahk__word { transition: none; }
+  }
+</style>

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>