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

119
src/components/About.astro Normal file
View File

@@ -0,0 +1,119 @@
---
// src/components/About.astro
import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
---
<section id="about" class="py-24 bg-brand-lightBg dark:bg-brand-darkBg text-brand-primary dark:text-white transition-colors duration-300 relative overflow-hidden">
<!-- Interactive background blobs -->
<div class="absolute -top-40 right-1/4 w-96 h-96 bg-brand-cyan/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute -bottom-40 left-1/4 w-96 h-96 bg-brand-magenta/10 rounded-full blur-[100px] pointer-events-none"></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-2 gap-16 items-center">
<!-- Text/Profile Column -->
<div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out">
<h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unternehmensprofil</h2>
<h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white mb-6">
Wir schlagen die Brücke zwischen Business und modernster IT.
</h3>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-6 font-light">
N&D i-t SOLUTIONS wurde gegründet, um mittelständischen Unternehmen IT-Dienstleistungen auf Enterprise-Niveau anzubieten. Wir verknüpfen fundierte technologische Expertise mit strategischem Verständnis für Ihre Geschäftsprozesse.
</p>
<p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 font-light">
Unser Team besteht aus zertifizierten Cloud-Architekten, erfahrenen Full-Stack-Entwicklern und passionierten IT-Security-Spezialisten.
</p>
<!-- Fun facts -->
<div class="grid grid-cols-3 gap-6 text-center">
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">100%</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Erfolgsquote</span>
</div>
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">24/7</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Bereitschaft</span>
</div>
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">15+</span>
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Tech-Experten</span>
</div>
</div>
</div>
<!-- Glass-Morphism Cards Column -->
<div class="space-y-6">
<!-- Card 1: Vision -->
<div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-150 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="flex items-start gap-4">
<div class="p-3 rounded-2xl bg-brand-cyan/10 text-brand-cyan">
<FaRocket class="w-6 h-6" />
</div>
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Mission</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Wir machen komplexe IT-Herausforderungen beherrschbar und machen Ihr Business agil, skalierbar und absolut ausfallsicher.
</p>
</div>
</div>
</div>
<!-- Card 2: Werte -->
<div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-300 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="flex items-start gap-4">
<div class="p-3 rounded-2xl bg-brand-magenta/10 text-brand-magenta">
<FaEye class="w-6 h-6" />
</div>
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unsere Vision</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Eine Welt, in der B2B-Unternehmen durch modernste Cloud-Native Technologien und Softwarelösungen ihr volles Potenzial ausschöpfen können.
</p>
</div>
</div>
</div>
<!-- Card 3: Versprechen -->
<div class="fade-in-section opacity-0 translate-y-8 transition-all duration-1000 ease-out delay-450 p-8 rounded-3xl bg-white/30 dark:bg-brand-primary/40 border border-white/20 dark:border-white/5 backdrop-blur-md shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="flex items-start gap-4">
<div class="p-3 rounded-2xl bg-brand-cyan/10 text-brand-cyan">
<FaHandshake class="w-6 h-6" />
</div>
<div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Unser Versprechen</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed font-light">
Keine Knebelverträge, keine unfertigen Insellösungen. Nur ehrliche Partnerschaft auf Augenhöhe und erstklassige Ergebnisse.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// Intersection Observer for Scroll Fade-In Animation
const sections = document.querySelectorAll('.fade-in-section');
const observerOptions = {
threshold: 0.15,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.remove('opacity-0', 'translate-y-8');
entry.target.classList.add('opacity-100', 'translate-y-0');
observer.unobserve(entry.target);
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
</script>

330
src/components/Contact.astro Normal file
View File

@@ -0,0 +1,330 @@
---
// src/components/Contact.astro
import { FaTimes, FaEnvelope, FaUser, FaBuilding, FaCheckCircle, FaSpinner } from 'react-icons/fa';
---
<!-- Contact Modal Container -->
<div id="contact-modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4 bg-brand-primary/80 backdrop-blur-md transition-all duration-300">
<!-- Modal Box -->
<div class="relative w-full max-w-lg rounded-3xl bg-white dark:bg-brand-primary border border-gray-200 dark:border-white/10 shadow-2xl p-8 transform scale-95 opacity-0 transition-all duration-300 ease-out" id="modal-box">
<!-- Close Button -->
<button id="close-contact-modal" class="absolute top-6 right-6 p-2 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-500 dark:text-gray-400 hover:text-brand-primary dark:hover:text-white transition-all focus:outline-none" aria-label="Modal schließen">
<FaTimes class="w-5 h-5" />
</button>
<!-- Header -->
<div class="mb-8">
<h3 class="text-3xl font-bold text-brand-primary dark:text-white mb-2">Projekt anfragen</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm">
Erzählen Sie uns von Ihrem Vorhaben. Wir melden uns innerhalb von 24 Stunden.
</p>
</div>
<!-- Form -->
<form id="contact-form" class="space-y-5" novalidate>
<!-- Name Field -->
<div>
<label for="name" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Name *</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
<FaUser class="w-4 h-4" />
</span>
<input
type="text"
id="name"
name="name"
placeholder="Ihr vollständiger Name"
class="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white"
required
/>
</div>
<p class="error-msg text-xs text-red-500 mt-1 hidden">Bitte tragen Sie Ihren Namen ein.</p>
</div>
<!-- Firma Field -->
<div>
<label for="company" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Firma / Organisation</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
<FaBuilding class="w-4 h-4" />
</span>
<input
type="text"
id="company"
name="company"
placeholder="Name Ihres Unternehmens"
class="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white"
/>
</div>
</div>
<!-- Email Field -->
<div>
<label for="email" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">E-Mail-Adresse *</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400">
<FaEnvelope class="w-4 h-4" />
</span>
<input
type="email"
id="email"
name="email"
placeholder="ihre.adresse@firma.de"
class="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white"
required
/>
</div>
<p class="error-msg text-xs text-red-500 mt-1 hidden">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>
</div>
<!-- Message Field -->
<div>
<label for="message" class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Ihre Nachricht *</label>
<textarea
id="message"
name="message"
rows="4"
placeholder="Beschreiben Sie kurz Ihr Projekt..."
class="w-full p-4 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl focus:border-brand-cyan focus:outline-none focus:ring-1 focus:ring-brand-cyan transition-all text-brand-primary dark:text-white resize-none"
required
></textarea>
<p class="error-msg text-xs text-red-500 mt-1 hidden">Bitte schreiben Sie eine kurze Nachricht.</p>
</div>
<!-- Privacy Consent -->
<div class="flex items-start gap-3">
<input
type="checkbox"
id="privacy"
name="privacy"
class="mt-1 w-4 h-4 rounded text-brand-cyan border-gray-200 dark:border-white/10 focus:ring-brand-cyan"
required
/>
<label for="privacy" class="text-xs text-gray-500 dark:text-gray-400 leading-normal">
Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/privacy" target="_blank" class="text-brand-cyan hover:underline">Datenschutzerklärung</a> zu. *
</label>
</div>
<p id="privacy-error" class="error-msg text-xs text-red-500 hidden">Sie müssen der Datenschutzerklärung zustimmen.</p>
<!-- Submit Button with Pulse Glow -->
<button
type="submit"
id="submit-btn"
class="w-full py-4 mt-2 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-xl shadow-lg transition-all duration-300 hover:scale-[1.02] focus:outline-none hover:shadow-[0_0_20px_rgba(0,229,255,0.4)] relative overflow-hidden group active:scale-95"
>
<span id="btn-text">Anfrage senden</span>
<span id="btn-loader" class="hidden"><FaSpinner class="w-5 h-5 animate-spin" /></span>
</button>
</form>
</div>
</div>
<!-- Success Modal Container -->
<div id="success-modal" class="fixed inset-0 z-[120] hidden items-center justify-center p-4 bg-brand-primary/95 backdrop-blur-lg transition-all duration-300">
<div class="max-w-md w-full bg-white dark:bg-brand-primary border border-gray-200 dark:border-white/10 p-8 rounded-3xl shadow-2xl text-center transform scale-95 opacity-0 transition-all duration-300 ease-out" id="success-box">
<div class="text-brand-cyan mb-6 flex justify-center">
<FaCheckCircle class="w-16 h-16 animate-bounce" />
</div>
<h3 class="text-3xl font-bold text-brand-primary dark:text-white mb-4">Nachricht gesendet!</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed mb-8">
Vielen Dank für Ihre Anfrage. Wir haben Ihre Daten erhalten und setzen uns schnellstmöglich mit Ihnen in Verbindung.
</p>
<button id="close-success-btn" class="w-full py-3.5 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-xl transition-all duration-300 active:scale-95">
Fenster schließen
</button>
</div>
</div>
<script>
// Elements
const contactModal = document.getElementById('contact-modal');
const modalBox = document.getElementById('modal-box');
const closeContactModal = document.getElementById('close-contact-modal');
const contactForm = document.getElementById('contact-form') as HTMLFormElement;
const submitBtn = document.getElementById('submit-btn');
const btnText = document.getElementById('btn-text');
const btnLoader = document.getElementById('btn-loader');
const successModal = document.getElementById('success-modal');
const successBox = document.getElementById('success-box');
const closeSuccessBtn = document.getElementById('close-success-btn');
// Input Fields
const nameInput = document.getElementById('name') as HTMLInputElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const messageInput = document.getElementById('message') as HTMLTextAreaElement;
const privacyCheck = document.getElementById('privacy') as HTMLInputElement;
// Open Modal Logic
const openModal = () => {
contactModal?.classList.remove('hidden');
contactModal?.classList.add('flex');
// Force reflow for transitions
setTimeout(() => {
modalBox?.classList.remove('scale-95', 'opacity-0');
modalBox?.classList.add('scale-100', 'opacity-100');
}, 10);
document.body.style.overflow = 'hidden'; // Lock background scroll
};
// Close Modal Logic
const closeModal = () => {
modalBox?.classList.remove('scale-100', 'opacity-100');
modalBox?.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
contactModal?.classList.remove('flex');
contactModal?.classList.add('hidden');
document.body.style.overflow = ''; // Unlock background scroll
}, 300);
};
// Hook all buttons/links to contact modal
document.addEventListener('click', (e) => {
const target = e.target as HTMLElement;
// Find closest anchor or button targeting contact
const trigger = target.closest('a[href="#contact"], .contact-trigger');
if (trigger) {
e.preventDefault();
openModal();
}
});
closeContactModal?.addEventListener('click', closeModal);
// Close on backdrop click
contactModal?.addEventListener('click', (e) => {
if (e.target === contactModal) {
closeModal();
}
});
// Validation functions
const validateField = (input: HTMLInputElement | HTMLTextAreaElement, errorClassIndex: number) => {
const errorMsg = input.parentElement?.nextElementSibling as HTMLElement;
let isValid = true;
if (input.required) {
if (!input.value.trim()) {
isValid = false;
} else if (input.type === 'email') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
isValid = emailRegex.test(input.value.trim());
}
}
if (!isValid) {
input.classList.remove('focus:border-brand-cyan', 'focus:ring-brand-cyan', 'border-gray-200', 'dark:border-white/10');
input.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
if (errorMsg) errorMsg.classList.remove('hidden');
} else {
input.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
input.classList.add('focus:border-brand-cyan', 'focus:ring-brand-cyan', 'border-gray-200', 'dark:border-white/10');
if (errorMsg) errorMsg.classList.add('hidden');
}
return isValid;
};
// Blur & Input Validation
[nameInput, emailInput, messageInput].forEach((input) => {
input?.addEventListener('blur', () => validateField(input, 0));
input?.addEventListener('input', () => validateField(input, 0));
});
privacyCheck?.addEventListener('change', () => {
const errorMsg = document.getElementById('privacy-error');
if (!privacyCheck.checked) {
errorMsg?.classList.remove('hidden');
} else {
errorMsg?.classList.add('hidden');
}
});
// Form Submission
contactForm?.addEventListener('submit', (e) => {
e.preventDefault();
const isNameValid = validateField(nameInput, 0);
const isEmailValid = validateField(emailInput, 0);
const isMsgValid = validateField(messageInput, 0);
const isPrivacyValid = privacyCheck.checked;
const privacyError = document.getElementById('privacy-error');
if (!isPrivacyValid) {
privacyError?.classList.remove('hidden');
} else {
privacyError?.classList.add('hidden');
}
if (isNameValid && isEmailValid && isMsgValid && isPrivacyValid) {
// Simulate API submit
submitBtn?.classList.add('pointer-events-none');
btnText?.classList.add('hidden');
btnLoader?.classList.remove('hidden');
setTimeout(() => {
// Reset loader
submitBtn?.classList.remove('pointer-events-none');
btnText?.classList.remove('hidden');
btnLoader?.classList.add('hidden');
// Reset Form
contactForm.reset();
// Transition Modals
closeModal();
setTimeout(() => {
// Open Success Modal
successModal?.classList.remove('hidden');
successModal?.classList.add('flex');
setTimeout(() => {
successBox?.classList.remove('scale-95', 'opacity-0');
successBox?.classList.add('scale-100', 'opacity-100');
}, 10);
document.body.style.overflow = 'hidden';
}, 350);
}, 1500);
}
});
// Success Modal Close
const closeSuccess = () => {
successBox?.classList.remove('scale-100', 'opacity-100');
successBox?.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
successModal?.classList.remove('flex');
successModal?.classList.add('hidden');
document.body.style.overflow = '';
}, 300);
};
closeSuccessBtn?.addEventListener('click', closeSuccess);
successModal?.addEventListener('click', (e) => {
if (e.target === successModal) {
closeSuccess();
}
});
</script>
<style>
/* Pulse Glow animation for submit button hover */
#submit-btn {
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(0, 229, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
}
}
</style>

