103 lines
3.3 KiB
Text
103 lines
3.3 KiB
Text
|
---
|
||
|
|
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>
|