Initial commit
This commit is contained in:
141
pages/ServicesPage.tsx
Normal file
141
pages/ServicesPage.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from 'react';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import { SERVICES } from '../constants';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const ServicesPage: React.FC = () => {
|
||||
// Отфильтровываем технические задания из основных услуг
|
||||
const mainServices = SERVICES.filter(service => service.title !== 'Технические задания');
|
||||
const technicalTasksService = SERVICES.find(service => service.title === 'Технические задания');
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 pb-20">
|
||||
<PageHeader
|
||||
title="Наши услуги"
|
||||
description="Полный спектр инженерных и строительных работ любой сложности. От изысканий до сдачи объекта под ключ."
|
||||
image="/media/images/headers/header-services.png"
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-6 py-20">
|
||||
{/* Блок с техническими заданиями */}
|
||||
{technicalTasksService && (
|
||||
<div className="mb-16 max-w-4xl mx-auto">
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden border-2 border-gray-200">
|
||||
<div className="p-8 md:p-10">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-brand-orange/10 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">
|
||||
Образцы технических заданий
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed mb-6">
|
||||
Готовые шаблоны и примеры технических заданий для различных видов инженерных работ.
|
||||
Документы доступны для скачивания и могут быть адаптированы под ваш проект.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
to="/services/technical-tasks"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Посмотреть образцы <ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{mainServices.map((service, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col h-full"
|
||||
>
|
||||
<div className="h-64 overflow-hidden">
|
||||
<img
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-8 flex-grow flex flex-col">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
|
||||
<p className="text-gray-600 text-sm mb-6 flex-grow leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
<div className="flex flex-col gap-3 mt-auto">
|
||||
{service.title === 'Инженерные изыскания' && (
|
||||
<Link
|
||||
to="/services/surveying"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
{service.title === 'Проектирование' && (
|
||||
<Link
|
||||
to="/services/design"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
{service.title === 'Строительство' && (
|
||||
<Link
|
||||
to="/services/construction"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
{service.title === 'Обследование грунтов' && (
|
||||
<Link
|
||||
to="/services/soil-survey"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
{service.title === 'Обследование здания' && (
|
||||
<Link
|
||||
to="/services/building-survey"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
{service.title === 'Землестроительный и Кадастровые работы' && (
|
||||
<Link
|
||||
to="/services/land-survey"
|
||||
className="flex items-center justify-center gap-2 bg-brand-orange text-white font-bold px-6 py-3 rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Подробнее <ArrowRight size={18} />
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
to="/contacts"
|
||||
className={`flex items-center ${(service.title === 'Инженерные изыскания' || service.title === 'Проектирование' || service.title === 'Строительство' || service.title === 'Обследование грунтов' || service.title === 'Обследование здания' || service.title === 'Землестроительный и Кадастровые работы') ? 'justify-center' : 'gap-2'} text-brand-orange font-medium hover:gap-4 transition-all`}
|
||||
>
|
||||
Заказать услугу <ArrowRight size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesPage;
|
||||
Reference in New Issue
Block a user