@for-the-people-initiative/design-system 1.3.1

package/src/components/Galleria/Galleria.scss

@@ -0,0 +1,295 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: galleria;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  background: var(--galleria-container-background, $galleria-container-background);
+  border-radius: var(--galleria-container-radius, $galleria-container-radius);
+  border: var(--galleria-container-border-width, $galleria-container-border-width) solid
+          var(--galleria-container-border-color, $galleria-container-border-color);
+  overflow: hidden;
+}
+
+// Thumbnail position variants
+.#{$c}--thumbnails-top {
+  flex-direction: column-reverse;
+}
+
+.#{$c}--thumbnails-left {
+  flex-direction: row-reverse;
+
+  .#{$c}__thumbnails {
+    flex-direction: column;
+  }
+
+  .#{$c}__thumbnail-container {
+    flex-direction: column;
+  }
+}
+
+.#{$c}--thumbnails-right {
+  flex-direction: row;
+
+  .#{$c}__thumbnails {
+    flex-direction: column;
+  }
+
+  .#{$c}__thumbnail-container {
+    flex-direction: column;
+  }
+}
+
+.#{$c}__main {
+  flex: 1;
+  min-height: 0;
+}
+
+.#{$c}__preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--galleria-preview-background, $galleria-preview-background);
+  padding: var(--galleria-preview-padding, $galleria-preview-padding);
+  min-height: 300px;
+}
+
+.#{$c}--fullscreen-enabled .#{$c}__preview {
+  cursor: pointer;
+}
+
+.#{$c}__preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--galleria-preview-radius, $galleria-preview-radius);
+}
+
+// Navigation buttons in preview
+.#{$c}__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-navigator-size, $galleria-navigator-size);
+  height: var(--galleria-navigator-size, $galleria-navigator-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--galleria-navigator-radius, $galleria-navigator-radius);
+  background: var(--galleria-navigator-background-default, $galleria-navigator-background-default);
+  color: var(--galleria-navigator-color, $galleria-navigator-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  z-index: 1;
+
+  &:hover {
+    background: var(--galleria-navigator-background-hover, $galleria-navigator-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+    height: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+  }
+}
+
+.#{$c}__nav--prev {
+  left: 16px;
+}
+
+.#{$c}__nav--next {
+  right: 16px;
+}
+
+// Indicators
+.#{$c}__indicators {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--galleria-indicator-gap, $galleria-indicator-gap);
+}
+
+.#{$c}__indicator {
+  width: var(--galleria-indicator-size, $galleria-indicator-size);
+  height: var(--galleria-indicator-size, $galleria-indicator-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-indicator-background-default, $galleria-indicator-background-default);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover {
+    background: var(--galleria-indicator-background-active, $galleria-indicator-background-active);
+  }
+}
+
+.#{$c}__indicator--active {
+  background: var(--galleria-indicator-background-active, $galleria-indicator-background-active);
+}
+
+// Caption
+.#{$c}__caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--galleria-caption-padding, $galleria-caption-padding);
+  background: var(--galleria-caption-background, $galleria-caption-background);
+  color: var(--galleria-caption-color, $galleria-caption-color);
+}
+
+.#{$c}__caption-title {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.#{$c}__caption-description {
+  margin: 0;
+  font-size: var(--galleria-caption-fontSize, $galleria-caption-fontSize);
+  opacity: 0.9;
+}
+
+// Thumbnails
+.#{$c}__thumbnails {
+  padding: var(--galleria-thumbnail-container-padding, $galleria-thumbnail-container-padding);
+  background: var(--galleria-container-background, $galleria-container-background);
+  overflow: auto;
+}
+
+.#{$c}__thumbnail-container {
+  display: flex;
+  gap: var(--galleria-thumbnail-container-gap, $galleria-thumbnail-container-gap);
+}
+
+.#{$c}__thumbnail {
+  flex-shrink: 0;
+  width: var(--galleria-thumbnail-item-width, $galleria-thumbnail-item-width);
+  height: var(--galleria-thumbnail-item-height, $galleria-thumbnail-item-height);
+  padding: 0;
+  border: var(--galleria-thumbnail-item-border-width, $galleria-thumbnail-item-border-width) solid
+          var(--galleria-thumbnail-item-border-color-default, $galleria-thumbnail-item-border-color-default);
+  border-radius: var(--galleria-thumbnail-item-radius, $galleria-thumbnail-item-radius);
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: var(--galleria-thumbnail-item-opacity-default, $galleria-thumbnail-item-opacity-default);
+  transition: opacity 150ms ease, border-color 150ms ease;
+
+  &:hover {
+    opacity: var(--galleria-thumbnail-item-opacity-hover, $galleria-thumbnail-item-opacity-hover);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.#{$c}__thumbnail--active {
+  opacity: var(--galleria-thumbnail-item-opacity-active, $galleria-thumbnail-item-opacity-active);
+  border-color: var(--galleria-thumbnail-item-border-color-active, $galleria-thumbnail-item-border-color-active);
+}
+
+// Fullscreen
+.#{$c}__fullscreen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--galleria-fullscreen-background, $galleria-fullscreen-background);
+  z-index: var(--galleria-fullscreen-zIndex, $galleria-fullscreen-zIndex);
+  padding: 60px;
+}
+
+.#{$c}__fullscreen-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.#{$c}__fullscreen-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-fullscreen-closeButton-size, $galleria-fullscreen-closeButton-size);
+  height: var(--galleria-fullscreen-closeButton-size, $galleria-fullscreen-closeButton-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-fullscreen-closeButton-background-default, $galleria-fullscreen-closeButton-background-default);
+  color: var(--galleria-fullscreen-closeButton-color, $galleria-fullscreen-closeButton-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover {
+    background: var(--galleria-fullscreen-closeButton-background-hover, $galleria-fullscreen-closeButton-background-hover);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.#{$c}__fullscreen-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-navigator-size, $galleria-navigator-size);
+  height: var(--galleria-navigator-size, $galleria-navigator-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-navigator-background-default, $galleria-navigator-background-default);
+  color: var(--galleria-navigator-color, $galleria-navigator-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover {
+    background: var(--galleria-navigator-background-hover, $galleria-navigator-background-hover);
+  }
+
+  svg {
+    width: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+    height: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+  }
+}
+
+.#{$c}__fullscreen-nav--prev {
+  left: 16px;
+}
+
+.#{$c}__fullscreen-nav--next {
+  right: 16px;
+}
+
+// Transition animations
+.galleria-fullscreen-enter-active,
+.galleria-fullscreen-leave-active {
+  transition: opacity 200ms ease;
+}
+
+.galleria-fullscreen-enter-from,
+.galleria-fullscreen-leave-to {
+  opacity: 0;
+}

