astro-component-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1,194 @@
+---
+/**
+ * AgencyContactBrief — "Start a project" brief: service chips, budget pills, timeline, contact
+ * details and message, with validation and a success state; side column with direct contacts,
+ * office and response time.
+ *
+ * @param {string} title - Heading. Default "Let's build something people remember".
+ * @param {string} text - Intro text.
+ * @param {string[]} services - Service chips (multi-select).
+ * @param {string[]} budgets - Budget options (single-select).
+ * @param {string[]} timelines - Timeline select options.
+ * @param {string} action - Form action. With '#' the form validates and confirms locally. Default '#'.
+ * @param {Array<{label: string, value: string, href: string}>} contacts - Direct channels.
+ * @param {{city: string, address: string}} office - Office card (optional).
+ * @param {string} responseTime - Reply promise. Default 'We reply within one business day.'
+ * @param {string} id - Base id. Default 'brief'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: chips and pills are native checkboxes/radios inside fieldsets with legends;
+ * required fields use autocomplete hints; errors are listed in an alert and focus moves to the
+ * first invalid field; the success message receives focus.
+ */
+interface Props {
+  title?: string;
+  text?: string;
+  services?: string[];
+  budgets?: string[];
+  timelines?: string[];
+  action?: string;
+  contacts?: Array<{ label: string; value: string; href: string }>;
+  office?: { city: string; address: string };
+  responseTime?: string;
+  id?: string;
+  className?: string;
+}
+
+const {
+  title = "Let's build something people remember",
+  text = 'Tell us a little about your project. A partner — not a salesperson — will reply with next steps.',
+  services = ['Brand identity', 'Website', 'Growth marketing', 'Content & social', 'Not sure yet'],
+  budgets = ['< €15k', '€15–30k', '€30–60k', '€60k+'],
+  timelines = ['As soon as possible', 'In 1–3 months', 'In 3–6 months', 'Just exploring'],
+  action = '#',
+  contacts = [
+    { label: 'New business', value: 'hello@volta.studio', href: 'mailto:hello@volta.studio' },
+    { label: 'Call us', value: '+34 910 123 456', href: 'tel:+34910123456' },
+  ],
+  office = { city: 'Madrid', address: 'Calle de Fuencarral 45, 28004' },
+  responseTime = 'We reply within one business day.',
+  id = 'brief',
+  className = '',
+} = Astro.props;
+---
+
+<div class="cq-agency-brief">
+<section class:list={['acb', className]} aria-labelledby={`${id}-title`}>
+  <div class="acb__intro">
+    <h2 class="acb__title" id={`${id}-title`}>{title}</h2>
+    {text && <p class="acb__text">{text}</p>}
+    <ul class="acb__contacts">
+      {contacts.map((c) => <li><span>{c.label}</span><a href={c.href}>{c.value}</a></li>)}
+    </ul>
+    {office && <p class="acb__office"><span>Studio</span><strong>{office.city}</strong>{office.address}</p>}
+    {responseTime && <p class="acb__reply"><i aria-hidden="true"></i>{responseTime}</p>}
+  </div>
+
+  <form class="acb__form" action={action} method="post" novalidate data-brief>
+    <fieldset class="acb__group">
+      <legend>What do you need?</legend>
+      <div class="acb__chips">
+        {services.map((s, i) => (
+          <label class="acb__chip"><input type="checkbox" name="services" value={s} checked={i === 0} /><span>{s}</span></label>
+        ))}
+      </div>
+    </fieldset>
+    <fieldset class="acb__group">
+      <legend>Budget</legend>
+      <div class="acb__chips">
+        {budgets.map((b, i) => (
+          <label class="acb__chip"><input type="radio" name="budget" value={b} checked={i === 1} /><span>{b}</span></label>
+        ))}
+      </div>
+    </fieldset>
+    <div class="acb__row">
+      <div class="acb__field">
+        <label for={`${id}-name`}>Your name</label>
+        <input id={`${id}-name`} name="name" required autocomplete="name" />
+      </div>
+      <div class="acb__field">
+        <label for={`${id}-email`}>Work email</label>
+        <input id={`${id}-email`} name="email" type="email" required autocomplete="email" />
+      </div>
+    </div>
+    <div class="acb__row">
+      <div class="acb__field">
+        <label for={`${id}-company`}>Company</label>
+        <input id={`${id}-company`} name="company" autocomplete="organization" />
+      </div>
+      <div class="acb__field">
+        <label for={`${id}-when`}>Timeline</label>
+        <select id={`${id}-when`} name="timeline">{timelines.map((t) => <option>{t}</option>)}</select>
+      </div>
+    </div>
+    <div class="acb__field">
+      <label for={`${id}-msg`}>Tell us about the project</label>
+      <textarea id={`${id}-msg`} name="message" rows="4" required minlength="20" placeholder="Goals, audience, deadlines, links…"></textarea>
+    </div>
+    <p class="acb__error" role="alert" data-error></p>
+    <button class="acb__submit" type="submit">Send brief <span aria-hidden="true">↗</span></button>
+    <p class="acb__fine">By sending this form you agree to our privacy policy. No newsletters, promise.</p>
+  </form>
+
+  <div class="acb__done" hidden tabindex="-1" data-done>
+    <span class="acb__done-badge" aria-hidden="true">✓</span>
+    <h3>Brief received — thank you!</h3>
+    <p>{responseTime} In the meantime, have a look at our recent work.</p>
+  </div>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLFormElement>('form[data-brief]:not([data-bound])').forEach((form) => {
+    form.dataset.bound = '';
+    const error = form.querySelector<HTMLElement>('[data-error]')!;
+    const done = form.parentElement!.querySelector<HTMLElement>('[data-done]')!;
+    form.addEventListener('submit', (e) => {
+      form.querySelectorAll('[aria-invalid]').forEach((n) => n.removeAttribute('aria-invalid'));
+      const invalid = Array.from(form.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input[required], textarea[required]')).filter((n) => !n.checkValidity());
+      const noService = !form.querySelector('input[name="services"]:checked');
+      if (invalid.length || noService) {
+        e.preventDefault();
+        invalid.forEach((n) => n.setAttribute('aria-invalid', 'true'));
+        const msgs = invalid.map((n) => form.querySelector(`label[for="${n.id}"]`)?.textContent).filter(Boolean);
+        if (noService) msgs.unshift('at least one service');
+        error.textContent = `Please complete: ${msgs.join(', ')}.`;
+        (invalid[0] ?? form.querySelector<HTMLInputElement>('input[name="services"]'))?.focus();
+        return;
+      }
+      if (form.getAttribute('action') === '#') {
+        e.preventDefault();
+        form.hidden = true;
+        done.hidden = false;
+        done.focus();
+      }
+    });
+  });
+</script>
+
+<style>
+  .cq-agency-brief { container-type: inline-size; }
+  .acb { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6cqi, 5rem); color: var(--c-text-1, #fff); }
+  .acb__title { margin: 0; font-size: clamp(2.4rem, 6.5cqi, 4.6rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.92; }
+  .acb__text { margin: var(--sp-5, 1.25rem) 0 0; max-width: 28rem; font-size: 1.05rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .acb__contacts { display: grid; gap: var(--sp-4, 1rem); margin: var(--sp-8, 2rem) 0 0; padding: 0; list-style: none; }
+  .acb__contacts li, .acb__office { display: grid; gap: 2px; margin: 0; }
+  .acb__contacts span, .acb__office span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3, #737373); }
+  .acb__contacts a { font-size: clamp(1.2rem, 2.6cqi, 1.6rem); font-weight: 800; letter-spacing: -0.02em; color: inherit; text-decoration: none; background: linear-gradient(var(--agency-accent, var(--c-primary-light, #d4a017)), var(--agency-accent, var(--c-primary-light, #d4a017))) 0 100% / 0 35% no-repeat; transition: background-size 0.3s ease; width: fit-content; }
+  .acb__contacts a:hover { background-size: 100% 35%; }
+  .acb__office { margin-top: var(--sp-6, 1.5rem); font-size: 0.92rem; color: var(--c-text-2, #a3a3a3); }
+  .acb__office strong { font-size: 1.05rem; color: var(--c-text-1, #fff); }
+  .acb__reply { display: flex; align-items: center; gap: 8px; margin: var(--sp-6, 1.5rem) 0 0; font-size: 0.88rem; font-weight: 600; }
+  .acb__reply i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-success, #34d399); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success, #34d399) 25%, transparent); }
+
+  .acb__form, .acb__done { display: grid; gap: var(--sp-5, 1.25rem); padding: clamp(1.25rem, 3.5cqi, 2.25rem); border-radius: 28px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); background: var(--c-bg-1, #0a0a0a); }
+  .acb__form[hidden], .acb__done[hidden] { display: none; }
+  .acb__group { margin: 0; padding: 0; border: 0; min-width: 0; }
+  .acb__group legend { margin-bottom: var(--sp-3, 0.75rem); font-size: 0.95rem; font-weight: 800; }
+  .acb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
+  .acb__chip { position: relative; cursor: pointer; }
+  .acb__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .acb__chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.2)); font-size: 0.9rem; font-weight: 700; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
+  .acb__chip:hover span { border-color: currentColor; }
+  .acb__chip input:checked + span { background: var(--agency-accent, var(--c-primary-light, #d4a017)); border-color: transparent; color: var(--c-on-primary, #050505); }
+  .acb__chip input:focus-visible + span { outline: 2px solid var(--c-text-1, #fff); outline-offset: 2px; }
+  .acb__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4, 1rem); }
+  .acb__field { display: grid; gap: 6px; }
+  .acb__field label { font-size: 0.85rem; font-weight: 700; }
+  .acb__field :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 0.75rem 1rem; border-radius: 14px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.16)); background: var(--c-bg, #050505); color: var(--c-text-1, #fff); font: inherit; font-size: 0.95rem; }
+  .acb__field textarea { resize: vertical; }
+  .acb__field :is(input, select, textarea):focus { outline: none; border-color: var(--c-text-1, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--agency-accent, var(--c-primary-light, #d4a017)) 35%, transparent); }
+  .acb__field [aria-invalid='true'] { border-color: var(--c-danger, #f87171); }
+  .acb__error { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--c-danger, #f87171); }
+  .acb__error:empty { display: none; }
+  .acb__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border: 0; border-radius: 999px; background: var(--c-text-1, #fff); color: var(--c-bg, #050505); font: inherit; font-size: 1.05rem; font-weight: 900; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
+  .acb__submit:hover { background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); transform: rotate(-1deg); }
+  .acb__submit:focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .acb__fine { margin: -6px 0 0; font-size: 0.78rem; color: var(--c-text-3, #737373); text-align: center; }
+  .acb__done { place-content: center; justify-items: start; min-height: 420px; outline: none; }
+  .acb__done-badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 1.8rem; font-weight: 900; transform: rotate(-8deg); }
+  .acb__done h3 { margin: 0; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; }
+  .acb__done p { margin: 0; color: var(--c-text-2, #a3a3a3); }
+  @container (max-width: 820px) { .acb { grid-template-columns: 1fr; } }
+  @container (max-width: 520px) { .acb__row { grid-template-columns: 1fr; } }
+</style>

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

@@ -0,0 +1,94 @@
+---
+/**
+ * AgencyFooterCta — Agency footer led by a giant "Let's talk" link, then link columns, offices,
+ * socials and the legal line.
+ *
+ * @param {string} kicker - Line above the CTA. Default 'Have a project in mind?'.
+ * @param {{label: string, href: string}} cta - Giant CTA link. Default "Let's talk".
+ * @param {string} email - Email shown under the CTA (optional).
+ * @param {Array<{title: string, links: {label: string, href: string}[]}>} columns - Link columns.
+ * @param {Array<{city: string, address: string}>} offices - Office addresses.
+ * @param {Array<{label: string, href: string}>} socials - Social links.
+ * @param {string} brand - Brand for the legal line. Default 'Volta'.
+ * @param {string} variant - Style (accent|plain). Default 'accent'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: footer landmark with a visually hidden heading; the CTA is a single large link;
+ * columns are nav lists.
+ */
+interface Props {
+  kicker?: string;
+  cta?: { label: string; href: string };
+  email?: string;
+  columns?: Array<{ title: string; links: Array<{ label: string; href: string }> }>;
+  offices?: Array<{ city: string; address: string }>;
+  socials?: Array<{ label: string; href: string }>;
+  brand?: string;
+  variant?: 'accent' | 'plain';
+  className?: string;
+}
+
+const {
+  kicker = 'Have a project in mind?',
+  cta = { label: "Let's talk", href: '#contact' },
+  email = 'hello@volta.studio',
+  columns = [
+    { title: 'Studio', links: [{ label: 'Work', href: '#' }, { label: 'Services', href: '#' }, { label: 'About', href: '#' }, { label: 'Careers', href: '#' }] },
+    { title: 'Services', links: [{ label: 'Brand identity', href: '#' }, { label: 'Websites', href: '#' }, { label: 'Growth', href: '#' }] },
+  ],
+  offices = [{ city: 'Madrid', address: 'Calle de Fuencarral 45' }, { city: 'Lisbon', address: 'Rua das Flores 12' }],
+  socials = [{ label: 'Instagram', href: '#' }, { label: 'LinkedIn', href: '#' }, { label: 'Dribbble', href: '#' }, { label: 'Behance', href: '#' }],
+  brand = 'Volta',
+  variant = 'accent',
+  className = '',
+} = Astro.props;
+---
+
+<div class="cq-agency-footer">
+<footer class:list={['afc', `afc--${variant}`, className]} aria-labelledby="afc-title">
+  <h2 id="afc-title" class="sr-only">Footer</h2>
+  <div class="afc__inner">
+    <p class="afc__kicker">{kicker}</p>
+    <a class="afc__cta" href={cta.href}>{cta.label}<span aria-hidden="true">↗</span></a>
+    {email && <a class="afc__email" href={`mailto:${email}`}>{email}</a>}
+
+    <div class="afc__grid">
+      {columns.map((c) => (
+        <nav aria-label={c.title}><p class="afc__label">{c.title}</p><ul>{c.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}</ul></nav>
+      ))}
+      {offices.length > 0 && (
+        <div><p class="afc__label">Offices</p><ul>{offices.map((o) => <li><strong>{o.city}</strong><span>{o.address}</span></li>)}</ul></div>
+      )}
+      {socials.length > 0 && (
+        <nav aria-label="Social"><p class="afc__label">Follow</p><ul>{socials.map((s) => <li><a href={s.href}>{s.label} ↗</a></li>)}</ul></nav>
+      )}
+    </div>
+    <p class="afc__legal"><span>© {new Date().getFullYear()} {brand}. All rights reserved.</span><span>Privacy · Cookies · Imprint</span></p>
+  </div>
+</footer>
+</div>
+
+<style>
+  .cq-agency-footer { container-type: inline-size; }
+  .afc { padding: clamp(3rem, 8cqi, 6rem) clamp(1rem, 4cqi, 2.5rem) var(--sp-6, 1.5rem); color: var(--c-text-1, #fff); }
+  .afc--accent { background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); --c-text-1: var(--c-on-primary, #050505); --c-text-2: color-mix(in srgb, var(--c-on-primary, #050505) 72%, transparent); --c-border: color-mix(in srgb, var(--c-on-primary, #050505) 25%, transparent); border-radius: 40px 40px 0 0; }
+  .afc__inner { max-width: 1280px; margin: 0 auto; }
+  .afc__kicker { margin: 0 0 var(--sp-3, 0.75rem); font-size: 1.1rem; font-weight: 700; color: var(--c-text-2, #a3a3a3); }
+  .afc__cta { display: inline-flex; align-items: flex-start; gap: 0.1em; font-size: clamp(3.5rem, 15cqi, 12rem); font-weight: 900; letter-spacing: -0.07em; line-height: 0.85; color: inherit; text-decoration: none; transition: letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
+  .afc__cta span { font-size: 0.4em; transition: transform 0.4s ease; }
+  .afc__cta:hover { letter-spacing: -0.05em; color: inherit; }
+  .afc__cta:hover span { transform: translate(6px, -6px) rotate(10deg); }
+  .afc__email { display: inline-block; margin-top: var(--sp-4, 1rem); font-size: clamp(1.1rem, 2.4cqi, 1.5rem); font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 6px; }
+  .afc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8, 2rem); margin-top: clamp(2.5rem, 7cqi, 5rem); padding-top: var(--sp-6, 1.5rem); border-top: 1.5px solid currentColor; }
+  .afc__label { margin: 0 0 var(--sp-3, 0.75rem); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .afc__grid ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
+  .afc__grid a { display: inline-flex; min-height: 32px; align-items: center; color: inherit; font-weight: 700; text-decoration: none; }
+  .afc__grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
+  .afc__grid li strong { display: block; font-weight: 800; }
+  .afc__grid li span { font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .afc a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
+  .afc__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3, 0.75rem); margin: var(--sp-10, 2.5rem) 0 0; font-size: 0.82rem; color: var(--c-text-2, #a3a3a3); }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @container (max-width: 760px) { .afc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .afc--accent { border-radius: 28px 28px 0 0; } }
+  @media (prefers-reduced-motion: reduce) { .afc__cta, .afc__cta span { transition: none; } }
+</style>

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>