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
222 lines
12 KiB
TypeScript
222 lines
12 KiB
TypeScript
import React from 'react';
|
||
import { Microscope, Activity, ArrowRight, CheckCircle2, Shield } from 'lucide-react';
|
||
import { Link, useLocation } from 'react-router-dom';
|
||
|
||
const Laboratories: React.FC = () => {
|
||
const location = useLocation();
|
||
const isEnglish = location.pathname.startsWith('/en');
|
||
const prefix = isEnglish ? '/en' : '';
|
||
|
||
return (
|
||
<section className="py-20 bg-gradient-to-b from-white to-gray-50">
|
||
<div className="container mx-auto px-6">
|
||
<div className="text-center mb-16">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
|
||
<Microscope className="text-brand-orange" size={32} />
|
||
</div>
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
{isEnglish ? 'Our laboratories' : 'Наши лаборатории'}
|
||
</h2>
|
||
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
|
||
{isEnglish
|
||
? 'State-of-the-art equipment and qualified specialists for comprehensive testing and research.'
|
||
: 'Современное оборудование и квалифицированные специалисты для проведения комплексных исследований'}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-8">
|
||
{/* Грунтовая лаборатория */}
|
||
<div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-brand-orange">
|
||
{/* Изображение с наложением */}
|
||
<div className="relative h-64 overflow-hidden">
|
||
<img
|
||
src="/media/images/services/soil-survey.png"
|
||
alt={isEnglish ? 'Soil testing laboratory' : 'Грунтовая лаборатория'}
|
||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||
loading="lazy"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
|
||
|
||
{/* Иконка */}
|
||
<div className="absolute top-6 left-6">
|
||
<div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center border-2 border-white/30">
|
||
<Microscope className="text-white" size={32} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Заголовок на изображении */}
|
||
<div className="absolute bottom-6 left-6 right-6">
|
||
<h3 className="text-2xl font-bold text-white mb-2">
|
||
{isEnglish ? 'Soil testing laboratory' : 'Грунтовая лаборатория'}
|
||
</h3>
|
||
<p className="text-white/90 text-sm">
|
||
{isEnglish
|
||
? 'Testing of physical, mechanical and chemical soil properties.'
|
||
: 'Исследования физических, механических и химических свойств'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент карточки */}
|
||
<div className="p-8">
|
||
<div className="space-y-4 mb-8">
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Physical properties of soils' : 'Физические свойства грунтов'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{isEnglish ? 'Moisture content, density, grain-size distribution.' : 'Влажность, плотность, гранулометрический состав'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Mechanical characteristics' : 'Механические характеристики'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{isEnglish ? 'Strength, deformability, compressibility.' : 'Прочность, деформируемость, сжимаемость'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle2 className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Chemical analysis' : 'Химический анализ'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{isEnglish ? 'Soil aggressiveness, water analysis.' : 'Агрессивность грунтов, анализ воды'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Кнопка */}
|
||
<Link
|
||
to={`${prefix}/laboratories/soil`}
|
||
className="flex items-center justify-center gap-2 w-full py-4 bg-gradient-to-r from-brand-orange to-orange-600 text-white font-bold rounded-xl hover:from-orange-600 hover:to-brand-orange transition-all duration-300 group/btn"
|
||
>
|
||
{isEnglish ? 'More about the laboratory' : 'Подробнее о лаборатории'}
|
||
<ArrowRight className="group-hover/btn:translate-x-1 transition-transform" size={20} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Радиационная лаборатория */}
|
||
<div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-brand-orange">
|
||
{/* Изображение с наложением */}
|
||
<div className="relative h-64 overflow-hidden">
|
||
<img
|
||
src="/media/images/services/engineering-surveys.png"
|
||
alt={isEnglish ? 'Radiation laboratory' : 'Радиационная лаборатория'}
|
||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||
loading="lazy"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
|
||
|
||
{/* Иконка */}
|
||
<div className="absolute top-6 left-6">
|
||
<div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center border-2 border-white/30">
|
||
<Activity className="text-white" size={32} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Заголовок на изображении */}
|
||
<div className="absolute bottom-6 left-6 right-6">
|
||
<h3 className="text-2xl font-bold text-white mb-2">
|
||
{isEnglish ? 'Radiation laboratory' : 'Радиационная лаборатория'}
|
||
</h3>
|
||
<p className="text-white/90 text-sm">
|
||
{isEnglish
|
||
? 'Professional radiation safety and exposure assessments.'
|
||
: 'Профессиональные исследования радиационной безопасности'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент карточки */}
|
||
<div className="p-8">
|
||
<div className="space-y-4 mb-8">
|
||
<div className="flex items-start gap-3">
|
||
<Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Radiation monitoring' : 'Радиационный контроль'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{isEnglish ? 'Measurement of radon and gamma radiation levels.' : 'Измерение уровня радона и гамма-излучения'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3">
|
||
<Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Accredited laboratory' : 'Аккредитованная лаборатория'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
{isEnglish ? 'Technical competence and independence.' : 'Техническая компетентность и независимость'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3">
|
||
<Shield className="text-brand-orange flex-shrink-0 mt-1" size={20} />
|
||
<div>
|
||
<p className="text-gray-700 font-medium">
|
||
{isEnglish ? 'Modern equipment' : 'Современное оборудование'}
|
||
</p>
|
||
<p className="text-sm text-gray-500">КАМЕРА-01, ДКГ-02У, ДРБП-03</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Кнопка */}
|
||
<Link
|
||
to={`${prefix}/laboratories/radiation`}
|
||
className="flex items-center justify-center gap-2 w-full py-4 bg-gradient-to-r from-brand-orange to-orange-600 text-white font-bold rounded-xl hover:from-orange-600 hover:to-brand-orange transition-all duration-300 group/btn"
|
||
>
|
||
{isEnglish ? 'More about the laboratory' : 'Подробнее о лаборатории'}
|
||
<ArrowRight className="group-hover/btn:translate-x-1 transition-transform" size={20} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Дополнительная информация */}
|
||
<div className="mt-16 max-w-4xl mx-auto">
|
||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12 text-center">
|
||
<h3 className="text-2xl md:text-3xl font-bold mb-4">
|
||
{isEnglish
|
||
? 'Need a consultation on laboratory testing?'
|
||
: 'Нужна консультация по лабораторным исследованиям?'}
|
||
</h3>
|
||
<p className="text-gray-300 mb-6 max-w-2xl mx-auto">
|
||
{isEnglish
|
||
? 'Our specialists will help you select the optimal set of tests for your project.'
|
||
: 'Наши специалисты помогут подобрать оптимальный комплекс исследований для вашего проекта'}
|
||
</p>
|
||
<Link
|
||
to={`${prefix}/contacts`}
|
||
className="inline-flex items-center gap-2 px-8 py-4 bg-brand-orange text-white font-bold rounded-xl hover:bg-orange-600 transition-colors"
|
||
>
|
||
{isEnglish ? 'Contact us' : 'Связаться с нами'}
|
||
<ArrowRight size={20} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Laboratories;
|
||
|