Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: apply exact color definitions and copy text modifications from funktionen.md
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-06 00:58:45 +02:00
parent 80773cacee
commit b3bc8a10f9
4 changed files with 78 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
funktionen.md
View File

@@ -1,43 +1,42 @@
# Website Funktionen & Designkonzept - N&D i-t SOLUTIONS # Website Funktionen & Designkonzept - N&D i-t SOLUTIONS
## 1. Design & Aussehen (Aesthetics) ## 1. Design & Aussehen (Aesthetics)
- **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode). - **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode).
- **Farben**: Tiefes Anthrazit/Schwarz, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe. - **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). - **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). - **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) ## 2. Effekte & Interaktion (Wirkung)
- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen. - **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. - **Grid-Hover**: Angesteuerte Bento-Zellen erhalten einen minimalen arktis-blauen Schein am Rand.
- **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). - **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) ### 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)**: - **Zelle 1 (Groß - Hauptfokus)**:
- *Überschrift*: "Webdesign, das konvertiert. Ohne Kompromisse." - *Überschrift*: "Websites, die performen. Von der Idee bis zum Live-Gang."
- *Subtext*: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google." - *Subtext*: "Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut."
- *CTA*: Primärer Button "Projekt anfragen". - *CTA*: Primärer Button "Projekt anfragen".
- **Zelle 2 (Mittel - Das Versprechen)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code. - **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)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90). - **Zelle 3 (Klein - USP)**: Visualisierung: PageSpeed-Score >95% (Fokus auf extreme Ladegeschwindigkeit).
### Services & Expertise (Bento-Raster Mitte) ### Die 3 Kern-Säulen (Zentrales Bento-Raster)
- **Zelle 4 (Lang - Kernleistung)**: Individuelles Webdesign & UI/UX-Entwicklung von Grund auf. - **Zelle 4 (Groß - Säule 1: Webdesign)**:
- **Zelle 5 (Quadratisch)**: SEO-Fundament (Semantischer Code, strukturierte Daten für Google). - *Inhalt*: Individuelles UI/UX-Design & Entwicklung von Grund auf (Keine billigen WordPress-Templates). Blitzschnell im Code umgesetzt.
- **Zelle 6 (Quadratisch)**: Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates). - **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) ### Tech-Stack & Methode (Unteres Raster)
- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Sanity CMS). - **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Vercel/Netlify).
- **Zelle 8 (Mittel - Da noch keine Kunden)**: "Unser Ansatz" – Transparenter 3-Schritte-Prozess vom Erstgespräch zum Launch. - **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. - **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
- **Footer**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.
### Footer
- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.

8
src/components/Navbar.astro
View File

@@ -16,9 +16,9 @@ import { FaBars, FaTimes } from 'react-icons/fa';
<!-- Desktop Nav Links --> <!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center gap-8"> <nav class="hidden md:flex items-center gap-8">
<a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Services</a> <a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Leistungen</a>
<a href="#tech" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Tech-Stack</a> <a href="#tech" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
<a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Konzept</a> <a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Ablauf</a>
</nav> </nav>
<!-- Right controls --> <!-- Right controls -->
@@ -48,9 +48,9 @@ import { FaBars, FaTimes } from 'react-icons/fa';
</button> </button>
</div> </div>
<nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white"> <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white">
<a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Services</a> <a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
<a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a> <a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
<a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-3">Konzept</a> <a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
<a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-zinc-900 text-brand-arcticBlue border border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4"> <a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-zinc-900 text-brand-arcticBlue border border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
Erstgespräch buchen Erstgespräch buchen
</a> </a>

101
src/pages/index.astro
View File

