90 lines
6.6 KiB
TypeScript
90 lines
6.6 KiB
TypeScript
import React from 'react';
|
|
import { Rocket, Database, Globe, Shield } from 'lucide-react';
|
|
import { useTranslation } from '@/lib/hooks/useTranslation';
|
|
|
|
export const TechFeaturesSection: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<section className="py-12 sm:py-16 md:py-20 relative z-2 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
|
|
{/* Motif de fond avec grille visible */}
|
|
<div
|
|
className="absolute inset-0 opacity-30"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(59,130,246,0.4) 1px, transparent 0)',
|
|
backgroundSize: '32px 32px'
|
|
}}
|
|
/>
|
|
|
|
{/* Grille secondaire pour la profondeur */}
|
|
<div
|
|
className="absolute inset-0 opacity-15"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(99,102,241,0.3) 1px, transparent 0)',
|
|
backgroundSize: '64px 64px'
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10">
|
|
<div className="w-20 h-1 bg-gradient-to-r from-blue-400 to-blue-600 mx-auto mb-6 sm:mb-8 rounded-full"></div>
|
|
<h2 className="text-gray-800 text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
|
|
{t.infrastructure.title}
|
|
</h2>
|
|
<p className="text-gray-700 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={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
|
|
{t.infrastructure.subtitle}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6 w-full">
|
|
<div className="group relative p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-gray-200 hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-4 hover:scale-105">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
<div className="relative z-10 flex flex-col items-center text-center">
|
|
<div className="text-white bg-gradient-to-br from-blue-500 to-blue-600 w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 mb-4 sm:mb-6">
|
|
<Rocket className="w-8 h-8 sm:w-10 sm:h-10" strokeWidth={2} />
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-gray-900 font-heading font-semibold group-hover:text-blue-700 transition-colors duration-300">{t.infrastructure.features.performance.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed text-sm group-hover:text-gray-700 transition-colors duration-300">{t.infrastructure.features.performance.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-gray-200 hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-4 hover:scale-105">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
<div className="relative z-10 flex flex-col items-center text-center">
|
|
<div className="text-white bg-gradient-to-br from-blue-500 to-blue-600 w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 mb-4 sm:mb-6">
|
|
<Database className="w-8 h-8 sm:w-10 sm:h-10" strokeWidth={2} />
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-gray-900 font-heading font-semibold group-hover:text-blue-700 transition-colors duration-300">{t.infrastructure.features.storage.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed text-sm group-hover:text-gray-700 transition-colors duration-300">{t.infrastructure.features.storage.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-gray-200 hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-4 hover:scale-105">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
<div className="relative z-10 flex flex-col items-center text-center">
|
|
<div className="text-white bg-gradient-to-br from-blue-500 to-blue-600 w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 mb-4 sm:mb-6">
|
|
<Globe className="w-8 h-8 sm:w-10 sm:h-10" strokeWidth={2} />
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-gray-900 font-heading font-semibold group-hover:text-blue-700 transition-colors duration-300">{t.infrastructure.features.network.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed text-sm group-hover:text-gray-700 transition-colors duration-300">{t.infrastructure.features.network.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-gray-200 hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-4 hover:scale-105">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
<div className="relative z-10 flex flex-col items-center text-center">
|
|
<div className="text-white bg-gradient-to-br from-blue-500 to-blue-600 w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300 mb-4 sm:mb-6">
|
|
<Shield className="w-8 h-8 sm:w-10 sm:h-10" strokeWidth={2} />
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl mb-3 sm:mb-4 text-gray-900 font-heading font-semibold group-hover:text-blue-700 transition-colors duration-300">{t.infrastructure.features.security.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed text-sm group-hover:text-gray-700 transition-colors duration-300">{t.infrastructure.features.security.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|