Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a3222ec496ce317aeff6a69b0de2b20ba4e0ed5c
ndsolutionswebsite/.agents/skills/waas-guide/SKILL.md
DanielS 31007040e5 docs: add waas-guide strategy skill
2026-07-18 23:58:35 +02:00

9.4 KiB
Raw Blame History

name, description
name description
waas-guide Leitfaden fuer High-End-Webdesign (Bento-Grid), Conversion-Optimierung, DSGVO-Haertung und WaaS-B2B-Vertrieb.

N&D IT Solutions: WaaS-Erweiterungsstrategie

SÄULE 1: Branchenspezifische Design-Strategien & Bento-Layouts

1. Lokales Premium-Handwerk (Innenausbau, Solarteure)

  • Farbpsychologie:
    • Hintergrund: #0B0F19 (Corporate Dark Mode)
    • Sekundärfarbe: Warmbronze (hsl(35, 35%, 45%) / #9C7A4E)
    • Akzentfarbe: Kupfer-Glow (hsl(20, 70%, 55%) / #DE6B32)
    • Wirkung: Vermittelt Hitze, Energie, präzise Handwerksqualität und Wertigkeit.
  • Branchenspezifische Eye-Catcher:
    • Tactile Craftsman UI: Subtiles SVG-Rauschen über radialen Verläufen simuliert physikalische Oberflächen (z. B. geschliffenes Holz/Metall).
    • Kanten-Effekt: Lichtkanten via border-[0.5px] border-amber-900/30 und diffuse Schatten (box-shadow: 0 0 25px -5px rgba(222, 107, 50, 0.15)).
  • Bento-Layout-Struktur (3-Säulen-Grid):
    • Säule 1: Box 1 (Hero-Statement, col-span-2) | Box 2 (Vorher-Nachher Slider, col-span-1)
    • Säule 2: Box 3 (Material-Galerie, col-span-1) | Box 4 (Rhythmusbrecher: Übergroßes, asymmetrisches Textzitat "Maßarbeit statt Masse." mit 20% Opacity Kupfer-Glow im Hintergrund, col-span-2)
    • Säule 3: Box 5 (Festpreis-Garantie, col-span-1) | Box 6 (Kontakt-Schnittstelle, col-span-2)

2. Medizinische Praxen & Kanzleien (Rechtsanwälte, High-End-Zahnärzte)

  • Farbpsychologie:
    • Hintergrund: #0B0F19
    • Sekundärfarbe: Tiefes Smaragdgrün (hsl(160, 40%, 25%) / #265C45)
    • Akzentfarbe: Arktis-Blau (hsl(199, 95%, 74%) / #7DD3FC)
    • Wirkung: Signalisiert beruhigende Professionalität, Hygiene, absolute Diskretion und Vertrauen.
  • Branchenspezifische Eye-Catcher:
    • Liquid Glass: Extreme Transparenz (backdrop-blur-xl bg-slate-900/60).
    • Kanten-Reflexion: Dünner, linearer Randverlauf (border-[0.5px] border-white/10) ohne Textur für sterile Ästhetik.
  • Bento-Layout-Struktur (3-Säulen-Grid):
    • Säule 1: Box 1 (H1 Expertise-Statement, col-span-2) | Box 2 (Direktbuchungs-Terminkalender, col-span-1)
    • Säule 2: Box 3 (Rhythmusbrecher: Kreisförmige Foto-Maske des Inhabers bricht eckiges Grid, col-span-1) | Box 4 (Fachgebiete & Kernkompetenzen, col-span-2)
    • Säule 3: Box 5 (Datenschutz-Zertifikat, col-span-1) | Box 6 (FAQ-Akkordeon, col-span-2)

3. Lokale Premium-Dienstleister (Boutique-Fitness, Agenturen)

  • Farbpsychologie:
    • Hintergrund: #0B0F19
    • Sekundärfarbe: Muted Violett (hsl(270, 30%, 35%) / #533C6F)
    • Akzentfarbe: Neon-Cyan-Glow (hsl(180, 100%, 50%) / #00FFFF)
    • Wirkung: Vermittelt Exklusivität, hohe Dynamik, Luxus und Modernität.
  • Branchenspezifische Eye-Catcher:
    • Aurora Glow: Animierte, extrem weiche Glow-Verläufe im Hintergrund (animate-pulse-slow mit max. 10% Deckkraft).
    • Hover-Glow: Kanten leuchten interaktiv bei Mausbewegung (CSS-Radialgradient-Border).
  • Bento-Layout-Struktur (3-Säulen-Grid):
    • Säule 1: Box 1 (Visual Hero, col-span-2) | Box 2 (Mitgliedschafts-Modell, col-span-1)
    • Säule 2: Box 3 (Kundenvorteile, col-span-1) | Box 4 (Rhythmusbrecher: Dynamisch blinkende Live-Auslastungs-Anzeige, col-span-2)
    • Säule 3: Box 5 (Social Proof / Testimonials, col-span-2) | Box 6 (Kontakt, col-span-1)

SÄULE 2: UI/UX & Verkaufspsychologie (Conversion-Driven UX)

1. Wizard-Optimierung (Absprungrate reduzieren bei Schritt 3)

  • Sorgenfrei-Versprechen (Mikro-Copy): Direkt über dem E-Mail-/Telefon-Eingabefeld Platzierung von: "Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden."
  • Fortschrittserhalt: Visuelle Anzeige, dass die Daten aus Schritt 1 & 2 bereits lokal gesichert sind und das Konzept reserviert ist.
  • Alternative Interaktionswege: Biete dem Nutzer neben dem Formular einen direkten WhatsApp-Short-Link an, der den Wizard-Fortschritt verschlüsselt als Text vorausfüllt.

2. Bento-Interaction-States (Barrierefrei & CLS-frei)

  • Keine Änderungen an Layout-Größen (width, height, padding, border-width), da diese Layout-Shifts (CLS) triggern.
  • Ausschließliche Nutzung von Hardware-beschleunigten CSS-Eigenschaften (transform, opacity, box-shadow, border-color).
  • Tastatur-Navigation: :focus-visible repliziert die Hover-Glow-Stile exakt.
.bento-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  outline: none;
}
.bento-card:hover, .bento-card:focus-visible {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.2);
}

3. White-Space-Asymmetry (Preise im Fokus)

  • Freiraum-Kontrast: Die WaaS-Preise erhalten die 2,5-fache vertikale Polsterung (py-28) im Vergleich zu restlichen Inhaltsabschnitten (py-12).
  • Asymmetrische Anordnung: Platzierung der Preiskarten auf der linken Seite des Grids (2/3-Breite), während rechts freie, ununterbrochene Leere herrscht, die lediglich durch einen minimalen Arktis-Blau-Glow (z-0, 5% Opacity) akzentuiert wird. Dies lenkt den Blickpfad unweigerlich auf das Pricing.

SÄULE 3: Datenschutz & Performance (Security-Hardening-Privacy)

1. DSGVO-Marketing-Textierung für KMUs

<section class="py-20 bg-[#0B0F19] text-white">
  <div class="max-w-5xl mx-auto px-6">
    <span class="text-xs uppercase tracking-widest text-[#38BDF8] font-bold">100% Abmahnsicher</span>
    <h2 class="text-3xl font-extrabold mt-2 mb-6">Keine Abmahnfallen. Keine US-Server. Maximaler Datenschutz.</h2>
    <div class="grid md:grid-cols-2 gap-8">
      <div>
        <p class="text-slate-300 leading-relaxed">
          Herkömmliche Baukasten-Websites laden Schriftarten, Icons und Analysedienste unbemerkt von US-Servern (Google, Adobe etc.). Das ist illegal nach DSGVO und führt zu teuren Abmahnungen.
        </p>
      </div>
      <div>
        <p class="text-slate-300 leading-relaxed">
          Unsere statische Astro-Architektur liefert <strong>alles lokal</strong> aus Ihrem eigenen Webspace aus. Keine unbemerkt geladenen Fremddienste, keine zustimmungspflichtigen Tracking-Cookies, kein Ärger. Nur reine Performance und absolute Rechtssicherheit.
        </p>
      </div>
    </div>
  </div>
</section>

2. Code-Härtung (Standard-Security-Header)

  • Content Security Policy (CSP): 
    Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; upgrade-insecure-requests;
  • Sicherheitsrelevante HTTP-Response-Header:
    • X-Frame-Options: DENY (Verhindert Clickjacking-Angriffe)
    • X-Content-Type-Options: nosniff (Verhindert MIME-Sniffing)
    • Referrer-Policy: strict-origin-when-cross-origin
    • Permissions-Policy: geolocation=(), camera=(), microphone=()

SÄULE 4: B2B-Vertrieb & WaaS-Skalierung

1. WaaS-Einwandvorwegnahme (Argumentationskette)

  • Die Leasing-Analogie: "Sie kaufen für Ihren Betrieb keinen Firmenwagen bar für 60.000 €, der nach vier Jahren veraltet ist. Sie leasen ihn inklusive Full-Service. WaaS ist das Leasing-Modell für Ihre Website."
  • Finanzielle Optimierung: Einmalkauf (3.000 €) blockiert Ihre Liquidität und muss über Jahre abgeschrieben werden. WaaS (99 €/Monat) ist sofort zu 100% als Betriebsausgabe steuerlich absetzbar. Hosting und Wartung sind bereits integriert (Ersparnis: ~70 €/Monat).
  • Die Veraltungs-Garantie: Websites altern rasant. Bei unserem WaaS-Modell erhalten Sie nach 24 Monaten Laufzeit einen vollständigen visuellen und technischen Relaunch Ihrer Seite – komplett kostenfrei.

2. KI-Automatisierungs-Schnittstelle (JSON Payload für MDX-Erstellung)

Das nachfolgende JSON-Format wird vom Onboarding-Wizard generiert und per Webhook an die KI-Pipeline gesendet, um die Astro MDX Content Collections automatisch zu strukturieren:

{
  "client_metadata": {
    "agency_id": "nd-it-solutions",
    "timestamp": "2026-07-18T23:31:00Z",
    "domain": "innenausbau-schmidt.de"
  },
  "branding": {
    "industry": "craftsman",
    "company_name": "Schreinerei Schmidt",
    "branding_style": "minimal-dark",
    "primary_color": "hsl(35, 35%, 45%)",
    "secondary_color": "hsl(20, 70%, 55%)"
  },
  "structure": {
    "sections": ["hero", "bento-portfolio", "roi-calculator", "gdpr-trust", "contact-form"],
    "features": {
      "before_after_slider": true,
      "online_calendar": false,
      "custom_calculator": "roi"
    }
  },
  "content_data": {
    "usps": [
      "30 Jahre Meisterbetrieb",
      "Festpreisgarantie vor Baubeginn",
      "Staubfreie Montage"
    ],
    "services": [
      {
        "title": "Edler Innenausbau",
        "description": "Individuelle Raumkonzepte für Küche und Wohnbereich."
      },
      {
        "title": "Möbel nach Maß",
        "description": "Unikate aus Meisterhand, perfekt angepasst."
      }
    ],
    "testimonials": [
      {
        "author": "M. Weber",
        "quote": "Beste Entscheidung! Der Umbau war absolut staubfrei."
      }
    ]
  },
  "contact": {
    "phone": "+49 123 456789",
    "email": "info@innenausbau-schmidt.de",
    "address": "Hauptstraße 42, 80331 München"
  }
}
Reference in New Issue View Git Blame Copy Permalink