<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SYBIKO - IT-решения</title>
    <link rel="icon" type="image/x-icon" href="/static/images/SYBIKO_favicon.ico">
    <!-- <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', path='/images/SYBIKO_favicon.ico') }}"> -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        sybiko: {
                            red: '#FF0000',
                            dark: '#1A1A1A',
                            light: '#F5F5F5',
                        },
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                },
            },
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF;
            color: #1A1A1A;
        }
    </style>
</head>
<body class="font-sans">
    <header class="container mx-auto px-4 py-6 flex justify-between items-center relative">
        <a href="#" class="flex items-center">
            <img src="static/images/SYBIKO_123.svg" alt="SYBIKO logo" class="w-48 h-9 md:w-64 md:h-12 mr-2">
        </a>
        <nav class="hidden md:block">
            <a href="#about" class="text-sybiko-dark hover:text-sybiko-red mr-4">О нас</a>
            <a href="#contact" class="bg-sybiko-dark text-white px-4 py-2 rounded-full hover:bg-sybiko-red transition duration-300">Связаться</a>
        </nav>
        <button id="mobile-menu-button" class="md:hidden">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>
        <div id="mobile-menu" class="hidden absolute top-full left-0 right-0 bg-white shadow-md py-4 px-4 md:hidden">
            <a href="#about" class="block text-sybiko-dark hover:text-sybiko-red px-4 py-2">О нас</a>
            <a href="#contact" class="block bg-sybiko-dark text-white px-4 py-2 rounded-full hover:bg-sybiko-red transition duration-300 mt-2">Связаться</a>
        </div>
    </header>

    <main>
        <section id="hero" class="container mx-auto px-4 py-20">
            <h1 class="text-6xl font-bold mb-8">
                Мы создаем IT-решения для бизнеса.
            </h1>
            <p class="text-xl mb-8 max-w-2xl">
                SYBIKO - команда профессионалов с опытом разработки передовых технологических решений для оптимизации бизнес-процессов.
            </p>
            <a href="#services" class="bg-sybiko-dark text-white px-6 py-3 rounded-full inline-flex items-center hover:bg-sybiko-red transition duration-300">
                Узнать больше
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </section>

        <section id="about" class="bg-sybiko-light py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-8">О нас</h2>
                <p class="text-xl mb-6 max-w-3xl">
                    SYBIKO - IT-компания, которая выполняет полный цикл работ от предварительного анализа и создания до внедрения и сопровождения конечных продуктов с использованием современных методик управления проектами и современных технологий разработки. 
                <p class="text-xl max-w-3xl">
                    Наша миссия - помогать компаниям оптимизировать свои процессы, используя силу современных технологий и инновационный подход к решению задач.
                </p>
            </div>
        </section>

        <section id="services" class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Наши услуги</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Разработка и поддержка сайтов</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Создание сайтов с нуля</li>
                            <li>Поддержание работоспособности сайта</li>
                            <li>Мониторинг домена и хостинга</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Разработка ПО</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Создание программного обеспечения</li>
                            <li>Внедрение готовых решений</li>
                            <li>Кастомизация под потребности клиента</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Внедрение CRM</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Подбор оптимального CRM-решения</li>
                            <li>Настройка и адаптация под бизнес-процессы</li>
                            <li>Обучение сотрудников работе с CRM</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Мобильные приложения</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Разработка для iOS и Android</li>
                            <li>Создание кроссплатформенных решений</li>
                            <li>Интеграция с существующими системами</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
