302 lines
19 KiB
Plaintext
302 lines
19 KiB
Plaintext
---
|
|
// 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 Ihren Betrieb Schritt für Schritt zur perfekten Website für mehr Kunden und Anfragen.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Flip Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Card 1: Firmenwebseiten -->
|
|
<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">
|
|
<!-- Home/Website Icon -->
|
|
<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 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Firmenwebseiten</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Individuelle Homepages als digitale Visitenkarte für Ihr Unternehmen, optimiert für alle mobilen Endgeräte.
|
|
</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">Firmenwebseiten</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Responsive Webdesign (Mobile First)</li>
|
|
<li class="flex items-center gap-2">✓ Extrem schnelle Ladezeiten</li>
|
|
<li class="flex items-center gap-2">✓ DSGVO-konform (Cookie-Consent etc.)</li>
|
|
<li class="flex items-center gap-2">✓ Modernste Web-Tech (Astro & Tailwind)</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: Landingpages -->
|
|
<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">
|
|
<!-- Cursor Icon -->
|
|
<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.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 7.827 5.176-3.243.681.381 2.29z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Landingpages</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Zielgerichtete Webseiten für Google- oder Social-Media-Kampagnen zur effektiven Neukundengewinnung.
|
|
</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">Landingpages</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Conversion-Rate Optimierung (CRO)</li>
|
|
<li class="flex items-center gap-2">✓ Klare Handlungsaufforderungen (CTA)</li>
|
|
<li class="flex items-center gap-2">✓ A/B Testings & Web-Analysen</li>
|
|
<li class="flex items-center gap-2">✓ Schnelles Laden für geringe Absprünge</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: Onlineshops -->
|
|
<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">
|
|
<!-- ShoppingBag Icon -->
|
|
<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.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Onlineshops</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Einfache, performante E-Commerce-Lösungen für Händler, um Produkte online erfolgreich zu vermarkten.
|
|
</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">Onlineshops</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Einfache Produkt- & Bestellpflege</li>
|
|
<li class="flex items-center gap-2">✓ PayPal, Stripe & Klarna Integration</li>
|
|
<li class="flex items-center gap-2">✓ Skalierbare E-Commerce-Systeme</li>
|
|
<li class="flex items-center gap-2">✓ Optimierter Checkout-Prozess</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: Wartung & Support -->
|
|
<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">
|
|
<!-- Wrench/Screwdriver Icon -->
|
|
<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="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.31-.374.711-.6 1.154-.63M11.42 15.17a3 3 0 11-4.088-4.088M12.73 8.21l-.504-.504a1.5 1.5 0 112.122-2.122l.504.504m-2.122 2.122A2.99 2.99 0 0012 8.25m0 0a3.01 3.01 0 01-1.127-.224l-3.23-3.23a1.5 1.5 0 10-2.122 2.122l3.23 3.23C8.63 10.3 8.6 10.65 8.77 11"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Wartung & Support</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Wir kümmern uns um Updates, Backups, Sicherheit und inhaltliche Anpassungen Ihrer Website.
|
|
</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">Wartung & Support</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Regelmäßige System- & Plugin-Updates</li>
|
|
<li class="flex items-center gap-2">✓ Tägliche Sicherheits-Backups</li>
|
|
<li class="flex items-center gap-2">✓ Schutz vor Spam & Hackerangriffen</li>
|
|
<li class="flex items-center gap-2">✓ Schnelle inhaltliche Änderungen</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: Lokale SEO & Google -->
|
|
<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">
|
|
<!-- MapPin/Magnifying Glass Icon -->
|
|
<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 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Lokale SEO & Google</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Verbessern Sie Ihre Sichtbarkeit bei lokalen Google-Suchanfragen für mehr Anfragen aus Ihrer Region.
|
|
</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">Lokale SEO</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Google My Business Optimierung</li>
|
|
<li class="flex items-center gap-2">✓ Keyword-Recherche für Ihre Nische</li>
|
|
<li class="flex items-center gap-2">✓ OnPage & OffPage Optimierung</li>
|
|
<li class="flex items-center gap-2">✓ Ladezeiten-Optimierung (Web Vitals)</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: UI/UX Webdesign -->
|
|
<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">
|
|
<!-- Swatch/Color Icon -->
|
|
<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.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.076-3.077a2.25 2.25 0 00-3.182-3.182L13.1 7.27a15.996 15.996 0 00-4.648 4.764m3.122 3.122l-1.22 4.88m0 0a3 3 0 00-5.78 1.128c0 .285.023.57.067.85"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">UI/UX Webdesign</h4>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
|
Individuelle Design-Entwürfe, die auf Ihre Markenidentität abgestimmt sind und Besucher begeistern.
|
|
</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">Webdesign</h4>
|
|
<ul class="space-y-2 text-sm text-gray-200">
|
|
<li class="flex items-center gap-2">✓ Einzigartige, moderne Designs</li>
|
|
<li class="flex items-center gap-2">✓ Abgestimmtes Farb- & Schriftkonzept</li>
|
|
<li class="flex items-center gap-2">✓ Intuitive Benutzerführung (UI/UX)</li>
|
|
<li class="flex items-center gap-2">✓ Erstellung von Figma-Prototypen</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>
|