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>