From cb908bf023d1b0c09cdd89da129226621076a201 Mon Sep 17 00:00:00 2001 From: DanielS Date: Mon, 6 Jul 2026 00:39:22 +0200 Subject: [PATCH] docs: add funktionen.md specifying website design and features --- funktionen.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 funktionen.md diff --git a/funktionen.md b/funktionen.md new file mode 100644 index 0000000..71b39ff --- /dev/null +++ b/funktionen.md @@ -0,0 +1,33 @@ +# Website Funktionen & Designkonzept - N&D i-t SOLUTIONS + +## 1. Design & Aussehen (Aesthetics) +- **Stil**: Modernes, premium Tech-Design. Kombination aus dunklem Modus (Dark Mode) und edlen Akzentfarben (Neon-Blau, Violett). +- **Glassmorphismus**: Teiltransparente Hintergründe mit Unschärfe-Effekt (backdrop-filter: blur) für Karten und die Navigationsleiste. +- **Typografie**: Moderne Sans-Serif Schriftart (z.B. Outfit oder Inter via Google Fonts). +- **Layout**: Vollständig responsiv (optimiert für Smartphones, Tablets, Desktops). + +## 2. Effekte & Interaktion (Wirkung) +- **Scroll-Animationen**: Sanftes Einblenden (Fade-In) von Sektionen beim Scrollen. +- **Hover-Effekte**: + - Buttons vergrößern sich minimal und leuchten leicht. + - Service-Karten erhalten einen farbigen Rahmen-Gradienten bei Mausberührung. +- **Smooth Scroll**: Fließendes Navigieren zu den einzelnen Sektionen über das Menü. +- **Sticky Navbar**: Navigationsleiste bleibt beim Scrollen oben fixiert und wird leicht transparent. + +## 3. Struktur & Sektionen +- **Navbar (Navigation)**: Logo, Links zu Leistungen, Tech-Stack, Über uns, Kontakt. Button für Erstgespräch. +- **Hero-Sektion**: + - *Überschrift*: "Digitale Exzellenz für Ihr Unternehmen" + - *Subtext*: "Wir bauen schnelle, moderne und SEO-optimierte Websites für Kleinbetriebe und Dienstleister." + - *Call-to-Action*: Button "Projekt starten" & "Mehr erfahren". +- **Services (Dienstleistungen)**: + - *Karten*: Webdesign, Performance-Optimierung, SEO & Auffindbarkeit, Wartung & Support. +- **Tech-Stack**: + - Visualisierung moderner Technologien (Astro, Tailwind CSS, React, Node.js). +- **About (Über uns)**: + - Vorstellung von N&D i-t SOLUTIONS, Fokus auf persönlichen Service und faire Preise für Kleinbetriebe. +- **Contact (Kontakt)**: + - Kontaktformular mit interaktiven Eingabefeldern. + - Direktkontakt (E-Mail, Telefon). +- **Footer**: + - Links zu Impressum und Datenschutz, Social-Media-Icons, Copyright.