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

initial commit

Browse Source
This commit is contained in:
DanielS
2026-06-30 22:51:26 +02:00
commit 3486145b9f
22 changed files with 9108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Navbar.astro Normal file
View File

@@ -0,0 +1,109 @@
---
// src/components/Navbar.astro
import { FaSun, FaMoon, 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">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- 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>
</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>
</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>
<!-- 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>
</div>
</div>
</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>
</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>
</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
</a>
</nav>
</div>
</header>
<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
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');
} 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');
}
});
// 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');
};
mobileMenuBtn?.addEventListener('click', toggleMobileMenu);
mobileCloseBtn?.addEventListener('click', toggleMobileMenu);
// Close mobile menu on link click
for (let i = 1; i <= 6; i++) {
const link = document.getElementById(`mobile-link-${i}`);
link?.addEventListener('click', toggleMobileMenu);
}
</script>