first commit

frontend/src/components/preise/ServicesSection.astro

@@ -0,0 +1,103 @@
+---
+import type { PriceService, ServicesSectionProps } from '@/types/globalInterfaces';
+
+const { services = [], title = "Unsere Fahrzeuge für jeden Anlass" } = Astro.props as ServicesSectionProps;
+---
+
+<!-- Services -->
+<section>
+    <h2 class="text-2xl sm:text-3xl font-semibold text-center text-gray-800 mb-8 opacity-0 animate-fadeInUp delay-200">
+        {title}
+    </h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Уменьшенный отступ между карточками -->
+        {services.map((service, index) => (
+                <div
+                        class="service-card bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 border border-gray-100 opacity-0 animate-cardEntry"
+                        style={`animation-delay: ${index * 0.1}s`}
+                >
+                    <div class="p-6">
+                        <div class="flex items-start gap-4 mb-3">
+                            <div class="flex-shrink-0 bg-blue-50 p-3 rounded-full text-blue-600 text-xl">
+                                {service.icon}
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-semibold text-gray-800">
+                                    {service.title}
+                                </h3>
+                                <p class="text-gray-600 mt-1">
+                                    {service.description}
+                                </p>
+                            </div>
+                        </div>
+                        <ul class="space-y-2 mt-3 pl-1">
+                            {service.features?.map((feature, i) => (
+                                    <li
+                                            class="flex items-center text-sm text-gray-700 opacity-0 animate-featureEntry"
+                                            style={`animation-delay: ${0.2 + (i * 0.1)}s`}
+                                    >
+                                        <span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2 flex-shrink-0"></span>
+                                        {feature}
+                                    </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+        ))}
+    </div>
+</section>
+
+<style>
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes cardEntry {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes featureEntry {
+        from {
+            opacity: 0;
+            transform: translateX(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .animate-fadeInUp {
+        animation: fadeInUp 0.8s ease-out forwards;
+    }
+
+    .animate-cardEntry {
+        animation: cardEntry 0.6s ease-out forwards;
+    }
+
+    .animate-featureEntry {
+        animation: featureEntry 0.4s ease-out forwards;
+    }
+
+    .delay-200 {
+        animation-delay: 0.2s;
+    }
+
+    .service-card:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    }
+</style>