feat: replace bento grid with hybrid liquid glass design and add darkmode toggle
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 31s
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 31s
This commit is contained in:
DanielS
@@ -1,150 +0,0 @@
|
|||||||
<!-- src/components/HeroAndBento.astro -->
|
|
||||||
<!-- Hero-Sektion: Erfüllt 3-Second-Rule & Conversion-UX -->
|
|
||||||
<section class="relative pt-32 pb-20 overflow-hidden bg-[#0B0F19] border-b border-white/5">
|
|
||||||
<!-- Tactile Blueprint-Raster im Hintergrund -->
|
|
||||||
<div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-size: 40px 40px; background-image: linear-gradient(to right, #38BDF8 1px, transparent 1px), linear-gradient(to bottom, #38BDF8 1px, transparent 1px);"></div>
|
|
||||||
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="max-w-3xl">
|
|
||||||
<!-- Utility Badge: Vorfilterung -->
|
|
||||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-sky-400/20 bg-sky-400/5 text-sky-400 text-[10px] font-mono font-bold uppercase tracking-wider mb-6">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
|
|
||||||
Digitalpartner für den deutschen Mittelstand
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Haupt-Überschrift (H1): Klarheit in unter 3 Sekunden -->
|
|
||||||
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight text-white mb-6 leading-tight">
|
|
||||||
Moderne Websites für Ihren Betrieb.<br/>
|
|
||||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-slate-200 to-white">
|
|
||||||
Komplett betreut. Absolut sorgenfrei.
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<!-- Zielgruppen-Ansprache & Einwand-Vorwegnahme -->
|
|
||||||
<p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed mb-8">
|
|
||||||
Wir bauen, hosten und pflegen Ihren neuen Internetauftritt. Ohne Zeitaufwand für Sie, rechtssicher nach DSGVO auf deutschen Servern und optimiert für lokale Kunden bei Google.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Conversion-Fokus: Direkte CTAs (Optimale Daumenzone mobil) -->
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
<a href="#contact"
|
|
||||||
class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-500 hover:bg-white text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-sky-400 focus:outline-none"
|
|
||||||
aria-label="Kostenloses Erstgespräch anfragen">
|
|
||||||
Erstgespräch buchen
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
|
|
||||||
</a>
|
|
||||||
<a href="/templates"
|
|
||||||
class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-slate-900/60 hover:bg-slate-800 border border-white/10 text-white font-bold text-xs uppercase tracking-wider rounded transition-all focus:ring-2 focus:ring-offset-2 focus:ring-white/20 focus:outline-none"
|
|
||||||
aria-label="Vorlage-Designs ansehen">
|
|
||||||
Templates ansehen
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Haupt-Bento-Grid: Präzision, Wertigkeit & Content-Mix (Asymmetrisches Bento) -->
|
|
||||||
<section class="py-20 bg-[#0B0F19] relative">
|
|
||||||
<!-- Subtile CSS-Noise Textur für matte Haptik (tactile-craftsman-ui) -->
|
|
||||||
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
|
|
||||||
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-auto">
|
|
||||||
|
|
||||||
<!-- KACHEL 1: Visual Anchor (Haupt-Blickfang, 2 Spalten, 2 Zeilen) -->
|
|
||||||
<div class="md:col-span-2 md:row-span-2 bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[380px] relative group overflow-hidden transition-all duration-300">
|
|
||||||
<!-- Blueprint Eckmarkierungen für handwerkliche Präzision -->
|
|
||||||
<span class="absolute top-4 left-4 w-3 h-3 border-t border-l border-sky-400/30"></span>
|
|
||||||
<span class="absolute top-4 right-4 w-3 h-3 border-t border-r border-sky-400/30"></span>
|
|
||||||
<span class="absolute bottom-4 left-4 w-3 h-3 border-b border-l border-sky-400/30"></span>
|
|
||||||
<span class="absolute bottom-4 right-4 w-3 h-3 border-b border-r border-sky-400/30"></span>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<span class="text-[10px] font-mono font-bold text-sky-400 uppercase tracking-widest">[ DAS KONZEPT ]</span>
|
|
||||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-white mt-4 mb-4">Ihr digitaler Mitarbeiter für Neukunden</h2>
|
|
||||||
<p class="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-lg">
|
|
||||||
Eine gute Website ist kein Statussymbol, sondern Werkzeug. Wir programmieren Ihren Web-Auftritt so, dass er vollautomatisch Anfragen von echten Kunden aus Ihrer Region generiert.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8 pt-6 border-t border-white/5">
|
|
||||||
<div class="flex items-center gap-2 text-xs text-zinc-300">
|
|
||||||
<svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
|
||||||
<span>Keine Baukästen</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-xs text-zinc-300">
|
|
||||||
<svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
|
||||||
<span>100% DSGVO-sicher</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-xs text-zinc-300">
|
|
||||||
<svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
|
||||||
<span>Feste Monats-Pauschale</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KACHEL 2: USP Webdesign (1 Spalte) -->
|
|
||||||
<div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
|
|
||||||
<div>
|
|
||||||
<div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
|
|
||||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-bold text-white mb-2">Webdesign & UI/UX</h3>
|
|
||||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
|
||||||
Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ CODESCHREINEREI ]</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KACHEL 3: USP SEO (1 Spalte) -->
|
|
||||||
<div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
|
|
||||||
<div>
|
|
||||||
<div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
|
|
||||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-bold text-white mb-2">Lokale Sichtbarkeit</h3>
|
|
||||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
|
||||||
Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ GOOGLE-DOMINANZ ]</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KACHEL 4: USP Hosting (1 Spalte) -->
|
|
||||||
<div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
|
|
||||||
<div>
|
|
||||||
<div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
|
|
||||||
<svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-lg font-bold text-white mb-2">Sicheres Hosting</h3>
|
|
||||||
<p class="text-zinc-400 text-xs leading-relaxed">
|
|
||||||
Serverstandort Deutschland. Tägliche Backups, SSL-Verschlüsselung und volle Einhaltung aller DSGVO-Vorgaben.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ 100% REGELKONFORM ]</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KACHEL 5: Rhythmusbrecher (Daten / Metrik, 1 Spalte) -->
|
|
||||||
<div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative">
|
|
||||||
<div>
|
|
||||||
<!-- Semantisch korrekt: Keine Headline, da reiner Datenpunkt -->
|
|
||||||
<div class="text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-wider mb-2">Google Lighthouse</div>
|
|
||||||
<div class="flex items-baseline gap-2">
|
|
||||||
<span class="text-4xl font-extrabold text-emerald-400 tracking-tight">100/100</span>
|
|
||||||
<span class="text-[10px] font-mono text-zinc-500">Punkte</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-zinc-400 text-xs mt-3 leading-relaxed">
|
|
||||||
Optimierter Code führt zu maximaler Geschwindigkeit im Mobilnetz. Keine Abbrüche bei schwachem Signal.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="w-full bg-zinc-800/80 h-1.5 rounded-full overflow-hidden mt-6" aria-hidden="true">
|
|
||||||
<div class="bg-emerald-400 h-full w-[100%] rounded-full shadow-[0_0_8px_#34d399]"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
236
src/components/HeroAndLiquidGlass.astro
Normal file
236
src/components/HeroAndLiquidGlass.astro
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
---
|
||||||
|
// src/components/HeroAndLiquidGlass.astro
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- Hero-Sektion: Hybrid Liquid Glass Style & Aurora Glow -->
|
||||||
|
<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#070A13] transition-colors duration-300">
|
||||||
|
<!-- Weiche, pastellfarbene Aurora Glows im Hintergrund (Light/Dark angepasst) -->
|
||||||
|
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-200/50 dark:bg-sky-500/10 blur-[130px] rounded-full pointer-events-none transition-colors duration-300 animate-drift"></div>
|
||||||
|
<div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-indigo-200/40 dark:bg-indigo-500/10 blur-[150px] rounded-full pointer-events-none transition-colors duration-300 animate-drift-delayed"></div>
|
||||||
|
|
||||||
|
<!-- Subtle Blueprint-Raster -->
|
||||||
|
<div class="absolute inset-0 opacity-[0.04] dark:opacity-[0.02] pointer-events-none transition-opacity duration-300" style="background-size: 30px 30px; background-image: linear-gradient(to right, #0284c7 1px, transparent 1px), linear-gradient(to bottom, #0284c7 1px, transparent 1px);"></div>
|
||||||
|
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||||
|
|
||||||
|
<!-- Text-Spalte -->
|
||||||
|
<div class="lg:col-span-7 space-y-8">
|
||||||
|
|
||||||
|
<h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300">
|
||||||
|
Moderne Websites <br/>
|
||||||
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-600 to-indigo-600 dark:from-sky-400 dark:via-indigo-300 dark:to-white">
|
||||||
|
für Ihren Betrieb.
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed transition-colors duration-300">
|
||||||
|
Wir bauen, hosten und pflegen Ihren neuen Internetauftritt. Ohne Zeitaufwand für Sie, rechtssicher nach DSGVO auf deutschen Servern und optimiert für lokale Kunden bei Google.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-4 pt-2">
|
||||||
|
<a href="#contact" class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-[0_4px_20px_rgba(2,132,199,0.2)] dark:shadow-[0_0_20px_rgba(56,189,248,0.2)]">
|
||||||
|
Erstgespräch buchen
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
|
||||||
|
</a>
|
||||||
|
<a href="/templates" class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-white hover:bg-slate-50 dark:bg-slate-900/60 dark:hover:bg-slate-800 border border-slate-200 dark:border-white/10 text-slate-700 dark:text-white font-bold text-xs uppercase tracking-wider rounded transition-all duration-300 shadow-sm backdrop-blur-md">
|
||||||
|
Templates ansehen
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Liquid Glass Visual Container (Rechte Spalte) -->
|
||||||
|
<div class="lg:col-span-5 relative flex justify-center items-center">
|
||||||
|
<!-- Weicher Glow -->
|
||||||
|
<div class="absolute w-72 h-72 bg-gradient-to-tr from-sky-200/30 to-indigo-200/30 dark:from-sky-400/20 dark:to-indigo-500/20 blur-3xl pointer-events-none rounded-full transition-colors duration-300"></div>
|
||||||
|
|
||||||
|
<!-- Milchglas Masterpiece Element (Hybrid Liquid Glass) -->
|
||||||
|
<div class="relative w-full max-w-[360px] aspect-[4/5] rounded-[32px] border border-white/80 dark:border-white/10 bg-white/40 dark:bg-slate-950/40 backdrop-blur-2xl shadow-[0_20px_50px_rgba(31,38,135,0.06)] dark:shadow-[0_24px_50px_-12px_rgba(0,0,0,0.5)] p-6 flex flex-col justify-between overflow-hidden group hover:border-sky-200/60 dark:hover:border-white/20 transition-all duration-500 animate-float">
|
||||||
|
<!-- Textur-Noise -->
|
||||||
|
<div class="absolute inset-0 opacity-[0.02] dark:opacity-[0.01] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px] transition-opacity duration-300"></div>
|
||||||
|
|
||||||
|
<!-- Helle innere Sphären -->
|
||||||
|
<div class="absolute -top-12 -right-12 w-32 h-32 rounded-full bg-sky-200/35 dark:bg-sky-400/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
|
||||||
|
<div class="absolute -bottom-16 -left-16 w-40 h-40 rounded-full bg-indigo-200/25 dark:bg-indigo-500/10 blur-xl group-hover:scale-110 transition-transform duration-700"></div>
|
||||||
|
|
||||||
|
<!-- Taktile Details -->
|
||||||
|
<span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/30"></span>
|
||||||
|
<span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/30"></span>
|
||||||
|
<span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/30"></span>
|
||||||
|
<span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/30"></span>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex justify-between items-center relative z-10">
|
||||||
|
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-500 tracking-widest">SYSTEM STATUS: ACTIVE</span>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-red-500/60"></span>
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-yellow-500/60"></span>
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-green-500/60"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grafik -->
|
||||||
|
<div class="my-auto relative z-10 flex flex-col items-center">
|
||||||
|
<div class="w-24 h-24 rounded-full border border-sky-200 dark:border-white/10 flex items-center justify-center bg-white/60 dark:bg-white/[0.02] relative group-hover:border-sky-400/40 transition-colors duration-500 shadow-inner">
|
||||||
|
<svg class="w-8 h-8 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-mono text-slate-800 dark:text-zinc-300 mt-4 tracking-wider uppercase font-bold">Lighthouse Perfekt</span>
|
||||||
|
<span class="text-[10px] text-slate-500 font-mono mt-1">Speed Index: 0.4s</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="relative z-10 border-t border-slate-100 dark:border-white/5 pt-4">
|
||||||
|
<div class="flex justify-between items-baseline">
|
||||||
|
<span class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span>
|
||||||
|
<span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Hauptinhalte: Elegantes Hybrid-Liquid Layout (Echtes Handwerk, kein KI-Standard-Raster) -->
|
||||||
|
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
|
||||||
|
<div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
|
||||||
|
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
|
||||||
|
<!-- Hero And Liquid Glass Details / Lead In -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 items-start reveal">
|
||||||
|
<div class="lg:col-span-8">
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase transition-colors duration-300">
|
||||||
|
Ihr digitaler Mitarbeiter für Neukunden.
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-sm mt-4 leading-relaxed max-w-2xl transition-colors duration-300">
|
||||||
|
Eine gute Website ist kein Statussymbol, sondern Werkzeug. Wir programmieren Ihren Web-Auftritt so, dass er vollautomatisch Anfragen von echten Kunden aus Ihrer Region generiert.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Keypoints in Light/Dark-Glass Container -->
|
||||||
|
<div class="lg:col-span-4 bg-white/50 border border-white dark:bg-transparent dark:border-white/5 p-6 rounded-2xl shadow-sm space-y-4 transition-colors duration-300">
|
||||||
|
<div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
|
||||||
|
<svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||||
|
<span>Keine Baukästen</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
|
||||||
|
<svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||||
|
<span>100% DSGVO-sicher</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-xs text-slate-700 dark:text-zinc-300 font-medium">
|
||||||
|
<svg class="w-4 h-4 text-emerald-500 dark:text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||||
|
<span>Feste Monats-Pauschale</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Liquid Glass Service Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
|
||||||
|
<!-- Card 1: Webdesign -->
|
||||||
|
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||||
|
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 rounded bg-sky-55 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||||
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign</h3>
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||||
|
Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 2: SEO -->
|
||||||
|
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||||
|
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||||
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</h3>
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||||
|
Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Google-Dominanz</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 3: Hosting -->
|
||||||
|
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
|
||||||
|
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
|
||||||
|
<svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sicheres Hosting</h3>
|
||||||
|
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
|
||||||
|
Serverstandort Deutschland. Tägliche Backups, SSL-Verschlüsselung und volle Einhaltung aller DSGVO-Vorgaben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes drift {
|
||||||
|
0%, 100% { transform: translate(0px, 0px) scale(1); }
|
||||||
|
33% { transform: translate(30px, -50px) scale(1.08); }
|
||||||
|
66% { transform: translate(-20px, 20px) scale(0.95); }
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-8px) rotate(0.5deg); }
|
||||||
|
}
|
||||||
|
.animate-drift {
|
||||||
|
animation: drift 22s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-drift-delayed {
|
||||||
|
animation: drift 28s ease-in-out infinite;
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll-driven Reveal */
|
||||||
|
.reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
.reveal.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Intersection Observer for scroll animations
|
||||||
|
const revealElements = document.querySelectorAll('.reveal');
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.05
|
||||||
|
});
|
||||||
|
|
||||||
|
revealElements.forEach(el => observer.observe(el));
|
||||||
|
</script>
|
||||||
@@ -3,33 +3,45 @@
|
|||||||
import { 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-3 bg-brand-darkBg/30 backdrop-blur-xl border-b border-brand-darkBorder">
|
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex items-center justify-between h-14">
|
<div class="flex items-center justify-between h-14">
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<a href="#" class="flex items-center gap-2 group">
|
<a href="#" class="flex items-center gap-2 group">
|
||||||
<span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
|
<span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
|
||||||
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- 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">Leistungen</a>
|
<a href="#services" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark: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-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark: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">Ablauf</a>
|
<a href="#concept" class="text-xs tracking-wider uppercase font-medium text-slate-600 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-colors">Ablauf</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Right controls -->
|
<!-- Right controls -->
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
|
<!-- Theme Toggle Button -->
|
||||||
|
<button id="theme-toggle" class="p-2 rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200" aria-label="Farbschema wechseln">
|
||||||
|
<!-- Moon Icon (shows when light mode is active -> switches to dark) -->
|
||||||
|
<svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||||
|
</svg>
|
||||||
|
<!-- Sun Icon (shows when dark mode is active -> switches to light) -->
|
||||||
|
<svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<!-- CTA button -->
|
<!-- CTA button -->
|
||||||
<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">
|
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
|
||||||
Erstgespräch buchen
|
Erstgespräch buchen
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<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">
|
<button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
|
||||||
<FaBars class="w-5 h-5" />
|
<FaBars class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,20 +50,20 @@ import { FaBars, FaTimes } from 'react-icons/fa';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu Drawer -->
|
<!-- Mobile Menu Drawer -->
|
||||||
<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 id="mobile-menu" class="fixed inset-0 z-50 bg-white dark:bg-brand-darkBg 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">
|
<div class="flex justify-between items-center p-6 border-b border-slate-200 dark:border-brand-darkBorder">
|
||||||
<span class="text-lg font-bold tracking-wider text-white">
|
<span class="text-lg font-bold tracking-wider text-slate-900 dark: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>
|
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||||
</span>
|
</span>
|
||||||
<button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
|
<button id="mobile-close-btn" class="p-2 rounded bg-slate-100 dark:bg-zinc-900 text-slate-700 dark:text-white hover:bg-slate-200 dark:hover:bg-zinc-800 transition-all" aria-label="Close Menu">
|
||||||
<FaTimes class="w-5 h-5" />
|
<FaTimes class="w-5 h-5" />
|
||||||
</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-slate-900 dark:text-white">
|
||||||
<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="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark: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-slate-100 dark: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">Ablauf</a>
|
<a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-slate-100 dark: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-slate-100 dark:bg-zinc-900 text-brand-arcticBlue border border-slate-200 dark:border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
|
||||||
Erstgespräch buchen
|
Erstgespräch buchen
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -65,14 +77,14 @@ import { FaBars, FaTimes } from 'react-icons/fa';
|
|||||||
const mobileCloseBtn = document.getElementById('mobile-close-btn');
|
const mobileCloseBtn = document.getElementById('mobile-close-btn');
|
||||||
const mobileMenu = document.getElementById('mobile-menu');
|
const mobileMenu = document.getElementById('mobile-menu');
|
||||||
|
|
||||||
// Change header opacity on scroll
|
// Change header styling on scroll
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener('scroll', () => {
|
||||||
if (window.scrollY > 30) {
|
if (window.scrollY > 30) {
|
||||||
header?.classList.remove('bg-brand-darkBg/30');
|
header?.classList.remove('bg-white/30', 'dark:bg-brand-darkBg/30');
|
||||||
header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
|
header?.classList.add('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
|
||||||
} else {
|
} else {
|
||||||
header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
|
header?.classList.remove('bg-white/80', 'dark:bg-brand-darkBg/80', 'shadow-md');
|
||||||
header?.classList.add('bg-brand-darkBg/30');
|
header?.classList.add('bg-white/30', 'dark:bg-brand-darkBg/30');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -89,4 +101,34 @@ import { FaBars, FaTimes } from 'react-icons/fa';
|
|||||||
const link = document.getElementById(`mobile-link-${i}`);
|
const link = document.getElementById(`mobile-link-${i}`);
|
||||||
link?.addEventListener('click', toggleMobileMenu);
|
link?.addEventListener('click', toggleMobileMenu);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Darkmode Toggle Logic
|
||||||
|
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||||
|
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||||
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||||
|
|
||||||
|
// Set initial icon state based on DOM class
|
||||||
|
function updateToggleIcons() {
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
themeToggleLightIcon?.classList.remove('hidden');
|
||||||
|
themeToggleDarkIcon?.classList.add('hidden');
|
||||||
|
} else {
|
||||||
|
themeToggleDarkIcon?.classList.remove('hidden');
|
||||||
|
themeToggleLightIcon?.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateToggleIcons();
|
||||||
|
|
||||||
|
themeToggleBtn?.addEventListener('click', () => {
|
||||||
|
// Toggle class
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
updateToggleIcons();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
|
|||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-brand-darkBg text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
|
<body class="bg-slate-50 dark:bg-brand-darkBg text-slate-800 dark:text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -2,15 +2,15 @@
|
|||||||
import Layout from '../layouts/Layout.astro';
|
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 HeroAndBento from '../components/HeroAndBento.astro';
|
import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
{/* Clean, modular Hero and Bento section (0 KB JS, tactile details) */}
|
{/* Clean, modular Hero and Liquid Glass section */}
|
||||||
<HeroAndBento />
|
<HeroAndLiquidGlass />
|
||||||
|
|
||||||
<!-- Contact section (separate, clean layout) -->
|
<!-- Contact section (separate, clean layout) -->
|
||||||
<section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
|
<section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
|
||||||
|
|||||||
Reference in New Issue
Block a user