201 lines
9.2 KiB
TypeScript
201 lines
9.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
|||
|
|
import PageHeader from '../components/PageHeader';
|
|||
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|||
|
|
|
|||
|
|
const FleetPage: React.FC = () => {
|
|||
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|||
|
|
|
|||
|
|
// Список всех фотографий из папки cars
|
|||
|
|
const carImages = [
|
|||
|
|
'/media/cars/33725959_1920_q70.webp',
|
|||
|
|
'/media/cars/33725960_1920_q70.webp',
|
|||
|
|
'/media/cars/33725961_1920_q70.webp',
|
|||
|
|
'/media/cars/33725962_1920_q70.webp',
|
|||
|
|
'/media/cars/33725963_1920_q70.webp',
|
|||
|
|
'/media/cars/33725964_1920_q70.webp',
|
|||
|
|
'/media/cars/33725965_1920_q70.webp',
|
|||
|
|
'/media/cars/33725966_1920_q70.webp',
|
|||
|
|
'/media/cars/33725967_1920_q70.webp',
|
|||
|
|
'/media/cars/33725968_1920_q70.webp',
|
|||
|
|
'/media/cars/33725969_1920_q70.webp',
|
|||
|
|
'/media/cars/33725970_1920_q70.webp',
|
|||
|
|
'/media/cars/33725971_1920_q70.webp',
|
|||
|
|
'/media/cars/33725972_1920_q70.webp',
|
|||
|
|
'/media/cars/33725973_1920_q70.webp',
|
|||
|
|
'/media/cars/33725974_1920_q70.webp',
|
|||
|
|
'/media/cars/33725975_1920_q70.webp',
|
|||
|
|
'/media/cars/33725976_1920_q70.webp',
|
|||
|
|
'/media/cars/33725977_1920_q70.webp',
|
|||
|
|
'/media/cars/33725978_1920_q70.webp',
|
|||
|
|
'/media/cars/33725979_1920_q70.webp',
|
|||
|
|
'/media/cars/33725980_1920_q70.webp',
|
|||
|
|
'/media/cars/33725981_1920_q70.webp',
|
|||
|
|
'/media/cars/33725982_1920_q70.webp',
|
|||
|
|
'/media/cars/33725983_1920_q70.webp',
|
|||
|
|
'/media/cars/33725984_1920_q70.webp',
|
|||
|
|
'/media/cars/33725985_1920_q70.webp',
|
|||
|
|
'/media/cars/33725986_1920_q70.webp',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Список транспортных средств
|
|||
|
|
const vehicles = [
|
|||
|
|
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42 УРБ-2А-2' },
|
|||
|
|
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 43118 013-10 УРБ-2А-2' },
|
|||
|
|
{ type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42 УРБ-2А-2' },
|
|||
|
|
{ type: 'Специальное пассажирское ТС', brand: 'УАЗ-29892' },
|
|||
|
|
{ type: 'Грузовой бортовой', brand: 'ГАЗ 33081' },
|
|||
|
|
{ type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
|
|||
|
|
{ type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
|
|||
|
|
{ type: 'Специальное пассажирское ТС', brand: 'УАЗ-220695-04' },
|
|||
|
|
{ type: 'Грузовое ТС, Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ-390945' },
|
|||
|
|
{ type: 'Грузовой фургон', brand: 'УАЗ-390995-04' },
|
|||
|
|
{ type: 'Установка разведочного бурения УРБ-2Д3', brand: 'МТЛБу (Снегоболотоход гусеничный ТГМ 21-04)' },
|
|||
|
|
{ type: 'Седельный тягач', brand: 'УРАЛ 44202-0311-41' },
|
|||
|
|
{ type: 'Полуприцеп низкорамный трал', brand: '993920' },
|
|||
|
|
{ type: 'Снегоход', brand: 'YAMAHA VK540E' },
|
|||
|
|
{ type: 'Прицеп для перевозки водной техники, грузов', brand: 'МЗСА, 81771С' },
|
|||
|
|
{ type: 'Специальная установка каротажной станции СК 1-74-II', brand: 'ЗИЛ-131' },
|
|||
|
|
{ type: 'Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ 390945' },
|
|||
|
|
{ type: 'Болотовездеход', brand: 'Caiman' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const nextImage = () => {
|
|||
|
|
setCurrentImageIndex((prev) => (prev + 1) % carImages.length);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const prevImage = () => {
|
|||
|
|
setCurrentImageIndex((prev) => (prev - 1 + carImages.length) % carImages.length);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white pb-20">
|
|||
|
|
<PageHeader
|
|||
|
|
title="Автопарк"
|
|||
|
|
description="Современная техника для выполнения работ любой сложности"
|
|||
|
|
image="/media/images/headers/header-fleet.png"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="container mx-auto px-6 py-20">
|
|||
|
|
{/* Карусель фотографий */}
|
|||
|
|
<div className="mb-20">
|
|||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
|||
|
|
Галерея техники
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div className="relative max-w-5xl mx-auto">
|
|||
|
|
{/* Главное изображение */}
|
|||
|
|
<div className="relative aspect-[16/9] rounded-2xl overflow-hidden bg-gray-100">
|
|||
|
|
<img
|
|||
|
|
src={carImages[currentImageIndex]}
|
|||
|
|
alt={`Транспортное средство ${currentImageIndex + 1}`}
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Кнопки навигации */}
|
|||
|
|
<button
|
|||
|
|
onClick={prevImage}
|
|||
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
|
|||
|
|
aria-label="Предыдущее фото"
|
|||
|
|
>
|
|||
|
|
<ChevronLeft size={24} className="text-brand-orange" />
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={nextImage}
|
|||
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
|
|||
|
|
aria-label="Следующее фото"
|
|||
|
|
>
|
|||
|
|
<ChevronRight size={24} className="text-brand-orange" />
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{/* Индикатор */}
|
|||
|
|
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-full text-sm">
|
|||
|
|
{currentImageIndex + 1} / {carImages.length}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Миниатюры */}
|
|||
|
|
<div className="mt-6 flex gap-3 overflow-x-auto pb-4">
|
|||
|
|
{carImages.map((image, index) => (
|
|||
|
|
<button
|
|||
|
|
key={index}
|
|||
|
|
onClick={() => setCurrentImageIndex(index)}
|
|||
|
|
className={`flex-shrink-0 w-24 h-16 rounded-lg overflow-hidden transition-all duration-300 ${
|
|||
|
|
index === currentImageIndex
|
|||
|
|
? 'ring-4 ring-brand-orange scale-105'
|
|||
|
|
: 'opacity-60 hover:opacity-100'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src={image}
|
|||
|
|
alt={`Миниатюра ${index + 1}`}
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Список транспортных средств */}
|
|||
|
|
<div className="max-w-6xl mx-auto">
|
|||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
|||
|
|
Список транспортных средств ООО «ГЕОВЕКТОР»
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div className="overflow-x-auto shadow-lg rounded-2xl">
|
|||
|
|
<table className="w-full bg-white">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="bg-brand-orange text-white">
|
|||
|
|
<th className="px-6 py-4 text-left font-bold w-20">№</th>
|
|||
|
|
<th className="px-6 py-4 text-left font-bold">Тип авто</th>
|
|||
|
|
<th className="px-6 py-4 text-left font-bold">Марка машины</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{vehicles.map((vehicle, index) => (
|
|||
|
|
<tr
|
|||
|
|
key={index}
|
|||
|
|
className={`border-b border-gray-200 hover:bg-gray-50 transition-colors ${
|
|||
|
|
index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<td className="px-6 py-4 font-semibold text-brand-orange text-center">
|
|||
|
|
{index + 1}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 text-gray-700">
|
|||
|
|
{vehicle.type || ''}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 font-semibold text-gray-900">
|
|||
|
|
{vehicle.brand}
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Статистика */}
|
|||
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|||
|
|
<div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
|
|||
|
|
<div className="text-4xl font-bold mb-2">{vehicles.length}</div>
|
|||
|
|
<div className="text-lg">Единиц техники</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-gray-900 text-white rounded-2xl p-6 text-center">
|
|||
|
|
<div className="text-4xl font-bold mb-2">{carImages.length}</div>
|
|||
|
|
<div className="text-lg">Фотографий</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
|
|||
|
|
<div className="text-4xl font-bold mb-2">24/7</div>
|
|||
|
|
<div className="text-lg">Готовность к работе</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default FleetPage;
|
|||
|
|
|