<!-- 
        <section id="about" class="bg-sybiko-light py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-8">О компании</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-2xl font-bold mb-4">Наша деятельность</h3>
                        <p class="mb-4">ООО "Сайбико" специализируется на разработке инновационных IT-решений для бизнеса. Мы предоставляем широкий спектр услуг от создания веб-сайтов до разработки сложных программных комплексов.</p>
                        <h3 class="text-2xl font-bold mb-4">Контакты</h3>
                        <ul class="list-disc list-inside mb-4">
                            <li>Название: ООО "Сайбико"</li>
                            <li>ИНН: 1234567890</li>
                            <li>Телефон: +7 (999) 123-45-67</li>
                            <li>Email: info@sybiko.ru</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">Технологический стек</h3>
                        <p class="mb-4">Мы используем современные технологии для создания эффективных решений:</p>
                        <ul class="list-disc list-inside mb-4">
                            <li>Языки программирования: Python, JavaScript, TypeScript</li>
                            <li>Фреймворки: FastAPI, React, Vue.js</li>
                            <li>Базы данных: PostgreSQL, MongoDB</li>
                            <li>Инфраструктура: Docker, Kubernetes</li>
                            <li>Облачные платформы: AWS, Google Cloud</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section> -->

        <!-- <section id="tech-stack" class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Технологический стек</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Языки программирования</h3>
                        <ul class="list-disc list-inside">
                            <li>Python</li>
                            <li>JavaScript</li>
                            <li>TypeScript</li>
                            <li>Java</li>
                            <li>C#</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Фреймворки и библиотеки</h3>
                        <ul class="list-disc list-inside">
                            <li>FastAPI</li>
                            <li>Django</li>
                            <li>React</li>
                            <li>Vue.js</li>
                            <li>Angular</li>
                            <li>.NET Core</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Инфраструктура и инструменты</h3>
                        <ul class="list-disc list-inside">
                            <li>Docker</li>
                            <li>Kubernetes</li>
                            <li>Git</li>
                            <li>Jenkins</li>
                            <li>AWS</li>
                            <li>Google Cloud</li>
                        </ul>
                    </div>
                </div>
                <div class="mt-12 text-center">
                    <p class="text-xl">Наша команда постоянно следит за новейшими технологиями и регулярно обновляет свои навыки, чтобы предоставлять клиентам самые современные и эффективные решения.</p>
                </div>
            </div>
        </section>
     -->
        <section id="tech-stack" class="py-20 bg-gray-100">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Наш технологический стек</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-2xl font-bold mb-4 text-sybiko">Разработка</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Python (FastAPI, Django)</li>
                            <li>JavaScript (React, Vue.js)</li>
                            <li>TypeScript</li>
                            <li>HTML5 / CSS3</li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-2xl font-bold mb-4 text-sybiko">Базы данных</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>PostgreSQL</li>
                            <li>MySQL</li>
                            <li>Redis</li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-2xl font-bold mb-4 text-sybiko">Инфраструктура</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Docker</li>
                            <li>Kubernetes</li>
                            <li>Яндекс Cloud</li>
                            <li>Nginx</li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-2xl font-bold mb-4 text-sybiko">Инструменты</h3>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Git</li>
                            <li>GitLab CI</li>
                            <li>Яндекс Трекер</li>
                        </ul>
                    </div>
                </div>
                <p class="mt-12 text-center text-lg">
                    Мы постоянно следим за новыми технологиями и совершенствуем наши навыки, 
                    чтобы предоставлять клиентам самые эффективные и современные решения.
                </p>
            </div>
        </section>

        <section id="projects" class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Наши проекты</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-3xl font-bold mb-4">TrackLink</h3>
                        <p class="mb-6">TrackLink - наш флагманский продукт. Программное обеспечение по контролю, аналитике, диспетчеризации и мониторингу транспорта. Интегратор систем ГЛОНАСС/GPS мониторинга транспорта, тахографического контроля.</p>
                        <ul class="list-disc list-inside mb-6 space-y-2">
                            <li>Собственная команда разработчиков</li>
                            <li>Интуитивно понятный интерфейс</li>
                            <li>Гибкие настройки под различные методологии</li>
                            <li>Расширенная аналитика и отчетность</li>
                            <li>Регулярные обновления</li>
                            <li>Мобильное приложение</li>
                        </ul>
                        <a href="/tracklink-presentation" 
                            class="text-sybiko-red hover:underline flex items-center" 
                            target="_blank" 
                            rel="noopener noreferrer">
                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                            </svg>
                            Узнать больше о TrackerLink (PDF)
                        </a>                
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-3xl font-bold mb-4">Wanlanda.ru</h3>
                        <p class="mb-6">Сайт wanlanda.ru - проект, разработанный нами для компании Anthill. Это современный, функциональный веб-сайт, отражающий уникальный характер и услуги компании.</p>
                        <ul class="list-disc list-inside mb-6 space-y-2">
                            <li>Адаптивный дизайн для всех устройств</li>
                            <li>Оптимизация для поисковых систем (SEO)</li>
                            <li>Интуитивно понятный пользовательский интерфейс</li>
                            <li>Интеграция с системами управления контентом</li>
                            <li>Высокая производительность и скорость загрузки</li>
                            <li>Соответствие современным веб-стандартам</li>
                        </ul>
                        <a href="https://wanlanda.ru" 
                            class="text-sybiko-red hover:underline flex items-center" 
                            target="_blank" 
                            rel="noopener noreferrer">
                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path>
                                <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
                            </svg>
                            Посетить сайт Wanlanda.ru
                        </a>                
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-3xl font-bold mb-4">Оптимизация CRM для компании Anthill</h3>
                        <p class="mb-6">Провели комплексную оптимизацию CRM-системы для тендерного отдела компании Anthill, что значительно повысило эффективность работы сотрудников.</p>
                        <ul class="list-disc list-inside mb-6 space-y-2">
                            <li>Разработка карты бизнес-процессов</li>
                            <li>Детальный анализ и структурирование рабочих процессов</li>
                            <li>Выявление областей для оптимизации</li>
                            <li>Настройка и внедрение дополнительного функционала</li>
                            <!-- <li>Платформа: Битрикс 24</li> -->
                        </ul>
                        <p class="mb-6 space-y-2"><strong>Платформа:</strong> Битрикс 24</p>
                        <p class="mb-6 space-y-2"><strong>Цель:</strong> улучшение системы управления взаимоотношениями с клиентами</p>
                        <p class="mb-6">
                            <strong>Результаты оптимизации:</strong>
                            <ul class="list-disc list-inside space-y-2">
                                <li>Расширение возможностей работы сотрудников внутри компании</li>
                                <li>Повышение эффективности развития тендерного отдела</li>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="prices" class="bg-sybiko-light py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Цены на услуги</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Разработка веб-сайта</h3>
                        <p class="text-3xl font-bold mb-4">от 100 000 ₽</p>
                        <ul class="list-disc list-inside mb-4">
                            <li>Дизайн</li>
                            <li>Вёрстка</li>
                            <li>Базовая SEO-оптимизация</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Разработка веб-приложения</h3>
                        <p class="text-3xl font-bold mb-4">от 300 000 ₽</p>
                        <ul class="list-disc list-inside mb-4">
                            <li>Проектирование архитектуры</li>
                            <li>Разработка frontend и backend</li>
                            <li>Интеграция с API</li>
                        </ul>
                    </div>
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h3 class="text-2xl font-bold mb-4">Разработка мобильного приложения</h3>
                        <p class="text-3xl font-bold mb-4">от 500 000 ₽</p>
                        <ul class="list-disc list-inside mb-4">
                            <li>iOS и Android версии</li>
                            <li>Нативная разработка</li>
                            <li>Публикация в App Store и Google Play</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="future" class="py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Наши перспективы</h2>
                <p class="text-xl mb-6">Как молодая и динамичная компания, благодаря современным цифровым возможностям, мы имеет масштабные планы на развитие:</p>
                <ul class="list-disc list-inside mb-6 space-y-3 text-xl">
                    <li>Расширение линейки продуктов для охвата новых сегментов рынка</li>
                    <li>Развитие партнерских отношений с ведущими IT-компаниями</li>
                    <li>Выход на международный рынок</li>
                    <li>Улучшение клиентского опыта</li>
                    <li>Оптимизация бизнес-процессов</li>
                    <li>Маркетинг и брендинг</li>
                    <li>Инвестиции в исследования и разработку инновационных технологий</li>
                    <li>Социальная ответственность и устойчивое развитие</li>
                </ul>
                <p class="text-xl">Мы стремимся стать лидером в области IT-решений, предоставляя нашим клиентам самые передовые и эффективные инструменты для развития их бизнеса.</p>
            </div>
        </section>

        <!-- Секция новостей компании -->
        <section id="news" class="bg-sybiko-light py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Новости компании</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <article class="bg-white rounded-lg shadow-lg overflow-hidden">
                        <img src="static/images/conference1.jpeg" alt="Конференция в Омске" class="w-full h-64 object-cover">
                        <div class="p-6">
                            <h3 class="text-2xl font-bold mb-2">SYBIKO на конференции "Отечественный софт" в Омске</h3>
                            <p class="text-gray-600 mb-4">4 сентября 2024</p>
                            <p class="text-gray-800 mb-4">
                                4 сентября в Омске состоялась практическая ИТ-конференция и выставка для представителей промышленных предприятий Сибирского федерального округа «Отечественный софт: путь к технологическому лидерству». Наша команда приняла участие в этом важном мероприятии.
                            </p>
                            <a href="/news/conference-omsk" class="text-sybiko-red hover:underline">Читать далее</a>
                        </div>
                    </article>
                    <!-- Здесь можно добавить дополнительные новости, используя тот же формат -->
                </div>
            </div>
        </section>


        <section id="contact" class=" py-20">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold mb-12">Свяжитесь с нами</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-2xl font-bold mb-4">Контакты</h3>
                        <ul class="list-disc list-inside mb-4 y-2">
                            <li>ООО "Сайбико"</li>
                            <li>ИНН: 4217210995</li>
                            <li>Телефон: +7 (981) 738-29-09</li>
                            <li>Email: info@sybiko.ru</li>
                            <li>Email: sybikosib@gmail.com</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">Напишите нам</h3>
                        <form id="contactForm" onsubmit="submitForm(event)">
                            <div class="mb-4">
                                <label for="name" class="block text-gray-700 font-bold mb-2">Имя</label>
                                <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required>
                            </div>
                            <div class="mb-4">
                                <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
                                <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required>
                            </div>
                            <div class="mb-4">
                                <label for="message" class="block text-gray-700 font-bold mb-2">Сообщение</label>
                                <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sybiko-red" required></textarea>
                            </div>
                            <button type="submit" class="bg-sybiko-dark text-white px-6 py-3 rounded-full hover:bg-sybiko-red transition duration-300">Отправить</button>
                        </form>
                        <div id="formMessage" class="mt-4 text-center hidden"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-sybiko-dark text-white py-20">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                <div>
                    <a href="#" class="flex items-center mb-4">
                        <img src="static/images/SYBIKO_123_white.svg" alt="SYBIKO logo" class="w-48 h-8 mr-2">
                        <!-- <span class="text-xl font-bold">SYBIKO</span> -->
                    </a>
                    <p class="text-gray-400">IT-решения для вашего бизнеса</p>
                    <br>
                    <p class="text-gray-400">ООО «САЙБИКО» является аккредитованной IT-компанией  «Министерством цифрового развития,связи и массовых коммуникаций Российской Федерации».</p>
                    <p class="text-gray-400">Решение о предоставлении государственной аккредитации организации, осуществляющей деятельность в области информационных технологий
                        от 02.08.2024 No АО-20240731-19054932804-3</p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Навигация</h4>
                    <ul class="space-y-2">
                        <li><a href="#about" class="hover:text-sybiko-red transition duration-300">О нас</a></li>
                        <li><a href="#services" class="hover:text-sybiko-red transition duration-300">Услуги</a></li>
                        <li><a href="#projects" class="hover:text-sybiko-red transition duration-300">Проекты</a></li>
                        <li><a href="#future" class="hover:text-sybiko-red transition duration-300">Перспективы</a></li>
                        <li><a href="#contact" class="hover:text-sybiko-red transition duration-300">Контакты</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Контакты</h4>
                    <ul class="space-y-2">
                        <!-- <li>+7 (999) 123-45-67</li> -->
                        <li>ООО "Сайбико"</li>
                        <li>ИНН: 4217210995</li>
                        <li>Телефон: +7 (981) 738-29-09</li>
                        <li>Email: info@sybiko.ru</li>
                        <li>Email: sybikosib@gmail.com</li>
                        <!-- <li>г. Новокузнецк, ул. Тольятти, д. 5Б, пом. 10</li> -->
                    </ul>
                    <!-- <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-white hover:text-sybiko-red transition duration-300">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        <a href="#" class="text-white hover:text-sybiko-red transition duration-300">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                        </a>
                        <a href="#" class="text-white hover:text-sybiko-red transition duration-300">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
                        </a>
                    </div> -->
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-700 text-center">
                <p>&copy; 2024 SYBIKO. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script>
        // Плавная прокрутка к секциям
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });


        async function submitForm(event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);
            const formMessage = document.getElementById('formMessage');

            try {
                const response = await fetch('/submit-form', {
                    method: 'POST',
                    body: JSON.stringify(Object.fromEntries(formData)),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const result = await response.json();

                if (response.ok) {
                    formMessage.textContent = 'Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.';
                    formMessage.classList.remove('hidden', 'text-red-500');
                    formMessage.classList.add('text-green-500');
                    form.reset();
                } else {
                    throw new Error(result.detail || 'Произошла ошибка при отправке формы.');
                }
            } catch (error) {
                formMessage.textContent = error.message;
                formMessage.classList.remove('hidden', 'text-green-500');
                formMessage.classList.add('text-red-500');
            }
        }
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', (event) => {
            if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
                mobileMenu.classList.add('hidden');
            }
        });

        // Close mobile menu when a link is clicked
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
            });
        });

        // // Анимация появления элементов при прокрутке
        // const observerOptions = {
        //     root: null,
        //     rootMargin: '0px',
        //     threshold: 0.1
        // };

        // const observer = new IntersectionObserver((entries) => {
        //     entries.forEach(entry => {
        //         if (entry.isIntersecting) {
        //             entry.target.classList.add('animate-fade-in-up');
        //         }
        //     });
        // }, observerOptions);

        // document.querySelectorAll('section > div').forEach(el => {
        //     el.classList.add('opacity-0', 'transform', 'translate-y-10', 'transition', 'duration-1000');
        //     observer.observe(el);
        // });
    </script>
</body>
</html>