@easy-web/content-blocks 1.0.0

package/src/components/GalleryFeatureHighlight.astro

@@ -0,0 +1,153 @@
+---
+import type { GalleryFeatureHighlightData } from '../schemas/galleries';
+
+type Props = Omit<GalleryFeatureHighlightData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  gap = 'lg',
+  items,
+} = Astro.props;
+
+const sectionClass = ['ew-feature-highlight', `ew-feature-highlight--gap-${gap}`].join(' ');
+---
+
+{items.length > 0 && (
+  <section class="ew-feature-highlight-wrap">
+    <div class="ew-feature-highlight-wrap__inner">
+      {title && <h2 class="ew-feature-highlight-wrap__title">{title}</h2>}
+      <div class={sectionClass}>
+        {items.map((item, i) => {
+          const position = item.imagePosition ?? (i % 2 === 0 ? 'right' : 'left');
+          const rowClass = `ew-feature-highlight__row ew-feature-highlight__row--image-${position}`;
+          return (
+            <article class={rowClass}>
+              <div class="ew-feature-highlight__media">
+                <img
+                  src={item.src}
+                  alt={item.alt}
+                  class="ew-feature-highlight__img"
+                  loading="lazy"
+                />
+              </div>
+              <div class="ew-feature-highlight__content">
+                <h3 class="ew-feature-highlight__title">{item.title}</h3>
+                <p class="ew-feature-highlight__description">{item.description}</p>
+                {item.href && item.cta && (
+                  <a href={item.href} class="ew-feature-highlight__cta">{item.cta}</a>
+                )}
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  </section>
+)}
+
+<style>
+  .ew-feature-highlight-wrap {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-feature-highlight-wrap__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-feature-highlight-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-feature-highlight {
+    display: flex;
+    flex-direction: column;
+  }
+  .ew-feature-highlight--gap-sm { gap: var(--ew-space-5); }
+  .ew-feature-highlight--gap-md { gap: var(--ew-space-7); }
+  .ew-feature-highlight--gap-lg { gap: var(--ew-space-8); }
+
+  .ew-feature-highlight__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: var(--ew-space-7);
+  }
+
+  .ew-feature-highlight__row--image-left .ew-feature-highlight__media { order: 1; }
+  .ew-feature-highlight__row--image-left .ew-feature-highlight__content { order: 2; }
+  .ew-feature-highlight__row--image-right .ew-feature-highlight__media { order: 2; }
+  .ew-feature-highlight__row--image-right .ew-feature-highlight__content { order: 1; }
+
+  @media (max-width: 768px) {
+    .ew-feature-highlight__row {
+      grid-template-columns: 1fr;
+      gap: var(--ew-space-4);
+    }
+    .ew-feature-highlight__row .ew-feature-highlight__media { order: 1; }
+    .ew-feature-highlight__row .ew-feature-highlight__content { order: 2; }
+  }
+
+  .ew-feature-highlight__media {
+    overflow: hidden;
+    border-radius: var(--ew-radius-md);
+  }
+
+  .ew-feature-highlight__img {
+    width: 100%;
+    height: auto;
+    display: block;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+  }
+
+  .ew-feature-highlight__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ew-space-3);
+  }
+
+  .ew-feature-highlight__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0;
+    line-height: var(--ew-leading-tight);
+  }
+
+  .ew-feature-highlight__description {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    color: var(--ew-on-surface);
+    margin: 0;
+    line-height: var(--ew-leading-loose);
+  }
+
+  .ew-feature-highlight__cta {
+    align-self: flex-start;
+    display: inline-block;
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    padding: var(--ew-space-2) var(--ew-space-5);
+    border-radius: var(--ew-radius-md);
+    text-decoration: none;
+    font-family: var(--ew-font-sans);
+    font-weight: 600;
+    font-size: var(--ew-text-base);
+    margin-top: var(--ew-space-2);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+  .ew-feature-highlight__cta:hover,
+  .ew-feature-highlight__cta:focus-visible {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .ew-feature-highlight__cta:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+</style>

package/src/components/GalleryHeroSlider.astro

@@ -0,0 +1,362 @@
+---
+import type { GalleryHeroSliderData } from '../schemas/galleries';
+
+type Props = Omit<GalleryHeroSliderData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  autoplay = true,
+  interval = 5000,
+  height = 'lg',
+  slides,
+} = Astro.props;
+
+const sliderClass = `ew-hero-slider ew-hero-slider--height-${height}`;
+---
+
+{slides.length > 0 && (
+  <section
+    class={sliderClass}
+    data-autoplay={String(autoplay)}
+    data-interval={String(interval)}
+    aria-roledescription="carousel"
+    aria-label={title ?? 'Hero slider'}
+    tabindex="0"
+  >
+    {title && <h2 class="ew-hero-slider__heading">{title}</h2>}
+
+    <div class="ew-hero-slider__viewport">
+      {slides.map((slide, i) => (
+        <article
+          class="ew-hero-slider__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-hero-slider__img"
+            loading={i === 0 ? 'eager' : 'lazy'}
+          />
+          <div class="ew-hero-slider__overlay">
+            <div class="ew-hero-slider__content">
+              <h3 class="ew-hero-slider__title">{slide.title}</h3>
+              {slide.subtitle && (
+                <p class="ew-hero-slider__subtitle">{slide.subtitle}</p>
+              )}
+              {slide.href && slide.cta && (
+                <a href={slide.href} class="ew-hero-slider__cta">{slide.cta}</a>
+              )}
+            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+
+    {slides.length > 1 && (
+      <>
+        <button
+          type="button"
+          class="ew-hero-slider__arrow ew-hero-slider__arrow--prev"
+          aria-label="Previous slide"
+          data-direction="prev"
+        >
+          <svg viewBox="0 0 24 24" width="24" height="24" 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-hero-slider__arrow ew-hero-slider__arrow--next"
+          aria-label="Next slide"
+          data-direction="next"
+        >
+          <svg viewBox="0 0 24 24" width="24" height="24" 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>
+
+        <div class="ew-hero-slider__dots" role="tablist" aria-label="Slide navigation">
+          {slides.map((_, i) => (
+            <button
+              type="button"
+              class="ew-hero-slider__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>
+      </>
+    )}
+  </section>
+)}
+
+<script>
+  type Slider = HTMLElement;
+
+  const initSlider = (slider: Slider) => {
+    const slides = Array.from(slider.querySelectorAll<HTMLElement>('.ew-hero-slider__slide'));
+    const dots = Array.from(slider.querySelectorAll<HTMLElement>('.ew-hero-slider__dot'));
+    if (slides.length <= 1) return;
+
+    let current = 0;
+    let timer: ReturnType<typeof setInterval> | null = null;
+    const intervalMs = Number(slider.dataset.interval) || 5000;
+    const autoplay = slider.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);
+      }
+    };
+
+    slider.querySelector<HTMLElement>('.ew-hero-slider__arrow--prev')
+      ?.addEventListener('click', () => { go(current - 1); start(); });
+    slider.querySelector<HTMLElement>('.ew-hero-slider__arrow--next')
+      ?.addEventListener('click', () => { go(current + 1); start(); });
+    dots.forEach((dot, i) => {
+      dot.addEventListener('click', () => { go(i); start(); });
+    });
+
+    slider.addEventListener('mouseenter', stop);
+    slider.addEventListener('mouseleave', start);
+    slider.addEventListener('focusin', stop);
+    slider.addEventListener('focusout', start);
+
+    slider.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-hero-slider').forEach(initSlider);
+</script>
+
+<style>
+  .ew-hero-slider {
+    position: relative;
+    overflow: hidden;
+    background: var(--ew-surface-muted);
+    outline: none;
+  }
+  .ew-hero-slider:focus-visible {
+    outline: 3px solid var(--ew-primary);
+    outline-offset: -3px;
+  }
+
+  .ew-hero-slider--height-sm .ew-hero-slider__viewport { height: 20rem; }
+  .ew-hero-slider--height-md .ew-hero-slider__viewport { height: 30rem; }
+  .ew-hero-slider--height-lg .ew-hero-slider__viewport { height: 40rem; }
+  .ew-hero-slider--height-full .ew-hero-slider__viewport { height: 100vh; }
+
+  @media (max-width: 768px) {
+    .ew-hero-slider--height-md .ew-hero-slider__viewport { height: 24rem; }
+    .ew-hero-slider--height-lg .ew-hero-slider__viewport { height: 28rem; }
+  }
+
+  .ew-hero-slider__heading {
+    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-4);
+    padding: 0 var(--ew-space-5);
+    line-height: var(--ew-leading-tight);
+  }
+
+  .ew-hero-slider__viewport {
+    position: relative;
+    width: 100%;
+  }
+
+  .ew-hero-slider__slide {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    transition: opacity 0.6s ease;
+    pointer-events: none;
+  }
+  .ew-hero-slider__slide[data-active='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ew-hero-slider__slide {
+      transition: none;
+    }
+  }
+
+  .ew-hero-slider__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .ew-hero-slider__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.6) 0%,
+      rgba(0, 0, 0, 0.2) 50%,
+      transparent 100%
+    );
+  }
+
+  .ew-hero-slider__content {
+    max-width: 48rem;
+    padding: var(--ew-space-8) var(--ew-space-6);
+    color: #fff;
+  }
+  @media (min-width: 768px) {
+    .ew-hero-slider__content {
+      padding: var(--ew-space-10) var(--ew-space-8);
+    }
+  }
+
+  .ew-hero-slider__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-3xl);
+    font-weight: 700;
+    margin: 0 0 var(--ew-space-3);
+    line-height: var(--ew-leading-tight);
+  }
+  @media (min-width: 768px) {
+    .ew-hero-slider__title { font-size: var(--ew-text-3xl); }
+  }
+
+  .ew-hero-slider__subtitle {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-lg);
+    margin: 0 0 var(--ew-space-5);
+    line-height: var(--ew-leading-normal);
+    opacity: 0.95;
+  }
+
+  .ew-hero-slider__cta {
+    display: inline-block;
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    padding: var(--ew-space-3) var(--ew-space-6);
+    border-radius: var(--ew-radius-md);
+    text-decoration: none;
+    font-family: var(--ew-font-sans);
+    font-weight: 600;
+    font-size: var(--ew-text-base);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+  .ew-hero-slider__cta:hover,
+  .ew-hero-slider__cta:focus-visible {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+  .ew-hero-slider__cta:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+
+  .ew-hero-slider__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--ew-radius-full);
+    border: none;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+    z-index: 2;
+  }
+  .ew-hero-slider__arrow:hover,
+  .ew-hero-slider__arrow:focus-visible {
+    background: rgba(0, 0, 0, 0.75);
+  }
+  .ew-hero-slider__arrow:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+  .ew-hero-slider__arrow--prev { left: var(--ew-space-4); }
+  .ew-hero-slider__arrow--next { right: var(--ew-space-4); }
+
+  .ew-hero-slider__dots {
+    position: absolute;
+    bottom: var(--ew-space-4);
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    gap: var(--ew-space-2);
+    z-index: 2;
+  }
+  .ew-hero-slider__dot {
+    width: 0.625rem;
+    height: 0.625rem;
+    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-hero-slider__dot[data-active='true'] {
+    background: #fff;
+    transform: scale(1.25);
+  }
+  .ew-hero-slider__dot:hover,
+  .ew-hero-slider__dot:focus-visible {
+    background: rgba(255, 255, 255, 0.85);
+  }
+  .ew-hero-slider__dot:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+</style>

package/src/components/GalleryImageGrid.astro

@@ -0,0 +1,143 @@
+---
+import type { GalleryImageGridData } from '../schemas/galleries';
+
+type Props = Omit<GalleryImageGridData, 'kind' | 'locale' | 'translationKey'>;
+
+const {
+  title,
+  columns = 3,
+  gap = 'md',
+  aspectRatio = 'square',
+  items,
+} = Astro.props;
+
+const gridClass = [
+  'ew-gallery-grid',
+  `ew-gallery-grid--cols-${columns}`,
+  `ew-gallery-grid--gap-${gap}`,
+].join(' ');
+
+const ratioClass = `ew-gallery-img--ratio-${aspectRatio.replace('/', '-')}`;
+---
+
+{items.length > 0 && (
+  <section class="ew-gallery">
+    <div class="ew-gallery__inner">
+      {title && <h2 class="ew-gallery__title">{title}</h2>}
+      <div class={gridClass}>
+        {items.map((item) => {
+          const figure = (
+            <figure class="ew-gallery__item">
+              <img
+                src={item.src}
+                alt={item.alt}
+                class={`ew-gallery__img ${ratioClass}`}
+                loading="lazy"
+              />
+              {item.caption && (
+                <figcaption class="ew-gallery__caption">{item.caption}</figcaption>
+              )}
+            </figure>
+          );
+          return item.href ? (
+            <a href={item.href} class="ew-gallery__link" aria-label={item.alt}>
+              {figure}
+            </a>
+          ) : figure;
+        })}
+      </div>
+    </div>
+  </section>
+)}
+
+<style>
+  .ew-gallery {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-gallery__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-gallery__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-gallery-grid {
+    display: grid;
+    gap: var(--ew-space-4);
+  }
+  .ew-gallery-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ew-gallery-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ew-gallery-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ew-gallery-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
+
+  .ew-gallery-grid--gap-sm { gap: var(--ew-space-2); }
+  .ew-gallery-grid--gap-md { gap: var(--ew-space-4); }
+  .ew-gallery-grid--gap-lg { gap: var(--ew-space-6); }
+
+  @media (max-width: 1024px) {
+    .ew-gallery-grid--cols-6 { grid-template-columns: repeat(4, 1fr); }
+  }
+  @media (max-width: 768px) {
+    .ew-gallery-grid--cols-3,
+    .ew-gallery-grid--cols-4,
+    .ew-gallery-grid--cols-6 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (max-width: 480px) {
+    .ew-gallery-grid--cols-2,
+    .ew-gallery-grid--cols-3,
+    .ew-gallery-grid--cols-4,
+    .ew-gallery-grid--cols-6 {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .ew-gallery__item {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ew-space-2);
+  }
+  .ew-gallery__img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: var(--ew-radius-md);
+    display: block;
+    transition: transform 0.2s ease;
+  }
+  .ew-gallery__img--ratio-square { aspect-ratio: 1 / 1; }
+  .ew-gallery__img--ratio-4-3 { aspect-ratio: 4 / 3; }
+  .ew-gallery__img--ratio-16-9 { aspect-ratio: 16 / 9; }
+  .ew-gallery__img--ratio-auto { aspect-ratio: auto; }
+
+  .ew-gallery__caption {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    color: var(--ew-muted);
+    line-height: var(--ew-leading-normal);
+    text-align: center;
+  }
+
+  .ew-gallery__link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+  }
+  .ew-gallery__link:hover .ew-gallery__img,
+  .ew-gallery__link:focus-visible .ew-gallery__img {
+    transform: scale(1.02);
+  }
+  .ew-gallery__link:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+    border-radius: var(--ew-radius-md);
+  }
+</style>