@easy-web/content-blocks 1.0.0

package/src/components/Card.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * Card – content card with optional image, description, and link.
+ * Renders as clickable anchor when href is provided, plain container otherwise.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  title: string;
+  description?: string;
+  href?: string;
+  image?: string;
+  imageAlt?: string;
+}
+
+const { title, description, href, image, imageAlt } = Astro.props;
+const alt = imageAlt || title;
+const Tag = href ? 'a' : 'div';
+---
+
+<Tag class:list={['ew-card', { 'ew-card--link': !!href }]} {...(href ? { href } : {})}>
+  {image && (
+    <img src={image} alt={alt} class="ew-card__image" loading="lazy" />
+  )}
+  <div class="ew-card__body">
+    <h3 class="ew-card__title">{title}</h3>
+    {description && <p class="ew-card__description">{description}</p>}
+  </div>
+</Tag>
+
+<style>
+  .ew-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--ew-surface);
+    border: 1px solid var(--ew-border);
+    border-radius: var(--ew-radius-lg);
+    overflow: hidden;
+  }
+  .ew-card--link {
+    text-decoration: none;
+    color: inherit;
+  }
+  .ew-card--link:hover {
+    border-color: var(--ew-primary);
+  }
+  .ew-card__image {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    display: block;
+  }
+  .ew-card__body {
+    padding: var(--ew-space-4);
+  }
+  .ew-card__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-lg);
+    font-weight: 600;
+    color: var(--ew-on-surface);
+    margin: 0;
+    line-height: var(--ew-leading-tight);
+  }
+  .ew-card__description {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    color: var(--ew-muted);
+    margin: var(--ew-space-2) 0 0;
+    line-height: var(--ew-leading-normal);
+  }
+</style>

