design: implement Bento-Grid and Corporate Dark Mode redesign
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 25s
This commit is contained in:
DanielS
@@ -1,44 +1,36 @@
|
||||
---
|
||||
// src/components/Navbar.astro
|
||||
import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
|
||||
import { FaBars, FaTimes } from 'react-icons/fa';
|
||||
---
|
||||
|
||||
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-4 bg-transparent">
|
||||
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-brand-darkBg/30 backdrop-blur-xl border-b border-brand-darkBorder">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center justify-between h-14">
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="#" class="flex items-center gap-2 group">
|
||||
<span class="text-xl sm:text-2xl font-bold tracking-wider text-white select-none">
|
||||
N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent group-hover:animate-pulse">i-t SOLUTIONS</span>
|
||||
<span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
|
||||
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden md:flex items-center gap-8">
|
||||
<a href="#" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Home</a>
|
||||
<a href="#services" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Services</a>
|
||||
<a href="#tech" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Tech-Stack</a>
|
||||
<a href="#about" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">About</a>
|
||||
<a href="#contact" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Kontakt</a>
|
||||
<a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Services</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>
|
||||
</nav>
|
||||
|
||||
<!-- Right controls -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Theme Toggle -->
|
||||
<button id="theme-toggle" class="p-2.5 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-cyan" aria-label="Toggle Theme">
|
||||
<span class="dark:hidden"><FaMoon class="w-5 h-5 text-yellow-300" /></span>
|
||||
<span class="hidden dark:inline"><FaSun class="w-5 h-5 text-orange-400" /></span>
|
||||
</button>
|
||||
|
||||
<!-- CTA button -->
|
||||
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-5 py-2 text-xs font-semibold tracking-wider text-white border border-brand-cyan rounded-full hover:bg-brand-cyan hover:text-brand-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(0,229,255,0.4)]">
|
||||
Anfrage starten
|
||||
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-white border border-brand-darkBorder rounded bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
|
||||
Erstgespräch buchen
|
||||
</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all focus:outline-none" aria-label="Open Menu">
|
||||
<FaBars class="w-6 h-6" />
|
||||
<button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
|
||||
<FaBars class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -46,23 +38,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Drawer -->
|
||||
<div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-primary/95 backdrop-blur-lg md:hidden translate-x-full transition-transform duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center p-6 border-b border-white/10">
|
||||
<span class="text-xl font-bold tracking-wider text-white">
|
||||
N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
<div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-darkBg/98 backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center p-6 border-b border-brand-darkBorder">
|
||||
<span class="text-lg font-bold tracking-wider text-white">
|
||||
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
</span>
|
||||
<button id="mobile-close-btn" class="p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all" aria-label="Close Menu">
|
||||
<FaTimes class="w-6 h-6" />
|
||||
<button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
|
||||
<FaTimes class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-6 p-8 text-center text-xl font-semibold text-white">
|
||||
<a href="#" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-1">Home</a>
|
||||
<a href="#services" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-2">Services</a>
|
||||
<a href="#tech" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-3">Tech-Stack</a>
|
||||
<a href="#about" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-4">About</a>
|
||||
<a href="#contact" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-5">Kontakt</a>
|
||||
<a href="#contact" class="inline-flex justify-center items-center py-3 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full mt-4" id="mobile-link-6">
|
||||
Anfrage starten
|
||||
<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="#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="#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
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -71,28 +61,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
|
||||
<script>
|
||||
// Elements
|
||||
const header = document.getElementById('main-header');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileCloseBtn = document.getElementById('mobile-close-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
// Change header background on scroll
|
||||
// Change header opacity on scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
header?.classList.remove('bg-transparent', 'py-4');
|
||||
header?.classList.add('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
|
||||
if (window.scrollY > 30) {
|
||||
header?.classList.remove('bg-brand-darkBg/30');
|
||||
header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
|
||||
} else {
|
||||
header?.classList.remove('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
|
||||
header?.classList.add('bg-transparent', 'py-4');
|
||||
header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
|
||||
header?.classList.add('bg-brand-darkBg/30');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle Theme
|
||||
themeToggle?.addEventListener('click', () => {
|
||||
const isDark = document.documentElement.classList.toggle('dark');
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
});
|
||||
|
||||
// Mobile Menu open/close
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenu?.classList.toggle('translate-x-full');
|
||||
@@ -102,7 +85,7 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
|
||||
mobileCloseBtn?.addEventListener('click', toggleMobileMenu);
|
||||
|
||||
// Close mobile menu on link click
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const link = document.getElementById(`mobile-link-${i}`);
|
||||
link?.addEventListener('click', toggleMobileMenu);
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-brand-lightBg text-brand-primary dark:bg-brand-darkBg dark:text-gray-100 font-sans transition-colors duration-300 antialiased selection:bg-brand-cyan selection:text-brand-primary">
|
||||
<body class="bg-brand-darkBg text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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';
|
||||
---
|
||||
|
||||
<Layout title="N&D i-t SOLUTIONS | Professionelles Webdesign & Websites für Kleinbetriebe">
|
||||
<Navbar />
|
||||
<main>
|
||||
<Hero />
|
||||
<Services />
|
||||
<TechStack />
|
||||
<About />
|
||||
</main>
|
||||
<Contact />
|
||||
<Footer />
|
||||
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
||||
<Navbar />
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
|
||||
<!-- Grid System Container -->
|
||||
<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) -->
|
||||
<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="absolute inset-0 bg-radial-gradient from-brand-arcticBlue/5 to-transparent pointer-events-none"></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">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-brand-arcticBlue animate-ping"></span>
|
||||
Webdesign & UI/UX Entwicklung
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-white mb-4 leading-tight">
|
||||
Webdesign, das konvertiert.<br/>
|
||||
<span class="text-brand-arcticBlue">Ohne Kompromisse.</span>
|
||||
</h1>
|
||||
<p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed">
|
||||
Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen.
|
||||
Technisch perfekt programmiert. Sichtbar bei Google.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200">
|
||||
Projekt anfragen
|
||||
<FaArrowRight class="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Keine Vorlagen</h2>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Jedes Design entsteht individuell direkt im Code. Keine vorgefertigten Pagebuilder-Templates.
|
||||
Maximale Flexibilität, minimaler Overhead.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-brand-arcticBlue font-mono text-[10px] mt-6 flex items-center gap-1">
|
||||
<span>[ INDIVIDUELLER CODE ]</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<h2 class="text-lg font-bold text-white mb-2 uppercase tracking-wide">Performance</h2>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Optimierte Ladezeiten für beste User Experience und Conversion Rates.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<div class="flex items-end justify-between mb-1">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 4: KERNLEISTUNG (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 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">
|
||||
<FaLaptopCode class="w-6 h-6" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">Webdesign & UI/UX von Grund auf</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Wir gestalten benutzerfreundliche Interfaces, die Besucher fesseln und zu Kunden machen.
|
||||
Modernste Design-Pattern gepaart mit sauberem HTML5/CSS3.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 shrink-0 w-full sm:w-auto">
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Figma Prototyping
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Responsive Designs
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-zinc-300 text-xs">
|
||||
<FaCheck class="text-brand-arcticBlue w-3 h-3" /> Modern UX Flows
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 5: SEO-FUNDAMENT (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>
|
||||
<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" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">SEO-Fundament</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Semantischer Aufbau, fehlerfreie Überschriftenstruktur und Google Lighthouse-Optimierung standardmäßig integriert.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<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">
|
||||
Wir setzen auf zukunftssichere Technologien für maximale Geschwindigkeit, Wartbarkeit und Skalierbarkeit.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Astro</span>
|
||||
</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">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Tailwind CSS</span>
|
||||
</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">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">React</span>
|
||||
</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">
|
||||
<span class="text-brand-arcticBlue font-semibold text-xs">Sanity CMS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 6: WARTUNG & HOSTING (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>
|
||||
<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" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Hosting & DSGVO</h3>
|
||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
||||
Updates, Backups, SSL-Zertifikate und rechtssichere Cookie-Consent-Lösungen aus einer Hand.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZELLE 8: UNSER ANSATZ (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>
|
||||
<h3 class="text-lg font-bold text-white mb-4 uppercase tracking-wide">Unser Ansatz</h3>
|
||||
<ol class="space-y-4">
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">01</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Erstgespräch</h4>
|
||||
<p class="text-[10px] text-zinc-400">Analyse Ihrer Anforderungen.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">02</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Entwicklung</h4>
|
||||
<p class="text-[10px] text-zinc-400">Programmierung & SEO-Optimierung.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="text-brand-arcticBlue font-mono text-xs font-bold">03</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-white">Launch</h4>
|
||||
<p class="text-[10px] text-zinc-400">Livegang & Support.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<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">
|
||||
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden.
|
||||
</p>
|
||||
|
||||
<form class="space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</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">
|
||||
Senden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user