From 99d18a28d6aa3a764c49d087816d783dec55e946 Mon Sep 17 00:00:00 2001
From: root <root@vmd190632.contaboserver.net>
Date: Sat, 21 Feb 2026 16:12:54 +0100
Subject: [PATCH] Add logo, integrations section, improve spacing

- Real logo SVG in header and footer
- New Integrations section with ERP teaser (Odoo, SAP, DATEV, etc.)
- Notification channels (Email, WhatsApp, Telegram, Webhook, API, Slack)
- Improved grid spacing in features
---
 public/logo.svg                   | 24 ++++++++
 src/components/Features.astro     |  2 +-
 src/components/Footer.astro       |  8 +--
 src/components/Header.astro       |  9 +--
 src/components/Integrations.astro | 94 +++++++++++++++++++++++++++++++
 src/pages/index.astro             |  2 +
 6 files changed, 125 insertions(+), 14 deletions(-)
 create mode 100644 public/logo.svg
 create mode 100644 src/components/Integrations.astro

diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..b7d690d
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="40" height="48">
+  <!-- Shield outline -->
+  <path d="M50 5 L95 25 L95 60 C95 85 75 105 50 115 C25 105 5 85 5 60 L5 25 Z" 
+        fill="#1A365D" 
+        stroke="#1A365D" 
+        stroke-width="4"
+        stroke-linejoin="round"/>
+  
+  <!-- Bell -->
+  <g transform="translate(50, 62)">
+    <!-- Bell top knob -->
+    <circle cx="0" cy="-28" r="5" fill="#E53E3E"/>
+    
+    <!-- Bell body -->
+    <path d="M-18 0 C-18 -18 -13 -23 0 -23 C13 -23 18 -18 18 0 L-18 0 Z" 
+          fill="white"/>
+    
+    <!-- Bell rim -->
+    <ellipse cx="0" cy="2" rx="22" ry="5" fill="white"/>
+    
+    <!-- Bell clapper -->
+    <ellipse cx="0" cy="11" rx="5" ry="4" fill="#E53E3E"/>
+  </g>
+</svg>
diff --git a/src/components/Features.astro b/src/components/Features.astro
index 6088361..aa16d2d 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -34,7 +34,7 @@ const features = [
       </p>
     </div>
     
-    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
       {features.map((feature, index) => (
         <div class="relative">
           <div class="bg-navy/5 rounded-2xl p-6 h-full hover:bg-navy/10 transition-colors">
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index af69027..15209c3 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -8,12 +8,8 @@ const currentYear = new Date().getFullYear();
       <!-- Brand -->
       <div class="md:col-span-2">
         <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center">
-            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L17.5 8 12 11.5 6.5 8 12 4.5zM6 9.5l5 3v6l-5-3v-6zm7 9v-6l5-3v6l-5 3z"/>
-            </svg>
-          </div>
-          <span class="font-bold text-lg">INSOLVENZ-ALARM</span>
+          <img src="/logo.svg" alt="Insolvenz-Alarm Logo" class="h-10 w-auto brightness-0 invert" />
+          <span class="font-bold text-lg tracking-tight">INSOLVENZ-ALARM</span>
         </div>
         <p class="text-gray-300 max-w-md">
           Automatisches Insolvenz-Monitoring für den deutschen Mittelstand. 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 15c0d75..72cd6ee 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -17,13 +17,8 @@ const navItems = [
     <div class="flex justify-between items-center h-16">
       <!-- Logo -->
       <a href="/" class="flex items-center gap-3 text-navy hover:text-navy-light transition-colors">
-        <div class="w-10 h-10 bg-navy rounded-lg flex items-center justify-center">
-          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L17.5 8 12 11.5 6.5 8 12 4.5zM6 9.5l5 3v6l-5-3v-6zm7 9v-6l5-3v6l-5 3z"/>
-            <circle cx="12" cy="9" r="2" fill="white"/>
-          </svg>
-        </div>
-        <span class="font-bold text-lg">INSOLVENZ-ALARM</span>
+        <img src="/logo.svg" alt="Insolvenz-Alarm Logo" class="h-10 w-auto" />
+        <span class="font-bold text-lg tracking-tight">INSOLVENZ-ALARM</span>
       </a>
       
       <!-- Navigation -->
diff --git a/src/components/Integrations.astro b/src/components/Integrations.astro
new file mode 100644
index 0000000..8cd85c9
--- /dev/null
+++ b/src/components/Integrations.astro
@@ -0,0 +1,94 @@
+---
+const integrations = [
+  {
+    name: "Odoo",
+    logo: "🔷",
+    status: "Geplant",
+  },
+  {
+    name: "SAP Business One",
+    logo: "🟦",
+    status: "Geplant",
+  },
+  {
+    name: "Microsoft Dynamics",
+    logo: "🟪",
+    status: "Geplant",
+  },
+  {
+    name: "DATEV",
+    logo: "🟩",
+    status: "Geplant",
+  },
+  {
+    name: "Lexware",
+    logo: "🟧",
+    status: "Geplant",
+  },
+  {
+    name: "sevDesk",
+    logo: "🟨",
+    status: "Geplant",
+  },
+];
+
+const channels = [
+  { name: "E-Mail", icon: "📧" },
+  { name: "WhatsApp", icon: "💬" },
+  { name: "Telegram", icon: "✈️" },
+  { name: "Webhook", icon: "🔗" },
+  { name: "REST API", icon: "⚡" },
+  { name: "Slack", icon: "💼" },
+];
+---
+
+<section id="integrationen" class="section bg-gray-50">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
+        Integriert sich nahtlos in Ihre Systeme
+      </h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+        Verbinden Sie Insolvenz-Alarm mit Ihrem ERP, CRM oder Buchhaltungssystem – 
+        oder nutzen Sie unsere flexiblen Benachrichtigungskanäle.
+      </p>
+    </div>
+    
+    <!-- Notification Channels -->
+    <div class="mb-16">
+      <h3 class="text-xl font-semibold text-navy mb-6 text-center">Benachrichtigungskanäle</h3>
+      <div class="flex flex-wrap justify-center gap-4">
+        {channels.map(channel => (
+          <div class="bg-white px-6 py-4 rounded-xl shadow-sm flex items-center gap-3 hover:shadow-md transition-shadow">
+            <span class="text-2xl">{channel.icon}</span>
+            <span class="font-medium text-gray-700">{channel.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <!-- ERP Integrations -->
+    <div>
+      <h3 class="text-xl font-semibold text-navy mb-6 text-center">ERP & Buchhaltungs-Integrationen</h3>
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        {integrations.map(integration => (
+          <div class="bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md transition-shadow group">
+            <div class="text-4xl mb-3">{integration.logo}</div>
+            <div class="font-medium text-gray-900 mb-1">{integration.name}</div>
+            <div class="text-xs text-signal font-medium bg-signal/10 px-2 py-1 rounded-full inline-block">
+              {integration.status}
+            </div>
+          </div>
+        ))}
+      </div>
+      <p class="text-center text-gray-500 mt-6">
+        <span class="inline-flex items-center gap-2">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          Fehlt Ihr System? <a href="#waitlist" class="text-navy hover:text-signal font-medium underline">Schreiben Sie uns!</a>
+        </span>
+      </p>
+    </div>
+  </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a94d349..42af17c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Header from '../components/Header.astro';
 import Hero from '../components/Hero.astro';
 import Stats from '../components/Stats.astro';
 import Features from '../components/Features.astro';
+import Integrations from '../components/Integrations.astro';
 import Pricing from '../components/Pricing.astro';
 import Industries from '../components/Industries.astro';
 import Waitlist from '../components/Waitlist.astro';
@@ -16,6 +17,7 @@ import Footer from '../components/Footer.astro';
     <Hero />
     <Stats />
     <Features />
+    <Integrations />
     <Industries />
     <Pricing />
     <Waitlist />