55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { ServiceCard } from '@/components/common/ServiceCard';
|
|
//import { componentStyles } from '@/lib/styles/designSystem';
|
|
import type { Service } from '@/types/service';
|
|
|
|
interface ServicesSectionProps {
|
|
services: Service[];
|
|
onServiceClick: (service: Service) => void;
|
|
translations: {
|
|
discoverFeatures: string;
|
|
};
|
|
}
|
|
|
|
export const ServicesSection: React.FC<ServicesSectionProps> = ({
|
|
services,
|
|
onServiceClick
|
|
}) => (
|
|
<section id="services" className="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
|
|
<div
|
|
className="w-20 h-1 mx-auto mb-6 sm:mb-8 rounded-full"
|
|
style={{
|
|
background: 'linear-gradient(to right, var(--banquise-blue-200), var(--banquise-blue-600))'
|
|
}}
|
|
></div>
|
|
<h2
|
|
className="text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2"
|
|
style={{
|
|
color: 'var(--banquise-blue-900)',
|
|
textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
|
|
}}
|
|
>
|
|
Nos Services
|
|
</h2>
|
|
<p
|
|
className="text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2"
|
|
style={{
|
|
color: 'var(--banquise-slate-700)',
|
|
textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)'
|
|
}}
|
|
>
|
|
Cliquez sur un service pour découvrir toutes ses fonctionnalités
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full">
|
|
{services.map((service) => (
|
|
<ServiceCard
|
|
key={service.name}
|
|
service={service}
|
|
onServiceClick={onServiceClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|