283 lines
17 KiB
HTML
283 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Комптон</title>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="/main/css/style.css" />
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- ====== НАВБАР ====== -->
|
||
<header class="navbar" role="navigation">
|
||
<div class="container">
|
||
<a href="#" class="navbar-logo">
|
||
<img src="/main/img/logo3.png" alt="FeedControl" />
|
||
</a>
|
||
<input type="checkbox" id="burgerToggle" class="burger-checkbox" />
|
||
<label for="burgerToggle" class="burger-icon" aria-label="Открыть меню">
|
||
<span></span><span></span><span></span>
|
||
</label>
|
||
<ul class="navbar-menu">
|
||
<li><a href="#solutions">Система</a></li>
|
||
<li><a href="#integrations">Технологии</a></li>
|
||
<li><a href="#security">Безопасность</a></li>
|
||
<li class="navbar-auth">
|
||
<a href="/login" class="btn btn-primary btn-sm">Вход</a>
|
||
<a href="/register" class="btn btn-primary btn-sm">Регистрация</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ====== HERO С ВИДЕО ====== -->
|
||
<section class="hero section-padding" id="hero">
|
||
<video class="hero-video" autoplay muted loop playsinline>
|
||
<source src="/main/video/Тестовое видео.mp4" type="video/mp4" />
|
||
Ваш браузер не поддерживает видео.
|
||
</video>
|
||
<div class="container">
|
||
<h1 class="scramble-target" id="heroTitle">Технологии будущего на вашей ферме</h1>
|
||
<p class="subtitle">
|
||
Интеллектуальная система контроля кормления КРС на основе искусственного интеллекта.
|
||
Снижаем затраты на корма, повышаем продуктивность стада и даём полный контроль над каждым этапом.
|
||
</p>
|
||
<div class="btn-group">
|
||
<a href="#cta" class="btn btn-primary">Запросить демо</a>
|
||
<a href="#solutions" class="btn btn-outline">Узнать больше</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== БЛОК: КАК ЭТО УСТРОЕНО ====== -->
|
||
<section class="steps-section section-padding" id="how-it-works">
|
||
<div class="container">
|
||
<div class="section-intro">
|
||
<span class="text-mono section-label">Процесс автоматизации</span>
|
||
<h2>Как устроена наша система</h2>
|
||
</div>
|
||
<div class="steps-grid">
|
||
<!-- Шаг 1 с изображением zoo.png -->
|
||
<div class="step-card">
|
||
<div class="step-image-wrapper">
|
||
<img src="/main/img/zoo.png" alt="План рационов" />
|
||
</div>
|
||
<h3>План рационов</h3>
|
||
<p>Зоотехник составляет и корректирует рацион для каждой группы КРС в удобной программе на офисном ПК, ноутбуке или смартфоне.</p>
|
||
</div>
|
||
<!-- Шаг 2 с изображением wifi.png -->
|
||
<div class="step-card">
|
||
<div class="step-image-wrapper">
|
||
<img src="/main/img/wifi.png" alt="Синхронизация данных" />
|
||
</div>
|
||
<h3>Синхронизация данных</h3>
|
||
<p>Созданное задание мгновенно и без проводов передается на весовой терминал кормосмесителя.</p>
|
||
</div>
|
||
<!-- Шаг 3 с изображением load.png -->
|
||
<div class="step-card">
|
||
<div class="step-image-wrapper">
|
||
<img src="/main/img/load.png" alt="Точная загрузка" />
|
||
</div>
|
||
<h3>Точная загрузка</h3>
|
||
<p>Тракторист на дисплее видит подсказки и точный вес каждого компонента на лету, что исключает ошибки перегруза.</p>
|
||
</div>
|
||
<!-- Шаг 4 с изображением control.png -->
|
||
<div class="step-card">
|
||
<div class="step-image-wrapper">
|
||
<img src="/main/img/control.png" alt="Контроль руководителя" />
|
||
</div>
|
||
<h3>Контроль руководителя</h3>
|
||
<p>Собственник или управляющий получает автоматический отчет о всех отклонениях и реальном расходе прямо на смартфон.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- ====== БЛОК: ОТ ФОРМУЛЫ ДО КОРМУШКИ (ТОЛЬКО ЗАГОЛОВОК + СЛОГАН) ====== -->
|
||
<!-- ============================================================ -->
|
||
<section class="funnel-section" id="funnel">
|
||
<div class="container">
|
||
<!-- Заголовок (без подзаголовка и шагов) -->
|
||
<div class="funnel-header">
|
||
<h2>От формулы до кормушки</h2>
|
||
</div>
|
||
|
||
<!-- Финальный слоган -->
|
||
<div class="funnel-final-slogan">
|
||
<p>«Каждый килограмм корма — под контролем.<br>Каждая копейка — на счету. Каждая минута — сэкономлена»</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== БЛОК С ЗАГОЛОВКОМ, ИЗОБРАЖЕНИЕМ И ВЫЕЗЖАЮЩИМ ТЕКСТОМ ====== -->
|
||
<section class="expand-block section-padding" id="about">
|
||
<div class="container">
|
||
<h2 class="section-title">Работа на любом устройстве</h2>
|
||
<p class="section-subtitle">
|
||
Управляйте системой кормления с телефона, планшета или компьютера — интерфейс адаптируется под любой экран.
|
||
</p>
|
||
|
||
<div class="expand-content" id="expandContent">
|
||
<div class="side-panel left">
|
||
<p><strong>Всегда на связи с фермой</strong> Абсолютный контроль рационов и остатков в любом месте, в любое время и с любого гаджета.</p>
|
||
</div>
|
||
|
||
<div class="image-wrapper">
|
||
<img src="/main/img/Комптон всегда под рукой на белом фоне.jpg" alt="Комптон всегда под рукой" />
|
||
</div>
|
||
|
||
<div class="side-panel right">
|
||
<p><strong>Прозрачность и контроль</strong> Вы всегда видите, сколько корма съедено, как меняется продуктивность и где можно сэкономить без потери качества.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== КАРТОЧКИ РЕШЕНИЙ ====== -->
|
||
<section class="section-padding" id="solutions">
|
||
<div class="container">
|
||
<h2 class="section-intro section-intro--mb">Начни кормить по новому!</h2>
|
||
<p class="section-subtitle-centered">
|
||
Всё, что нужно для точного, экономного и эффективного кормления КРС.
|
||
</p>
|
||
|
||
<div class="cards-grid">
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/16-24-58.gif" alt="Индивидуальный рацион" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
|
||
</div>
|
||
<h3>Автоматический расчет рационов</h3>
|
||
<p>Программа сама подбирает оптимальный состав корма для каждой группы животных с учётом возраста, веса и продуктивности.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/рецепты.gif" alt="Удобное редактирование рационов" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
||
</div>
|
||
<h3>Удобное редактирование рационов</h3>
|
||
<p>Редактируйте рацион в один клик: меняйте рецепты местами, добавляйте новые компоненты и мгновенно корректируйте сухое вещество.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/учет потребления.gif" alt="Прогноз продуктивности" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<h3>Учет кормов</h3>
|
||
<p>Автоматический учет остатков: программа точно рассчитывает остатки кормов на складе и прогнозирует дату следующей закупки на основе текущего расхода, защищая от внезапного дефицита.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/16-24-58.gif" alt="Визуализация экономии кормов" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M12 22V12"/><path d="M3.3 7L12 12l8.7-5"/></svg>
|
||
</div>
|
||
<h3>Гибкая система уведомлений</h3>
|
||
<p>Умная система уведомлений — ваш новый помощник, который следит за процессом кормления КРС и мгновенно предупреждает команду фермы о любых сбоях. Она заменяет ручной контроль автоматическим мониторингом.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/16-24-58.gif" alt="Анализ микроклимата" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
|
||
</div>
|
||
<h3>Анализ микроклимата</h3>
|
||
<p>Интеграция с системами климат-контроля: учитываем температуру и влажность для коррекции потребности в питании.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card fade-up card-with-gif">
|
||
<div class="card-gif-wrapper">
|
||
<img src="/main/gif/16-24-58.gif" alt="Единая платформа" loading="lazy" />
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/><path d="M12 7v10"/></svg>
|
||
</div>
|
||
<h3>Единая платформа</h3>
|
||
<p>Все данные о кормлении, здоровье и продуктивности в одном окне – для быстрого принятия решений.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== БЕГУЩАЯ СТРОКА ====== -->
|
||
<section class="marquee-section" id="integrations">
|
||
<div class="marquee-track" id="marqueeTrack">
|
||
<span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
|
||
<span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
|
||
<span class="logo-item">✦ ФЕРМА №1</span>
|
||
<span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
|
||
<span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
|
||
<span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
|
||
<span class="logo-item">✦ ПЛЕМЗАВОД</span>
|
||
<span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
|
||
<span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
|
||
<span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
|
||
<span class="logo-item">✦ ФЕРМА №1</span>
|
||
<span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
|
||
<span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
|
||
<span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
|
||
<span class="logo-item">✦ ПЛЕМЗАВОД</span>
|
||
<span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== CTA ====== -->
|
||
<section class="section-padding cta-section" id="cta">
|
||
<div class="container">
|
||
<h2>Внедряйте технологии будущего</h2>
|
||
<p>
|
||
Получите консультацию по настройке системы для вашего хозяйства.
|
||
Первые 2 месяца – полная поддержка и мониторинг.
|
||
</p>
|
||
<a href="#" class="btn btn-primary btn-lg">Оставить заявку</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== ФУТЕР ====== -->
|
||
<footer class="footer" id="security">
|
||
<div class="container">
|
||
<a href="#" class="footer-logo">
|
||
<img src="/main/img/logo3.png" alt="FeedControl" />
|
||
</a>
|
||
<span class="footer-copy">© 2026 — FeedControl</span>
|
||
<div class="footer-links">
|
||
<a href="#">Политика</a>
|
||
<a href="#">Поддержка</a>
|
||
<a href="#">Контакты</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script src="/main/js/main.js" defer></script>
|
||
|
||
</body>
|
||
</html> |