650 lines
35 KiB
TypeScript
650 lines
35 KiB
TypeScript
|
import React, { useRef, useEffect, useState } from 'react';
|
|||
|
|
import PageHeader from '../components/PageHeader';
|
|||
|
|
import { CheckCircle2, Award, Users, Building2, Briefcase, Phone, Mail, Globe, FileText, ExternalLink, Star } from 'lucide-react';
|
|||
|
|
|
|||
|
|
const AboutPage: React.FC = () => {
|
|||
|
|
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
|||
|
|
const [isDragging, setIsDragging] = useState(false);
|
|||
|
|
const [startX, setStartX] = useState(0);
|
|||
|
|
const [scrollLeft, setScrollLeft] = useState(0);
|
|||
|
|
const [isHoveringCarousel, setIsHoveringCarousel] = useState(false);
|
|||
|
|
|
|||
|
|
const clients = [
|
|||
|
|
{ name: 'ООО «ТЕКСТРОЙПРОЕКТ»', color: 'from-blue-500 to-blue-600' },
|
|||
|
|
{ name: 'ООО НПРП «Легаз»', color: 'from-green-500 to-green-600' },
|
|||
|
|
{ name: 'ООО «Газпром трансгаз Уфа»', color: 'from-blue-600 to-blue-700' },
|
|||
|
|
{ name: 'ОАО «ВИФКнефть»', color: 'from-indigo-500 to-indigo-600' },
|
|||
|
|
{ name: 'ООО «Славнефть»', color: 'from-red-500 to-red-600' },
|
|||
|
|
{ name: 'ПАО АНК «Башнефть»', color: 'from-emerald-500 to-emerald-600' },
|
|||
|
|
{ name: 'ООО «ЛУКОЙЛ Уралнефтепродукт»', color: 'from-red-600 to-red-700' },
|
|||
|
|
{ name: 'ООО «СИБУР ХОЛДИНГ»', color: 'from-purple-500 to-purple-600' },
|
|||
|
|
{ name: 'ООО «Башкирская генерирующая компания»', color: 'from-amber-500 to-amber-600' },
|
|||
|
|
{ name: 'ООО «ОБ-СЕТЭМ»', color: 'from-pink-500 to-pink-600' },
|
|||
|
|
{ name: 'ООО «ОКЕМ Менеджмент»', color: 'from-teal-500 to-teal-600' },
|
|||
|
|
{ name: 'ООО «УралСпецБурГаз»', color: 'from-orange-500 to-orange-600' },
|
|||
|
|
{ name: 'ООО «Нефть Прикамья»', color: 'from-cyan-500 to-cyan-600' },
|
|||
|
|
{ name: 'ООО «Кемаколор Проект Групп»', color: 'from-lime-500 to-lime-600' },
|
|||
|
|
{ name: 'ООО «ВЕСТЕРОС»', color: 'from-rose-500 to-rose-600' },
|
|||
|
|
{ name: 'АО «ВД «ГОРОД»', color: 'from-sky-500 to-sky-600' },
|
|||
|
|
{ name: 'АО «Клининвестпром»', color: 'from-green-600 to-green-700' },
|
|||
|
|
{ name: 'АО «Башавтодор»', color: 'from-violet-500 to-violet-600' },
|
|||
|
|
{ name: 'ГУП РБ «УЖХ»', color: 'from-fuchsia-500 to-fuchsia-600' },
|
|||
|
|
{ name: 'ООО «ПОСТРОЙМАГРУПП»', color: 'from-yellow-500 to-yellow-600' },
|
|||
|
|
{ name: 'ООО «Парола Принедель»', color: 'from-teal-600 to-teal-700' },
|
|||
|
|
{ name: 'ПАО «Газпром теплоэнергетика Уфа»', color: 'from-blue-700 to-blue-800' },
|
|||
|
|
{ name: 'Администратор торговой системы оптового рынка электроэнергии', color: 'from-red-700 to-red-800' },
|
|||
|
|
{ name: 'ООО «Башкирская нефть»', color: 'from-cyan-600 to-cyan-700' },
|
|||
|
|
{ name: 'ООО ГК «Сибирия Менеджмент»', color: 'from-pink-600 to-pink-700' },
|
|||
|
|
{ name: 'АО «ВЭСКО»', color: 'from-orange-600 to-orange-700' },
|
|||
|
|
{ name: 'Муниципальное центр «ТЕХРЕСУРС»', color: 'from-slate-500 to-slate-600' },
|
|||
|
|
{ name: 'АО «СОВЕТСТРОЙМАЖ»', color: 'from-lime-600 to-lime-700' },
|
|||
|
|
{ name: 'ПАО «Саратовэнерго»', color: 'from-rose-600 to-rose-700' },
|
|||
|
|
{ name: 'ООО БашНИИстрой', color: 'from-sky-600 to-sky-700' },
|
|||
|
|
{ name: 'Проектное бюро АРТЭП', color: 'from-emerald-600 to-emerald-700' },
|
|||
|
|
{ name: 'ООО «СовМ-МедиаСтрой»', color: 'from-violet-600 to-violet-700' },
|
|||
|
|
{ name: 'ООО «УралспецБурГаз»', color: 'from-purple-600 to-purple-700' },
|
|||
|
|
{ name: 'Компания «АльфаИнжиниринг»', color: 'from-amber-600 to-amber-700' },
|
|||
|
|
{ name: 'Управляющая компания «DAMATE»', color: 'from-teal-700 to-teal-800' },
|
|||
|
|
{ name: 'ЗАО «Strabag»', color: 'from-blue-800 to-blue-900' },
|
|||
|
|
{ name: 'ПАО «Газпром Газэнергосети Салават»', color: 'from-red-800 to-red-900' },
|
|||
|
|
{ name: 'ООО «АНТЭ+Стройсервис»', color: 'from-cyan-700 to-cyan-800' },
|
|||
|
|
{ name: 'ООО ПКБ «Уралспектопромстандарт «Прокс»', color: 'from-pink-700 to-pink-800' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Дублируем клиентов для бесшовной прокрутки
|
|||
|
|
const duplicatedClients = [...clients, ...clients];
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const container = scrollContainerRef.current;
|
|||
|
|
if (!container) return;
|
|||
|
|
|
|||
|
|
let animationFrame: number;
|
|||
|
|
let scrollSpeed = 0.5;
|
|||
|
|
|
|||
|
|
const animate = () => {
|
|||
|
|
if (!isDragging && container) {
|
|||
|
|
container.scrollLeft += scrollSpeed;
|
|||
|
|
|
|||
|
|
// Бесшовная прокрутка: возврат к началу
|
|||
|
|
if (container.scrollLeft >= container.scrollWidth / 2) {
|
|||
|
|
container.scrollLeft = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
animationFrame = requestAnimationFrame(animate);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
animate();
|
|||
|
|
|
|||
|
|
return () => cancelAnimationFrame(animationFrame);
|
|||
|
|
}, [isDragging]);
|
|||
|
|
|
|||
|
|
// Обработчики для перетаскивания мышью
|
|||
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|||
|
|
setIsDragging(true);
|
|||
|
|
setStartX(e.pageX - (scrollContainerRef.current?.offsetLeft || 0));
|
|||
|
|
setScrollLeft(scrollContainerRef.current?.scrollLeft || 0);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleMouseUp = () => {
|
|||
|
|
setIsDragging(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleMouseMove = (e: React.MouseEvent) => {
|
|||
|
|
if (!isDragging) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const x = e.pageX - (scrollContainerRef.current?.offsetLeft || 0);
|
|||
|
|
const walk = (x - startX) * 2;
|
|||
|
|
if (scrollContainerRef.current) {
|
|||
|
|
scrollContainerRef.current.scrollLeft = scrollLeft - walk;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleScrollContainerMouseLeave = () => {
|
|||
|
|
setIsDragging(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Обработчик для прокрутки колесом
|
|||
|
|
const handleWheel = (e: React.WheelEvent) => {
|
|||
|
|
// Не используем preventDefault для пассивных слушателей
|
|||
|
|
if (scrollContainerRef.current) {
|
|||
|
|
scrollContainerRef.current.scrollLeft += e.deltaY;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Блокировка прокрутки страницы при наведении на карусель
|
|||
|
|
const handleCarouselMouseEnter = () => {
|
|||
|
|
setIsHoveringCarousel(true);
|
|||
|
|
document.body.style.overflow = 'hidden';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCarouselMouseLeave = () => {
|
|||
|
|
setIsHoveringCarousel(false);
|
|||
|
|
document.body.style.overflow = 'auto';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Очистка при размонтировании компонента
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
document.body.style.overflow = 'auto';
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white pb-20">
|
|||
|
|
<PageHeader
|
|||
|
|
title="О компании"
|
|||
|
|
description="ООО «ГеоВектор» — лидер в области инженерных изысканий и проектирования в Республике Башкортостан."
|
|||
|
|
image="/media/images/headers/header-about.png"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="container mx-auto px-6 py-20">
|
|||
|
|
<div className="flex flex-col lg:flex-row gap-16 items-center">
|
|||
|
|
<div className="lg:w-1/2">
|
|||
|
|
<img
|
|||
|
|
src="/media/images/about/office.png"
|
|||
|
|
alt="Наш офис"
|
|||
|
|
className="rounded-3xl shadow-2xl w-full"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="lg:w-1/2">
|
|||
|
|
<h2 className="text-3xl font-bold mb-6">История и Миссия</h2>
|
|||
|
|
<p className="text-gray-600 mb-6 leading-relaxed">
|
|||
|
|
Компания «ГеоВектор» была основана в 2010 году группой инженеров-энтузиастов. За годы работы мы выросли из небольшого бюро в крупную строительно-проектную организацию. Наша миссия — создавать надежную основу для инфраструктуры будущего, используя передовые технологии и многолетний опыт.
|
|||
|
|
</p>
|
|||
|
|
<p className="text-gray-600 mb-8 leading-relaxed">
|
|||
|
|
Мы гордимся тем, что наши проекты служат людям. Будь то жилые комплексы, промышленные объекты или энергетическая инфраструктура — мы всегда гарантируем качество и соблюдение сроков.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
|
|||
|
|
<CheckCircle2 />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-bold">Лицензии и СРО</h4>
|
|||
|
|
<p className="text-sm text-gray-500">Полный пакет разрешительной документации</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
|
|||
|
|
<Award />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-bold">Гарантия качества</h4>
|
|||
|
|
<p className="text-sm text-gray-500">Многоуровневый контроль на всех этапах</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-12 h-12 rounded-full bg-brand-light flex items-center justify-center text-brand-orange">
|
|||
|
|
<Users />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-bold">Штат экспертов</h4>
|
|||
|
|
<p className="text-sm text-gray-500">Более 50 квалифицированных инженеров</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Секция вакансий */}
|
|||
|
|
<div className="bg-gray-50 py-20">
|
|||
|
|
<div className="container mx-auto px-6">
|
|||
|
|
<div className="max-w-6xl mx-auto">
|
|||
|
|
{/* Заголовок */}
|
|||
|
|
<div className="text-center mb-12">
|
|||
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
|||
|
|
ГеоВектор приглашает к сотрудничеству!
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-xl text-gray-700 flex items-center justify-center gap-2">
|
|||
|
|
<svg className="w-6 h-6 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|||
|
|
</svg>
|
|||
|
|
г. Уфа, Комсомольская 19/1
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid lg:grid-cols-2 gap-8 mb-12">
|
|||
|
|
{/* Левая колонка - Вакансии */}
|
|||
|
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden">
|
|||
|
|
<div className="p-8">
|
|||
|
|
<div className="flex items-center gap-3 mb-8">
|
|||
|
|
<div className="w-14 h-14 bg-brand-orange/10 rounded-xl flex items-center justify-center">
|
|||
|
|
<Briefcase className="text-brand-orange" size={28} />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-2xl font-bold text-gray-900">Наши вакансии:</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="group p-5 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-brand-orange/10 hover:to-brand-orange/20 transition-all border-l-4 border-brand-orange">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-4 h-4 bg-brand-orange rounded-full flex-shrink-0"></div>
|
|||
|
|
<span className="text-lg font-bold text-gray-900">Инженер-геолог</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="group p-5 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-brand-orange/10 hover:to-brand-orange/20 transition-all border-l-4 border-brand-orange">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div className="w-4 h-4 bg-brand-orange rounded-full flex-shrink-0"></div>
|
|||
|
|
<span className="text-lg font-bold text-gray-900">Бухгалтер</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="relative h-64 overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
src="/media/images/about/team-work.png"
|
|||
|
|
alt="Работа в ГеоВектор"
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Правая колонка - Условия и требования */}
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* Условия */}
|
|||
|
|
<div className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 shadow-xl">
|
|||
|
|
<h3 className="text-2xl font-bold mb-6 flex items-center gap-2">
|
|||
|
|
<CheckCircle2 size={28} />
|
|||
|
|
Условия:
|
|||
|
|
</h3>
|
|||
|
|
<ul className="space-y-4">
|
|||
|
|
<li className="flex items-start gap-3">
|
|||
|
|
<div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Стабильная заработная плата (выплаты 2 раза в месяц)
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
<li className="flex items-start gap-3">
|
|||
|
|
<div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Оформление по ТК РФ, самозанятые или договор гражданско-правового характера
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
<li className="flex items-start gap-3">
|
|||
|
|
<div className="w-2 h-2 bg-white rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Режим работы 5/2 с 09:00-18:00
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Требования */}
|
|||
|
|
<div className="bg-white rounded-2xl p-8 shadow-xl border-2 border-gray-200">
|
|||
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
|||
|
|
<Award className="text-brand-orange" size={28} />
|
|||
|
|
Требования:
|
|||
|
|
</h3>
|
|||
|
|
<ul className="space-y-4">
|
|||
|
|
<li className="flex items-start gap-3 text-gray-700">
|
|||
|
|
<div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Опыт работы не менее 1 года
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
<li className="flex items-start gap-3 text-gray-700">
|
|||
|
|
<div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Среднее или высшее профессиональное образование
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
<li className="flex items-start gap-3 text-gray-700">
|
|||
|
|
<div className="w-2 h-2 bg-brand-orange rounded-full mt-2 flex-shrink-0"></div>
|
|||
|
|
<span className="leading-relaxed">
|
|||
|
|
Умение работать в коллективе, желание развиваться и совершенствовать свои навыки
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Контактная информация */}
|
|||
|
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12 shadow-2xl">
|
|||
|
|
<h3 className="text-2xl md:text-3xl font-bold mb-8 text-center">
|
|||
|
|
Все вопросы по телефону:
|
|||
|
|
</h3>
|
|||
|
|
|
|||
|
|
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
|||
|
|
<a
|
|||
|
|
href="tel:+79371560577"
|
|||
|
|
className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl hover:bg-white/20 transition-all hover:scale-105"
|
|||
|
|
>
|
|||
|
|
<div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
|
|||
|
|
<Phone className="text-brand-orange" size={28} />
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="text-sm text-gray-400 mb-1">Телефон</div>
|
|||
|
|
<div className="font-bold text-lg">+7 (937) 156-05-77</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl">
|
|||
|
|
<div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
|
|||
|
|
<Users className="text-brand-orange" size={28} />
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="text-sm text-gray-400 mb-1">Контактное лицо</div>
|
|||
|
|
<div className="font-bold text-lg">Елизавета Валерьевна</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a
|
|||
|
|
href="mailto:kovaleva@geowektor.ru"
|
|||
|
|
className="flex flex-col items-center gap-3 p-6 bg-white/10 rounded-xl hover:bg-white/20 transition-all hover:scale-105"
|
|||
|
|
>
|
|||
|
|
<div className="w-14 h-14 bg-brand-orange/20 rounded-full flex items-center justify-center">
|
|||
|
|
<Mail className="text-brand-orange" size={28} />
|
|||
|
|
</div>
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="text-sm text-gray-400 mb-1">Email</div>
|
|||
|
|
<div className="font-bold">kovaleva@geowektor.ru</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-center pt-6 border-t border-white/20">
|
|||
|
|
<a
|
|||
|
|
href="https://geowektor.ru"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-400 transition-colors text-lg font-semibold"
|
|||
|
|
>
|
|||
|
|
<Globe size={24} />
|
|||
|
|
geowektor.ru
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Секция с клиентами */}
|
|||
|
|
<div className="bg-gray-50 py-20 overflow-hidden">
|
|||
|
|
<div className="container mx-auto px-6 mb-12">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
|
|||
|
|
<Building2 className="text-brand-orange" size={32} />
|
|||
|
|
</div>
|
|||
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">Наши клиенты</h2>
|
|||
|
|
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
|
|||
|
|
Более 200 компаний доверили нам свои проекты. Среди них крупнейшие предприятия нефтегазовой отрасли,
|
|||
|
|
строительные холдинги и государственные организации.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
className="relative"
|
|||
|
|
onMouseEnter={handleCarouselMouseEnter}
|
|||
|
|
onMouseLeave={handleCarouselMouseLeave}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
ref={scrollContainerRef}
|
|||
|
|
onMouseDown={handleMouseDown}
|
|||
|
|
onMouseUp={handleMouseUp}
|
|||
|
|
onMouseMove={handleMouseMove}
|
|||
|
|
onMouseLeave={handleScrollContainerMouseLeave}
|
|||
|
|
onWheel={handleWheel}
|
|||
|
|
className={`flex gap-6 overflow-x-scroll scrollbar-hide ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
|
|||
|
|
style={{
|
|||
|
|
scrollbarWidth: 'none',
|
|||
|
|
msOverflowStyle: 'none',
|
|||
|
|
WebkitOverflowScrolling: 'touch'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{duplicatedClients.map((client, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="flex-shrink-0 w-72 group"
|
|||
|
|
draggable={false}
|
|||
|
|
>
|
|||
|
|
<div className={`relative bg-gradient-to-br ${client.color} rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 overflow-hidden`}>
|
|||
|
|
{/* Декоративные элементы */}
|
|||
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
|
|||
|
|
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full -ml-12 -mb-12"></div>
|
|||
|
|
|
|||
|
|
{/* Иконка здания */}
|
|||
|
|
<div className="relative flex items-center justify-center mb-6">
|
|||
|
|
<div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
|||
|
|
<Building2 className="text-white" size={32} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Название компании */}
|
|||
|
|
<div className="relative">
|
|||
|
|
<p className="text-center text-white font-bold text-lg leading-tight min-h-[60px] flex items-center justify-center">
|
|||
|
|
{client.name}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Нижний декоративный элемент */}
|
|||
|
|
<div className="mt-6 h-1 bg-white/30 rounded-full"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Градиенты по краям */}
|
|||
|
|
<div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-gray-50 to-transparent pointer-events-none"></div>
|
|||
|
|
<div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-gray-50 to-transparent pointer-events-none"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-center mt-8">
|
|||
|
|
<p className="text-sm text-gray-500 italic">
|
|||
|
|
💡 Используйте мышь или колесо прокрутки для навигации
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Секция отзывов */}
|
|||
|
|
<div className="bg-white py-20">
|
|||
|
|
<div className="container mx-auto px-6">
|
|||
|
|
<div className="max-w-6xl mx-auto">
|
|||
|
|
<div className="text-center mb-12">
|
|||
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-brand-orange/10 rounded-full mb-6">
|
|||
|
|
<Star className="text-brand-orange" size={32} />
|
|||
|
|
</div>
|
|||
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">Отзывы</h2>
|
|||
|
|
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
|
|||
|
|
Благодарственные письма от наших партнеров и клиентов
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* Отзыв 1 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ДАЛЬТЕХПРОМ - ВЫПОЛНЕНИЕ ОБСЛЕДОВАТЕЛЬНЫХ РАБОТ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/1.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 2 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ПЕГАЗ - КОМПЛЕКС ИНЖЕНЕРНЫХ ИЗЫСКАНИЙ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/2.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 3 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ БАШКИРЭНЕРГО - МОНТАЖ КТСО, ЭН
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/3.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 4 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ БАШКИРЭНЕРГО - РЕКОНСТРУКЦИЯ ОБЪЕКТА "ТЕХУКРЕПЛЕННОСТЬ БАЗЫ ПО СЭС"
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/4.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 5 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ПБ ОНГМ - ЗЕМЛЕУСТРОИТЕЛЬНЫЕ И КАДАСТРОВЫЕ РАБОТЫ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/5.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 6 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ПБ ОНГМ - СТРОИТЕЛЬСТВО АВТОМОБИЛЬНОЙ ДОРОГИ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/6.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 7 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ЛУКОЙЛ-УРАЛНЕФТЕПРОДУКТ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/7.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Отзыв 8 */}
|
|||
|
|
<div className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
|
|||
|
|
<div className="bg-brand-orange p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-white uppercase">
|
|||
|
|
ОТЗЫВ ЭЛЛАДА - КОМПЛЕКС ИНЖЕНЕРНЫХ ИЗЫСКАНИЙ
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<a
|
|||
|
|
href="/media/feedback/8.pdf"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="inline-flex items-center gap-3 text-brand-orange hover:text-orange-600 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<div className="w-10 h-10 bg-red-100 rounded flex items-center justify-center group-hover:bg-red-200 transition-colors">
|
|||
|
|
<FileText className="text-red-600" size={20} />
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold">Открыть документ (pdf)</span>
|
|||
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default AboutPage;
|