ndsolutionswebsite/src/components/TemplateMarquee.astro

---
// src/components/TemplateMarquee.astro

const templates = [
  { id: "01", name: "Der Handwerker-Klassiker", style: "Einfach & Bodenständig", layout: "boxed", design: "Brutalismus", colors: "from-[#FDFBF7] to-[#FAF7F2] text-[#2C1A11]" },
  { id: "02", name: "Dachdecker Meister", style: "Elegant & Professionell", layout: "split", design: "Glassmorphismus", colors: "from-zinc-900 to-zinc-950 text-white border-yellow-500/20" },
  { id: "03", name: "Solar & Photovoltaik", style: "Tech & Zukunft", layout: "bento", design: "SaaS-Minimalismus", colors: "from-zinc-900 to-black text-zinc-100 border-orange-500/20" },
  { id: "04", name: "Die Kanzlei", style: "Seriös & Clean", layout: "asymmetric", design: "Glassmorphismus", colors: "from-[#0B0F19] to-[#070A13] text-white border-emerald-500/20" },
  { id: "05", name: "Bio-Hofladen", style: "Rustikal & Natur", layout: "single", design: "Neomorphismus", colors: "from-[#FAF7F2] to-[#E8DCC4] text-[#4A3B32]" },
  { id: "06", name: "Sanitär & Heizung", style: "Klar & Zuverlässig", layout: "bento", design: "SaaS-Minimalismus", colors: "from-white to-slate-50 text-slate-800 border-slate-200" },
  { id: "07", name: "KFZ Schnellservice", style: "Dynamisch & Direkt", layout: "split", design: "Brutalismus", colors: "from-zinc-800 to-zinc-900 text-white border-zinc-700" },
  { id: "08", name: "Schreinerei Holzart", style: "Handwerk & Präzision", layout: "boxed", design: "SaaS-Minimalismus", colors: "from-[#F5F2EB] to-[#D9D2C5] text-[#3D3A36]" }
];

// Double list for infinite wrap animation
const rowData = [...templates, ...templates];
---

<section class="py-12 bg-slate-50 dark:bg-[#070A13] overflow-hidden relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
  <!-- Subtle background glow -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[60%] bg-sky-500/5 dark:bg-sky-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8 relative z-10">
    <div class="max-w-3xl">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">
        Unsere Design-Vorlagen
      </h2>
      <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-2">
        Entdecken Sie vorkonfigurierte Layouts. Vollständig anpassbar und optimiert.
      </p>
    </div>
  </div>

  <!-- Single Marquee row container -->
  <div class="relative z-10 w-full overflow-hidden">
    <div class="marquee-wrapper">
      <div class="marquee-track marquee-left">
        {rowData.map((item, index) => (
          <div class="marquee-item group relative w-72 sm:w-80 h-44 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-gradient-to-br backdrop-blur-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-sky-300 dark:hover:border-sky-500/30 shadow-sm hover:shadow-xl p-4 flex flex-col justify-between overflow-hidden cursor-pointer select-none" class:list={[item.colors]}>
            <!-- Top bar -->
            <div class="flex justify-between items-center border-b border-black/5 dark:border-white/5 pb-2">
              <span class="text-[9px] font-mono opacity-60 tracking-wider">TEMPLATE {item.id}</span>
              <div class="flex gap-1">
                <span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
                <span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
                <span class="w-1.5 h-1.5 rounded-full bg-black/10 dark:bg-white/10"></span>
              </div>
            </div>

            <!-- Mini layout representations -->
            <div class="flex-grow py-3 flex gap-2">
              {item.layout === "bento" && (
                <div class="w-full grid grid-cols-3 gap-1 opacity-40">
                  <div class="col-span-2 h-7 bg-current/10 rounded"></div>
                  <div class="h-7 bg-current/10 rounded"></div>
                  <div class="h-10 bg-current/10 rounded"></div>
                  <div class="col-span-2 h-10 bg-current/10 rounded"></div>
                </div>
              )}
              {item.layout === "split" && (
                <div class="w-full grid grid-cols-2 gap-2 opacity-40">
                  <div class="h-16 bg-current/10 rounded"></div>
                  <div class="h-16 bg-current/20 rounded flex flex-col justify-end p-1"><div class="h-2 w-3/4 bg-current/20 rounded"></div></div>
                </div>
              )}
              {item.layout === "boxed" && (
                <div class="w-full border border-current/10 rounded p-1 opacity-40 flex flex-col gap-1">
                  <div class="h-3 bg-current/10 rounded"></div>
                  <div class="h-10 bg-current/10 rounded"></div>
                </div>
              )}
              {item.layout === "asymmetric" && (
                <div class="w-full flex gap-2 opacity-40">
                  <div class="w-1/3 h-16 bg-current/10 rounded"></div>
                  <div class="w-2/3 h-12 bg-current/15 rounded"></div>
                </div>
              )}
              {item.layout === "single" && (
                <div class="w-full flex flex-col gap-1.5 opacity-40">
                  <div class="h-4 bg-current/10 rounded"></div>
                  <div class="h-4 bg-current/10 rounded"></div>
                  <div class="h-8 bg-current/10 rounded"></div>
                </div>
              )}
            </div>

            <!-- Bottom info -->
            <div class="flex justify-between items-end pt-2 border-t border-black/5 dark:border-white/5">
              <div>
                <h3 class="text-xs font-bold leading-none">{item.name}</h3>
                <span class="text-[9px] opacity-60 mt-1 block">{item.style}</span>
              </div>
              <span class="text-[9px] font-mono px-1.5 py-0.5 rounded bg-black/5 dark:bg-white/5 uppercase">{item.design}</span>
            </div>

            <!-- Hover Preview Overlay Button -->
            <div class="absolute inset-0 bg-slate-900/60 dark:bg-black/75 backdrop-blur-sm opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all duration-300 z-20">
              <a href="/templates" class="px-4 py-2 bg-sky-500 hover:bg-sky-400 text-white font-bold text-xs uppercase tracking-wider rounded shadow-md transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                Vorschau
              </a>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
  .marquee-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .marquee-track {
    display: flex;
    flex-shrink: 0;
    gap: 1.5rem;
    min-width: 100%;
    padding: 0.5rem 0.75rem;
    will-change: transform;
    transform: translateZ(0);
  }

  .marquee-left {
    animation: scroll-left 45s linear infinite;
  }

  /* Hover to pause animation */
  .marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
</style>