package/src/components/CardGrid.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * CardGrid – responsive CSS grid container for Card children.
+ * 1 column mobile, 2 tablet, 3 desktop.
+ * Pure Astro component using --ew-* design tokens.
+ */
+---
+
+<div class="ew-card-grid">
+  <slot />
+</div>
+
+<style>
+  .ew-card-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ew-space-5);
+  }
+  @media (min-width: 640px) {
+    .ew-card-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (min-width: 1024px) {
+    .ew-card-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+</style>

package/src/components/ContactSection.astro

@@ -0,0 +1,73 @@
+---
+/**
+ * ContactSection – centered mailto-only contact call to action.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  heading: string;
+  body?: string;
+  email: string;
+  buttonLabel: string;
+}
+
+const { heading, body, email, buttonLabel } = Astro.props;
+---
+
+<section class="ew-contact">
+  <div class="ew-contact__inner">
+    <h2 class="ew-contact__heading">{heading}</h2>
+    {body && <p class="ew-contact__body">{body}</p>}
+    <a href={`mailto:${email}`} class="ew-contact__button">{buttonLabel}</a>
+  </div>
+</section>
+
+<style>
+  .ew-contact {
+    background: var(--ew-surface-muted);
+    padding: var(--ew-space-8) var(--ew-space-5);
+    text-align: center;
+  }
+
+  .ew-contact__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ew-contact__heading {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-3xl);
+    font-weight: 800;
+    line-height: var(--ew-leading-tight);
+    color: var(--ew-on-surface);
+    margin: 0;
+  }
+
+  .ew-contact__body {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    line-height: var(--ew-leading-normal);
+    color: var(--ew-muted);
+    margin: var(--ew-space-4) 0 0;
+    max-width: 40rem;
+  }
+
+  .ew-contact__button {
+    display: inline-block;
+    margin-top: var(--ew-space-6);
+    padding: var(--ew-space-3) var(--ew-space-6);
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--ew-radius-md);
+  }
+
+  .ew-contact__button:hover {
+    opacity: 0.9;
+  }
+</style>

package/src/components/CtaSection.astro

@@ -0,0 +1,82 @@
+---
+/**
+ * CtaSection – call-to-action banner with heading, optional body, and button.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  heading: string;
+  body?: string;
+  buttonLabel: string;
+  buttonHref: string;
+  variant?: 'default' | 'muted' | 'primary';
+}
+
+const { heading, body, buttonLabel, buttonHref, variant = 'default' } = Astro.props;
+---
+
+<section class:list={['ew-cta', `ew-cta--${variant}`]}>
+  <div class="ew-cta__inner">
+    <h2 class="ew-cta__heading">{heading}</h2>
+    {body && <p class="ew-cta__body">{body}</p>}
+    <a class="ew-cta__button" href={buttonHref}>{buttonLabel}</a>
+  </div>
+</section>
+
+<style>
+  .ew-cta {
+    padding: var(--ew-space-9) var(--ew-space-5);
+    text-align: center;
+  }
+  .ew-cta__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .ew-cta--default {
+    background: var(--ew-surface);
+    color: var(--ew-on-surface);
+  }
+  .ew-cta--muted {
+    background: var(--ew-surface-muted);
+    color: var(--ew-on-surface);
+  }
+  .ew-cta--primary {
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+  }
+  .ew-cta__heading {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-3xl);
+    font-weight: 800;
+    line-height: var(--ew-leading-tight);
+    margin: 0;
+  }
+  .ew-cta__body {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    line-height: var(--ew-leading-normal);
+    margin: var(--ew-space-4) 0 0;
+    max-width: 40rem;
+  }
+  .ew-cta__button {
+    display: inline-block;
+    margin-top: var(--ew-space-6);
+    padding: var(--ew-space-3) var(--ew-space-6);
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--ew-radius-md);
+  }
+  .ew-cta--primary .ew-cta__button {
+    background: var(--ew-on-primary);
+    color: var(--ew-primary);
+  }
+  .ew-cta__button:hover {
+    opacity: 0.9;
+  }
+</style>

package/src/components/DraftBanner.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * DraftBanner – warning banner for draft/unfinished legal content.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  message: string;
+}
+
+const { message } = Astro.props;
+---
+
+<div class="ew-draft-banner" role="status">
+  <p class="ew-draft-banner__text">{message}</p>
+</div>
+
+<style>
+  .ew-draft-banner {
+    background: var(--ew-surface-muted);
+    border: 2px solid var(--ew-border);
+    border-radius: var(--ew-radius-md);
+    padding: var(--ew-space-3) var(--ew-space-4);
+    margin: 0 0 var(--ew-space-5);
+  }
+  .ew-draft-banner__text {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    font-weight: 600;
+    color: var(--ew-on-surface);
+    margin: 0;
+    line-height: var(--ew-leading-normal);
+  }
+</style>

package/src/components/Footer.astro

@@ -0,0 +1,81 @@
+---
+/**
+ * Footer – site footer with copyright line and legal links.
+ * Pure Astro component using theme tokens only.
+ */
+interface Props {
+  siteName: string;
+  legalLinks: Array<{ label: string; href: string }>;
+  currentYear?: number;
+}
+
+const { siteName, legalLinks, currentYear = new Date().getFullYear() } = Astro.props;
+---
+
+<footer class="ew-footer">
+  <div class="ew-footer__inner">
+    <p class="ew-footer__copyright">&copy; {currentYear} {siteName}</p>
+    {legalLinks.length > 0 && (
+      <nav class="ew-footer__legal" aria-label="Legal">
+        <ul class="ew-footer__links">
+          {legalLinks.map((link) => (
+            <li>
+              <a href={link.href} class="ew-footer__link">{link.label}</a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    )}
+  </div>
+</footer>
+
+<style>
+  .ew-footer {
+    background: var(--ew-surface-muted);
+    border-top: 1px solid var(--ew-border);
+    color: var(--ew-on-surface);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+  }
+  .ew-footer__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ew-space-3);
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: var(--ew-space-6) var(--ew-space-5);
+    text-align: center;
+  }
+  .ew-footer__copyright {
+    margin: 0;
+    color: var(--ew-muted);
+  }
+  .ew-footer__links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--ew-space-4);
+  }
+  .ew-footer__link {
+    color: var(--ew-muted);
+    text-decoration: none;
+  }
+  .ew-footer__link:hover {
+    color: var(--ew-on-surface);
+  }
+  .ew-footer__link:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+
+  @media (min-width: 769px) {
+    .ew-footer__inner {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+</style>

package/src/components/GalleryCarousel.astro

@@ -0,0 +1,296 @@
+---
+import type { GalleryCarouselData } from '../schemas/galleries';
+
+type Props = Omit<GalleryCarouselData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  autoplay = false,
+  interval = 4000,
+  showDots = true,
+  showArrows = true,
+  slides,
+} = Astro.props;
+---
+
+{slides.length > 0 && (
+  <section class="ew-carousel-wrap">
+    <div class="ew-carousel-wrap__inner">
+      {title && <h2 class="ew-carousel-wrap__title">{title}</h2>}
+      <div
+        class="ew-carousel"
+        data-autoplay={String(autoplay)}
+        data-interval={String(interval)}
+        aria-roledescription="carousel"
+        aria-label={title ?? 'Image carousel'}
+        tabindex="0"
+      >
+        <div class="ew-carousel__viewport">
+          {slides.map((slide, i) => (
+            <figure
+              class="ew-carousel__slide"
+              data-active={i === 0 ? 'true' : 'false'}
+              aria-hidden={i !== 0}
+              aria-roledescription="slide"
+              aria-label={`${i + 1} / ${slides.length}`}
+            >
+              <img
+                src={slide.src}
+                alt={slide.alt}
+                class="ew-carousel__img"
+                loading={i === 0 ? 'eager' : 'lazy'}
+              />
+              {slide.caption && (
+                <figcaption class="ew-carousel__caption">{slide.caption}</figcaption>
+              )}
+            </figure>
+          ))}
+        </div>
+
+        {slides.length > 1 && showArrows && (
+          <>
+            <button
+              type="button"
+              class="ew-carousel__arrow ew-carousel__arrow--prev"
+              aria-label="Previous slide"
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="ew-carousel__arrow ew-carousel__arrow--next"
+              aria-label="Next slide"
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </button>
+          </>
+        )}
+
+        {slides.length > 1 && showDots && (
+          <div class="ew-carousel__dots" role="tablist" aria-label="Slide navigation">
+            {slides.map((_, i) => (
+              <button
+                type="button"
+                class="ew-carousel__dot"
+                data-active={i === 0 ? 'true' : 'false'}
+                data-index={i}
+                role="tab"
+                aria-label={`Go to slide ${i + 1}`}
+                aria-selected={i === 0 ? 'true' : 'false'}
+              ></button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  </section>
+)}
+
+<script>
+  type Carousel = HTMLElement;
+
+  const initCarousel = (el: Carousel) => {
+    const slides = Array.from(el.querySelectorAll<HTMLElement>('.ew-carousel__slide'));
+    const dots = Array.from(el.querySelectorAll<HTMLElement>('.ew-carousel__dot'));
+    if (slides.length <= 1) return;
+
+    let current = 0;
+    let timer: ReturnType<typeof setInterval> | null = null;
+    const intervalMs = Number(el.dataset.interval) || 4000;
+    const autoplay = el.dataset.autoplay === 'true';
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const go = (idx: number) => {
+      const next = ((idx % slides.length) + slides.length) % slides.length;
+      if (next === current) return;
+      slides[current].dataset.active = 'false';
+      slides[current].setAttribute('aria-hidden', 'true');
+      slides[next].dataset.active = 'true';
+      slides[next].setAttribute('aria-hidden', 'false');
+      if (dots[current]) {
+        dots[current].dataset.active = 'false';
+        dots[current].setAttribute('aria-selected', 'false');
+      }
+      if (dots[next]) {
+        dots[next].dataset.active = 'true';
+        dots[next].setAttribute('aria-selected', 'true');
+      }
+      current = next;
+    };
+
+    const stop = () => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    };
+    const start = () => {
+      stop();
+      if (autoplay && !reduced) {
+        timer = setInterval(() => go(current + 1), intervalMs);
+      }
+    };
+
+    el.querySelector<HTMLElement>('.ew-carousel__arrow--prev')
+      ?.addEventListener('click', () => { go(current - 1); start(); });
+    el.querySelector<HTMLElement>('.ew-carousel__arrow--next')
+      ?.addEventListener('click', () => { go(current + 1); start(); });
+    dots.forEach((dot, i) => {
+      dot.addEventListener('click', () => { go(i); start(); });
+    });
+
+    el.addEventListener('mouseenter', stop);
+    el.addEventListener('mouseleave', start);
+    el.addEventListener('focusin', stop);
+    el.addEventListener('focusout', start);
+
+    el.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); go(current - 1); start(); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); go(current + 1); start(); }
+    });
+
+    start();
+  };
+
+  document.querySelectorAll<HTMLElement>('.ew-carousel').forEach(initCarousel);
+</script>
+
+<style>
+  .ew-carousel-wrap {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-carousel-wrap__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-carousel-wrap__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-5);
+    line-height: var(--ew-leading-tight);
+  }
+
+  .ew-carousel {
+    position: relative;
+    background: var(--ew-surface-muted);
+    border-radius: var(--ew-radius-md);
+    overflow: hidden;
+    outline: none;
+  }
+  .ew-carousel:focus-visible {
+    outline: 3px solid var(--ew-primary);
+    outline-offset: -3px;
+  }
+
+  .ew-carousel__viewport {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+
+  .ew-carousel__slide {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    pointer-events: none;
+  }
+  .ew-carousel__slide[data-active='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ew-carousel__slide {
+      transition: none;
+    }
+  }
+
+  .ew-carousel__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .ew-carousel__caption {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: var(--ew-space-3) var(--ew-space-5);
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
+    color: #fff;
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    line-height: var(--ew-leading-normal);
+    margin: 0;
+  }
+
+  .ew-carousel__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ew-radius-full);
+    border: none;
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+    z-index: 2;
+  }
+  .ew-carousel__arrow:hover,
+  .ew-carousel__arrow:focus-visible {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .ew-carousel__arrow:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+  .ew-carousel__arrow--prev { left: var(--ew-space-3); }
+  .ew-carousel__arrow--next { right: var(--ew-space-3); }
+
+  .ew-carousel__dots {
+    position: absolute;
+    bottom: var(--ew-space-3);
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    gap: var(--ew-space-2);
+    z-index: 2;
+  }
+  .ew-carousel__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--ew-radius-full);
+    border: none;
+    background: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.15s ease, transform 0.15s ease;
+  }
+  .ew-carousel__dot[data-active='true'] {
+    background: #fff;
+    transform: scale(1.3);
+  }
+  .ew-carousel__dot:hover,
+  .ew-carousel__dot:focus-visible {
+    background: rgba(255, 255, 255, 0.85);
+  }
+  .ew-carousel__dot:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+</style>