84 lines
3.2 KiB
Plaintext
84 lines
3.2 KiB
Plaintext
---
|
|
import { SERVICES } from '@config';
|
|
import { getLangFromUrl, useTranslations, localizePath } from '../utils/i18n';
|
|
|
|
const lang = getLangFromUrl(Astro.url);
|
|
const t = await useTranslations(lang);
|
|
---
|
|
|
|
<section id="services" class="py-20 bg-muted/30">
|
|
<div class="container-custom">
|
|
<!-- Section header -->
|
|
<div class="text-center mb-16 animate-on-scroll">
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
|
{t('services.title')}
|
|
</h2>
|
|
<p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
{t('services.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Services grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
|
{SERVICES.map((service, index) => (
|
|
<div
|
|
class="card p-6 hover:shadow-xl transition-all duration-300 hover:scale-105 animate-on-scroll group"
|
|
style={`animation-delay: ${index * 0.1}s`}
|
|
>
|
|
<!-- Service icon -->
|
|
<div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
{service.icon}
|
|
</div>
|
|
|
|
<!-- Service title -->
|
|
<h3 class="text-xl font-display font-semibold text-foreground mb-3">
|
|
{t(service.titleKey)}
|
|
</h3>
|
|
|
|
<!-- Service description -->
|
|
<p class="text-muted-foreground mb-4 leading-relaxed">
|
|
{t(service.descriptionKey)}
|
|
</p>
|
|
|
|
<!-- Service features -->
|
|
<ul class="space-y-2">
|
|
{service.features.map((feature) => (
|
|
<li class="flex items-start text-sm text-muted-foreground">
|
|
<svg class="h-4 w-4 mt-0.5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
{t(feature)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<!-- Learn more link -->
|
|
<div class="mt-6">
|
|
<a
|
|
href={localizePath(`/services#${service.id}`, lang)}
|
|
class="inline-flex items-center text-primary hover:text-primary/80 font-medium text-sm group-hover:translate-x-1 transition-all duration-200"
|
|
>
|
|
Learn more
|
|
<svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<!-- CTA section -->
|
|
<div class="text-center animate-on-scroll">
|
|
<a
|
|
href={localizePath("/services", lang)}
|
|
class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"
|
|
>
|
|
{t('services.viewAll')}
|
|
<svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section> |