| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ЦКУ ТЕУС - Пожарная безопасность с 2014 года</title> |
| <meta name="description" content="Комплексные услуги по пожарной безопасности: аудит, обучение, документация, консалтинг. Работаем по всей России с 2014 года."> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| orange: '#FF6B00', |
| dark: '#1A1A1A', |
| gray: '#F5F5F5', |
| } |
| } |
| } |
| } |
| </script> |
| |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> |
| <script> |
| window.dataLayer = window.dataLayer || []; |
| function gtag(){dataLayer.push(arguments);} |
| gtag('js', new Date()); |
| gtag('config', 'G-XXXXXXXXXX'); |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero-overlay { |
| background: rgba(0, 0, 0, 0.6); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-orange { |
| transition: all 0.3s ease; |
| } |
| |
| .btn-orange:hover { |
| background-color: #e05a00; |
| transform: translateY(-2px); |
| } |
| |
| .testimonial-card { |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| } |
| |
| input:focus, textarea:focus { |
| outline: none; |
| box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); |
| } |
| |
| .nav-link:hover { |
| color: #FF6B00; |
| } |
| |
| .social-icon:hover { |
| color: #FF6B00; |
| transform: scale(1.1); |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 1s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| .floating-btn { |
| position: fixed; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| transition: all 0.3s ease; |
| z-index: 40; |
| } |
| |
| .floating-btn:hover { |
| transform: scale(1.1); |
| } |
| |
| .floating-btn i { |
| font-size: 24px; |
| color: white; |
| } |
| |
| |
| .carousel { |
| display: flex; |
| overflow-x: auto; |
| scroll-snap-type: x mandatory; |
| scroll-behavior: smooth; |
| -webkit-overflow-scrolling: touch; |
| scrollbar-width: none; |
| -ms-overflow-style: none; |
| } |
| |
| .carousel::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .carousel-item { |
| flex: 0 0 100%; |
| scroll-snap-align: start; |
| transition: transform 0.5s ease; |
| } |
| |
| .carousel-dots { |
| display: flex; |
| justify-content: center; |
| margin-top: 16px; |
| } |
| |
| .carousel-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background-color: #ccc; |
| margin: 0 4px; |
| cursor: pointer; |
| transition: background-color 0.3s ease; |
| } |
| |
| .carousel-dot.active { |
| background-color: #FF6B00; |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| </style> |
| </head> |
| <body class="text-dark"> |
| |
| <a href="tel:+79787099560" class="floating-btn bg-green-500 bottom-6 right-6 pulse"> |
| <i class="fas fa-phone"></i> |
| </a> |
| |
| <a href="https://wa.me/79787099560" class="floating-btn bg-green-600 bottom-20 right-6"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
| |
| <a href="#contact" class="floating-btn bg-orange bottom-32 right-6"> |
| <i class="fas fa-envelope"></i> |
| </a> |
|
|
| |
| <header class="fixed w-full bg-white shadow-md z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="bg-orange text-white font-bold text-xl px-3 py-1 mr-2">ЦКУ</div> |
| <div class="font-bold text-xl">ТЕУС</div> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#services" class="nav-link font-medium hover:text-orange transition">Услуги</a> |
| <a href="#about" class="nav-link font-medium hover:text-orange transition">О компании</a> |
| <a href="#remote" class="nav-link font-medium hover:text-orange transition">Дистанционно</a> |
| <a href="#testimonials" class="nav-link font-medium hover:text-orange transition">Отзывы</a> |
| <a href="#contact" class="nav-link font-medium hover:text-orange transition">Контакты</a> |
| </nav> |
| <div class="hidden md:flex items-center space-x-4"> |
| <a href="tel:+79787099560" class="flex items-center text-dark hover:text-orange"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>8-978-709-9560</span> |
| </a> |
| <a href="#contact" class="btn-orange bg-orange text-white font-medium py-2 px-4 rounded-md hover:shadow-md"> |
| Написать нам |
| </a> |
| </div> |
| <div class="md:hidden"> |
| <button id="menu-toggle" class="text-dark focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> |
| <a href="#services" class="block py-2 hover:text-orange">Услуги</a> |
| <a href="#about" class="block py-2 hover:text-orange">О компании</a> |
| <a href="#remote" class="block py-2 hover:text-orange">Дистанционно</a> |
| <a href="#testimonials" class="block py-2 hover:text-orange">Отзывы</a> |
| <a href="#contact" class="block py-2 hover:text-orange">Контакты</a> |
| <div class="mt-2 pt-2 border-t border-gray-200"> |
| <a href="tel:+79787099560" class="flex items-center py-2 text-dark hover:text-orange"> |
| <i class="fas fa-phone-alt mr-2"></i> |
| <span>8-978-709-9560</span> |
| </a> |
| <a href="#contact" class="block btn-orange bg-orange text-white text-center font-medium py-2 px-4 rounded-md hover:shadow-md mt-2"> |
| Написать нам |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative h-screen flex items-center justify-center bg-[url('https://images.unsplash.com/photo-1601134467661-3d775b999c8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center"> |
| <div class="hero-overlay absolute inset-0"></div> |
| <div class="container mx-auto px-4 z-10 text-center text-white animate-fade-in"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Пожарная безопасность – защита вашего бизнеса с 2014 года</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">ЦКУ ТЕУС предоставляет комплексные услуги по обеспечению пожарной безопасности. Мы проводим аудит, обучение, разрабатываем документацию и предлагаем консалтинг по современным требованиям.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg">Получить консультацию</a> |
| <a href="tel:+79787099560" class="inline-block bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-md text-lg hover:bg-white hover:text-dark transition">Позвонить нам</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-gray"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Наши услуги</h2> |
| |
| |
| <div class="relative"> |
| <div class="carousel" id="services-carousel"> |
| |
| <div class="carousel-item p-4"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> |
| <div class="text-white text-center"> |
| <i class="fas fa-fire-extinguisher text-6xl mb-4"></i> |
| <h3 class="text-2xl font-bold">Пожарный аудит и оценка рисков</h3> |
| </div> |
| </div> |
| <div class="md:w-2/3 p-8"> |
| <p class="text-lg mb-6">Комплексная проверка объектов на соответствие требованиям пожарной безопасности, выявление потенциальных угроз и рекомендации по их устранению.</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Полный анализ объекта</li> |
| <li>Выявление нарушений</li> |
| <li>Рекомендации по устранению</li> |
| <li>Отчет с планом мероприятий</li> |
| </ul> |
| <div class="flex flex-wrap gap-4"> |
| <button onclick="openModal('audit')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="carousel-item p-4"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> |
| <div class="text-white text-center"> |
| <i class="fas fa-user-graduate text-6xl mb-4"></i> |
| <h3 class="text-2xl font-bold">Обучение и инструктаж персонала</h3> |
| </div> |
| </div> |
| <div class="md:w-2/3 p-8"> |
| <p class="text-lg mb-6">Проведение тренингов, семинаров и инструктажей по пожарной безопасности для сотрудников, адаптированных под специфику вашего бизнеса.</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Программы для всех уровней</li> |
| <li>Практические тренировки</li> |
| <li>Работа с огнетушителями</li> |
| <li>Удостоверения по окончании</li> |
| </ul> |
| <div class="flex flex-wrap gap-4"> |
| <button onclick="openModal('training')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="carousel-item p-4"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> |
| <div class="text-white text-center"> |
| <i class="fas fa-file-alt text-6xl mb-4"></i> |
| <h3 class="text-2xl font-bold">Разработка пожарной документации</h3> |
| </div> |
| </div> |
| <div class="md:w-2/3 p-8"> |
| <p class="text-lg mb-6">Составление, обновление и внедрение внутренней документации, инструкций и регламентов в соответствии с законодательными нормами.</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Приказы и инструкции</li> |
| <li>Планы эвакуации</li> |
| <li>Журналы учета</li> |
| <li>Декларации</li> |
| </ul> |
| <div class="flex flex-wrap gap-4"> |
| <button onclick="openModal('docs')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="carousel-item p-4"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> |
| <div class="text-white text-center"> |
| <i class="fas fa-headset text-6xl mb-4"></i> |
| <h3 class="text-2xl font-bold">Консалтинг по пожарной безопасности</h3> |
| </div> |
| </div> |
| <div class="md:w-2/3 p-8"> |
| <p class="text-lg mb-6">Профессиональное консультирование, помощь при проверках и аудитах, регулярное обновление рекомендаций с учётом новейших стандартов.</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Сопровождение проверок</li> |
| <li>Консультации по законодательству</li> |
| <li>Рекомендации по оборудованию</li> |
| <li>Анализ проектной документации</li> |
| </ul> |
| <div class="flex flex-wrap gap-4"> |
| <button onclick="openModal('consulting')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="carousel-dots" id="services-dots"> |
| <div class="carousel-dot active" data-index="0"></div> |
| <div class="carousel-dot" data-index="1"></div> |
| <div class="carousel-dot" data-index="2"></div> |
| <div class="carousel-dot" data-index="3"></div> |
| </div> |
| |
| <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md z-10 focus:outline-none" id="prev-service"> |
| <i class="fas fa-chevron-left text-orange text-xl"></i> |
| </button> |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md z-10 focus:outline-none" id="next-service"> |
| <i class="fas fa-chevron-right text-orange text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">О компании</h2> |
| <p class="text-lg mb-6">Работаем с 2014 года и уже более 10 лет помогаем предприятиям обеспечить пожарную безопасность. Наши эксперты гарантируют высокий уровень сервиса и индивидуальный подход.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-3 mt-1"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Профессионализм и опыт</h4> |
| <p class="text-gray-600">Команда сертифицированных специалистов с многолетним опытом работы.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-3 mt-1"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Комплексное обслуживание</h4> |
| <p class="text-gray-600">Полный цикл услуг по пожарной безопасности от одного подрядчика.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-3 mt-1"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Индивидуальное сопровождение</h4> |
| <p class="text-gray-600">Персональный менеджер для каждого клиента и гибкие условия сотрудничества.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-3 mt-1"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Современные стандарты</h4> |
| <p class="text-gray-600">Все услуги соответствуют актуальным требованиям законодательства.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex space-x-4"> |
| <a href="#contact" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Связаться с нами</a> |
| <a href="tel:+79787099560" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1581093458171-4eac0cc0069c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="О компании ЦКУ ТЕУС" class="rounded-lg shadow-lg w-full"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="remote" class="py-16 bg-orange text-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8">Услуги доступны дистанционно по всей России</h2> |
| <p class="text-xl text-center max-w-3xl mx-auto mb-12">ЦКУ ТЕУС предоставляет полный комплекс услуг в области пожарной безопасности в дистанционном формате. Вы можете получить любую услугу, не выходя из офиса – мы предлагаем шаблоны и электронные формы документов, а также общение с экспертами в электронном виде.</p> |
| |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-8"> |
| <a href="#contact" class="btn-orange inline-block bg-white text-orange font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg text-center">Получить дистанционную консультацию</a> |
| <a href="#contact" class="btn-orange inline-block bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-md text-lg hover:bg-white hover:text-orange transition text-center">Заказать электронные формы</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-16 bg-gray"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Отзывы наших клиентов</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card bg-white p-6 rounded-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ТК</div> |
| <div> |
| <h4 class="font-bold">Торговая компания "Восток"</h4> |
| <div class="text-orange"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Благодаря аудиту от ЦКУ ТЕУС мы выявили несколько критических нарушений пожарной безопасности и оперативно их устранили. Теперь наши склады полностью соответствуют требованиям."</p> |
| </div> |
| |
| |
| <div class="testimonial-card bg-white p-6 rounded-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ОК</div> |
| <div> |
| <h4 class="font-bold">Отель "Крымский"</h4> |
| <div class="text-orange"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Обучение персонала прошло на высшем уровне. Инструкторы ЦКУ ТЕУС доступно объяснили все нюансы, провели практические занятия. Теперь наш персонал готов к любым чрезвычайным ситуациям."</p> |
| </div> |
| |
| |
| <div class="testimonial-card bg-white p-6 rounded-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ПК</div> |
| <div> |
| <h4 class="font-bold">Производственный комплекс "Севастополь"</h4> |
| <div class="text-orange"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Разработанная документация полностью соответствует требованиям МЧС. Особенно ценно, что специалисты ЦКУ ТЕУС сопровождали нас во время проверки и помогли ответить на все вопросы инспекторов."</p> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg">Оставить свой отзыв</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Контакты</h2> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Адрес</h4> |
| <p class="text-gray-600">г. Севастополь, ул. Молодых Строителей, д.2, оф. 24</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-4 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Телефон</h4> |
| <p class="text-gray-600">8-978-709-9560</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-4 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Email</h4> |
| <p class="text-gray-600">zcku@teus-company.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-orange text-xl mr-4 mt-1"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">Режим работы</h4> |
| <p class="text-gray-600">Пн-Пт: 9:00 - 18:00<br>Сб-Вс: выходной</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold text-lg mb-4">Мы в социальных сетях</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-vk"></i></a> |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-telegram"></i></a> |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-gray-100 p-6 rounded-lg"> |
| <h4 class="font-bold text-lg mb-2">Срочная помощь</h4> |
| <p class="text-gray-600 mb-4">Если вам нужна срочная консультация по вопросам пожарной безопасности, звоните прямо сейчас:</p> |
| <a href="tel:+79787099560" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg w-full text-center"> |
| <i class="fas fa-phone-alt mr-2"></i> Срочный звонок |
| </a> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="bg-gray p-8 rounded-lg shadow-md"> |
| <h3 class="text-2xl font-bold mb-2">Получите бесплатную консультацию</h3> |
| <p class="text-gray-600 mb-6">Оставьте заявку и наш специалист свяжется с вами в течение 1 часа</p> |
| |
| <form id="contact-form" class="space-y-4"> |
| <div> |
| <input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> |
| </div> |
| |
| <div> |
| <input type="tel" placeholder="Телефон" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> |
| </div> |
| |
| <div> |
| <input type="email" placeholder="Email" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> |
| </div> |
| |
| <div> |
| <textarea placeholder="Сообщение" rows="4" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"></textarea> |
| </div> |
| |
| <button type="submit" class="btn-orange w-full bg-orange text-white font-bold py-3 px-6 rounded hover:shadow-lg">Отправить заявку</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-dark text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <div class="bg-orange text-white font-bold text-xl px-3 py-1 mr-2">ЦКУ</div> |
| <div class="font-bold text-xl">ТЕУС</div> |
| </div> |
| <p class="text-gray-400 mt-2">© 2014-2025. Эксперты в области пожарной безопасности.</p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-center md:text-left"> |
| <a href="#services" class="hover:text-orange transition">Услуги</a> |
| <a href="#about" class="hover:text-orange transition">О компании</a> |
| <a href="#remote" class="hover:text-orange transition">Дистанционно</a> |
| <a href="#testimonials" class="hover:text-orange transition">Отзывы</a> |
| <a href="#contact" class="hover:text-orange transition">Контакты</a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400"> |
| <p>Все права защищены. Любое копирование материалов запрещено.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="audit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <h3 class="text-2xl font-bold mb-4">Пожарный аудит и оценка рисков</h3> |
| <p class="mb-4">Наши специалисты проводят комплексную проверку вашего объекта на соответствие требованиям пожарной безопасности. В процессе аудита мы:</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Выявляем потенциальные угрозы и нарушения</li> |
| <li>Оцениваем риски возникновения пожароопасных ситуаций</li> |
| <li>Проверяем состояние противопожарных систем и оборудования</li> |
| <li>Анализируем документацию на соответствие законодательству</li> |
| <li>Даем рекомендации по устранению выявленных недостатков</li> |
| </ul> |
| <p class="mb-6">По результатам аудита вы получаете подробный отчет с перечнем нарушений и рекомендациями по их устранению, а также план мероприятий по повышению уровня пожарной безопасности.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать аудит</a> |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> |
| </div> |
| </div> |
| </div> |
| |
| <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <h3 class="text-2xl font-bold mb-4">Обучение и инструктаж персонала</h3> |
| <p class="mb-4">Мы предлагаем полный спектр обучающих программ по пожарной безопасности, адаптированных под специфику вашего бизнеса:</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Обучение ответственных за пожарную безопасность</li> |
| <li>Инструктажи для всех категорий сотрудников</li> |
| <li>Практические тренировки по эвакуации</li> |
| <li>Семинары по работе с огнетушителями</li> |
| <li>Обучение действиям при пожаре</li> |
| </ul> |
| <p class="mb-6">Все программы разработаны с учетом требований законодательства и включают как теоретическую, так и практическую части. По окончании обучения выдается удостоверение установленного образца.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать обучение</a> |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> |
| </div> |
| </div> |
| </div> |
| |
| <div id="docs-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <h3 class="text-2xl font-bold mb-4">Разработка пожарной документации</h3> |
| <p class="mb-4">Наши специалисты разработают для вас полный комплект документов по пожарной безопасности, соответствующий всем требованиям законодательства:</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Приказы и инструкции по пожарной безопасности</li> |
| <li>Планы эвакуации при пожаре</li> |
| <li>Журналы учета и проверок</li> |
| <li>Декларации пожарной безопасности</li> |
| <li>Программы производственного контроля</li> |
| <li>Регламенты работы противопожарных систем</li> |
| </ul> |
| <p class="mb-6">Мы не только разработаем документы, но и поможем внедрить их в работу вашей организации, проведем обучение ответственных лиц и обеспечим сопровождение при проверках контролирующих органов.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать документы</a> |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> |
| </div> |
| </div> |
| </div> |
| |
| <div id="consulting-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| <h3 class="text-2xl font-bold mb-4">Консалтинг по пожарной безопасности</h3> |
| <p class="mb-4">Наши эксперты предоставляют профессиональные консультации по всем вопросам пожарной безопасности:</p> |
| <ul class="list-disc pl-5 mb-6 space-y-2"> |
| <li>Сопровождение при проверках МЧС</li> |
| <li>Консультации по соблюдению требований законодательства</li> |
| <li>Рекомендации по выбору и монтажу противопожарного оборудования</li> |
| <li>Помощь в разработке мероприятий по пожарной безопасности</li> |
| <li>Анализ проектной документации на соответствие нормам</li> |
| <li>Экспертиза заключений и предписаний контролирующих органов</li> |
| </ul> |
| <p class="mb-6">Мы предлагаем как разовые консультации, так и комплексное сопровождение вашего бизнеса в области пожарной безопасности, включая регулярные обновления рекомендаций с учетом изменений законодательства.</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать консультацию</a> |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('#mobile-menu a').forEach(link => { |
| link.addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| }); |
| }); |
| |
| |
| function openModal(service) { |
| document.getElementById(service + '-modal').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeModal() { |
| document.querySelectorAll('[id$="-modal"]').forEach(modal => { |
| modal.classList.add('hidden'); |
| }); |
| document.body.style.overflow = 'auto'; |
| } |
| |
| |
| document.querySelectorAll('[id$="-modal"]').forEach(modal => { |
| modal.addEventListener('click', function(e) { |
| if (e.target === modal) { |
| closeModal(); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('contact-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| alert('Спасибо за вашу заявку! Наш специалист свяжется с вами в ближайшее время.'); |
| this.reset(); |
| |
| |
| gtag('event', 'conversion', { |
| 'send_to': 'G-XXXXXXXXXX/conversion', |
| 'value': 1.0, |
| 'currency': 'RUB' |
| }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const carousel = document.getElementById('services-carousel'); |
| const dots = document.querySelectorAll('.carousel-dot'); |
| const prevBtn = document.getElementById('prev-service'); |
| const nextBtn = document.getElementById('next-service'); |
| |
| let currentIndex = 0; |
| |
| function updateCarousel() { |
| carousel.scrollTo({ |
| left: currentIndex * carousel.offsetWidth, |
| behavior: 'smooth' |
| }); |
| |
| dots.forEach((dot, index) => { |
| if (index === currentIndex) { |
| dot.classList.add('active'); |
| } else { |
| dot.classList.remove('active'); |
| } |
| }); |
| } |
| |
| prevBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex > 0) ? currentIndex - 1 : dots.length - 1; |
| updateCarousel(); |
| }); |
| |
| nextBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; |
| updateCarousel(); |
| }); |
| |
| dots.forEach(dot => { |
| dot.addEventListener('click', () => { |
| currentIndex = parseInt(dot.getAttribute('data-index')); |
| updateCarousel(); |
| }); |
| }); |
| |
| |
| let interval = setInterval(() => { |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; |
| updateCarousel(); |
| }, 5000); |
| |
| |
| carousel.addEventListener('mouseenter', () => { |
| clearInterval(interval); |
| }); |
| |
| carousel.addEventListener('mouseleave', () => { |
| interval = setInterval(() => { |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; |
| updateCarousel(); |
| }, 5000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Teusev/probo4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
