80773cacee
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
44 lines
2.7 KiB
Markdown
44 lines
2.7 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, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe.
|
||
- **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
|
||
- **Karten-Stil**: Mattes Finish (Subtiler Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit.
|
||
- **Typografie**: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
|
||
- **Layout**: Streng responsiv mit Fokus auf fehlerfreie Desktop-Raster und saubere Mobile-Kompression.
|
||
|
||
## 2. Effekte & Interaktion (Wirkung)
|
||
- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
|
||
- **Grid-Hover**: Angesteuerte Bento-Zellen heben sich durch eine minimale Aufhellung des Hintergrunds ab.
|
||
- **Bento-Skalierung**: Inhaltselemente innerhalb einer Zelle verschieben sich bei Hover dezent (z. B. Pfeil-Icon wandert nach rechts oben).
|
||
- **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
|
||
|
||
## 3. Struktur & Sektionen (Bento-Architektur)
|
||
|
||
### Navbar (Navigation)
|
||
- **Komponenten**: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen".
|
||
|
||
### Hero- & Wert-Sektion (Großes Bento-Raster oben)
|
||
- **Zelle 1 (Groß - Hauptfokus)**:
|
||
- *Überschrift*: "Webdesign, das konvertiert. Ohne Kompromisse."
|
||
- *Subtext*: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google."
|
||
- *CTA*: Primärer Button "Projekt anfragen".
|
||
- **Zelle 2 (Mittel - Das Versprechen)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code.
|
||
- **Zelle 3 (Klein - USP)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90).
|
||
|
||
### Services & Expertise (Bento-Raster Mitte)
|
||
- **Zelle 4 (Lang - Kernleistung)**: Individuelles Webdesign & UI/UX-Entwicklung von Grund auf.
|
||
- **Zelle 5 (Quadratisch)**: SEO-Fundament (Semantischer Code, strukturierte Daten für Google).
|
||
- **Zelle 6 (Quadratisch)**: Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates).
|
||
|
||
### Tech-Stack & Methode (Bento-Raster unten)
|
||
- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Sanity CMS).
|
||
- **Zelle 8 (Mittel - Da noch keine Kunden)**: "Unser Ansatz" – Transparenter 3-Schritte-Prozess vom Erstgespräch zum Launch.
|
||
|
||
### Contact (Kontakt-Zone)
|
||
- **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
|
||
|
||
### Footer
|
||
- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.
|