Arsen Akhmetzyanov
fde9609f9a
- simplify main navigation and hide extra menu items - make home page more sales-focused with updated hero, benefits and fleet teaser - add RU/EN handling for home and contacts, including SEO defaults - integrate basic Strapi homepage API client (no breaking changes) - update contacts page with messenger buttons and dynamic footer year Made-with: Cursor
259 lines
13 KiB
TypeScript
259 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
||
import PageHeader from '../components/PageHeader';
|
||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||
import { useLocation } from 'react-router-dom';
|
||
|
||
const FleetPage: React.FC = () => {
|
||
const location = useLocation();
|
||
const isEnglish = location.pathname.startsWith('/en');
|
||
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={isEnglish ? 'Fleet' : 'Автопарк'}
|
||
description={
|
||
isEnglish
|
||
? 'Modern equipment for projects of any complexity.'
|
||
: 'Современная техника для выполнения работ любой сложности'
|
||
}
|
||
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">
|
||
{isEnglish ? 'Equipment gallery' : 'Галерея техники'}
|
||
</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={
|
||
isEnglish
|
||
? `Vehicle ${currentImageIndex + 1}`
|
||
: `Транспортное средство ${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={isEnglish ? 'Previous photo' : 'Предыдущее фото'}
|
||
>
|
||
<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={isEnglish ? 'Next photo' : 'Следующее фото'}
|
||
>
|
||
<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={isEnglish ? `Thumbnail ${index + 1}` : `Миниатюра ${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">
|
||
{isEnglish
|
||
? 'List of vehicles of GeoVector LLC'
|
||
: 'Список транспортных средств ООО «ГЕОВЕКТОР»'}
|
||
</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">
|
||
{isEnglish ? 'Vehicle type' : 'Тип авто'}
|
||
</th>
|
||
<th className="px-6 py-4 text-left font-bold">
|
||
{isEnglish ? 'Make/model' : 'Марка машины'}
|
||
</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">
|
||
{isEnglish
|
||
? (() => {
|
||
switch (vehicle.type) {
|
||
case 'Установка разведочного бурения':
|
||
return 'Exploration drilling rig';
|
||
case 'Специальное пассажирское ТС':
|
||
return 'Special-purpose passenger vehicle';
|
||
case 'Грузовой бортовой':
|
||
return 'Flatbed truck';
|
||
case 'УБШМ 1.20':
|
||
return 'UBShM 1.20 (drilling support vehicle)';
|
||
case 'Грузовое ТС, Фермер грузопассажирский УБШМ 1-13':
|
||
return 'Cargo vehicle, UBShM 1-13 crew cab (cargo-passenger)';
|
||
case 'Грузовой фургон':
|
||
return 'Box truck / cargo van';
|
||
case 'Установка разведочного бурения УРБ-2Д3':
|
||
return 'Exploration drilling rig URB-2D3';
|
||
case 'Седельный тягач':
|
||
return 'Tractor unit / semi-trailer truck';
|
||
case 'Полуприцеп низкорамный трал':
|
||
return 'Low-bed semi-trailer (lowboy)';
|
||
case 'Снегоход':
|
||
return 'Snowmobile';
|
||
case 'Прицеп для перевозки водной техники, грузов':
|
||
return 'Trailer for watercraft and cargo';
|
||
case 'Специальная установка каротажной станции СК 1-74-II':
|
||
return 'Special logging station unit SK 1-74-II';
|
||
case 'Фермер грузопассажирский УБШМ 1-13':
|
||
return 'UBShM 1-13 crew cab (cargo-passenger)';
|
||
case 'Болотовездеход':
|
||
return 'Amphibious all-terrain vehicle';
|
||
default:
|
||
return vehicle.type || '';
|
||
}
|
||
})()
|
||
: 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">
|
||
{isEnglish ? 'Units of equipment' : 'Единиц техники'}
|
||
</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">
|
||
{isEnglish ? 'Photos' : 'Фотографий'}
|
||
</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">
|
||
{isEnglish ? 'Ready for work' : 'Готовность к работе'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FleetPage;
|
||
|