Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1939563ef27c16e3a74498d472de9bd06fc81628
ndsolutionswebsite/src/components/Services.astro
DanielS 08b74a0294
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 32s
Details
feat: simplify copy for small business owners and fix react-icons properties
2026-07-19 00:06:21 +02:00

302 lines
19 KiB
Plaintext
Raw Blame History

---
// 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">Was wir für Sie tun</h2>
<h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white">
Alles, was Sie für Ihren Erfolg im Internet brauchen
</h3>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
Wir machen es Ihnen einfach. Vom ersten Entwurf bis zur fertigen Seite, die Ihnen neue Kunden bringt.
</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">Digitale Visitenkarte</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Eine schicke Homepage, auf der alles Wichtige steht: Ihre Öffnungszeiten, Telefonnummer und Ihr Angebot. Läuft perfekt auf Handys.
</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">Digitale Visitenkarte</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Sieht super aus auf jedem Handy</li>
<li class="flex items-center gap-2">✓ Lädt blitzschnell ohne Warten</li>
<li class="flex items-center gap-2">✓ Sicher vor Abmahnungen (DSGVO)</li>
<li class="flex items-center gap-2">✓ Moderne und sichere Technik</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">
Kostenlose 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">Kunden-Gewinnung</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Eine spezielle Seite, die nur ein Ziel hat: Dass neue Kunden Sie anrufen, Ihnen schreiben oder direkt vorbeikommen.
</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">Kunden-Gewinnung</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Leicht verständlich für Besucher</li>
<li class="flex items-center gap-2">✓ Telefonnummer direkt im Blick</li>
<li class="flex items-center gap-2">✓ Zeigt Ihnen, wer Ihre Seite besucht</li>
<li class="flex items-center gap-2">✓ Kunden springen nicht frustriert ab</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">
Gespräch vereinbaren
</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">Internet-Verkauf</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Verkaufen Sie Ihre Produkte, Speisen oder Gutscheine direkt online. Kinderleicht für Ihre Kunden zu bedienen.
</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">Internet-Verkauf</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Produkte & Speisen leicht ändern</li>
<li class="flex items-center gap-2">✓ Bezahlung per PayPal oder Karte</li>
<li class="flex items-center gap-2">✓ Wächst mit Ihrem Laden mit</li>
<li class="flex items-center gap-2">✓ Kinderleichte Bestellung</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">
Shop anfragen
</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">Technik & Pflege</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Sie wollen ein neues Bild zeigen oder die Öffnungszeiten ändern? Schreiben Sie uns einfach. Wir machen das für Sie.
</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">Technik & Pflege</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Wir machen alle wichtigen Updates</li>
<li class="flex items-center gap-2">✓ Tägliche automatische Datensicherung</li>
<li class="flex items-center gap-2">✓ Schutz vor Internet-Angriffen</li>
<li class="flex items-center gap-2">✓ Schnelle Änderungen per WhatsApp/E-Mail</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">
Hilfe anfordern
</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">Bei Google gefunden werden</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Wenn jemand in Ihrer Stadt nach Ihren Angeboten sucht, sorgen wir dafür, dass Sie ganz oben stehen.
</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">Bei Google gefunden werden</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Google Maps Eintrag perfekt gepflegt</li>
<li class="flex items-center gap-2">✓ Gefunden bei den richtigen Suchwörtern</li>
<li class="flex items-center gap-2">✓ Ihre Seite wird für Google optimiert</li>
<li class="flex items-center gap-2">✓ Schnelles Laden bringt bessere Plätze</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">
Kostenloses Gespräch vereinbaren
</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">Schönes Aussehen</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
Wir gestalten Ihre Webseite so, dass sie modern, einladend und genau passend zu Ihrem Geschäft aussieht.
</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">Schönes Aussehen</h4>
<ul class="space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2">✓ Kein langweiliges Standard-Design</li>
<li class="flex items-center gap-2">✓ Schöne Farben passend zu Ihrem Logo</li>
<li class="flex items-center gap-2">✓ Kunden finden sofort, was sie suchen</li>
<li class="flex items-center gap-2">✓ Sie sehen das Design vor dem Start</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">
Design 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>
Reference in New Issue View Git Blame Copy Permalink