feat(quote-carousel): add QuoteCarouselBlock component and related types

- Introduced a new QuoteCarouselBlock component for displaying rotating quotes.
- Added QuoteCarouselBlockData interface to define the structure of the quote carousel data.
- Updated existing components and types to integrate the new quote carousel functionality.
- Enhanced blog-utils to support filtering posts by tags more effectively.
- Made various UI improvements in the Footer and PostCard components for better user experience.

src/lib/block-types.ts

@@ -140,6 +140,25 @@ export interface QuoteBlockData {
   layout?: BlockLayout;
 }
 
+/** Zitat-Karussell (_type: "quote_carousel"). Rotiert durch aufgelöste quote-Einträge. */
+export interface QuoteCarouselBlockData {
+  _type?: "quote_carousel";
+  _slug?: string;
+  headline?: string;
+  quotes?: Array<
+    | string
+    | {
+        _slug?: string;
+        quote?: string;
+        author?: string;
+        variant?: "left" | "right";
+      }
+  >;
+  autoRotate?: boolean;
+  intervalSeconds?: number;
+  layout?: BlockLayout;
+}
+
 /** Link-Liste (_type: "link_list"). links können Slugs oder aufgelöste link-Objekte sein. */
 export interface LinkListBlockData {
   _type?: "link_list";

src/lib/blog-utils.ts

@@ -378,7 +378,19 @@ export async function resolvePostOverviewBlocks(
     if (!Array.isArray(content)) continue;
     for (const item of content) {
       if (!isPostOverviewBlock(item)) continue;
-      if (item.allPosts) {
+      const rawFilter = item.filterByTag ?? [];
+      const tagSlugs = Array.isArray(rawFilter)
+        ? rawFilter
+            .map((t) =>
+              typeof t === "string"
+                ? t
+                : ((t as { _slug?: string })?._slug ?? ""),
+            )
+            .filter(Boolean)
+        : [];
+      const hasExplicitPosts = Array.isArray(item.posts) && item.posts.length > 0;
+      const useAllPosts = item.allPosts || (tagSlugs.length > 0 && !hasExplicitPosts);
+      if (useAllPosts) {
         if (allPosts === null)
           allPosts = await getPosts({
             _sort: "created",
@@ -386,21 +398,11 @@ export async function resolvePostOverviewBlocks(
             resolve: "all",
           });
         let list = filterHiddenPosts(sortPostsByDate(allPosts));
-        const rawFilter = item.filterByTag ?? [];
-        const tagSlugs = Array.isArray(rawFilter)
-          ? rawFilter
-              .map((t) =>
-                typeof t === "string"
-                  ? t
-                  : ((t as { _slug?: string })?._slug ?? ""),
-              )
-              .filter(Boolean)
-          : [];
         if (tagSlugs.length) list = filterPostsByTagSlugs(list, tagSlugs);
         const limit =
           typeof item.numberItems === "number" ? item.numberItems : 9999;
         item.postsResolved = list.slice(0, limit);
-      } else if (Array.isArray(item.posts) && item.posts.length > 0) {
+      } else if (hasExplicitPosts && Array.isArray(item.posts)) {
         const first = item.posts[0];
         const isResolved =
           typeof first === "object" &&

src/lib/components/ContentRows.svelte

@@ -7,6 +7,7 @@
   import ImageGalleryBlock from "./blocks/ImageGalleryBlock.svelte";
   import YoutubeVideoBlock from "./blocks/YoutubeVideoBlock.svelte";
   import QuoteBlock from "./blocks/QuoteBlock.svelte";
+  import QuoteCarouselBlock from "./blocks/QuoteCarouselBlock.svelte";
   import LinkListBlock from "./blocks/LinkListBlock.svelte";
   import PostOverviewBlock from "./blocks/PostOverviewBlock.svelte";
   import SearchableTextBlock from "./blocks/SearchableTextBlock.svelte";
@@ -27,6 +28,7 @@
     ImageGalleryBlockData,
     YoutubeVideoBlockData,
     QuoteBlockData,
+    QuoteCarouselBlockData,
     LinkListBlockData,
     PostOverviewBlockData,
     SearchableTextBlockData,
@@ -112,6 +114,8 @@
                 <YoutubeVideoBlock block={item as YoutubeVideoBlockData} />
               {:else if blockType(item) === "quote"}
                 <QuoteBlock block={item as QuoteBlockData} />
+              {:else if blockType(item) === "quote_carousel"}
+                <QuoteCarouselBlock block={item as QuoteCarouselBlockData} />
               {:else if blockType(item) === "link_list"}
                 <LinkListBlock block={item as LinkListBlockData} />
               {:else if blockType(item) === "post_overview"}

src/lib/components/Footer.svelte

@@ -14,20 +14,6 @@
     return tStatic(translations ?? null, key);
   }
 
-  const justifyClass = $derived(
-    footer?.row1JustifyContent === "end"
-      ? "justify-end"
-      : footer?.row1JustifyContent === "between"
-        ? "justify-between"
-        : footer?.row1JustifyContent === "around"
-          ? "justify-around"
-          : footer?.row1JustifyContent === "evenly"
-            ? "justify-evenly"
-            : footer?.row1JustifyContent === "start"
-              ? "justify-start"
-              : "justify-center",
-  );
-
   const hasRowContent = $derived(
     !!footer &&
       ((footer.row1Content?.length ?? 0) > 0 ||
@@ -38,16 +24,16 @@
 
 {#if footer}
   <footer
-    class="mt-auto bg-zinc-950 text-white py-6"
+    class="mt-auto bg-zinc-950 text-white py-10"
     data-footer-id={footer.id}
   >
-    <div class="container-custom py-6">
+    <div class="container-custom">
       {#if hasRowContent}
-        <div class="content-footer text-xs">
+        <div class="content-footer text-sm text-zinc-200">
           <ContentRows layout={footer} translations={translations} />
         </div>
       {:else}
-        <p class="text-sm text-white/80 {justifyClass} flex">
+        <p class="text-sm text-white/80 text-center">
           {t(T.footer_copyright) !== T.footer_copyright
             ? t(T.footer_copyright)
             : `© ${new Date().getFullYear()} Windwiderstand`}
@@ -56,3 +42,38 @@
     </div>
   </footer>
 {/if}
+
+<style>
+  .content-footer :global(.content) {
+    margin: 0;
+  }
+  .content-footer :global(.content-row) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    align-items: flex-start;
+  }
+  .content-footer :global(.content-row > *) {
+    flex: 1 1 200px;
+    grid-column: auto !important;
+    min-width: 0;
+  }
+  .content-footer :global(.content-row + .content-row) {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgb(63 63 70);
+  }
+  .content-footer :global(a) {
+    color: rgb(228 228 231);
+  }
+  .content-footer :global(a:hover) {
+    color: rgb(255 255 255);
+  }
+  .content-footer :global(h3) {
+    color: rgb(250 250 250);
+  }
+  .content-footer :global(.markdown),
+  .content-footer :global(.prose) {
+    color: rgb(212 212 216);
+  }
+</style>

src/lib/components/PostCard.svelte

@@ -33,11 +33,21 @@
 
   const eventDate = $derived(p.isEvent && p.eventDate ? p.eventDate : null);
   const locationText = $derived(p.eventLocation?.text ?? null);
+
+  const tagSlugs = $derived(
+    (post.postTag ?? []).map((t) =>
+      typeof t === "string" ? t : ((t as { _slug?: string })?._slug ?? ""),
+    ),
+  );
+  const hasTerminTag = $derived(tagSlugs.includes("tag-termin"));
+  const isPastEvent = $derived(
+    hasTerminTag && !!p.eventDate && new Date(p.eventDate).getTime() < Date.now(),
+  );
 </script>
 
 <a
   href={href}
-  class="transition-all flex flex-col text-slate-950 no-underline overflow-hidden border border-gray-200 bg-white"
+  class="transition-all flex flex-col text-slate-950 no-underline overflow-hidden border border-gray-200 bg-white relative {isPastEvent ? 'opacity-70 grayscale' : ''}"
 >
   <div class="relative aspect-3/2 w-full overflow-hidden bg-gray-100">
     {#if rawImg}
@@ -70,6 +80,13 @@
         <EventBadges {eventDate} {locationText} />
       </div>
     {/if}
+    {#if isPastEvent}
+      <div class="absolute top-2 right-2">
+        <span class="inline-flex items-center gap-1 rounded-full bg-neutral-800/90 px-2.5 py-1 text-[.65rem] font-semibold uppercase tracking-wide text-white shadow-sm">
+          Vergangen
+        </span>
+      </div>
+    {/if}
   </div>
   <div class="flex-1 flex flex-col justify-start p-4">
     <PostMeta

src/lib/components/blocks/LinkListBlock.svelte

@@ -1,37 +1,60 @@
 <script lang="ts">
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
   import { getBlockLayoutClasses } from "$lib/block-layout";
   import type { LinkListBlockData } from "$lib/block-types";
 
+  type LinkEntry = {
+    _slug?: string;
+    url?: string;
+    linkName?: string;
+    icon?: string;
+    showText?: boolean;
+    newTab?: boolean;
+    alt?: string;
+  };
+
   let { block }: { block: LinkListBlockData } = $props();
 
   const layoutClasses = $derived(
     block.layout ? getBlockLayoutClasses(block.layout) : "col-span-12 mb-4",
   );
-  const links = $derived(block.links ?? []);
+  const links = $derived(((block.links ?? []) as unknown[]).filter(
+    (l): l is LinkEntry => typeof l === "object" && l !== null && "url" in l,
+  ));
+  const iconOnlyAll = $derived(
+    links.length > 0 &&
+      links.every((l) => l.icon && l.showText === false),
+  );
 </script>
 
-<div class={layoutClasses} data-block-type="link_list" data-block-slug={block._slug}>
+<div class="link-list {layoutClasses}" data-block-type="link_list" data-block-slug={block._slug}>
   {#if block.headline}
-    <h3 class="mb-2 font-semibold text-zinc-900">{block.headline}</h3>
+    <h3 class="mb-3 text-sm font-semibold tracking-wide uppercase">{block.headline}</h3>
   {/if}
-  <ul class="list-disc space-y-1 pl-5">
+  <ul class={iconOnlyAll ? "flex flex-wrap gap-3" : "flex flex-col gap-1.5"}>
     {#each links as link}
-      {#if typeof link === "object" && link !== null && "url" in link}
-        <li>
-          <a
-            href={(link as { url?: string }).url ?? "#"}
-            class="underline text-green-700 hover:text-green-800"
-            target={(link as { newTab?: boolean }).newTab ? "_blank" : undefined}
-            rel={(link as { newTab?: boolean }).newTab ? "noopener noreferrer" : undefined}
-          >
-            {(link as { linkName?: string }).linkName ?? (link as { url?: string }).url}
-          </a>
-        </li>
-      {:else}
-        <li>
-          <span class="text-zinc-500">{typeof link === "string" ? link : "Link"}</span>
-        </li>
-      {/if}
+      {@const hasIcon = !!link.icon}
+      {@const showText = link.showText !== false}
+      {@const label = link.linkName ?? link.alt ?? link.url ?? ""}
+      <li>
+        <a
+          href={link.url ?? "#"}
+          class="inline-flex items-center gap-2 hover:opacity-80 transition-opacity"
+          class:underline={showText}
+          target={link.newTab ? "_blank" : undefined}
+          rel={link.newTab ? "noopener noreferrer" : undefined}
+          aria-label={!showText ? label : undefined}
+          title={!showText ? label : undefined}
+        >
+          {#if hasIcon}
+            <Icon icon={link.icon!} class={showText ? "size-4 shrink-0" : "size-5 shrink-0"} aria-hidden="true" />
+          {/if}
+          {#if showText}
+            <span>{label}</span>
+          {/if}
+        </a>
+      </li>
     {/each}
   </ul>
 </div>

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+  import { getBlockLayoutClasses } from "$lib/block-layout";
+  import type { QuoteCarouselBlockData } from "$lib/block-types";
+
+  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" };
+
+  let { block }: { block: QuoteCarouselBlockData } = $props();
+
+  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
+  const quotes = $derived(
+    ((block.quotes ?? []) as unknown[]).filter(
+      (q): q is QuoteItem =>
+        typeof q === "object" && q !== null && "quote" in q,
+    ),
+  );
+  const autoRotate = $derived(block.autoRotate !== false);
+  const intervalMs = $derived(
+    Math.max(2, block.intervalSeconds ?? 6) * 1000,
+  );
+
+  let index = $state(0);
+  let timer: ReturnType<typeof setInterval> | null = null;
+  let paused = $state(false);
+
+  const current = $derived(quotes[index] ?? null);
+  const variantClass = $derived(
+    current?.variant === "right" ? "text-right" : "text-left",
+  );
+
+  function prev() {
+    if (quotes.length === 0) return;
+    index = (index - 1 + quotes.length) % quotes.length;
+  }
+  function next() {
+    if (quotes.length === 0) return;
+    index = (index + 1) % quotes.length;
+  }
+  function goTo(i: number) {
+    index = i;
+  }
+
+  function startTimer() {
+    stopTimer();
+    if (!autoRotate || paused || quotes.length < 2) return;
+    timer = setInterval(() => {
+      index = (index + 1) % quotes.length;
+    }, intervalMs);
+  }
+  function stopTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  $effect(() => {
+    void autoRotate;
+    void intervalMs;
+    void paused;
+    void quotes.length;
+    startTimer();
+    return stopTimer;
+  });
+
+  onMount(() => startTimer());
+  onDestroy(() => stopTimer());
+</script>
+
+<div
+  class="quote-carousel {layoutClasses}"
+  data-block-type="quote_carousel"
+  data-block-slug={block._slug}
+  onmouseenter={() => (paused = true)}
+  onmouseleave={() => (paused = false)}
+  role="region"
+  aria-roledescription="carousel"
+  aria-label={block.headline ?? "Zitat-Karussell"}
+>
+  {#if block.headline}
+    <h3 class="mb-8 text-lg font-semibold">{block.headline}</h3>
+  {/if}
+
+  {#if quotes.length === 0}
+    <p class="text-sm text-zinc-500 italic">Keine Zitate vorhanden.</p>
+  {:else}
+    <div class="flex items-center gap-2 sm:gap-4">
+      {#if quotes.length > 1}
+        <button
+          type="button"
+          onclick={prev}
+          aria-label="Vorheriges Zitat"
+          class="shrink-0 inline-flex items-center justify-center size-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+        >
+          <Icon icon="mdi:chevron-left" class="size-5" aria-hidden="true" />
+        </button>
+      {/if}
+
+      <div class="relative flex-1 min-h-[6rem]">
+        {#key index}
+          <blockquote
+            in:fade={{ duration: 300 }}
+            class="absolute inset-0 border-l-4 border-green-700 pl-6 py-2 {variantClass}"
+          >
+            <p class="text-lg italic text-zinc-700">"{current?.quote ?? ""}"</p>
+            {#if current?.author}
+              <cite class="mt-2 block not-italic text-sm text-zinc-500">
+                — {current.author}
+              </cite>
+            {/if}
+          </blockquote>
+        {/key}
+      </div>
+
+      {#if quotes.length > 1}
+        <button
+          type="button"
+          onclick={next}
+          aria-label="Nächstes Zitat"
+          class="shrink-0 inline-flex items-center justify-center size-9 rounded-full bg-white/90 border border-zinc-200 shadow-sm hover:bg-white hover:border-green-700 transition"
+        >
+          <Icon icon="mdi:chevron-right" class="size-5" aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+
+    {#if quotes.length > 1}
+      <div class="mt-4 flex justify-center gap-1.5" role="tablist">
+        {#each quotes as _, i}
+          <button
+            type="button"
+            role="tab"
+            aria-selected={i === index}
+            aria-label={`Zitat ${i + 1}`}
+            onclick={() => goTo(i)}
+            class="size-2 rounded-full transition-colors {i === index
+              ? 'bg-green-700'
+              : 'bg-zinc-300 hover:bg-zinc-400'}"
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>

src/routes/+layout.server.ts

@@ -154,7 +154,7 @@ export const load: LayoutServerLoad = async ({ locals }) => {
   try {
     footerData = await getFooterBySlug('footer-main', {
       locale: 'de',
-      resolve: ROW_RESOLVE,
+      resolve: ['all'],
     });
   } catch {
     // CMS nicht erreichbar