@@ -3,17 +3,13 @@ import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro'; import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import { import {
FaArrowUp,
FaCheck, FaCheck,
FaLaptopCode, FaLaptopCode,
FaSearchDollar, FaSearchDollar,
FaServer, FaServer,
FaArrowRight, FaArrowRight,
FaReact,
FaLock,
FaEnvelope, FaEnvelope,
FaPhoneAlt, FaPhoneAlt
FaShieldAlt
} from 'react-icons/fa'; } from 'react-icons/fa';
--- ---
@@ -21,24 +17,23 @@ import {
<Navbar /> <Navbar />
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16"> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
<!-- Grid System Container --> <!-- Grid System Container (Bento architecture) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-auto">
<!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) --> <!-- ZELLE 1: HERO & HAUPTFOKUS (Span 2 cols on md, Span 2 rows) -->
<div class="md:col-span-2 md:row-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300"> <div class="md:col-span-2 md:row-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[350px] relative group overflow-hidden transition-all duration-300">
<div class="absolute inset-0 bg-radial-gradient from-brand-arcticBlue/5 to-transparent pointer-events-none"></div> <div class="absolute inset-0 bg-gradient-to-tr from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
<div> <div>
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6"> <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-6">
<span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span> <span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
Webdesign & UI/UX Entwicklung Webdesign & UI/UX Entwicklung
</div> </div>
<h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight"> <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
Webdesign, das konvertiert.<br/> Websites, die performen.<br/>
<span class="text-brand-arcticBlue">Ohne Kompromisse.</span> <span class="text-brand-arcticBlue">Von der Idee bis zum Live-Gang.</span>
</h1> </h1>
<p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed"> <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut.
Technisch perfekt programmiert. Sichtbar bei Google.
</p> </p>
</div> </div>
<div class="mt-8"> <div class="mt-8">
@@ -50,48 +45,46 @@ import {
</div> </div>
<!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) --> <!-- ZELLE 2: DAS VERSPRECHEN (Span 1 col) -->
<div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Keine Vorlagen</h2> <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Full-Service-Garantie</h2>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Jedes Design entsteht individuell direkt im Code. Keine vorgefertigten Pagebuilder-Templates. Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt. Keine versteckten Kosten, vollkommen transparent.
Maximale Flexibilität, minimaler Overhead.
</p> </p>
</div> </div>
<div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1"> <div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1">
<span>[ INDIVIDUELLER CODE ]</span> <span>[ ALL-IN-ONE SOLUTION ]</span>
</div> </div>
</div> </div>
<!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) --> <!-- ZELLE 3: PERFORMANCE-GARANTIE (Span 1 col) -->
<div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2> <h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Optimierte Ladezeiten für beste User Experience und Conversion Rates. Visualisierung des Pagespeed-Wertes. Extreme Ladegeschwindigkeit für glückliche Besucher.
</p> </p>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<div class="flex items-end justify-between mb-1"> <div class="flex items-end justify-between mb-1">
<span class="text-[10px] font-mono text-zinc-500">PAGESPEED SCORE</span> <span class="text-[10px] font-mono text-zinc-500">PAGESPEED SCORE</span>
<span class="text-emerald-400 font-mono text-sm font-bold">> 98%</span> <span class="text-emerald-400 font-mono text-sm font-bold">> 95%</span>
</div> </div>
<div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden"> <div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-emerald-400 h-full w-[98%] transition-all duration-500"></div> <div class="bg-emerald-400 h-full w-[96%] transition-all duration-500"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- ZELLE 4: KERNLEISTUNG (Span 2 cols on md) --> <!-- ZELLE 4: SÄULE 1 - WEBDESIGN (Span 2 cols on md) -->
<div id="services" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group"> <div id="services" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center transition-all duration-300 group">
<div class="max-w-md"> <div class="max-w-md">
<div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-3 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaLaptopCode class="w-6 h-6" /> <FaLaptopCode class="w-6 h-6" />
</div> </div>
<h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX von Grund auf</h3> <h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Wir gestalten benutzerfreundliche Interfaces, die Besucher fesseln und zu Kunden machen. Individuelles UI/UX-Design & Entwicklung von Grund auf. Keine billigen WordPress-Templates. Blitzschnell im Code umgesetzt.
Modernste Design-Pattern gepaart mit sauberem HTML5/CSS3.
</p> </p>
</div> </div>
<div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto"> <div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto">
@@ -99,68 +92,68 @@ import {
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping
</div> </div>
<div class="flex items-center gap-2 text-zinc-300 text-xs"> <div class="flex items-center gap-2 text-zinc-300 text-xs">
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Responsive Designs <FaCheck class="text-brand-arcticBlue w-3 h-3" /> Eigener Code
</div> </div>
<div class="flex items-center gap-2 text-zinc-300 text-xs"> <div class="flex items-center gap-2 text-zinc-300 text-xs">
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Modern UX Flows <FaCheck class="text-brand-arcticBlue w-3 h-3" /> SEO-optimiert
</div> </div>
</div> </div>
</div> </div>
<!-- ZELLE 5: SEO-FUNDAMENT (Span 1 col) --> <!-- ZELLE 5: SÄULE 2 - SEO & SICHTBARKEIT (Span 1 col) -->
<div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaSearchDollar class="w-5 h-5" /> <FaSearchDollar class="w-5 h-5" />
</div> </div>
<h3 class="text-lg font-bold text-white mb-2">SEO-Fundament</h3> <h3 class="text-lg font-bold text-white mb-2">Sichtbarkeit & SEO</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Semantischer Aufbau, fehlerfreie Überschriftenstruktur und Google Lighthouse-Optimierung standardmäßig integriert. Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
</p> </p>
</div> </div>
</div> </div>
<!-- ZELLE 7: TECH-STACK (Span 2 cols on md) --> <!-- ZELLE 7: TECH-STACK (Span 2 cols on md) -->
<div id="tech" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group"> <div id="tech" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">State-of-the-Art Tools</h3> <h3 class="text-xl font-bold text-white mb-4 uppercase tracking-wide">State-of-the-Art Tools</h3>
<p class="text-zinc-400 text-xs leading-relaxed mb-6"> <p class="text-zinc-400 text-xs leading-relaxed mb-6">
Wir setzen auf zukunftssichere Technologien für maximale Geschwindigkeit, Wartbarkeit und Skalierbarkeit. Wir setzen auf modernste Technologien für maximale Ladezeiten, Sicherheit und Skalierbarkeit.
</p> </p>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Astro</span> <span class="text-brand-arcticBlue font-semibold text-xs">Astro</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span> <span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">React</span> <span class="text-brand-arcticBlue font-semibold text-xs">React</span>
</div> </div>
<div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded hover:border-zinc-700 transition-colors"> <div class="flex items-center gap-3 p-3 bg-zinc-950/60 border border-brand-darkBorder rounded hover:border-brand-arcticBlue transition-colors">
<span class="text-brand-arcticBlue font-semibold text-xs">Sanity CMS</span> <span class="text-brand-arcticBlue font-semibold text-xs">Vercel / Netlify</span>
</div> </div>
</div> </div>
</div> </div>
<!-- ZELLE 6: WARTUNG & HOSTING (Span 1 col) --> <!-- ZELLE 6: SÄULE 3 - HOSTING & BETRIEB (Span 1 col) -->
<div class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue"> <div class="p-2.5 bg-brand-arcticBlue/5 border border-brand-arcticBlue/10 rounded w-fit mb-4 text-brand-arcticBlue">
<FaServer class="w-5 h-5" /> <FaServer class="w-5 h-5" />
</div> </div>
<h3 class="text-lg font-bold text-white mb-2">Hosting & DSGVO</h3> <h3 class="text-lg font-bold text-white mb-2">Hosting & Betrieb</h3>
<p class="text-zinc-400 text-xs leading-relaxed"> <p class="text-zinc-400 text-xs leading-relaxed">
Updates, Backups, SSL-Zertifikate und rechtssichere Cookie-Consent-Lösungen aus einer Hand. Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
</p> </p>
</div> </div>
</div> </div>
<!-- ZELLE 8: UNSER ANSATZ (Span 1 col) --> <!-- ZELLE 8: UNSER 3-SCHRITTE-PROZESS (Span 1 col) -->
<div id="concept" class="bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group"> <div id="concept" class="bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 group">
<div> <div>
<h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser Ansatz</h3> <h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser 3-Schritte-Prozess</h3>
<ol class="space-y-4"> <ol class="space-y-4">
<li class="flex gap-3"> <li class="flex gap-3">
<span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span> <span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span>
@@ -172,15 +165,15 @@ import {
<li class="flex gap-3"> <li class="flex gap-3">
<span class="text-brand-arcticBlue font-mono text-xs font-bold">02</span> <span class="text-brand-arcticBlue font-mono text-xs font-bold">02</span>
<div> <div>
<h4 class="text-xs font-bold text-white">Entwicklung</h4> <h4 class="text-xs font-bold text-white">Design & Code</h4>
<p class="text-[10px] text-zinc-400">Programmierung & SEO-Optimierung.</p> <p class="text-[10px] text-zinc-400">Programmierung & SEO.</p>
</div> </div>
</li> </li>
<li class="flex gap-3"> <li class="flex gap-3">
<span class="text-brand-arcticBlue font-mono text-xs font-bold">03</span> <span class="text-brand-arcticBlue font-mono text-xs font-bold">03</span>
<div> <div>
<h4 class="text-xs font-bold text-white">Launch</h4> <h4 class="text-xs font-bold text-white">Hosting & Launch</h4>
<p class="text-[10px] text-zinc-400">Livegang & Support.</p> <p class="text-[10px] text-zinc-400">Livegang & Betreuung.</p>
</div> </div>
</li> </li>
</ol> </ol>
@@ -188,7 +181,7 @@ import {
</div> </div>
<!-- ZELLE 9: KONTAKT (Span 2 cols on md) --> <!-- ZELLE 9: KONTAKT (Span 2 cols on md) -->
<div id="contact" class="md:col-span-2 bg-zinc-900/40 border border-zinc-800/80 hover:border-brand-arcticBlue/20 rounded-2xl p-8 sm:p-10 transition-all duration-300 group"> <div id="contact" class="md:col-span-2 bg-brand-darkCard/40 border border-brand-darkBorder hover:border-brand-arcticBlue hover:shadow-[0_0_15px_rgba(56,189,248,0.15)] rounded-2xl p-8 sm:p-10 transition-all duration-300 group">
<h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3> <h3 class="text-2xl font-bold text-white mb-2">Bereit für Ihr Projekt?</h3>
<p class="text-zinc-400 text-xs mb-8"> <p class="text-zinc-400 text-xs mb-8">
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden. Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.
@@ -198,16 +191,16 @@ import {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label for="name" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Name</label> <label for="name" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Name</label>
<input type="text" id="name" required class="w-full bg-zinc-950 border border-zinc-800 rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" /> <input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
</div> </div>
<div> <div>
<label for="email" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">E-Mail</label> <label for="email" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">E-Mail</label>
<input type="email" id="email" required class="w-full bg-zinc-950 border border-zinc-800 rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" /> <input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
</div> </div>
</div> </div>
<div> <div>
<label for="message" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Nachricht</label> <label for="message" class="block text-[10px] font-semibold text-zinc-500 uppercase mb-1">Nachricht</label>
<textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-zinc-800 rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea> <textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
</div> </div>
<button type="submit" class="w-full sm:w-auto px-6 py-3 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200"> <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
Senden Senden

8
tailwind.config.mjs
View File

@@ -6,10 +6,10 @@ export default {
extend: { extend: {
colors: { colors: {
brand: { brand: {
darkBg: '#09090b', darkBg: '#0b0f19',
darkCard: '#18181b', darkCard: '#151b2c',
darkBorder: '#27272a', darkBorder: '#232d45',
arcticBlue: '#00d2ff', arcticBlue: '#38bdf8',
lightText: '#f4f4f5', lightText: '#f4f4f5',
} }
} }