package/src/components/Galleria/Galleria.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="galleria" :class="additionalClasses">
+    <div class="galleria__main">
+      <!-- Preview area -->
+      <div class="galleria__preview" @click="onPreviewClick">
+        <img
+          v-if="activeItem"
+          :src="activeItem.src || activeItem"
+          :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+          class="galleria__preview-image"
+        />
+
+        <!-- Navigation buttons -->
+        <button
+          v-if="showItemNavigators && items.length > 1"
+          type="button"
+          class="galleria__nav galleria__nav--prev"
+          :disabled="!circular && activeIndex === 0"
+          aria-label="Previous image"
+          @click.stop="prev"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <button
+          v-if="showItemNavigators && items.length > 1"
+          type="button"
+          class="galleria__nav galleria__nav--next"
+          :disabled="!circular && activeIndex === items.length - 1"
+          aria-label="Next image"
+          @click.stop="next"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
+        <!-- Indicators (inside preview) -->
+        <div v-if="showIndicators && items.length > 1" class="galleria__indicators">
+          <button
+            v-for="(_, index) in items"
+            :key="index"
+            type="button"
+            class="galleria__indicator"
+            :class="{ 'galleria__indicator--active': index === activeIndex }"
+            :aria-label="`View image ${index + 1}`"
+            @click.stop="goTo(index)"
+          />
+        </div>
+
+        <!-- Caption -->
+        <div v-if="activeItem && (activeItem.title || activeItem.description)" class="galleria__caption">
+          <h4 v-if="activeItem.title" class="galleria__caption-title">{{ activeItem.title }}</h4>
+          <p v-if="activeItem.description" class="galleria__caption-description">{{ activeItem.description }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Thumbnails -->
+    <div v-if="showThumbnails" class="galleria__thumbnails">
+      <div class="galleria__thumbnail-container">
+        <button
+          v-for="(item, index) in items"
+          :key="index"
+          type="button"
+          class="galleria__thumbnail"
+          :class="{ 'galleria__thumbnail--active': index === activeIndex }"
+          :aria-label="`View image ${index + 1}`"
+          @click="goTo(index)"
+        >
+          <img
+            :src="item.thumbnail || item.src || item"
+            :alt="item.alt || `Thumbnail ${index + 1}`"
+          />
+        </button>
+      </div>
+    </div>
+
+    <!-- Fullscreen overlay -->
+    <Teleport to="body">
+      <Transition name="galleria-fullscreen">
+        <div
+          v-if="fullscreenVisible"
+          class="galleria__fullscreen"
+          @click="closeFullscreen"
+          @keydown.escape="closeFullscreen"
+          @keydown.left="prev"
+          @keydown.right="next"
+        >
+          <button
+            type="button"
+            class="galleria__fullscreen-close"
+            aria-label="Close fullscreen"
+            @click.stop="closeFullscreen"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+
+          <button
+            v-if="items.length > 1"
+            type="button"
+            class="galleria__fullscreen-nav galleria__fullscreen-nav--prev"
+            aria-label="Previous image"
+            @click.stop="prev"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+          </button>
+
+          <img
+            v-if="activeItem"
+            :src="activeItem.src || activeItem"
+            :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+            class="galleria__fullscreen-image"
+            @click.stop
+          />
+
+          <button
+            v-if="items.length > 1"
+            type="button"
+            class="galleria__fullscreen-nav galleria__fullscreen-nav--next"
+            aria-label="Next image"
+            @click.stop="next"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </button>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./Galleria.scss"></style>
+
+<script setup lang="ts">
+import type { GalleriaProps, GalleriaEmits } from '../../types';
+import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpGalleria' });
+
+const props = withDefaults(defineProps<GalleriaProps>(), {
+  items: () => [],
+  activeIndex: 0,
+  fullscreen: false,
+  showThumbnails: true,
+  showItemNavigators: true,
+  showIndicators: false,
+  circular: false,
+  autoplay: false,
+  autoplayInterval: 4000,
+  thumbnailsPosition: "bottom",
+});
+
+const emit = defineEmits(["update:activeIndex", "show", "hide"]);
+
+const internalIndex = ref(props.activeIndex);
+const fullscreenVisible = ref(false);
+const autoplayTimer = ref<ReturnType<typeof setInterval> | null>(null);
+
+const activeIndex = computed({
+  get: () => internalIndex.value,
+  set: (val) => {
+    internalIndex.value = val;
+    emit("update:activeIndex", val);
+  },
+});
+
+const activeItem = computed(() => props.items[activeIndex.value]);
+
+const additionalClasses = computed(() =>
+  [
+    `galleria--thumbnails-${props.thumbnailsPosition}`,
+    props.fullscreen && "galleria--fullscreen-enabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+watch(() => props.activeIndex, (newValue) => {
+  internalIndex.value = newValue;
+});
+
+const prev = () => {
+  if (activeIndex.value > 0) {
+    activeIndex.value--;
+  } else if (props.circular && props.items.length > 0) {
+    activeIndex.value = props.items.length - 1;
+  }
+};
+
+const next = () => {
+  if (activeIndex.value < props.items.length - 1) {
+    activeIndex.value++;
+  } else if (props.circular) {
+    activeIndex.value = 0;
+  }
+};
+
+const goTo = (index: any) => {
+  activeIndex.value = index;
+};
+
+const onPreviewClick = () => {
+  if (props.fullscreen) {
+    openFullscreen();
+  }
+};
+
+const openFullscreen = () => {
+  fullscreenVisible.value = true;
+  document.body.style.overflow = "hidden";
+  emit("show");
+};
+
+const closeFullscreen = () => {
+  fullscreenVisible.value = false;
+  document.body.style.overflow = "";
+  emit("hide");
+};
+
+const startAutoplay = () => {
+  if (typeof window === 'undefined') return;
+  if (props.autoplay && props.items.length > 1) {
+    autoplayTimer.value = setInterval(() => {
+      next();
+    }, props.autoplayInterval);
+  }
+};
+
+const stopAutoplay = () => {
+  if (autoplayTimer.value) {
+    clearInterval(autoplayTimer.value);
+    autoplayTimer.value = null;
+  }
+};
+
+onMounted(() => {
+  if (props.autoplay) {
+    startAutoplay();
+  }
+});
+
+watch(() => props.autoplay, (newValue) => {
+  if (typeof window === 'undefined') return;
+  if (newValue) {
+    startAutoplay();
+  } else {
+    stopAutoplay();
+  }
+});
+
+onUnmounted(() => {
+  stopAutoplay();
+  if (fullscreenVisible.value) {
+    document.body.style.overflow = "";
+  }
+});
+
+defineExpose({
+  prev,
+  next,
+  goTo,
+  openFullscreen,
+  closeFullscreen,
+});
+</script>

package/src/components/Hero/Hero.scss

@@ -0,0 +1,116 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: hero;
+
+.#{$c} {
+  position: relative;
+  width: 100%;
+  padding: 5rem 2rem;
+  overflow: hidden;
+  background-color: $surface-canvas;
+}
+
+.#{$c}--full-height {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.#{$c}--has-bg {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.#{$c}__overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
+  z-index: 1;
+}
+
+.#{$c}__container {
+  position: relative;
+  z-index: 2;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+}
+
+.#{$c}__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.#{$c}__title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  line-height: 1.1;
+  color: $text-heading;
+  margin: 0;
+}
+
+.#{$c}__subtitle {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: $text-secondary;
+  margin: 0;
+  max-width: 600px;
+}
+
+.#{$c}__actions {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.#{$c}__media {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Alignment variants
+.#{$c}--align-center {
+  text-align: center;
+
+  .#{$c}__container {
+    flex-direction: column;
+  }
+
+  .#{$c}__content {
+    align-items: center;
+  }
+
+  .#{$c}__subtitle {
+    max-width: 700px;
+  }
+
+  .#{$c}__actions {
+    justify-content: center;
+  }
+}
+
+.#{$c}--align-left {
+  .#{$c}__container {
+    flex-direction: row;
+  }
+}
+
+.#{$c}--align-right {
+  .#{$c}__container {
+    flex-direction: row-reverse;
+  }
+
+  .#{$c}__content {
+    align-items: flex-end;
+    text-align: right;
+  }
+}