Initial commit
This commit is contained in:
301
pages/ConstructionPage.tsx
Normal file
301
pages/ConstructionPage.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
import React from 'react';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import { CheckCircle2, Building, Factory, ShoppingCart, Network, Wrench, Target, Award, Users, TrendingUp } from 'lucide-react';
|
||||
|
||||
const ConstructionPage: React.FC = () => {
|
||||
const capabilities = [
|
||||
{ icon: Building, title: 'Строительство административных, жилых и офисных зданий' },
|
||||
{ icon: Factory, title: 'Строительство промышленных комплексов' },
|
||||
{ icon: ShoppingCart, title: 'Строительство торговых и складских комплексов' },
|
||||
{ icon: Network, title: 'Строительство систем коммуникаций' },
|
||||
{ icon: Wrench, title: 'Капитальный ремонт и реконструкция строительных объектов' }
|
||||
];
|
||||
|
||||
const factors = [
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Современные материалы',
|
||||
description: 'Применение современных отделочных и строительных материалов для обеспечения высоких эксплуатационных характеристик объекта'
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: 'Нормы безопасности',
|
||||
description: 'Тщательное следование нормам безопасности, установленным для определенного типа сооружения, обязательный учет требований градостроительных организаций'
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: 'Инженерные системы',
|
||||
description: 'Создание современных и эффективных инженерных систем для надежного и удобного управления зданием'
|
||||
}
|
||||
];
|
||||
|
||||
const projectSections = [
|
||||
'АСУ ТП объектов добычи, подготовки, переработки нефти и газа',
|
||||
'Системы измерения количества и показателей качества нефти, нефтепродуктов и газа',
|
||||
'Системы обнаружения утечек',
|
||||
'Системы электрохимзащиты',
|
||||
'Электроснабжение (внешнее и внутреннее)',
|
||||
'Пожарная автоматика',
|
||||
'Системы охранной и пожарной сигнализации, видеонаблюдение',
|
||||
'Водоснабжение и канализация (внешняя и внутренняя)',
|
||||
'Молниезащита и заземление',
|
||||
'Линии и системы связи'
|
||||
];
|
||||
|
||||
const specialSections = [
|
||||
'Мероприятия по гражданской обороне и чрезвычайным ситуациям',
|
||||
'Мероприятия по охране окружающей среды (ООС и ОВОС)',
|
||||
'Мероприятия по обеспечению пожарной безопасности'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white pb-20">
|
||||
<PageHeader
|
||||
title="Строительство"
|
||||
description="Полный комплекс строительных и монтажных работ любой сложности"
|
||||
image="/media/images/headers/header-building.png"
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-6 py-20">
|
||||
{/* Вступление */}
|
||||
<div className="max-w-5xl mx-auto mb-20">
|
||||
<div className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 md:p-12 mb-12">
|
||||
<p className="text-xl leading-relaxed mb-4 font-semibold">
|
||||
Строительство зданий и сооружений – одно из приоритетных направлений работы ООО «ГеоВектор».
|
||||
</p>
|
||||
<p className="text-lg leading-relaxed">
|
||||
Наши услуги включают выполнение полного комплекса строительных и монтажных работ.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Возможности компании */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4 text-center">
|
||||
Возможности нашей компании
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
Мы предлагаем не только типовые строительные решения, но также индивидуальные разработки
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{capabilities.map((capability, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-brand-orange hover:shadow-lg transition-all duration-300 group"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<capability.icon size={24} />
|
||||
</div>
|
||||
<p className="text-gray-700 leading-relaxed font-medium pt-2">
|
||||
{capability.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Преимущества комплексного подхода */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<div className="bg-gray-50 rounded-2xl p-8 md:p-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-6 text-center">
|
||||
Преимущества комплексного подхода к строительству
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-lg text-gray-700 leading-relaxed">
|
||||
Применение современных технических средств на всех этапах строительства, высокий профессионализм
|
||||
архитекторов, инженеров-строителей и дизайнеров выступают гарантией своевременного и качественного
|
||||
выполнения любого заказа.
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-xl p-6 border-l-4 border-brand-orange">
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
За время деятельности компания реализовала значительное число проектов, включая возведение
|
||||
и реконструкцию объектов, находящихся в Республике Башкортостан и других регионах страны.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Факторы, учитываемые при строительстве */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4 text-center">
|
||||
Важнейшие факторы при выполнении строительства
|
||||
</h2>
|
||||
<p className="text-center text-gray-600 mb-12 max-w-3xl mx-auto">
|
||||
В процессе выполнения строительства мы учитываем все важнейшие факторы,
|
||||
влияющие на эффективность будущего использования здания
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{factors.map((factor, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border-t-4 border-brand-orange"
|
||||
>
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl flex items-center justify-center">
|
||||
<factor.icon size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 text-center">
|
||||
{factor.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-sm text-center">
|
||||
{factor.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Комплексный подход */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<Users size={48} className="text-brand-orange" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4">Проектирование и строительство – единый процесс</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Проектирование и строительство объектов – взаимосвязанные процессы, каждый из которых требует
|
||||
тщательного контроля. Наша компания может предложить заказчикам не только непосредственное
|
||||
проведение строительных работ, но и профессиональные услуги на всех стадиях выполнения заказа –
|
||||
от проектирования до отделочных работ и ввода готового объекта в эксплуатацию.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Разделы комплексных проектов */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Выполнение разделов комплексных проектов
|
||||
</h2>
|
||||
|
||||
<div className="bg-gray-50 rounded-2xl p-8 md:p-10">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{projectSections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 bg-white rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CheckCircle2 className="flex-shrink-0 text-brand-orange mt-0.5" size={20} />
|
||||
<span className="text-gray-700 leading-relaxed">{section}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Специальные разделы */}
|
||||
<div className="max-w-6xl mx-auto mb-20">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Разработка специальных разделов
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{specialSections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-gradient-to-br from-brand-orange to-orange-600 text-white rounded-2xl p-8 hover:shadow-xl transition-all hover:scale-105"
|
||||
>
|
||||
<div className="flex items-center justify-center w-14 h-14 bg-white/20 rounded-xl mb-4 mx-auto">
|
||||
<CheckCircle2 size={28} />
|
||||
</div>
|
||||
<p className="text-center font-semibold leading-relaxed">
|
||||
{section}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Преимущества работы с нами */}
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="bg-gray-50 rounded-2xl p-8 md:p-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Почему выбирают нас
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-2 text-gray-900">Комплексный подход</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
От проектирования до ввода объекта в эксплуатацию
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-2 text-gray-900">Современные технологии</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
Применение передовых технических средств на всех этапах
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-2 text-gray-900">Профессиональная команда</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
Высокий профессионализм архитекторов, инженеров и дизайнеров
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 bg-white rounded-xl p-6 shadow-sm">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-xl">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-2 text-gray-900">Индивидуальный подход</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
Типовые и индивидуальные строительные решения
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Призыв к действию */}
|
||||
<div className="mt-12 text-center">
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<p className="text-gray-700 mb-6 text-lg">
|
||||
Готовы начать строительство вашего объекта?
|
||||
</p>
|
||||
<a
|
||||
href="#/contacts"
|
||||
className="inline-block px-10 py-4 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors text-lg shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Обсудить проект
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructionPage;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user