From b3bc8a10f9cc533d51d2cf6eaf6abe623435ac2f Mon Sep 17 00:00:00 2001 From: DanielS Date: Mon, 6 Jul 2026 00:58:45 +0200 Subject: [PATCH] design: apply exact color definitions and copy text modifications from funktionen.md --- funktionen.md | 47 ++++++++--------- src/components/Navbar.astro | 8 +-- src/pages/index.astro | 101 +++++++++++++++++------------------- tailwind.config.mjs | 8 +-- 4 files changed, 78 insertions(+), 86 deletions(-) diff --git a/funktionen.md b/funktionen.md index 82b4ac3..a24507d 100644 --- a/funktionen.md +++ b/funktionen.md @@ -1,43 +1,42 @@ # 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. +- **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 Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit. +- **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). -- **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). +- **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 (Bento-Architektur) +## 3. Struktur & Sektionen (Die 3-Säulen-Bento-Architektur) ### Navbar (Navigation) -- **Komponenten**: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen". +- **Komponenten**: Logo, Direktlinks (Leistungen, Tech-Stack, Ablauf), Button "Erstgespräch buchen". -### Hero- & Wert-Sektion (Großes Bento-Raster oben) +### Hero- & Wert-Sektion (Oberes Raster) - **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." + - *Ü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)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code. -- **Zelle 3 (Klein - USP)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90). +- **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). -### 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). +### 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 (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. +### 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 (Kontakt-Zone) +### Contact & Footer - **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung. - -### Footer -- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright. +- **Footer**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright. diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 024fd2b..eecdef6 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -16,9 +16,9 @@ import { FaBars, FaTimes } from 'react-icons/fa'; @@ -48,9 +48,9 @@ import { FaBars, FaTimes } from 'react-icons/fa';