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

design: implement Bento-Grid and Corporate Dark Mode redesign
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:55:27 +02:00
parent cb908bf023
commit 80773cacee
5 changed files with 289 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Navbar.astro
View File

@@ -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);
}