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

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>