b3bc8a10f9
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
43 lines
2.8 KiB
Markdown
43 lines
2.8 KiB
Markdown
# Website Funktionen & Designkonzept - N&D i-t SOLUTIONS
|
||
|
||
## 1. Design & Aussehen (Aesthetics)
|
||
- **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode).
|
||
- **Farben**: Tiefes Anthrazit/Schwarz (#0B0F19), reines Weiß, dezentes Arktis-Blau (#38BDF8) als Fokusfarbe.
|
||
- **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
|
||
- **Karten-Stil**: Mattes Finish (Subtiler 1px Border in Dunkelgrau statt starkem Glassmorphismus).
|
||
- **Typografie**: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
|
||
|
||
## 2. Effekte & Interaktion (Wirkung)
|
||
- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
|
||
- **Grid-Hover**: Angesteuerte Bento-Zellen erhalten einen minimalen arktis-blauen Schein am Rand.
|
||
- **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
|
||
|
||
## 3. Struktur & Sektionen (Die 3-Säulen-Bento-Architektur)
|
||
|
||
### Navbar (Navigation)
|
||
- **Komponenten**: Logo, Direktlinks (Leistungen, Tech-Stack, Ablauf), Button "Erstgespräch buchen".
|
||
|
||
### Hero- & Wert-Sektion (Oberes Raster)
|
||
- **Zelle 1 (Groß - Hauptfokus)**:
|
||
- *Überschrift*: "Websites, die performen. Von der Idee bis zum Live-Gang."
|
||
- *Subtext*: "Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut."
|
||
- *CTA*: Primärer Button "Projekt anfragen".
|
||
- **Zelle 2 (Mittel - Das Versprechen)**: "Full-Service-Garantie" – Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt.
|
||
- **Zelle 3 (Klein - USP)**: Visualisierung: PageSpeed-Score >95% (Fokus auf extreme Ladegeschwindigkeit).
|
||
|
||
### Die 3 Kern-Säulen (Zentrales Bento-Raster)
|
||
- **Zelle 4 (Groß - Säule 1: Webdesign)**:
|
||
- *Inhalt*: Individuelles UI/UX-Design & Entwicklung von Grund auf (Keine billigen WordPress-Templates). Blitzschnell im Code umgesetzt.
|
||
- **Zelle 5 (Mittel - Säule 2: Sichtbarkeit & SEO)**:
|
||
- *Inhalt*: Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
|
||
- **Zelle 6 (Mittel - Säule 3: Hosting & Betrieb)**:
|
||
- *Inhalt*: Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
|
||
|
||
### Tech-Stack & Methode (Unteres Raster)
|
||
- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Vercel/Netlify).
|
||
- **Zelle 8 (Mittel - Vertrauensaufbau)**: "Unser 3-Schritte-Prozess" – 1. Erstgespräch | 2. Design & Code | 3. Hosting & Launch.
|
||
|
||
### Contact & Footer
|
||
- **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
|
||
- **Footer**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.
|