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;
|