Compare commits
4 Commits
36227215fc
...
a3222ec496
| Author | SHA1 | Date | |
|---|---|---|---|
|
a3222ec496 | ||
|
|
e22a724c57 | ||
|
|
0e3688c431 | ||
|
|
31007040e5 |
182
.agents/skills/waas-guide/SKILL.md
Normal file
182
.agents/skills/waas-guide/SKILL.md
Normal file
@@ -0,0 +1,182 @@
|
||||
---
|
||||
name: waas-guide
|
||||
description: 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.
|
||||
|
||||
```css
|
||||
.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
|
||||
```html
|
||||
<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):**
|
||||
```http
|
||||
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:
|
||||
|
||||
```json
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -16,7 +16,7 @@ const heroTemplates = [
|
||||
---
|
||||
|
||||
<!-- Hero-Sektion: Hybrid Liquid Glass Style & Aurora Glow -->
|
||||
<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#070A13] transition-colors duration-300">
|
||||
<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#0B0F19] transition-colors duration-300">
|
||||
<!-- Weiche, pastellfarbene Aurora Glows im Hintergrund (Light/Dark angepasst) -->
|
||||
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-200/50 dark:bg-sky-500/10 blur-[130px] rounded-full pointer-events-none transition-colors duration-300 animate-drift"></div>
|
||||
<div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-indigo-200/40 dark:bg-indigo-500/10 blur-[150px] rounded-full pointer-events-none transition-colors duration-300 animate-drift-delayed"></div>
|
||||
@@ -31,9 +31,9 @@ const heroTemplates = [
|
||||
<div class="lg:col-span-7 space-y-8">
|
||||
|
||||
<h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300">
|
||||
Sorgenfreies Hosting <br/>
|
||||
Ihre Premium-Website. <br/>
|
||||
<span class="text-sky-600 dark:text-sky-400">
|
||||
für Ihre Website.
|
||||
Im WaaS-Abonnement.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
@@ -164,7 +164,7 @@ const heroTemplates = [
|
||||
</section>
|
||||
|
||||
<!-- Hauptinhalte: Elegantes Hybrid-Liquid Layout (Echtes Handwerk, kein KI-Standard-Raster) -->
|
||||
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
|
||||
<section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
|
||||
<div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
@@ -197,11 +197,11 @@ const heroTemplates = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liquid Glass Service Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Liquid Glass Bento Grid (3-Säulen-Architektur) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Card 1: Webdesign -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<!-- Card 1: WaaS Premium Webdesign (Breit: col-span-2) -->
|
||||
<div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||
|
||||
@@ -209,16 +209,19 @@ const heroTemplates = [
|
||||
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sorgenfrei-Hosting</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||
Deutsche Server, tägliche Backups und SSL-Verschlüsselung. Ihr Internetauftritt ist rundum abgesichert im monatlichen Abo.
|
||||
<h3 class="text-xl font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Website-as-a-Service (WaaS)</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-sm leading-relaxed transition-colors duration-300">
|
||||
Wir erstellen Ihre neue, verkaufsstarke Premium-Website komplett schlüsselfertig. Keine hohen Einmalkosten. Für eine faire monatliche Pauschale erhalten Sie Design, Programmierung, Hosting, SSL-Verschlüsselung sowie tägliche Datensicherungen und Updates.
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
|
||||
<div class="flex justify-between items-center mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
|
||||
<span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">All-Inclusive ab 49€ / Monat</span>
|
||||
<span class="text-xs font-bold text-sky-600 dark:text-sky-400">Festpreisgarantie</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: SEO -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<!-- Card 2: Lokale Sichtbarkeit (Schmal: col-span-1) -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||
|
||||
@@ -226,73 +229,94 @@ const heroTemplates = [
|
||||
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</h3>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokales SEO</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||
Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
|
||||
Wir optimieren Ihre Präsenz gezielt für Ihre Region. Kunden finden Sie direkt bei der Google-Suche vor Ort.
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Google-Dominanz</span>
|
||||
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Lokale Dominanz</span>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Hosting -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<!-- Card 3: DSGVO-Sicherheit (Schmal: col-span-1) -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
|
||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign Inklusive</h3>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">100% DSGVO-sicher</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||
Noch keine eigene Website? Wir erstellen Ihren neuen, optimierten Internetauftritt direkt passend zum Hosting dazu.
|
||||
Absolute Rechtssicherheit durch <i>Zero Third-Party Requests</i>. Alle Assets werden lokal geladen. Keine US-Serverabfragen, keine Abmahnfallen.
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
|
||||
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Zero Third-Party</span>
|
||||
</div>
|
||||
|
||||
<!-- Card 4: Lighthouse Perfekt -->
|
||||
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||
<!-- Card 4: ROI-Rechner (Breit: col-span-2) -->
|
||||
<div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[380px] shadow-sm hover:shadow-md reveal">
|
||||
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||
|
||||
<div>
|
||||
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||
<svg class="w-5 h-5 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lighthouse Perfekt</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||
Wir programmieren so sauber, dass wir regelmäßig die Bestnote 100/100 im Google Speed Index erzielen.
|
||||
<h3 class="text-xl font-bold text-slate-950 dark:text-white mb-4 uppercase tracking-tight">WaaS ROI-Rechner</h3>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs mb-6 leading-relaxed">
|
||||
Rechnen Sie aus, wie viel Geld und wertvolle Zeit Sie im Vergleich zu traditionellen Einmalkäufen sparen.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-cost">Aktuelle Web-Kosten (Jahr in €):</label>
|
||||
<input type="number" id="roi-cost" value="600" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-hours">Eigenleistung Wartung (Std/Monat):</label>
|
||||
<input type="number" id="roi-hours" value="4" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-sky-500/5 border border-sky-500/10 dark:border-sky-500/5 p-6 rounded-xl flex flex-col justify-center">
|
||||
<span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Ersparnis mit N&D WaaS:</span>
|
||||
<p class="text-3xl font-extrabold text-sky-600 dark:text-sky-400 mt-2" id="roi-result">0 € / Jahr</p>
|
||||
<p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium" id="roi-time">0 Stunden Lebenszeit zurück</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
|
||||
<span class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span>
|
||||
<span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Showcase-Link Callout -->
|
||||
<div class="mt-16 text-center reveal">
|
||||
<div class="inline-flex flex-col sm:flex-row items-center gap-4 p-4 rounded-2xl border border-white/80 dark:border-white/5 bg-white/30 dark:bg-slate-950/20 backdrop-blur-md shadow-sm">
|
||||
<span class="text-xs text-slate-600 dark:text-zinc-400">
|
||||
Sie suchen Inspiration? Entdecken Sie unsere 20 maßgeschneiderten Design-Vorlagen.
|
||||
</span>
|
||||
<a href="/templates" class="inline-flex items-center gap-2 text-xs font-bold text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-white transition-colors duration-300">
|
||||
Design-Vorlagen ansehen
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
|
||||
</a>
|
||||
<script is:inline>
|
||||
(function() {
|
||||
const costInput = document.getElementById('roi-cost');
|
||||
const hoursInput = document.getElementById('roi-hours');
|
||||
const resultText = document.getElementById('roi-result');
|
||||
const timeText = document.getElementById('roi-time');
|
||||
|
||||
function calc() {
|
||||
const cost = parseFloat(costInput.value) || 0;
|
||||
const hours = parseFloat(hoursInput.value) || 0;
|
||||
const waasYear = 99 * 12;
|
||||
const currentTotalYear = cost + (hours * 50 * 12);
|
||||
const saving = Math.max(0, currentTotalYear - waasYear);
|
||||
|
||||
resultText.textContent = `${saving.toLocaleString('de-DE')} € / Jahr`;
|
||||
timeText.textContent = `${hours * 12} Stunden Lebenszeit zurück / Jahr`;
|
||||
}
|
||||
|
||||
if (costInput && hoursInput && resultText && timeText) {
|
||||
costInput.addEventListener('input', calc);
|
||||
hoursInput.addEventListener('input', calc);
|
||||
calc();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Sektion im Hybrid Liquid Glass Look -->
|
||||
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
|
||||
<section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">
|
||||
|
||||
873
src/components/OnboardingWizard.astro
Normal file
873
src/components/OnboardingWizard.astro
Normal file
@@ -0,0 +1,873 @@
|
||||
---
|
||||
// src/components/OnboardingWizard.astro
|
||||
---
|
||||
|
||||
<section id="onboarding-wizard" class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
|
||||
<!-- Soft Background Glow -->
|
||||
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
|
||||
<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-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<span class="text-xs uppercase tracking-widest text-sky-600 dark:text-sky-400 font-bold">Website Konfigurator</span>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white mt-2 uppercase tracking-tight">Onboarding-Wizard</h2>
|
||||
<p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
|
||||
Konfigurieren Sie Ihr Wunschprojekt in unter 2 Minuten. Kostenlos und unverbindlich.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Wizard Box (Liquid Glass Style) -->
|
||||
<div class="relative rounded-3xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-950/40 backdrop-blur-2xl p-6 sm:p-10 shadow-xl overflow-hidden min-h-[600px] flex flex-col justify-between">
|
||||
<!-- Tactile details -->
|
||||
<span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/20"></span>
|
||||
<span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/20"></span>
|
||||
<span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/20"></span>
|
||||
<span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/20"></span>
|
||||
|
||||
<!-- Step Indicator Bar -->
|
||||
<div class="flex justify-between items-center mb-8 pb-4 border-b border-slate-200/50 dark:border-white/5">
|
||||
<span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-widest" id="step-counter">SCHRITT 1 / 5</span>
|
||||
<div class="flex gap-2" id="step-dots">
|
||||
<span class="w-2 h-2 rounded-full bg-sky-500 transition-colors" data-step="1"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="2"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="3"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="4"></span>
|
||||
<span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="5"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Columns: Form Left, Live Preview Right -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch flex-grow">
|
||||
|
||||
<!-- Left Column: Form Inputs (7 cols) -->
|
||||
<form id="wizard-form" class="lg:col-span-7 flex flex-col justify-between min-h-[400px]" novalidate>
|
||||
|
||||
<!-- STEP 1: Branchen-Auswahl -->
|
||||
<div class="wizard-step space-y-4" data-step="1">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 1: Branche wählen</h3>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-xs">Suchen Sie Ihre Branche oder tragen Sie Ihre eigene ein.</p>
|
||||
</div>
|
||||
|
||||
<!-- Search Field -->
|
||||
<div class="relative">
|
||||
<input type="text" id="industry-search" placeholder="Branche suchen (z.B. Schreinerei, Arzt...)" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-3 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all" />
|
||||
</div>
|
||||
|
||||
<!-- Industries List (Scrollable) -->
|
||||
<div class="max-h-48 overflow-y-auto border border-slate-200/60 dark:border-white/5 rounded-xl p-3 grid grid-cols-1 sm:grid-cols-2 gap-2 bg-slate-100/30 dark:bg-white/5" id="industry-list">
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Schreinerei & Innenausbau" checked class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Schreinerei & Innenausbau</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Dachdeckerei" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Dachdeckerei</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Solartechnik & PV" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Solartechnik & PV</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Rechtsanwälte & Notare" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Rechtsanwälte & Notare</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Bio-Hofladen" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Bio-Hofladen</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Sanitär, Heizung & Klima" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Sanitär, Heizung & Klima</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="KFZ-Meisterbetrieb" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>KFZ-Meisterbetrieb</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Steuerberater" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Steuerberater</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Garten- & Landschaftsbau" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Garten- & Landschaftsbau</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Physiotherapie Praxis" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Physiotherapie Praxis</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Maler- & Lackiererbetrieb" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Maler- & Lackiererbetrieb</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Zahnarztpraxis" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Zahnarztpraxis</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Architekturbüro" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Architekturbüro</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Software-Entwicklung" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Software-Entwicklung</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Bäckerei & Konditorei" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Bäckerei & Konditorei</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Friseursalon" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Friseursalon</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Kosmetikstudio" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Kosmetikstudio</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Restaurant & Gastronomie" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Restaurant & Gastronomie</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Elektro-Technik" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Elektro-Technik</span>
|
||||
</label>
|
||||
<label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
|
||||
<input type="radio" name="industry" value="Gebäudereinigung" class="text-sky-600 focus:ring-sky-500" />
|
||||
<span>Gebäudereinigung</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Custom / Individual Field -->
|
||||
<div class="pt-2">
|
||||
<label for="industry-custom" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Eigene / Andere Branche</label>
|
||||
<input type="text" id="industry-custom" placeholder="Ihre Branche eintragen..." class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: Farbauswahl -->
|
||||
<div class="wizard-step space-y-6 hidden" data-step="2">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 2: Farben</h3>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-xs">Wählen Sie empfohlene branchenspezifische oder klassische Farbkombinationen.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Industry Recommendation Section -->
|
||||
<div class="p-4 rounded-2xl border border-sky-500/20 bg-sky-500/5" id="industry-rec-box">
|
||||
<span class="text-[9px] font-mono text-sky-600 dark:text-sky-400 uppercase tracking-widest font-bold">Empfehlung für Ihre Branche</span>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<span class="text-xs font-bold text-slate-800 dark:text-zinc-200" id="rec-label">Branchen-Kombination</span>
|
||||
<button type="button" class="px-4 py-2 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-[10px] uppercase tracking-wider rounded-lg transition-all" id="apply-rec-btn">
|
||||
Anwenden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Harmonious Combos -->
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
|
||||
<span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span>
|
||||
<span>Klassisch Blau</span>
|
||||
</button>
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
|
||||
<span class="w-3 h-3 rounded-full bg-[#10b981]"></span>
|
||||
<span>Smaragd & Silber</span>
|
||||
</button>
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
|
||||
<span class="w-3 h-3 rounded-full bg-[#6366f1]"></span>
|
||||
<span>Purple & Lilac</span>
|
||||
</button>
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
|
||||
<span class="w-3 h-3 rounded-full bg-[#4b5563]"></span>
|
||||
<span>Coal & Amber</span>
|
||||
</button>
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
|
||||
<span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span>
|
||||
<span>Muted Rose</span>
|
||||
</button>
|
||||
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
|
||||
<span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span>
|
||||
<span>Ocean Cyan</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Color Pickers -->
|
||||
<div class="grid grid-cols-2 gap-4 pt-2 border-t border-slate-200/50 dark:border-white/5">
|
||||
<div class="space-y-2">
|
||||
<label for="primary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Primärfarbe (Fokus)</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="color" id="primary-color" value="#38bdf8" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
|
||||
<span class="text-xs font-mono font-bold" id="primary-color-hex">#38BDF8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label for="secondary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Sekundärfarbe</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="color" id="secondary-color" value="#ffffff" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
|
||||
<span class="text-xs font-mono font-bold" id="secondary-color-hex">#FFFFFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 3: Layout & Design-Richtung -->
|
||||
<div class="wizard-step space-y-6 hidden" data-step="3">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 3: Layout & Stil</h3>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-xs">Konfigurieren Sie Layout-Struktur und Designrichtung der Website.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Layout type -->
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Layout-Art</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="layout" value="bento" checked class="sr-only" />
|
||||
<span>Bento-Grid</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="layout" value="split" class="sr-only" />
|
||||
<span>Split-Screen</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="layout" value="boxed" class="sr-only" />
|
||||
<span>Boxed Layout</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="layout" value="asymmetric" class="sr-only" />
|
||||
<span>Asymmetrisch</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="layout" value="single" class="sr-only" />
|
||||
<span>Single-Page</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Style -->
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Design-Richtung</label>
|
||||
<div class="grid grid-cols-2 gap-2" id="design-style-group">
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="corporate-dark" checked class="sr-only" />
|
||||
<span>Corporate Dark (Edler Darkmode)</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="nordic-light" class="sr-only" />
|
||||
<span>Nordic Light (Skandinavisch Hell)</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="industrial-gold" class="sr-only" />
|
||||
<span>Industrial Gold (Mittel-Anthrazit)</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="brutalism" class="sr-only" />
|
||||
<span>Brutalismus (Kräftige Ränder)</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="neomorphism" class="sr-only" />
|
||||
<span>Neomorphismus (Weiche Tiefen)</span>
|
||||
</label>
|
||||
<label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
|
||||
<input type="radio" name="style" value="saas-minimalism" class="sr-only" />
|
||||
<span>SaaS-Minimalismus (Clean)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 4: Kontaktdaten -->
|
||||
<div class="wizard-step space-y-6 hidden" data-step="4">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 4: Kontaktdaten</h3>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-xs">Teilen Sie uns mit, wie wir Ihr Konzept zustellen können.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="wizard-name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name *</label>
|
||||
<input type="text" id="wizard-name" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Name" />
|
||||
<p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte füllen Sie das Feld aus.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="wizard-company" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Firma / Organisation</label>
|
||||
<input type="text" id="wizard-company" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Unternehmen" />
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="wizard-email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail-Adresse *</label>
|
||||
<input type="email" id="wizard-email" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="ihre.adresse@firma.de" />
|
||||
<p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte eine gültige E-Mail-Adresse angeben.</p>
|
||||
</div>
|
||||
|
||||
<!-- GDPR Consent -->
|
||||
<div class="sm:col-span-2 space-y-3 pt-2">
|
||||
<p class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
|
||||
🛡️ Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden.
|
||||
</p>
|
||||
<label class="flex items-start gap-2 cursor-pointer">
|
||||
<input type="checkbox" id="wizard-privacy" required class="mt-0.5 w-4 h-4 rounded text-sky-600 focus:ring-sky-500" />
|
||||
<span class="text-[10px] text-slate-500 dark:text-zinc-400 leading-normal">
|
||||
Ich stimme der verschlüsselten Datenverarbeitung laut <a href="/privacy" class="text-sky-600 dark:text-sky-400 hover:underline">Datenschutzerklärung</a> zu. *
|
||||
</span>
|
||||
</label>
|
||||
<p class="wizard-error text-[10px] text-red-500 hidden">Zustimmung erforderlich.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 5: Zusammenfassung & Absenden -->
|
||||
<div class="wizard-step space-y-6 hidden" data-step="5">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 5: Zusammenfassung</h3>
|
||||
<p class="text-slate-500 dark:text-zinc-400 text-xs">Prüfen Sie Ihre Angaben, bevor wir Ihr Projekt generieren.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-100/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 rounded-xl p-4 space-y-3">
|
||||
<div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
|
||||
<span class="text-slate-500">Branche:</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white" id="summary-industry">-</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
|
||||
<span class="text-slate-500">Farben (Primär / Sekundär):</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white" id="summary-colors">-</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
|
||||
<span class="text-slate-500">Layout & Stil:</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white text-right" id="summary-layout">-</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs pt-1">
|
||||
<span class="text-slate-500">Name / E-Mail:</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white" id="summary-contact">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-[10px] text-slate-500 dark:text-zinc-500 leading-normal text-center">
|
||||
Nach Absenden wird Ihr Anforderungsprofil als strukturierte JSON-Payload an unsere Pipeline übermittelt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="flex justify-between gap-4 pt-8 border-t border-slate-200/50 dark:border-white/5 mt-8">
|
||||
<button type="button" id="prev-step" class="px-5 py-2.5 bg-slate-200 dark:bg-slate-900 text-slate-800 dark:text-white text-xs font-bold uppercase tracking-wider rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-all">
|
||||
Zurück
|
||||
</button>
|
||||
<button type="button" id="next-step" class="px-5 py-2.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 text-xs font-bold uppercase tracking-wider rounded-lg transition-all">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Right Column: Live Bento Preview (5 cols) -->
|
||||
<div class="lg:col-span-5 flex items-center justify-center">
|
||||
<div id="wizard-live-preview" class="w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl bg-[#0B0F19]">
|
||||
<!-- Inner Aurora Glow Element -->
|
||||
<div id="preview-glow" class="absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4 bg-sky-500/20"></div>
|
||||
<div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px]"></div>
|
||||
|
||||
<!-- Top Row (Mini Header Mock) -->
|
||||
<div class="relative z-10 flex justify-between items-center pb-2 border-b border-white/10" id="preview-header">
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<span class="w-2 h-2 rounded-full bg-[#38BDF8]" id="preview-logo-dot"></span>
|
||||
<span class="text-[9px] font-bold tracking-tight uppercase" id="preview-logo-text">Website Mockup</span>
|
||||
</div>
|
||||
<span class="text-[7px] font-mono opacity-50" id="preview-online-status">PREVIEW</span>
|
||||
</div>
|
||||
|
||||
<!-- Middle Content (Dynamic layouts render here) -->
|
||||
<div class="relative z-10 flex-grow py-4 flex flex-col justify-center min-h-[140px]" id="preview-content-area">
|
||||
|
||||
<!-- Bento Layout Preview Container -->
|
||||
<div id="layout-bento-mock" class="grid grid-cols-3 gap-2 w-full">
|
||||
<div class="col-span-2 p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="bento-box-1">
|
||||
<span class="text-[10px] font-bold leading-tight" id="preview-h1">Meisterbetrieb</span>
|
||||
<span class="text-[6px] opacity-60 mt-1" id="preview-desc">Professioneller Service vor Ort.</span>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-center items-center" id="bento-box-2">
|
||||
<span class="text-[8px] font-mono uppercase tracking-widest text-[#38BDF8]" id="preview-tier-badge">AKTIV</span>
|
||||
<span class="text-[5px] opacity-40 uppercase">STATUS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split Layout Preview Container (Hidden by default) -->
|
||||
<div id="layout-split-mock" class="grid grid-cols-2 gap-2 w-full hidden">
|
||||
<div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="split-box-1">
|
||||
<span class="text-[10px] font-bold leading-tight" id="preview-h1-split">Regionaler Partner</span>
|
||||
<span class="text-[6px] opacity-60 mt-1" id="preview-desc-split">Echtes Handwerk, beste Qualität.</span>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg border border-white/10 bg-white/5 flex items-center justify-center">
|
||||
<span class="w-6 h-6 rounded-full border border-white/20 flex items-center justify-center text-[7px]" id="split-icon">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boxed Layout Preview Container (Hidden) -->
|
||||
<div id="layout-boxed-mock" class="w-full border border-white/10 p-3 rounded-lg bg-white/5 flex flex-col gap-1 hidden" id="boxed-container">
|
||||
<div class="h-2 w-12 bg-white/10 rounded" id="boxed-accent-bar"></div>
|
||||
<span class="text-[9px] font-bold" id="preview-h1-boxed">Kompakter Titel</span>
|
||||
<p class="text-[6px] opacity-60" id="preview-desc-boxed">Zentrierter Text mit reduziertem Rahmen.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Row (Footer Mock) -->
|
||||
<div class="relative z-10 flex justify-between items-center pt-2 border-t border-white/10" id="preview-footer">
|
||||
<span class="text-[6px] opacity-40 font-mono" id="preview-bottom-left">ZERO THIRD-PARTY</span>
|
||||
<span class="text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-[#38BDF8] text-zinc-950" id="preview-cta-badge">KONZEPT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Custom checked states for radio buttons */
|
||||
label:has(input[type="radio"]:checked) {
|
||||
@apply border-sky-500 ring-2 ring-sky-500/20 bg-sky-500/5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
let currentStep = 1;
|
||||
const totalSteps = 5;
|
||||
|
||||
const steps = document.querySelectorAll('.wizard-step');
|
||||
const dots = document.querySelectorAll('#step-dots span');
|
||||
const counter = document.getElementById('step-counter');
|
||||
const prevBtn = document.getElementById('prev-step') as HTMLButtonElement;
|
||||
const nextBtn = document.getElementById('next-step') as HTMLButtonElement;
|
||||
const form = document.getElementById('wizard-form') as HTMLFormElement;
|
||||
|
||||
// Search and filter logic
|
||||
const industrySearch = document.getElementById('industry-search') as HTMLInputElement;
|
||||
const industryList = document.getElementById('industry-list');
|
||||
const industryLabels = industryList?.querySelectorAll('label');
|
||||
const industryCustomInput = document.getElementById('industry-custom') as HTMLInputElement;
|
||||
|
||||
// Recommendation logic elements
|
||||
const recLabel = document.getElementById('rec-label');
|
||||
const applyRecBtn = document.getElementById('apply-rec-btn');
|
||||
|
||||
// Color Inputs
|
||||
const primaryColorInput = document.getElementById('primary-color') as HTMLInputElement;
|
||||
const secondaryColorInput = document.getElementById('secondary-color') as HTMLInputElement;
|
||||
const primaryHex = document.getElementById('primary-color-hex');
|
||||
const secondaryHex = document.getElementById('secondary-color-hex');
|
||||
const colorPresetBtns = document.querySelectorAll('.color-preset-btn');
|
||||
|
||||
// Layout & Style Inputs
|
||||
const layoutInputs = form.querySelectorAll('input[name="layout"]');
|
||||
const styleInputs = form.querySelectorAll('input[name="style"]');
|
||||
|
||||
// Live Preview elements
|
||||
const previewBox = document.getElementById('wizard-live-preview');
|
||||
const previewGlow = document.getElementById('preview-glow');
|
||||
const logoDot = document.getElementById('preview-logo-dot');
|
||||
const logoText = document.getElementById('preview-logo-text');
|
||||
const badge = document.getElementById('preview-cta-badge');
|
||||
const tierBadge = document.getElementById('preview-tier-badge');
|
||||
const header = document.getElementById('preview-header');
|
||||
const footer = document.getElementById('preview-footer');
|
||||
const onlineStatus = document.getElementById('preview-online-status');
|
||||
const b1 = document.getElementById('bento-box-1');
|
||||
const b2 = document.getElementById('bento-box-2');
|
||||
const s1 = document.getElementById('split-box-1');
|
||||
const s2 = document.getElementById('split-icon');
|
||||
const bx = document.getElementById('boxed-container');
|
||||
const bxAccent = document.getElementById('boxed-accent-bar');
|
||||
|
||||
// Preview Text Nodes for Industry updates
|
||||
const previewH1 = document.getElementById('preview-h1');
|
||||
const previewDesc = document.getElementById('preview-desc');
|
||||
const previewH1Split = document.getElementById('preview-h1-split');
|
||||
const previewDescSplit = document.getElementById('preview-desc-split');
|
||||
const previewH1Boxed = document.getElementById('preview-h1-boxed');
|
||||
const previewDescBoxed = document.getElementById('preview-desc-boxed');
|
||||
|
||||
// Preview Layout mock blocks
|
||||
const bentoMock = document.getElementById('layout-bento-mock');
|
||||
const splitMock = document.getElementById('layout-split-mock');
|
||||
const boxedMock = document.getElementById('layout-boxed-mock');
|
||||
|
||||
// Step 4 inputs
|
||||
const nameInput = document.getElementById('wizard-name') as HTMLInputElement;
|
||||
const emailInput = document.getElementById('wizard-email') as HTMLInputElement;
|
||||
const privacyInput = document.getElementById('wizard-privacy') as HTMLInputElement;
|
||||
|
||||
// Summary fields
|
||||
const summaryIndustry = document.getElementById('summary-industry');
|
||||
const summaryColors = document.getElementById('summary-colors');
|
||||
const summaryLayout = document.getElementById('summary-layout');
|
||||
const summaryContact = document.getElementById('summary-contact');
|
||||
|
||||
// Color combination mapping per industry
|
||||
const industryColorConfigs: Record<string, { primary: string, secondary: string, name: string, label: string }> = {
|
||||
'Schreinerei & Innenausbau': { primary: '#9C7A4E', secondary: '#DE6B32', name: 'Möbel-Schreinerei', label: 'Eichenholz & Kupfer' },
|
||||
'Dachdeckerei': { primary: '#f59e0b', secondary: '#475569', name: 'Dachdecker Meister', label: 'Ziegel-Amber & Schiefer' },
|
||||
'Solartechnik & PV': { primary: '#ff5500', secondary: '#3f3f46', name: 'Solar PV Tech', label: 'Sonnen-Orange & Carbon' },
|
||||
'Rechtsanwälte & Notare': { primary: '#047857', secondary: '#f1f5f9', name: 'Kanzlei Expertise', label: 'Tief-Smaragd & Silber' },
|
||||
'Bio-Hofladen': { primary: '#15803d', secondary: '#c2410c', name: 'Bio-Hofladen Natur', label: 'Bio-Grün & Terracotta' },
|
||||
'Sanitär, Heizung & Klima': { primary: '#1d4ed8', secondary: '#06b6d4', name: 'SHK Meisterbetrieb', label: 'Heizungs-Blau & Aqua-Cyan' },
|
||||
'KFZ-Meisterbetrieb': { primary: '#dc2626', secondary: '#94a3b8', name: 'KFZ Schnellservice', label: 'Racing-Rot & Asphalt' },
|
||||
'Steuerberater': { primary: '#d97706', secondary: '#1e3a8a', name: 'Steuerberater Premium', label: 'Kanzlei-Gold & Royal-Blau' },
|
||||
'Garten- & Landschaftsbau': { primary: '#16a34a', secondary: '#e7e5e4', name: 'Gartengestaltung', label: 'Blatt-Grün & Sandstein' },
|
||||
'Physiotherapie Praxis': { primary: '#0d9488', secondary: '#ccfbf1', name: 'Physio Praxis', label: 'Gesundheits-Teal & Mint' },
|
||||
'Maler- & Lackiererbetrieb': { primary: '#4f46e5', secondary: '#db2777', name: 'Malerbetrieb', label: 'Kreativ-Indigo & Magenta' },
|
||||
'Zahnarztpraxis': { primary: '#38bdf8', secondary: '#f8fafc', name: 'Zahnarztpraxis', label: 'Eis-Blau & Praxis-Weiß' },
|
||||
'Architekturbüro': { primary: '#71717a', secondary: '#09090b', name: 'Architektur Struktur', label: 'Konzept-Grau & Matt-Schwarz' },
|
||||
'Software-Entwicklung': { primary: '#8b5cf6', secondary: '#00ffff', name: 'Byte Code', label: 'Electric-Purple & Cyber-Cyan' },
|
||||
'Bäckerei & Konditorei': { primary: '#d97706', secondary: '#451a03', name: 'Bäckerei Ofenfrisch', label: 'Weizen-Gold & Schokolade' },
|
||||
'Friseursalon': { primary: '#db2777', secondary: '#f3f4f6', name: 'Haardesign Salon', label: 'Rose Gold & Seiden-Weiß' },
|
||||
'Kosmetikstudio': { primary: '#a855f7', secondary: '#fafaf9', name: 'Kosmetik Oase', label: 'Lavendel & Perlglanz' },
|
||||
'Restaurant & Gastronomie': { primary: '#991b1b', secondary: '#d97706', name: 'Gourmet Restaurant', label: 'Wein-Rot & Ocker-Gold' },
|
||||
'Elektro-Technik': { primary: '#eab308', secondary: '#1f2937', name: 'Elektrotechnik', label: 'Strom-Gelb & Anthrazit' },
|
||||
'Gebäudereinigung': { primary: '#06b6d4', secondary: '#ffffff', name: 'Gebäudereinigung', label: 'Glanz-Cyan & Reinweiß' }
|
||||
};
|
||||
|
||||
// Filter list by search query
|
||||
if (industrySearch) {
|
||||
industrySearch.addEventListener('input', () => {
|
||||
const query = industrySearch.value.toLowerCase().trim();
|
||||
industryLabels?.forEach(label => {
|
||||
const text = label.textContent?.toLowerCase() || '';
|
||||
if (text.includes(query)) {
|
||||
label.style.display = 'flex';
|
||||
} else {
|
||||
label.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Color preset button actions
|
||||
colorPresetBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const primary = btn.getAttribute('data-primary') || '#38bdf8';
|
||||
const secondary = btn.getAttribute('data-secondary') || '#ffffff';
|
||||
applyColorCombo(primary, secondary);
|
||||
});
|
||||
});
|
||||
|
||||
function applyColorCombo(primary: string, secondary: string) {
|
||||
if (primaryColorInput && secondaryColorInput) {
|
||||
primaryColorInput.value = primary;
|
||||
secondaryColorInput.value = secondary;
|
||||
primaryColorInput.dispatchEvent(new Event('input'));
|
||||
secondaryColorInput.dispatchEvent(new Event('input'));
|
||||
}
|
||||
}
|
||||
|
||||
if (primaryColorInput && secondaryColorInput) {
|
||||
primaryColorInput.addEventListener('input', () => {
|
||||
if (primaryHex) primaryHex.textContent = primaryColorInput.value.toUpperCase();
|
||||
updatePreviewStyles();
|
||||
});
|
||||
secondaryColorInput.addEventListener('input', () => {
|
||||
if (secondaryHex) secondaryHex.textContent = secondaryColorInput.value.toUpperCase();
|
||||
updatePreviewStyles();
|
||||
});
|
||||
}
|
||||
|
||||
// Reacting to layout changes
|
||||
layoutInputs.forEach(input => input.addEventListener('change', updatePreviewLayout));
|
||||
styleInputs.forEach(input => input.addEventListener('change', updatePreviewStyles));
|
||||
|
||||
// Dynamic Preview Layout
|
||||
function updatePreviewLayout() {
|
||||
const activeLayout = (form.querySelector('input[name="layout"]:checked') as HTMLInputElement)?.value || 'bento';
|
||||
|
||||
bentoMock?.classList.add('hidden');
|
||||
splitMock?.classList.add('hidden');
|
||||
boxedMock?.classList.add('hidden');
|
||||
|
||||
if (activeLayout === 'bento') bentoMock?.classList.remove('hidden');
|
||||
if (activeLayout === 'split') splitMock?.classList.remove('hidden');
|
||||
if (activeLayout === 'boxed' || activeLayout === 'asymmetric' || activeLayout === 'single') boxedMock?.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Update colors based on chosen industry
|
||||
function updateIndustryColorRecommendation() {
|
||||
const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
|
||||
const industryName = selectedEl?.value || 'Schreinerei & Innenausbau';
|
||||
const config = industryColorConfigs[industryName];
|
||||
|
||||
if (config && recLabel && applyRecBtn) {
|
||||
recLabel.textContent = `${config.label} (für ${industryName})`;
|
||||
|
||||
// Remove old click listeners by cloning
|
||||
const newBtn = applyRecBtn.cloneNode(true) as HTMLButtonElement;
|
||||
applyRecBtn.parentNode?.replaceChild(newBtn, applyRecBtn);
|
||||
|
||||
newBtn.addEventListener('click', () => {
|
||||
applyColorCombo(config.primary, config.secondary);
|
||||
});
|
||||
}
|
||||
|
||||
// Update text mockup content in preview
|
||||
const previewText = config ? config.name : 'Premium Web';
|
||||
const previewDescText = `Maßgeschneidertes Design für ${industryName}.`;
|
||||
|
||||
if (previewH1) previewH1.textContent = previewText;
|
||||
if (previewDesc) previewDesc.textContent = previewDescText;
|
||||
if (previewH1Split) previewH1Split.textContent = previewText;
|
||||
if (previewDescSplit) previewDescSplit.textContent = previewDescText;
|
||||
if (previewH1Boxed) previewH1Boxed.textContent = previewText;
|
||||
if (previewDescBoxed) previewDescBoxed.textContent = previewDescText;
|
||||
}
|
||||
|
||||
// Event listener for industry change
|
||||
form.querySelectorAll('input[name="industry"]').forEach(input => {
|
||||
input.addEventListener('change', () => {
|
||||
updateIndustryColorRecommendation();
|
||||
// Automatically pre-apply the recommended combo for the industry
|
||||
const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
|
||||
const config = industryColorConfigs[selectedEl?.value];
|
||||
if (config) {
|
||||
applyColorCombo(config.primary, config.secondary);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Custom industry input also resets preset if user types
|
||||
if (industryCustomInput) {
|
||||
industryCustomInput.addEventListener('input', () => {
|
||||
if (industryCustomInput.value.trim() && recLabel) {
|
||||
recLabel.textContent = 'Individuelles Thema';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Dynamic Preview Styles (Colors & Themes)
|
||||
function updatePreviewStyles() {
|
||||
if (!previewBox || !previewGlow || !logoDot || !logoText || !badge || !tierBadge) return;
|
||||
|
||||
const primary = primaryColorInput.value;
|
||||
const secondary = secondaryColorInput.value;
|
||||
const activeStyle = (form.querySelector('input[name="style"]:checked') as HTMLInputElement)?.value || 'corporate-dark';
|
||||
|
||||
// Reset style classes
|
||||
previewBox.className = "w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl";
|
||||
logoText.className = "text-[9px] font-bold tracking-tight uppercase";
|
||||
badge.className = "text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded";
|
||||
|
||||
// Color rules for elements
|
||||
logoDot.style.backgroundColor = primary;
|
||||
if (bxAccent) bxAccent.style.backgroundColor = primary;
|
||||
if (s2) {
|
||||
s2.style.borderColor = primary;
|
||||
s2.style.color = primary;
|
||||
}
|
||||
tierBadge.style.color = primary;
|
||||
|
||||
// Style specific themes
|
||||
if (activeStyle === 'corporate-dark') {
|
||||
previewBox.classList.add('bg-[#0B0F19]', 'text-white', 'border-white/10');
|
||||
previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
|
||||
previewGlow.style.backgroundColor = `${primary}22`;
|
||||
logoText.classList.add('text-white');
|
||||
badge.style.backgroundColor = primary;
|
||||
badge.style.color = '#0B0F19';
|
||||
}
|
||||
else if (activeStyle === 'nordic-light') {
|
||||
previewBox.classList.add('bg-[#F3F4F6]', 'text-slate-900', 'border-slate-200');
|
||||
previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
|
||||
previewGlow.style.backgroundColor = `${primary}11`;
|
||||
logoText.classList.add('text-slate-800');
|
||||
badge.style.backgroundColor = primary;
|
||||
badge.style.color = '#ffffff';
|
||||
}
|
||||
else if (activeStyle === 'industrial-gold') {
|
||||
previewBox.classList.add('bg-[#1C1D21]', 'text-zinc-100', 'border-zinc-700/50');
|
||||
previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
|
||||
previewGlow.style.backgroundColor = `${primary}18`;
|
||||
logoText.classList.add('text-zinc-100');
|
||||
badge.style.backgroundColor = primary;
|
||||
badge.style.color = '#1C1D21';
|
||||
}
|
||||
else if (activeStyle === 'brutalism') {
|
||||
previewBox.classList.add('bg-white', 'text-black', 'border-4', 'border-black');
|
||||
previewGlow.className = "hidden";
|
||||
logoText.classList.add('text-black');
|
||||
badge.style.backgroundColor = '#000000';
|
||||
badge.style.color = '#ffffff';
|
||||
badge.classList.add('border', 'border-black');
|
||||
}
|
||||
else if (activeStyle === 'neomorphism') {
|
||||
previewBox.classList.add('bg-[#E0E0E0]', 'text-slate-800', 'border-transparent', 'shadow-[inset_10px_10px_20px_#bebebe,inset_-10px_-10px_20px_#ffffff]');
|
||||
previewGlow.className = "hidden";
|
||||
logoText.classList.add('text-slate-700');
|
||||
badge.style.backgroundColor = primary;
|
||||
badge.style.color = '#white';
|
||||
}
|
||||
else { // saas-minimalism
|
||||
previewBox.classList.add('bg-white', 'text-slate-900', 'border-slate-100', 'shadow-sm');
|
||||
previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
|
||||
previewGlow.style.backgroundColor = `${primary}08`;
|
||||
logoText.classList.add('text-slate-800');
|
||||
badge.style.backgroundColor = primary;
|
||||
badge.style.color = '#ffffff';
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger initial styles
|
||||
updateIndustryColorRecommendation();
|
||||
updatePreviewLayout();
|
||||
updatePreviewStyles();
|
||||
|
||||
// Steps state machine
|
||||
function updateStep() {
|
||||
steps.forEach((step, idx) => {
|
||||
if (idx + 1 === currentStep) {
|
||||
step.classList.remove('hidden');
|
||||
} else {
|
||||
step.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
dots.forEach((dot, idx) => {
|
||||
if (idx + 1 <= currentStep) {
|
||||
dot.classList.add('bg-sky-500');
|
||||
dot.classList.remove('bg-slate-300', 'dark:bg-zinc-700');
|
||||
} else {
|
||||
dot.classList.remove('bg-sky-500');
|
||||
dot.classList.add('bg-slate-300', 'dark:bg-zinc-700');
|
||||
}
|
||||
});
|
||||
|
||||
if (counter) {
|
||||
counter.textContent = `SCHRITT ${currentStep} / ${totalSteps}`;
|
||||
}
|
||||
|
||||
if (prevBtn && nextBtn) {
|
||||
prevBtn.disabled = currentStep === 1;
|
||||
if (currentStep === totalSteps) {
|
||||
nextBtn.textContent = 'Projekt generieren';
|
||||
} else {
|
||||
nextBtn.textContent = 'Weiter';
|
||||
}
|
||||
}
|
||||
|
||||
if (currentStep === 5) {
|
||||
buildSummary();
|
||||
}
|
||||
}
|
||||
|
||||
function validateStep(): boolean {
|
||||
if (currentStep === 4) {
|
||||
let valid = true;
|
||||
|
||||
if (!nameInput.value.trim()) {
|
||||
nameInput.nextElementSibling?.classList.remove('hidden');
|
||||
valid = false;
|
||||
} else {
|
||||
nameInput.nextElementSibling?.classList.add('hidden');
|
||||
}
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailPattern.test(emailInput.value)) {
|
||||
emailInput.nextElementSibling?.classList.remove('hidden');
|
||||
valid = false;
|
||||
} else {
|
||||
emailInput.nextElementSibling?.classList.add('hidden');
|
||||
}
|
||||
|
||||
const privacyError = document.getElementById('wizard-privacy')?.closest('label')?.nextElementSibling;
|
||||
if (!privacyInput.checked) {
|
||||
privacyError?.classList.remove('hidden');
|
||||
valid = false;
|
||||
} else {
|
||||
privacyError?.classList.add('hidden');
|
||||
}
|
||||
|
||||
return valid;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function buildSummary() {
|
||||
const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
|
||||
const customIndustry = industryCustomInput.value.trim();
|
||||
const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : '-');
|
||||
|
||||
const primary = primaryColorInput.value;
|
||||
const secondary = secondaryColorInput.value;
|
||||
|
||||
const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
|
||||
const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;
|
||||
|
||||
if (summaryIndustry) summaryIndustry.textContent = industryName;
|
||||
if (summaryColors) summaryColors.textContent = `Primär: ${primary.toUpperCase()}, Sekundär: ${secondary.toUpperCase()}`;
|
||||
if (summaryLayout) summaryLayout.textContent = `${selectedLayoutEl?.value.toUpperCase()} / ${selectedStyleEl?.value.toUpperCase()}`;
|
||||
if (summaryContact) summaryContact.textContent = `${nameInput.value} (${emailInput.value})`;
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (!validateStep()) return;
|
||||
|
||||
if (currentStep < totalSteps) {
|
||||
currentStep++;
|
||||
updateStep();
|
||||
} else {
|
||||
submitWizard();
|
||||
}
|
||||
}
|
||||
|
||||
function submitWizard() {
|
||||
const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
|
||||
const customIndustry = industryCustomInput.value.trim();
|
||||
const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : 'unbekannt');
|
||||
|
||||
const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
|
||||
const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;
|
||||
const companyVal = (document.getElementById('wizard-company') as HTMLInputElement).value;
|
||||
|
||||
const payload = {
|
||||
client_metadata: {
|
||||
agency_id: "nd-it-solutions",
|
||||
timestamp: new Date().toISOString(),
|
||||
domain: companyVal ? `${companyVal.toLowerCase().replace(/[^a-z0-9]/g, '')}.de` : "unbekannt.de"
|
||||
},
|
||||
branding: {
|
||||
industry: industryName,
|
||||
company_name: companyVal || "Mein Unternehmen",
|
||||
branding_style: selectedStyleEl?.value || "corporate-dark",
|
||||
primary_color: primaryColorInput.value,
|
||||
secondary_color: secondaryColorInput.value
|
||||
},
|
||||
structure: {
|
||||
layout_type: selectedLayoutEl?.value || "bento",
|
||||
sections: ["hero", "portfolio", "contact"]
|
||||
},
|
||||
contact: {
|
||||
name: nameInput.value,
|
||||
email: emailInput.value,
|
||||
company: companyVal
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Wizard Payload Output:', JSON.stringify(payload, null, 2));
|
||||
alert('Erfolgreich generiert! JSON Payload wurde in die Konsole geloggt.');
|
||||
}
|
||||
|
||||
if (nextBtn && prevBtn) {
|
||||
nextBtn.addEventListener('click', handleNext);
|
||||
prevBtn.addEventListener('click', () => {
|
||||
if (currentStep > 1) {
|
||||
currentStep--;
|
||||
updateStep();
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro';
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
|
||||
import TemplateMarquee from '../components/TemplateMarquee.astro';
|
||||
import OnboardingWizard from '../components/OnboardingWizard.astro';
|
||||
---
|
||||
|
||||
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
||||
@@ -13,8 +13,8 @@ import TemplateMarquee from '../components/TemplateMarquee.astro';
|
||||
{/* Clean, modular Hero and Liquid Glass section */}
|
||||
<HeroAndLiquidGlass />
|
||||
|
||||
<!-- Infinite Template Marquee Ticker -->
|
||||
<TemplateMarquee />
|
||||
<!-- Multi-step Onboarding Wizard -->
|
||||
<OnboardingWizard />
|
||||
|
||||
<!-- Contact section (separate, clean layout) -->
|
||||
<section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
|
||||
|
||||
@@ -480,46 +480,34 @@ const { tpl } = Astro.props;
|
||||
<div class="flex flex-col items-center justify-center py-12">
|
||||
<div class="text-center max-w-xl mb-12">
|
||||
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt kalkulieren.</h1>
|
||||
<p class="opacity-75 text-xs sm:text-sm">Ermitteln Sie Ihren Bedarf schnell und unverbindlich in nur wenigen Schritten.</p>
|
||||
<h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt anfragen.</h1>
|
||||
<p class="opacity-75 text-xs sm:text-sm">Tragen Sie Ihre Nachricht ein. Wir melden uns unverbindlich innerhalb von 24 Stunden.</p>
|
||||
</div>
|
||||
|
||||
{/* The centralized Calculator Block (Monolith) */}
|
||||
{/* The centralized Contact Form Block (Monolith) */}
|
||||
<div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
|
||||
{tpl.group === "Glassmorphismus" && (
|
||||
<div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
|
||||
)}
|
||||
|
||||
<h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Bedarfs-Rechner</h3>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Kontaktformular</h3>
|
||||
<form class="space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Projekt-Fläche (ca. m²)</label>
|
||||
<input type="range" min="10" max="500" value="120" class="w-full h-1 bg-current/10 rounded-lg appearance-none cursor-pointer" />
|
||||
<div class="flex justify-between text-xs font-bold mt-2 opacity-80">
|
||||
<span>10 m²</span>
|
||||
<span class={tpl.accentText}>120 m²</span>
|
||||
<span>500 m²</span>
|
||||
</div>
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
|
||||
<input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Dienstleistung</label>
|
||||
<select class="w-full bg-current/5 border border-current/20 rounded p-2 text-xs focus:outline-none focus:border-current">
|
||||
<option>Komplettmontage & Service</option>
|
||||
<option>Nur Lieferung & Zuschnitt</option>
|
||||
<option>Wartung & Reparatur</option>
|
||||
</select>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
|
||||
<input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
||||
</div>
|
||||
|
||||
<div class="bg-current/5 p-4 rounded-xl mt-6 border border-current/10 text-center">
|
||||
<div class="text-[10px] uppercase font-bold opacity-60">Voraussichtliches Budget</div>
|
||||
<div class="text-3xl font-black mt-1 uppercase tracking-tight">~ 2.450 €</div>
|
||||
<div class="text-[9px] opacity-50 mt-1">Unverbindlicher Richtpreis inkl. MwSt.</div>
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihre Nachricht</label>
|
||||
<textarea rows="4" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<button class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
||||
Ergebnis absenden & anfragen
|
||||
<button type="submit" class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
|
||||
Anfrage senden
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -548,7 +536,7 @@ const { tpl } = Astro.props;
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
|
||||
<p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
|
||||
</div>
|
||||
<form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault()">
|
||||
<form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
|
||||
<input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
|
||||
|
||||
Reference in New Issue
Block a user