From ad2f7c32a1846e8d38a44a490e201941654572fe Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Sat, 18 Jul 2026 04:22:56 +0200
Subject: [PATCH] feat: add industry filtering logic with transitions to
 templates showcase

---
 src/pages/templates.astro | 190 +++++++++++++++++++++++++++-----------
 1 file changed, 136 insertions(+), 54 deletions(-)

diff --git a/src/pages/templates.astro b/src/pages/templates.astro
index dd87508..fa4af23 100644
--- a/src/pages/templates.astro
+++ b/src/pages/templates.astro
@@ -2,7 +2,7 @@
 import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
-import { FaArrowLeft, FaEye, FaDesktop } from 'react-icons/fa';
+import { FaArrowLeft, FaDesktop } from 'react-icons/fa';
 
 // List of 20 design templates showcasing maximum diversity in color, structure, and style
 const templates = [
@@ -12,12 +12,13 @@ const templates = [
     style: "Einfach & Bodenständig",
     layout: "Boxed Layout",
     design: "Brutalismus",
-    colorScheme: "Warm & Earthy (Sand & Terrakotta)",
+    colorScheme: "Sand & Terrakotta",
     bgClass: "bg-[#FDFBF7] text-[#2C1A11] border-[#2C1A11]/20",
     theme: "light",
     accentColor: "bg-[#D97706]",
     badgeClass: "bg-[#D97706]/10 text-[#D97706]",
-    layoutPreview: "boxed"
+    layoutPreview: "boxed",
+    category: "handwerk"
   },
   {
     id: "02",
@@ -25,12 +26,13 @@ const templates = [
     style: "Elegant & Professionell",
     layout: "Split-Screen",
     design: "Glassmorphismus",
-    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    colorScheme: "Anthrazit & Gold",
     bgClass: "bg-[#18181B] text-white border-yellow-500/20",
     theme: "dark",
     accentColor: "bg-yellow-500",
     badgeClass: "bg-yellow-500/10 text-yellow-400",
-    layoutPreview: "split"
+    layoutPreview: "split",
+    category: "handwerk"
   },
   {
     id: "03",
@@ -38,12 +40,13 @@ const templates = [
     style: "Tech & Zukunft",
     layout: "Bento-Grid",
     design: "SaaS-Minimalismus",
-    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    colorScheme: "Grau & Neon-Orange",
     bgClass: "bg-zinc-900 text-zinc-100 border-orange-500/20",
     theme: "dark",
     accentColor: "bg-orange-500",
     badgeClass: "bg-orange-500/10 text-orange-400",
-    layoutPreview: "bento"
+    layoutPreview: "bento",
+    category: "dienstleister"
   },
   {
     id: "04",
@@ -51,12 +54,13 @@ const templates = [
     style: "Seriös & Clean",
     layout: "Asymmetrisch",
     design: "Glassmorphismus",
-    colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+    colorScheme: "Anthrazit & Smaragd-Grün",
     bgClass: "bg-[#0B0F19] text-white border-emerald-500/20",
     theme: "dark",
     accentColor: "bg-emerald-500",
     badgeClass: "bg-emerald-500/10 text-emerald-400",
-    layoutPreview: "asymmetric"
+    layoutPreview: "asymmetric",
+    category: "dienstleister"
   },
   {
     id: "05",
@@ -69,7 +73,8 @@ const templates = [
     theme: "light",
     accentColor: "bg-[#C2410C]",
     badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
-    layoutPreview: "single"
+    layoutPreview: "single",
+    category: "gastro"
   },
   {
     id: "06",
@@ -77,12 +82,13 @@ const templates = [
     style: "Klar & Zuverlässig",
     layout: "Bento-Grid",
     design: "SaaS-Minimalismus",
-    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    colorScheme: "Weiß & Navy-Blau",
     bgClass: "bg-white text-slate-800 border-slate-200",
     theme: "light",
     accentColor: "bg-blue-800",
     badgeClass: "bg-blue-800/10 text-blue-800",
-    layoutPreview: "bento"
+    layoutPreview: "bento",
+    category: "handwerk"
   },
   {
     id: "07",
@@ -90,12 +96,13 @@ const templates = [
     style: "Dynamisch & Direkt",
     layout: "Split-Screen",
     design: "Brutalismus",
-    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    colorScheme: "Grau & Neon-Orange",
     bgClass: "bg-zinc-800 text-white border-zinc-700",
     theme: "dark",
     accentColor: "bg-orange-600",
     badgeClass: "bg-orange-600/15 text-orange-400",
-    layoutPreview: "split"
+    layoutPreview: "split",
+    category: "handwerk"
   },
   {
     id: "08",
@@ -103,12 +110,13 @@ const templates = [
     style: "Handwerk & Präzision",
     layout: "Boxed Layout",
     design: "SaaS-Minimalismus",
-    colorScheme: "Warm & Earthy (Sand-Töne)",
+    colorScheme: "Sand-Töne",
     bgClass: "bg-[#F5F2EB] text-[#3D3A36] border-[#D9D2C5]",
     theme: "light",
     accentColor: "bg-[#8B5A2B]",
     badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
-    layoutPreview: "boxed"
+    layoutPreview: "boxed",
+    category: "handwerk"
   },
   {
     id: "09",
@@ -116,12 +124,13 @@ const templates = [
     style: "Exklusiv & Diskret",
     layout: "Bento-Grid",
     design: "Glassmorphismus",
-    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    colorScheme: "Anthrazit & Gold",
     bgClass: "bg-slate-900 text-slate-100 border-amber-500/20",
     theme: "dark",
     accentColor: "bg-amber-500",
     badgeClass: "bg-amber-500/10 text-amber-400",
-    layoutPreview: "bento"
+    layoutPreview: "bento",
+    category: "dienstleister"
   },
   {
     id: "10",
@@ -129,12 +138,13 @@ const templates = [
     style: "Frisch & Modern",
     layout: "Asymmetrisch",
     design: "Glassmorphismus",
-    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    colorScheme: "Weiß & Salbei-Grün",
     bgClass: "bg-[#F3F7F4] text-slate-800 border-emerald-200",
     theme: "light",
     accentColor: "bg-emerald-700",
     badgeClass: "bg-emerald-700/10 text-emerald-800",
-    layoutPreview: "asymmetric"
+    layoutPreview: "asymmetric",
+    category: "handwerk"
   },
   {
     id: "11",
@@ -142,12 +152,13 @@ const templates = [
     style: "Clean & Vertrauensvoll",
     layout: "Minimalistisch 1-spaltig",
     design: "SaaS-Minimalismus",
-    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    colorScheme: "Weiß & Navy-Blau",
     bgClass: "bg-slate-50 text-slate-800 border-slate-200",
     theme: "light",
     accentColor: "bg-[#1E3A8A]",
     badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
-    layoutPreview: "single"
+    layoutPreview: "single",
+    category: "dienstleister"
   },
   {
     id: "12",
@@ -155,12 +166,13 @@ const templates = [
     style: "Gemütlich & Lecker",
     layout: "Boxed Layout",
     design: "Neomorphismus",
-    colorScheme: "Warm & Earthy (Terrakotta)",
+    colorScheme: "Terrakotta",
     bgClass: "bg-[#FDF9F3] text-[#5C3E21] border-[#EADCC9]",
     theme: "light",
     accentColor: "bg-[#B45309]",
     badgeClass: "bg-[#B45309]/10 text-[#B45309]",
-    layoutPreview: "boxed"
+    layoutPreview: "boxed",
+    category: "gastro"
   },
   {
     id: "13",
@@ -168,12 +180,13 @@ const templates = [
     style: "Präzise & Leistungsstark",
     layout: "Split-Screen",
     design: "Brutalismus",
-    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    colorScheme: "Grau & Electric-Purple",
     bgClass: "bg-neutral-900 text-neutral-100 border-purple-500/20",
     theme: "dark",
     accentColor: "bg-purple-600",
     badgeClass: "bg-purple-600/10 text-purple-400",
-    layoutPreview: "split"
+    layoutPreview: "split",
+    category: "handwerk"
   },
   {
     id: "14",
@@ -181,12 +194,13 @@ const templates = [
     style: "Stark & Motivierend",
     layout: "Asymmetrisch",
     design: "Brutalismus",
-    colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
+    colorScheme: "Schwarz & Neon-Orange",
     bgClass: "bg-black text-white border-orange-500/20",
     theme: "dark",
     accentColor: "bg-orange-500",
     badgeClass: "bg-orange-500/10 text-orange-500",
-    layoutPreview: "asymmetric"
+    layoutPreview: "asymmetric",
+    category: "dienstleister"
   },
   {
     id: "15",
@@ -194,12 +208,13 @@ const templates = [
     style: "Minimalismus & Ästhetik",
     layout: "Split-Screen",
     design: "SaaS-Minimalismus",
-    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    colorScheme: "Weiß & Navy-Blau",
     bgClass: "bg-white text-zinc-900 border-zinc-200",
     theme: "light",
     accentColor: "bg-zinc-900",
     badgeClass: "bg-zinc-950/10 text-zinc-900",
-    layoutPreview: "split"
+    layoutPreview: "split",
+    category: "dienstleister"
   },
   {
     id: "16",
@@ -207,12 +222,13 @@ const templates = [
     style: "Achtsam & Gesund",
     layout: "Minimalistisch 1-spaltig",
     design: "Glassmorphismus",
-    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    colorScheme: "Weiß & Salbei-Grün",
     bgClass: "bg-[#F7FAFC] text-slate-800 border-emerald-100",
     theme: "light",
     accentColor: "bg-emerald-600",
     badgeClass: "bg-emerald-600/10 text-emerald-700",
-    layoutPreview: "single"
+    layoutPreview: "single",
+    category: "dienstleister"
   },
   {
     id: "17",
@@ -220,12 +236,13 @@ const templates = [
     style: "Hart & Präzise",
     layout: "Boxed Layout",
     design: "Brutalismus",
-    colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+    colorScheme: "Anthrazit & Smaragd-Grün",
     bgClass: "bg-stone-900 text-stone-100 border-emerald-500/20",
     theme: "dark",
     accentColor: "bg-emerald-600",
     badgeClass: "bg-emerald-600/10 text-emerald-400",
-    layoutPreview: "boxed"
+    layoutPreview: "boxed",
+    category: "handwerk"
   },
   {
     id: "18",
@@ -233,12 +250,13 @@ const templates = [
     style: "Rustikal & Einladend",
     layout: "Bento-Grid",
     design: "Neomorphismus",
-    colorScheme: "Warm & Earthy (Sand-Töne)",
+    colorScheme: "Sand-Töne",
     bgClass: "bg-[#FAF6F0] text-[#543D2B] border-[#EFEAE2]",
     theme: "light",
     accentColor: "bg-[#A75D5D]",
     badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
-    layoutPreview: "bento"
+    layoutPreview: "bento",
+    category: "gastro"
   },
   {
     id: "19",
@@ -246,12 +264,13 @@ const templates = [
     style: "Sauber & Strukturiert",
     layout: "Bento-Grid",
     design: "SaaS-Minimalismus",
-    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    colorScheme: "Grau & Electric-Purple",
     bgClass: "bg-[#1C1B22] text-zinc-100 border-indigo-500/20",
     theme: "dark",
     accentColor: "bg-indigo-500",
     badgeClass: "bg-indigo-500/10 text-indigo-400",
-    layoutPreview: "bento"
+    layoutPreview: "bento",
+    category: "dienstleister"
   },
   {
     id: "20",
@@ -259,48 +278,71 @@ const templates = [
     style: "Kreativ & Präzise",
     layout: "Asymmetrisch",
     design: "Glassmorphismus",
-    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    colorScheme: "Grau & Neon-Orange",
     bgClass: "bg-[#1E1E2E] text-zinc-100 border-orange-500/20",
     theme: "dark",
     accentColor: "bg-orange-500",
     badgeClass: "bg-orange-500/10 text-orange-400",
-    layoutPreview: "asymmetric"
+    layoutPreview: "asymmetric",
+    category: "handwerk"
   }
 ];
+
+const categories = [
+  { id: "all", name: "Alle Branchen" },
+  { id: "handwerk", name: "Handwerk & Bau" },
+  { id: "dienstleister", name: "Dienstleister & Praxis" },
+  { id: "gastro", name: "Gastronomie & Handel" }
+];
 ---
 
 <Layout title="Template-Katalog | N&D i-t SOLUTIONS">
   <Navbar />
   
-  <main class="relative min-h-screen bg-brand-darkBg text-white pt-28 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden tactile-grid-bg">
+  <main class="relative min-h-screen bg-slate-50 dark:bg-brand-darkBg text-slate-800 dark:text-white pt-28 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden transition-colors duration-300">
+    
+    <!-- Background Glow (Aurora Effect) -->
+    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-sky-500/[0.03] blur-[150px] pointer-events-none rounded-full transition-colors duration-300"></div>
     
-    <!-- Background Glow (Aurora Effect - kept extremely subtle) -->
-    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-sky-500/[0.02] blur-[150px] pointer-events-none rounded-full"></div>
-    <div class="absolute top-2/3 left-1/3 w-[400px] h-[400px] bg-blue-600/[0.02] blur-[120px] pointer-events-none rounded-full"></div>
-
     <div class="max-w-7xl mx-auto relative z-10">
       
       <!-- Back Link -->
-      <a href="/" class="inline-flex items-center gap-2 text-zinc-400 hover:text-brand-arcticBlue text-xs uppercase tracking-wider font-semibold mb-8 group transition-colors">
+      <a href="/" class="inline-flex items-center gap-2 text-slate-500 dark:text-zinc-400 hover:text-brand-arcticBlue text-xs uppercase tracking-wider font-semibold mb-8 group transition-colors">
         <FaArrowLeft class="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
         Zurück zur Startseite
       </a>
 
       <!-- Header Section -->
-      <div class="max-w-3xl mb-16">
-        <h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
+      <div class="max-w-3xl mb-12">
+        <h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4 text-slate-900 dark:text-white uppercase">
           Die perfekte Struktur für <span class="text-brand-arcticBlue">jeden Betrieb.</span>
         </h1>
-        <p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
+        <p class="text-slate-600 dark:text-zinc-400 text-sm sm:text-base leading-relaxed">
           Egal ob klassische Schreinerei, moderne Anwaltskanzlei oder lokaler Handwerker: Wir passen das Design perfekt an Ihren Stil an. Hier sind 20 beispielhafte Bento-Kombinationen, Farbwelten und Layout-Konzepte.
         </p>
       </div>
 
+      <!-- Gewerke Filter (Barrierefrei, 44px min-h) -->
+      <div class="flex flex-wrap gap-2.5 mb-10">
+        {categories.map((cat, idx) => (
+          <button
+            data-filter={cat.id}
+            class={`filter-btn px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider border transition-all duration-300 min-h-[44px] focus:outline-none focus:ring-2 focus:ring-sky-500 ${
+              idx === 0
+                ? "bg-brand-arcticBlue border-brand-arcticBlue text-zinc-950"
+                : "border-slate-200 dark:border-zinc-700/50 bg-white/40 dark:bg-slate-900/40 text-slate-600 dark:text-zinc-400 hover:border-brand-arcticBlue hover:text-brand-arcticBlue dark:hover:text-white"
+            }`}
+          >
+            {cat.name}
+          </button>
+        ))}
+      </div>
+
       <!-- Grid System Container (20 Bento-Kacheln) -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="templates-grid">
         
         {templates.map((tpl) => (
-          <a href={`/templates/${tpl.id}`} class={`group relative rounded-2xl p-6 border transition-all duration-300 hover:scale-[1.01] flex flex-col justify-between h-[340px] ${tpl.bgClass} ${tpl.theme === 'dark' ? 'hover:border-white/20' : 'hover:border-black/20'} shadow-lg cursor-pointer block tactile-noise`}>
+          <a href={`/templates/${tpl.id}`} data-category={tpl.category} class={`template-card group relative rounded-2xl p-6 border transition-all duration-500 flex flex-col justify-between h-[340px] ${tpl.bgClass} ${tpl.theme === 'dark' ? 'hover:border-white/20' : 'hover:border-black/20'} shadow-sm dark:shadow-lg cursor-pointer block tactile-noise origin-center`}>
             
             {/* Precision Blueprint Corner Markers */}
             <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-current/25"></span>
@@ -341,7 +383,7 @@ const templates = [
               </div>
             </div>
 
-            {/* Visual Mini-Layout Preview Component inside card (Bento Content-Mix) */}
+            {/* Visual Mini-Layout Preview Component inside card */}
             <div class="my-4 h-16 w-full rounded border border-black/[0.06] dark:border-white/[0.06] bg-black/5 dark:bg-white/5 p-1.5 flex gap-1 justify-center items-stretch relative overflow-hidden">
               
               {tpl.layoutPreview === "bento" && (
@@ -401,12 +443,12 @@ const templates = [
       </div>
 
       <!-- Bottom Info Callout -->
-      <div class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group">
+      <div class="mt-20 p-8 rounded-2xl bg-white/40 dark:bg-brand-darkCard/40 border border-slate-200 dark:border-brand-darkBorder relative overflow-hidden group shadow-sm dark:shadow-none transition-colors duration-300">
         <div class="absolute inset-0 bg-gradient-to-r from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
         <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
           <div>
             <h3 class="text-xl font-bold mb-2">Ihr Wunsch-Design ist nicht dabei?</h3>
-            <p class="text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
+            <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
               Kein Problem. Jedes Layout wird von uns individuell im Code programmiert. Wir nutzen keine starren Fertig-Systeme. Teilen Sie uns einfach Ihre Vorstellungen mit, und wir setzen sie passgenau um.
             </p>
           </div>
@@ -422,3 +464,43 @@ const templates = [
 
   <Footer />
 </Layout>
+
+<script>
+  const filterButtons = document.querySelectorAll('.filter-btn');
+  const cards = document.querySelectorAll('.template-card');
+
+  filterButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      // 1. Button-Styles zurücksetzen & aktiven Button stylen
+      filterButtons.forEach(b => {
+        b.classList.remove('bg-brand-arcticBlue', 'border-brand-arcticBlue', 'text-zinc-950');
+        b.classList.add('border-slate-200', 'dark:border-zinc-700/50', 'bg-white/40', 'dark:bg-slate-900/40', 'text-slate-600', 'dark:text-zinc-400');
+      });
+      
+      btn.classList.add('bg-brand-arcticBlue', 'border-brand-arcticBlue', 'text-zinc-950');
+      btn.classList.remove('border-slate-200', 'dark:border-zinc-700/50', 'bg-white/40', 'dark:bg-slate-900/40', 'text-slate-600', 'dark:text-zinc-400');
+
+      const filterValue = btn.getAttribute('data-filter');
+
+      cards.forEach(card => {
+        const cardCategory = card.getAttribute('data-category');
+
+        if (filterValue === 'all' || filterValue === cardCategory) {
+          card.classList.remove('hidden');
+          // Verzögerung für weiche CSS transition
+          setTimeout(() => {
+            card.classList.remove('opacity-0', 'scale-95');
+            card.classList.add('opacity-100', 'scale-100');
+          }, 10);
+        } else {
+          card.classList.remove('opacity-100', 'scale-100');
+          card.classList.add('opacity-0', 'scale-95');
+          // Nach Transition-Ende hidden setzen
+          setTimeout(() => {
+            card.classList.add('hidden');
+          }, 300);
+        }
+      });
+    });
+  });
+</script>