Initial commit IP

pages/DesignPage.tsx

@@ -0,0 +1,275 @@
+import React from 'react';
+import PageHeader from '../components/PageHeader';
+import { CheckCircle2, Building2, Factory, Construction, Shield, Lightbulb, FileCheck } from 'lucide-react';
+
+const DesignPage: React.FC = () => {
+  const objectTypes = [
+    {
+      icon: Building2,
+      title: 'Проектирование наземных объектов',
+      description: 'Жилые, общественные и административные здания с полным комплексом инженерных систем'
+    },
+    {
+      icon: Factory,
+      title: 'Проектирование предприятий топливно-энергетического комплекса',
+      description: 'Объекты нефтегазовой отрасли, энергетические комплексы и промышленные сооружения'
+    },
+    {
+      icon: Construction,
+      title: 'Проектирование объектов транспортных и защитных сооружений',
+      description: 'Дороги, мосты, тоннели и специальные защитные конструкции'
+    }
+  ];
+
+  const projectSections = [
+    'АСУ ТП объектов добычи, подготовки, переработки нефти и газа',
+    'Системы измерения количества и показателей качества нефти, нефтепродуктов и газа',
+    'Системы обнаружения утечек',
+    'Системы электрохимзащиты',
+    'Электроснабжение (внешнее и внутреннее)',
+    'Пожарная автоматика',
+    'Системы охранной и пожарной сигнализации, видеонаблюдение',
+    'Водоснабжение и канализация (внешняя и внутренняя)',
+    'Молниезащита и заземление',
+    'Линии и системы связи'
+  ];
+
+  const specialSections = [
+    'Мероприятия по гражданской обороне и чрезвычайным ситуациям',
+    'Мероприятия по охране окружающей среды (ООС и ОВОС)',
+    'Мероприятия по обеспечению пожарной безопасности'
+  ];
+
+  return (
+    <div className="bg-white pb-20">
+      <PageHeader 
+        title="Проектирование" 
+        description="Комплексные проектные решения для объектов любой сложности"
+        image="/media/images/headers/header-projectirovanie.png"
+      />
+
+      <div className="container mx-auto px-6 py-20">
+        {/* Вступительный блок */}
+        <div className="max-w-5xl mx-auto mb-20">
+          <div className="bg-gray-50 rounded-2xl p-8 md:p-12 mb-12">
+            <p className="text-lg text-gray-700 leading-relaxed mb-6">
+              Специалисты нашей организации обладают значительным опытом в сфере проектирования объектов 
+              в Республике Башкортостан и других регионах РФ.
+            </p>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              <strong>Проектирование строительных объектов</strong> – ответственный и сложный процесс, 
+              влияющий на проведение строительства объекта и его успешное введение в эксплуатацию.
+            </p>
+            <p className="text-gray-600 leading-relaxed">
+              На всех стадиях проектирования мы используем современные проектные и технические решения, 
+              что позволяет нам получать отличные результаты работ независимо от сложности объекта. 
+              Наши специалисты работают с актуальной законодательной базой в сфере проектирования 
+              и способны находить оптимальные решения с учетом нормативных требований и пожеланий заказчика.
+            </p>
+          </div>
+
+          <div className="bg-brand-orange text-white rounded-2xl p-8 md:p-12">
+            <p className="text-lg leading-relaxed mb-4">
+              Необходимость проведения определенных видов изысканий, их объем и состав определяются после 
+              анализа технического задания и зависят от вида, уровня ответственности, назначения сооружений, 
+              стадии проектирования, условий участка и степени их изученности.
+            </p>
+            <p className="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-3 gap-8 mb-12">
+            {objectTypes.map((type, index) => (
+              <div 
+                key={index}
+                className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-brand-orange transition-all duration-300 hover:shadow-xl text-center"
+              >
+                <div className="inline-flex w-20 h-20 bg-brand-orange text-white rounded-2xl items-center justify-center mb-6">
+                  <type.icon size={40} />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 mb-4 leading-tight">
+                  {type.title}
+                </h3>
+                <p className="text-gray-600 leading-relaxed text-sm">
+                  {type.description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* Дополнительная информация */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="bg-gray-50 rounded-xl p-6">
+              <div className="flex items-start gap-3">
+                <Shield className="text-brand-orange flex-shrink-0 mt-1" size={24} />
+                <p className="text-gray-700 leading-relaxed text-sm">
+                  В каждом случае учитываются требования к архитектурно-планировочным решениям объекта 
+                  и соответствующие нормы пожарной безопасности. Значительное внимание уделяется также 
+                  проектированию надежных систем внутренних и наружных инженерных коммуникаций.
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-xl p-6">
+              <div className="flex items-start gap-3">
+                <Lightbulb className="text-brand-orange flex-shrink-0 mt-1" size={24} />
+                <p className="text-gray-700 leading-relaxed text-sm">
+                  Перед выполнением работ по проектированию совместно с заказчиком определяются основные 
+                  требования к проекту, в том числе состав помещений и наполнение зданий инженерным 
+                  оборудованием. Проектировочные работы выполняются с учетом требований, предъявляемых 
+                  к определенному объекту, особенностей и условий его эксплуатации.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 bg-blue-50 border-l-4 border-blue-500 rounded-r-xl p-6">
+            <div className="flex items-start gap-3">
+              <FileCheck className="text-blue-600 flex-shrink-0 mt-1" size={24} />
+              <p className="text-gray-700 leading-relaxed text-sm">
+                <strong>Наша компания предоставляет услуги</strong> по предпроектной подготовке, необходимой 
+                для оформления земельных участков, а также созданию проектно-сметных документов и согласованию 
+                документации в контролирующих службах.
+              </p>
+            </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-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl p-8 md:p-12">
+            <h2 className="text-3xl font-bold mb-8 text-center">
+              Почему выбирают нас
+            </h2>
+            
+            <div className="grid md:grid-cols-2 gap-8">
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
+                  1
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg mb-2">Современные решения</h3>
+                  <p className="text-gray-300 text-sm leading-relaxed">
+                    Используем передовые проектные и технические решения на всех стадиях работы
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
+                  2
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg mb-2">Актуальная база</h3>
+                  <p className="text-gray-300 text-sm leading-relaxed">
+                    Работаем с актуальной законодательной базой в сфере проектирования
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
+                  3
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg mb-2">Опыт в регионе</h3>
+                  <p className="text-gray-300 text-sm leading-relaxed">
+                    Значительный опыт проектирования в Республике Башкортостан и других регионах РФ
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-orange rounded-lg flex items-center justify-center font-bold text-xl">
+                  4
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg mb-2">Индивидуальный подход</h3>
+                  <p className="text-gray-300 text-sm leading-relaxed">
+                    Находим оптимальные решения с учетом нормативов и пожеланий заказчика
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Призыв к действию */}
+          <div className="mt-12 text-center">
+            <div className="bg-gray-50 rounded-2xl p-8">
+              <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 DesignPage;
+