43
src/components/Footer.astro Normal file
View File

@@ -0,0 +1,43 @@
---
// src/components/Footer.astro
const currentYear = new Date().getFullYear();
---
<footer class="bg-brand-primary border-t border-white/5 py-12 text-gray-400 text-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-white/5 pb-8 mb-8">
<!-- Brand logo/name -->
<div>
<a href="#" class="text-lg 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>
</a>
<p class="mt-2 text-xs text-gray-500 max-w-sm">
Ihr Partner für zukunftssichere IT-Dienstleistungen, Softwareentwicklung und IT-Sicherheit.
</p>
</div>
<!-- Footer Quick Links -->
<nav class="flex flex-wrap gap-x-8 gap-y-2 justify-center">
<a href="#" class="hover:text-brand-cyan transition-colors">Home</a>
<a href="#services" class="hover:text-brand-cyan transition-colors">Services</a>
<a href="#tech" class="hover:text-brand-cyan transition-colors">Tech-Stack</a>
<a href="#about" class="hover:text-brand-cyan transition-colors">About</a>
<a href="#contact" class="hover:text-brand-cyan transition-colors">Kontakt</a>
</nav>
</div>
<!-- Bottom Copyright & Legal Links -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
<div>
&copy; {currentYear} N&D i-t SOLUTIONS. Alle Rechte vorbehalten.
</div>
<div class="flex gap-6">
<a href="/privacy" class="hover:text-white transition-colors">Datenschutz</a>
<span class="text-white/10">|</span>
<a href="/privacy#impressum" class="hover:text-white transition-colors">Impressum</a>
</div>
</div>
</div>
</footer>

