83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import React from 'react';
|
||
import { ArrowRight } from 'lucide-react';
|
||
import { Link } from 'react-router-dom';
|
||
import { SERVICES } from '../constants';
|
||
|
||
const Services: React.FC = () => {
|
||
// Exclude Technical Tasks and show first 3 actual services
|
||
const actualServices = SERVICES.filter(service => service.title !== 'Технические задания');
|
||
const displayedServices = actualServices.slice(0, 3);
|
||
|
||
// Helper function to get service detail page URL
|
||
const getServiceUrl = (title: string) => {
|
||
const urlMap: { [key: string]: string } = {
|
||
'Инженерные изыскания': '/services/surveying',
|
||
'Проектирование': '/services/design',
|
||
'Строительство': '/services/construction',
|
||
'Обследование грунтов': '/services/soil-survey',
|
||
'Обследование здания': '/services/building-survey',
|
||
'Землестроительный и Кадастровые работы': '/services/land-survey'
|
||
};
|
||
return urlMap[title] || null;
|
||
};
|
||
|
||
return (
|
||
<div className="py-20 bg-gray-50" id="services">
|
||
<div className="container mx-auto px-6">
|
||
<div className="flex justify-between items-end mb-12">
|
||
<h2 className="text-4xl font-bold text-gray-900">Услуги</h2>
|
||
<Link to="/services" className="flex items-center gap-2 text-sm font-medium hover:text-brand-orange transition-colors">
|
||
Показать все <ArrowRight size={16} />
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{displayedServices.map((service, idx) => {
|
||
const detailUrl = getServiceUrl(service.title);
|
||
|
||
return (
|
||
<div
|
||
key={idx}
|
||
className="group relative h-[500px] rounded-2xl overflow-hidden cursor-pointer shadow-lg"
|
||
>
|
||
<img
|
||
src={service.image}
|
||
alt={service.title}
|
||
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||
loading="lazy"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
|
||
|
||
<div className="absolute bottom-0 left-0 p-8 w-full">
|
||
<h3 className="text-2xl font-bold text-white mb-3">{service.title}</h3>
|
||
<p className="text-gray-300 text-sm mb-6 line-clamp-3 opacity-90">
|
||
{service.description}
|
||
</p>
|
||
|
||
<div className="flex flex-col gap-3">
|
||
{detailUrl && (
|
||
<Link
|
||
to={detailUrl}
|
||
className="inline-flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-5 py-2.5 rounded-lg hover:bg-orange-600 transition-colors"
|
||
>
|
||
Подробнее <ArrowRight size={18} />
|
||
</Link>
|
||
)}
|
||
<Link
|
||
to="/contacts"
|
||
className="flex items-center gap-2 text-brand-orange text-sm font-medium group-hover:gap-4 transition-all"
|
||
>
|
||
Рассчитать стоимость <ArrowRight size={16} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Services; |