Initial commit
This commit is contained in:
186
components/Laboratories.tsx
Normal file
186
components/Laboratories.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { Microscope, Activity, ArrowRight, CheckCircle2, Shield } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Laboratories: React.FC = () => {
|
||||
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">
|
||||
Наши лаборатории
|
||||
</h2>
|
||||
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
|
||||
Современное оборудование и квалифицированные специалисты для проведения
|
||||
комплексных исследований
|
||||
</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="Грунтовая лаборатория"
|
||||
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">
|
||||
Грунтовая лаборатория
|
||||
</h3>
|
||||
<p className="text-white/90 text-sm">
|
||||
Исследования физических, механических и химических свойств
|
||||
</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">Физические свойства грунтов</p>
|
||||
<p className="text-sm text-gray-500">Влажность, плотность, гранулометрический состав</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">Механические характеристики</p>
|
||||
<p className="text-sm text-gray-500">Прочность, деформируемость, сжимаемость</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">Химический анализ</p>
|
||||
<p className="text-sm text-gray-500">Агрессивность грунтов, анализ воды</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка */}
|
||||
<Link
|
||||
to="/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"
|
||||
>
|
||||
Подробнее о лаборатории
|
||||
<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="Радиационная лаборатория"
|
||||
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">
|
||||
Радиационная лаборатория
|
||||
</h3>
|
||||
<p className="text-white/90 text-sm">
|
||||
Профессиональные исследования радиационной безопасности
|
||||
</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">Радиационный контроль</p>
|
||||
<p className="text-sm text-gray-500">Измерение уровня радона и гамма-излучения</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">Аккредитованная лаборатория</p>
|
||||
<p className="text-sm text-gray-500">Техническая компетентность и независимость</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">Современное оборудование</p>
|
||||
<p className="text-sm text-gray-500">КАМЕРА-01, ДКГ-02У, ДРБП-03</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка */}
|
||||
<Link
|
||||
to="/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"
|
||||
>
|
||||
Подробнее о лаборатории
|
||||
<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">
|
||||
Нужна консультация по лабораторным исследованиям?
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-6 max-w-2xl mx-auto">
|
||||
Наши специалисты помогут подобрать оптимальный комплекс исследований для вашего проекта
|
||||
</p>
|
||||
<Link
|
||||
to="/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"
|
||||
>
|
||||
Связаться с нами
|
||||
<ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Laboratories;
|
||||
|
||||
Reference in New Issue
Block a user