91
src/components/Hero.astro Normal file
View File

@@ -0,0 +1,91 @@
---
// src/components/Hero.astro
import { FaArrowRight } from 'react-icons/fa';
---
<section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden bg-brand-primary">
<!-- Background Video with image fallback -->
<div class="absolute inset-0 w-full h-full z-0 overflow-hidden">
<!-- Parallax scrolling wrapper -->
<div id="hero-bg" class="absolute inset-0 w-full h-full transition-transform duration-75 ease-out scale-110">
<video
autoplay
loop
muted
playsinline
class="w-full h-full object-cover object-center filter brightness-[0.4]"
poster="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80"
>
<source src="https://cdn.pixabay.com/video/2019/04/16/22909-331666687_large.mp4" type="video/mp4" />
<!-- Fallback if video fails -->
<div class="w-full h-full bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80')"></div>
</video>
</div>
</div>
<!-- Ambient Glow -->
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-cyan/20 rounded-full blur-[120px] pointer-events-none animate-pulse"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-magenta/15 rounded-full blur-[120px] pointer-events-none animate-pulse" style="animation-delay: 2s;"></div>
<!-- Glassmorphism overlay for extra futuristic depth -->
<div class="absolute inset-0 bg-brand-primary/40 backdrop-blur-[2px] z-0"></div>
<!-- Content -->
<div id="hero-content" class="relative z-10 text-center px-4 max-w-4xl transition-transform duration-75 ease-out">
<!-- Neon badge -->
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-brand-cyan/30 bg-brand-cyan/5 text-brand-cyan text-xs font-semibold uppercase tracking-widest mb-6 animate-bounce">
<span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>
IT-Consulting & Development
</div>
<!-- Title with cyan/magenta highlights -->
<h1 class="text-5xl md:text-8xl font-extrabold text-white mb-6 tracking-tight drop-shadow-[0_5px_15px_rgba(0,0,0,0.8)] uppercase">
N&D <span class="bg-gradient-to-r from-brand-cyan via-purple-500 to-brand-magenta bg-clip-text text-transparent drop-shadow-none">i-t SOLUTIONS</span>
</h1>
<p class="text-lg md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto font-light drop-shadow-md">
Zukunftssichere IT-Dienstleistungen und modernste Softwareentwicklung für Ihr Unternehmen.
</p>
<!-- Glowing CTA Button -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#services"
class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full shadow-[0_0_20px_rgba(0,229,255,0.4)] hover:shadow-[0_0_35px_rgba(255,0,255,0.6)] hover:scale-105 active:scale-95 transform transition-all duration-300">
Mehr erfahren
<FaArrowRight class="w-4 h-4 text-brand-primary group-hover:translate-x-1.5 transition-transform duration-300" />
</a>
<a href="#contact"
class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 hover:border-brand-cyan/50 bg-white/5 hover:bg-white/10 text-white font-medium rounded-full backdrop-blur-sm transition-all duration-300">
Kontakt aufnehmen
</a>
</div>
</div>
<!-- Scroll Down Indicator -->
<a href="#services" class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce z-10 p-2 text-white hover:text-brand-cyan transition-colors" aria-label="Scroll to services">
<svg class="w-8 h-8 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"/>
</svg>
</a>
</section>
<script>
const bg = document.getElementById('hero-bg');
const content = document.getElementById('hero-content');
// Parallax Scroll Effect
window.addEventListener('scroll', () => {
const scroll = window.scrollY;
if (scroll < window.innerHeight) {
if (bg) bg.style.transform = `translateY(${scroll * 0.3}px) scale(1.1)`;
if (content) {
content.style.transform = `translateY(${scroll * 0.15}px)`;
content.style.opacity = (1 - scroll / (window.innerHeight * 0.8)).toString();
}
}
});
</script>

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>

