feat(quote): enhance QuoteBlock and QuoteCarouselBlock components

- Updated QuoteBlock to support a new "center" variant for text alignment.
- Modified QuoteCarouselBlock to include an option for displaying navigation arrows.
- Enhanced type definitions for quote-related data structures to accommodate new features.
- Improved styling and layout handling for better visual presentation of quotes.

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -1,12 +1,12 @@
 <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";
+  import type { QuoteBlockData, QuoteCarouselBlockData } from "$lib/block-types";
+  import QuoteBlock from "./QuoteBlock.svelte";
 
-  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" };
+  type QuoteItem = { quote?: string; author?: string; variant?: "left" | "right" | "center" };
 
   let { block }: { block: QuoteCarouselBlockData } = $props();
 
@@ -18,6 +18,7 @@
     ),
   );
   const autoRotate = $derived(block.autoRotate !== false);
+  const showArrows = $derived(block.showArrows === true);
   const intervalMs = $derived(
     Math.max(2, block.intervalSeconds ?? 6) * 1000,
   );
@@ -26,11 +27,6 @@
   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;
@@ -87,42 +83,39 @@
   {#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}
+    <div class="flex items-center gap-1.5 sm:gap-2">
+      {#if showArrows && 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"
+          class="shrink-0 inline-flex items-center justify-center size-7 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" />
+          <Icon icon="mdi:chevron-left" class="size-4" 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}"
+      <div class="grid flex-1 min-w-0">
+        {#each quotes as q, i (i)}
+          <div
+            class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
+              ? 'opacity-100'
+              : 'pointer-events-none opacity-0'}"
+            aria-hidden={i !== index}
           >
-            <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}
+            <QuoteBlock block={{ ...(q as QuoteBlockData), variant: "left" }} bare extraClass="py-2" />
+          </div>
+        {/each}
       </div>
 
-      {#if quotes.length > 1}
+      {#if showArrows && 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"
+          class="shrink-0 inline-flex items-center justify-center size-7 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" />
+          <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
         </button>
       {/if}
     </div>