From 80773caceed29db4df2352462ac7f52e7b9d7538 Mon Sep 17 00:00:00 2001 From: DanielS Date: Mon, 6 Jul 2026 00:55:27 +0200 Subject: [PATCH] design: implement Bento-Grid and Corporate Dark Mode redesign --- funktionen.md | 64 +++++----- src/components/Navbar.astro | 79 +++++-------- src/layouts/Layout.astro | 2 +- src/pages/index.astro | 230 +++++++++++++++++++++++++++++++++--- tailwind.config.mjs | 10 +- 5 files changed, 289 insertions(+), 96 deletions(-) diff --git a/funktionen.md b/funktionen.md index 71b39ff..82b4ac3 100644 --- a/funktionen.md +++ b/funktionen.md @@ -1,33 +1,43 @@ # 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). +- **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) -- **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. +- **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 -- **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. +## 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. diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 4ea2e18..024fd2b 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -1,44 +1,36 @@ --- // src/components/Navbar.astro -import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa'; +import { FaBars, FaTimes } from 'react-icons/fa'; --- -
+
-
+
- - N&D i-t SOLUTIONS + + N&D i-t SOLUTIONS
- - - - -
@@ -46,23 +38,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
-
-
- - N&D i-t SOLUTIONS + @@ -71,28 +61,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa'; - + diff --git a/src/pages/index.astro b/src/pages/index.astro index df04bc1..1f599c2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,22 +1,222 @@ --- import Layout from '../layouts/Layout.astro'; import Navbar from '../components/Navbar.astro'; -import Hero from '../components/Hero.astro'; -import Services from '../components/Services.astro'; -import TechStack from '../components/TechStack.astro'; -import About from '../components/About.astro'; -import Contact from '../components/Contact.astro'; import Footer from '../components/Footer.astro'; +import { + FaArrowUp, + FaCheck, + FaLaptopCode, + FaSearchDollar, + FaServer, + FaArrowRight, + FaReact, + FaLock, + FaEnvelope, + FaPhoneAlt, + FaShieldAlt +} from 'react-icons/fa'; --- - - -
- - - - -
- -