300
src/components/Services.astro Normal file
View File

@@ -0,0 +1,300 @@
---
// src/components/Services.astro
---
<section id="services" class="py-24 bg-brand-lightBg dark:bg-brand-primary relative overflow-hidden">
<!-- Ambient background glow -->
<div class="absolute -top-40 -left-40 w-96 h-96 bg-brand-cyan/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute -bottom-40 -right-40 w-96 h-96 bg-brand-magenta/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unsere Leistungen</h2>
<h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white">
Maßgeschneiderte Lösungen für digitale Exzellenz
</h3>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
Wir begleiten Ihr Unternehmen auf dem Weg der digitalen Transformation mit zukunftssicheren IT-Infrastrukturen und Software.
</p>
</div>
<!-- Flip Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Cloud Infrastruktur -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Cloud Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Cloud-Infrastruktur</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Skalierbare Multi-Cloud-Lösungen (AWS & Azure) für maximale Flexibilität, Verfügbarkeit und Kostenkontrolle.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-brand-primary text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Cloud & DevOps</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ AWS, Azure, Google Cloud</li>
<li class="flex items-center gap-2">✓ Infrastructure as Code (Terraform)</li>
<li class="flex items-center gap-2">✓ CI/CD Pipelines (GitHub Actions)</li>
<li class="flex items-center gap-2">✓ Kubernetes & Docker Container</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
Beratung anfordern
</a>
</div>
</div>
</div>
<!-- Card 2: Softwareentwicklung -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Code Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Softwareentwicklung</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Maßgeschneiderte Webanwendungen, APIs und mobile Apps entwickelt mit modernsten Frameworks.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-purple-900 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Individuelle Software</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ React, Vue, Next.js & Astro</li>
<li class="flex items-center gap-2">✓ Node.js & Go Backend APIs</li>
<li class="flex items-center gap-2">✓ Mobile Apps (React Native)</li>
<li class="flex items-center gap-2">✓ Datenbanken (Postgres, Redis)</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
Projekt anfragen
</a>
</div>
</div>
</div>
<!-- Card 3: IT-Security & Compliance -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Shield Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">IT-Security & Audits</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Umfassende Sicherheitsanalysen, Penetration Testing und ISO 27001-Audits zum Schutz Ihrer Unternehmensdaten.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/90 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Sicherheit & Compliance</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Penetration Testing & Audits</li>
<li class="flex items-center gap-2">✓ ISO 27001 & TISAX Vorbereitung</li>
<li class="flex items-center gap-2">✓ Vulnerability Scans</li>
<li class="flex items-center gap-2">✓ Security-Awareness Trainings</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
Sicherheit prüfen
</a>
</div>
</div>
</div>
<!-- Card 4: Managed IT-Services -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- Cpu Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 6.75v10.5a2.25 2.25 0 002.25 2.25zm.75-12h9v9h-9v-9z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Managed IT-Services</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Rund-um-die-Uhr-Support, Systemmonitoring und proaktive Wartung Ihrer IT-Systeme für reibungslose Abläufe.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-primary/95 to-purple-950 text-white border border-brand-cyan/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Rund-um-die-Uhr IT</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ 24/7 Monitoring & Alerting</li>
<li class="flex items-center gap-2">✓ Microsoft 365 / Google Workspace</li>
<li class="flex items-center gap-2">✓ Backup & Disaster Recovery</li>
<li class="flex items-center gap-2">✓ MDM & MDM-Hardware Management</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
Support anfragen
</a>
</div>
</div>
</div>
<!-- Card 5: IT-Consulting & Strategie -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- UserGroup Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.109A11.386 11.386 0 0110.089 20a11.386 11.386 0 01-4.912-.763v-.109m0 0a3.001 3.001 0 00-3.758 3.848 5.25 5.25 0 0010.233-2.33M3 16.128c0-1.113.285-2.16.786-3.07M15 7.5a3 3 0 11-6 0 3 3 0 016 0zm6 2.25a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">IT-Consulting & Strategie</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Herstellerunabhängige Beratung, Machbarkeitsstudien und Digitalisierungsfahrpläne für Ihr Business.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-purple-950 text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Strategische Beratung</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ IT-Audits & Bestandsaufnahme</li>
<li class="flex items-center gap-2">✓ Digitalisierungsberatung</li>
<li class="flex items-center gap-2">✓ Architektur-Reviews (B2B)</li>
<li class="flex items-center gap-2">✓ Budget- & Wirtschaftlichkeitsanalysen</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
Termin buchen
</a>
</div>
</div>
</div>
<!-- Card 6: Data & AI Solutions -->
<div class="w-full h-80 group perspective cursor-pointer">
<div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
<!-- Front -->
<div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
<div>
<div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
<!-- PresentationChart Icon with stroke animation -->
<svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v16.5m0 0L21 12m-17.25 7.5L21 7.5m-17.25 12h16.5"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Data & AI Solutions</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Intelligente Datenauswertungen, künstliche Intelligenz und maschinelles Lernen zur Optimierung von Geschäftsprozessen.
</p>
</div>
<span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
</span>
</div>
<!-- Back -->
<div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/80 to-brand-primary text-white border border-brand-magenta/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
<div>
<h4 class="text-xl font-bold mb-4">Künstliche Intelligenz</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ AI-Integration (OpenAI, Gemini)</li>
<li class="flex items-center gap-2">✓ Business Intelligence (BI Dashboards)</li>
<li class="flex items-center gap-2">✓ Automatisierte Datenverarbeitung</li>
<li class="flex items-center gap-2">✓ Predictive Analytics</li>
</ul>
</div>
<a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
Potenziale besprechen
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
/* 3D Flip Card Styles */
.perspective {
perspective: 1000px;
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
/* Stroke-to-fill and stroke animations */
.stroke-anim path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 1.5s ease-in-out, fill 0.5s ease-out;
}
.group:hover .stroke-anim path {
stroke-dashoffset: 0;
}
</style>
<script>
// Dynamically set stroke-dasharray based on path length on load
document.addEventListener('DOMContentLoaded', () => {
const svgPaths = document.querySelectorAll('.stroke-anim path');
svgPaths.forEach((path) => {
const pathEl = path as SVGPathElement;
const length = pathEl.getTotalLength();
pathEl.style.strokeDasharray = `${length}`;
pathEl.style.strokeDashoffset = `${length}`;
});
});
</script>

113
src/components/TechStack.astro Normal file
View File

@@ -0,0 +1,113 @@
---
// src/components/TechStack.astro
import {
SiReact,
SiAstro,
SiNodedotjs,
SiTypescript,
SiDocker,
SiKubernetes,
SiTerraform,
SiTailwindcss,
SiPostgresql,
SiGo,
SiPython
} from 'react-icons/si';
import { FaAws } from 'react-icons/fa';
const technologies = [
{ name: 'React', icon: SiReact, color: 'text-[#61DAFB]', desc: 'Frontend-Bibliothek für interaktive UIs' },
{ name: 'Astro', icon: SiAstro, color: 'text-[#FF5D01]', desc: 'Modernes Web-Framework für Performance' },
{ name: 'Node.js', icon: SiNodedotjs, color: 'text-[#339933]', desc: 'Skalierbare Server-Laufzeitumgebung' },
{ name: 'TypeScript', icon: SiTypescript, color: 'text-[#3178C6]', desc: 'Typsicheres JavaScript für stabilen Code' },
{ name: 'Docker', icon: SiDocker, color: 'text-[#2496ED]', desc: 'Containerisierung für konsistente Deployments' },
{ name: 'Kubernetes', icon: SiKubernetes, color: 'text-[#326CE5]', desc: 'Orchestrierung von containerbasierten Apps' },
{ name: 'AWS', icon: FaAws, color: 'text-[#FF9900]', desc: 'Umfassende, sichere Cloud-Infrastruktur' },
{ name: 'Terraform', icon: SiTerraform, color: 'text-[#844FBA]', desc: 'Infrastructure as Code zur Automatisierung' },
{ name: 'Tailwind CSS', icon: SiTailwindcss, color: 'text-[#06B6D4]', desc: 'Utility-First CSS für modernes Design' },
{ name: 'PostgreSQL', icon: SiPostgresql, color: 'text-[#4169E1]', desc: 'Zuverlässiges, relationales Datenbanksystem' },
{ name: 'Go', icon: SiGo, color: 'text-[#00ADD8]', desc: 'Schnelle & effiziente Backend-Entwicklung' },
{ name: 'Python', icon: SiPython, color: 'text-[#3776AB]', desc: 'Künstliche Intelligenz und Datenanalyse' },
];
---
<section id="tech" class="py-24 bg-brand-primary text-white overflow-hidden relative border-y border-white/5">
<!-- Glowing accents -->
<div class="absolute top-1/2 left-0 -translate-y-1/2 w-48 h-48 bg-brand-cyan/10 rounded-full blur-[80px] pointer-events-none"></div>
<div class="absolute top-1/2 right-0 -translate-y-1/2 w-48 h-48 bg-brand-magenta/10 rounded-full blur-[80px] pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 mb-12">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-xs font-bold tracking-widest text-brand-magenta uppercase mb-3">Tech-Stack</h2>
<h3 class="text-4xl font-bold text-white">Unsere Werkzeuge für Ihren Erfolg</h3>
<p class="mt-4 text-gray-400 text-sm">
Wir setzen auf modernste, zukunftssichere Technologien, um robuste, performante und skalierbare Systeme zu schaffen.
</p>
</div>
</div>
<!-- Auto-Scrolling Slider (Marquee) -->
<div class="w-full flex overflow-x-hidden relative py-6">
<!-- Left fade gradient -->
<div class="absolute left-0 top-0 bottom-0 w-24 sm:w-48 bg-gradient-to-r from-brand-primary to-transparent z-10 pointer-events-none"></div>
<!-- Right fade gradient -->
<div class="absolute right-0 top-0 bottom-0 w-24 sm:w-48 bg-gradient-to-l from-brand-primary to-transparent z-10 pointer-events-none"></div>
<!-- Double list for infinite loop -->
<div class="flex gap-12 sm:gap-20 items-center animate-marquee whitespace-nowrap">
{technologies.map((tech) => {
const IconComponent = tech.icon;
return (
<div class="group relative flex flex-col items-center justify-center cursor-help">
<!-- Icon Box -->
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl bg-white/5 border border-white/10 hover:border-brand-cyan/50 hover:bg-white/10 transition-all duration-300 flex items-center justify-center text-5xl hover:shadow-[0_0_20px_rgba(0,229,255,0.2)]">
<IconComponent class={`w-10 h-10 sm:w-12 sm:h-12 ${tech.color} transition-transform duration-300 group-hover:scale-110`} />
</div>
<!-- Custom Premium Tooltip -->
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-56 p-4 rounded-xl bg-brand-primary border border-white/15 shadow-2xl opacity-0 scale-95 pointer-events-none group-hover:opacity-100 group-hover:scale-100 transition-all duration-200 z-50 text-center">
<h4 class="font-bold text-white text-sm mb-1">{tech.name}</h4>
<p class="text-xs text-gray-400 leading-relaxed">{tech.desc}</p>
<div class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-primary border-r border-b border-white/15 rotate-45"></div>
</div>
</div>
);
})}
</div>
<!-- Duplicate for infinite seamless scroll -->
<div class="flex gap-12 sm:gap-20 items-center animate-marquee whitespace-nowrap" aria-hidden="true">
{technologies.map((tech) => {
const IconComponent = tech.icon;
return (
<div class="group relative flex flex-col items-center justify-center cursor-help">
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl bg-white/5 border border-white/10 hover:border-brand-cyan/50 hover:bg-white/10 transition-all duration-300 flex items-center justify-center text-5xl hover:shadow-[0_0_20px_rgba(0,229,255,0.2)]">
<IconComponent class={`w-10 h-10 sm:w-12 sm:h-12 ${tech.color} transition-transform duration-300 group-hover:scale-110`} />
</div>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-56 p-4 rounded-xl bg-brand-primary border border-white/15 shadow-2xl opacity-0 scale-95 pointer-events-none group-hover:opacity-100 group-hover:scale-100 transition-all duration-200 z-50 text-center">
<h4 class="font-bold text-white text-sm mb-1">{tech.name}</h4>
<p class="text-xs text-gray-400 leading-relaxed">{tech.desc}</p>
<div class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-primary border-r border-b border-white/15 rotate-45"></div>
</div>
</div>
);
})}
</div>
</div>
</section>
<style is:global>
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}
</style>

1
src/env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference path="../.astro/types.d.ts" />

81
src/layouts/Layout.astro Normal file
View File

@@ -0,0 +1,81 @@
---
interface Props {
title: string;
description?: string;
}
const { title, description = "Zukunftssichere IT-Dienstleistungen für Ihr Unternehmen. N&D i-t SOLUTIONS bietet Leistungsübersicht, Cloud-Architekturen, IT-Sicherheit und Softwareentwicklung." } = Astro.props;
---
<!doctype html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Inline script to set dark/light mode before page renders -->
<script is:inline>
(function() {
const theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();
</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">
<slot />
</body>
</html>
<style is:global>
:root {
--font-sans: 'Inter', sans-serif;
--font-display: 'Space Grotesk', sans-serif;
}
html {
font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
/* Parallax background custom scroll */
.parallax-bg {
background-attachment: fixed;
}
@media (max-width: 768px) {
.parallax-bg {
background-attachment: scroll;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: #222;
border-radius: 5px;
border: 2px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover {
background: #333;
}
</style>

22
src/pages/index.astro Normal file
View File

@@ -0,0 +1,22 @@
---
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';
---
<Layout title="N&D i-t SOLUTIONS | Zukunftssichere IT-Dienstleistungen">
<Navbar />
<main>
<Hero />
<Services />
<TechStack />
<About />
</main>
<Contact />
<Footer />
</Layout>

93
src/pages/privacy.astro Normal file
View File

@@ -0,0 +1,93 @@
---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import Contact from '../components/Contact.astro';
---
<Layout title="Datenschutzerklärung & Impressum | N&D i-t SOLUTIONS">
<Navbar />
<main class="pt-32 pb-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-gray-600 dark:text-gray-300">
<!-- Header -->
<div class="mb-12 border-b border-gray-200 dark:border-white/10 pb-8">
<h1 class="text-4xl md:text-5xl font-extrabold text-brand-primary dark:text-white mb-4">Rechtliche Hinweise</h1>
<p class="text-sm text-gray-500 dark:text-gray-400">
Letzte Aktualisierung: Juni 2026
</p>
</div>
<!-- Impressum Section -->
<section id="impressum" class="mb-16">
<h2 class="text-2xl font-bold text-brand-primary dark:text-white mb-6">Impressum</h2>
<div class="prose prose-sm dark:prose-invert max-w-none space-y-4">
<p class="font-semibold">Angaben gemäß § 5 TMG:</p>
<p>
N&D i-t SOLUTIONS GbR<br />
Musterstraße 42<br />
12345 Musterstadt
</p>
<p>
<strong>Vertreten durch:</strong><br />
Daniel Muster & Nikita Muster
</p>
<p>
<strong>Kontakt:</strong><br />
Telefon: +49 (0) 123 456789<br />
E-Mail: info@nd-itsolutions.de
</p>
<p>
<strong>Umsatzsteuer-ID:</strong><br />
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz: DE987654321
</p>
</div>
</section>
<!-- Datenschutz Section -->
<section id="privacy-policy" class="space-y-8">
<h2 class="text-2xl font-bold text-brand-primary dark:text-white mb-6 border-t border-gray-200 dark:border-white/10 pt-10">Datenschutzerklärung</h2>
<div class="space-y-4">
<h3 class="text-lg font-bold text-brand-primary dark:text-white">1. Datenschutz auf einen Blick</h3>
<p class="text-sm leading-relaxed">
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
</p>
<p class="text-sm leading-relaxed">
Wenn Sie diese Website benutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Die vorliegende Datenschutzerklärung erläutert, welche Daten wir erheben und wofür wir sie nutzen. Sie erläutert auch, wie und zu welchem Zweck das geschieht.
</p>
</div>
<div class="space-y-4">
<h3 class="text-lg font-bold text-brand-primary dark:text-white">2. Datenerfassung auf unserer Website</h3>
<p class="text-sm leading-relaxed">
<strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong><br />
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.
</p>
<p class="text-sm leading-relaxed">
<strong>Wie erfassen wir Ihre Daten?</strong><br />
Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um Daten handeln, die Sie in unser Kontaktformular eingeben. Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).
</p>
</div>
<div class="space-y-4">
<h3 class="text-lg font-bold text-brand-primary dark:text-white">3. Kontaktformular</h3>
<p class="text-sm leading-relaxed">
Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
</p>
<p class="text-sm leading-relaxed">
Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen erforderlich ist. In allen übrigen Fällen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) falls diese abgefragt wurde.
</p>
</div>
<div class="space-y-4">
<h3 class="text-lg font-bold text-brand-primary dark:text-white">4. Ihre Rechte</h3>
<p class="text-sm leading-relaxed">
Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, können Sie diese Einwilligung jederzeit für die Zukunft widerrufen. Außerdem haben Sie das Recht, unter bestimmten Umständen die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Des Weiteren steht Ihnen ein Beschwerderecht bei der zuständigen Aufsichtsbehörde zu.
</p>
</div>
</section>
</main>
<Contact />
<Footer />
</Layout>