Files

363 lines
23 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>О нас — АгроТО | agroto.ru</title>
<meta name="description" content="АгроТО — система управления обслуживанием оборудования для агропредприятий. Создана в Череповце на основе реального опыта работы на молочной ферме.">
<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=Onest:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--g900: #173626; --g700: #1e5c3a; --g500: #2d7d53; --g400: #3d9966;
--g200: #a8ddb8; --g100: #d6f0df; --g50: #eef8f2;
--bg: #faf9f6; --bg2: #f4f2ed; --white: #ffffff;
--ink: #151515; --ink2: #404040; --ink3: #767676; --sand: #e6e0d5;
--r: 10px; --r2: 16px; --r3: 24px;
--sh2: 0 4px 20px rgba(0,0,0,0.08); --t: 0.22s ease;
}
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Onest', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: 'Onest', sans-serif; line-height: 1.15; letter-spacing: -0.02em; }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1160px)/2)); background: rgba(250,249,246,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.07); }
.nav-logo { display: flex; align-items: center; gap: 9px; }
.nav-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--g700); display: flex; align-items: center; justify-content: center; }
.nav-mark svg { width: 16px; height: 16px; }
.nav-name { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--r); font-family: 'Onest', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none; transition: all var(--t); white-space: nowrap; }
.btn-primary { background: var(--g700); color: #fff; }
.btn-primary:hover { background: var(--g900); }
.btn-ghost { background: transparent; color: var(--ink2); border: 1.5px solid var(--sand); }
.btn-ghost:hover { background: var(--white); }
/* HERO */
.about-hero { padding: 140px 0 80px; background: linear-gradient(135deg, var(--g50) 0%, var(--bg) 60%); border-bottom: 1px solid var(--sand); }
.about-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g500); margin-bottom: 20px; }
.hero-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--g400); border-radius: 2px; }
.about-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; margin-bottom: 20px; }
.about-hero h1 em { font-style: italic; color: var(--g500); }
.about-hero p { font-size: 1.05rem; color: var(--ink2); line-height: 1.75; margin-bottom: 16px; }
.hero-card { background: var(--white); border-radius: var(--r3); padding: 36px; border: 1px solid var(--sand); box-shadow: var(--sh2); }
.hero-card-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g500); margin-bottom: 20px; }
.stat-row { display: flex; gap: 32px; flex-wrap: wrap; }
.stat { }
.stat-num { font-size: 2.2rem; font-weight: 700; color: var(--g700); line-height: 1; }
.stat-label { font-size: 0.82rem; color: var(--ink3); margin-top: 4px; }
/* SECTIONS */
.section { padding: 80px 0; }
.section-alt { background: var(--white); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; margin-bottom: 16px; }
.section-title em { font-style: italic; color: var(--g500); }
.lead { font-size: 1.05rem; color: var(--ink2); line-height: 1.75; max-width: 640px; }
/* ORIGIN */
.origin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 52px; }
.origin-text p { color: var(--ink2); line-height: 1.75; margin-bottom: 16px; }
.origin-text p:last-child { margin-bottom: 0; }
.quote-block { background: var(--g50); border-left: 4px solid var(--g400); border-radius: 0 var(--r2) var(--r2) 0; padding: 24px 28px; margin: 32px 0; }
.quote-block p { font-size: 1.05rem; color: var(--g900); font-weight: 500; line-height: 1.65; font-style: italic; }
.quote-block cite { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--g700); font-style: normal; font-weight: 600; }
/* TIMELINE */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--g100); }
.tl-item { position: relative; margin-bottom: 36px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--g400); }
.tl-item.active .tl-dot { background: var(--g500); border-color: var(--g500); }
.tl-date { font-size: 0.78rem; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.tl-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.tl-text { font-size: 0.9rem; color: var(--ink3); line-height: 1.65; }
/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.team-card { background: var(--white); border-radius: var(--r2); padding: 32px; border: 1px solid var(--sand); }
.team-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: white; margin-bottom: 16px; }
.team-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.team-role { font-size: 0.82rem; color: var(--g500); font-weight: 600; margin-bottom: 12px; }
.team-desc { font-size: 0.88rem; color: var(--ink3); line-height: 1.65; }
/* VALUES */
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.value-card { padding: 28px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--sand); }
.value-ico { width: 44px; height: 44px; border-radius: var(--r); background: var(--g50); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.value-ico svg { width: 22px; height: 22px; stroke: var(--g700); }
.value-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.value-card p { font-size: 0.88rem; color: var(--ink3); line-height: 1.65; }
/* CTA */
.about-cta { background: var(--g900); text-align: center; padding: 80px 24px; }
.about-cta h2 { font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 600; color: white; margin-bottom: 16px; }
.about-cta h2 em { color: var(--g400); font-style: italic; }
.about-cta p { color: rgba(255,255,255,0.6); font-size: 1rem; margin-bottom: 36px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-cta-white { background: white; color: var(--g900); font-weight: 600; padding: 14px 32px; border-radius: var(--r2); font-size: 1rem; }
.btn-cta-white:hover { background: var(--g50); }
.btn-cta-ghost { background: transparent; color: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.25); padding: 14px 32px; border-radius: var(--r2); font-size: 1rem; }
.btn-cta-ghost:hover { background: rgba(255,255,255,0.08); color: white; }
/* FOOTER */
@media (max-width: 768px) {
.about-hero .wrap { grid-template-columns: 1fr; gap: 36px; }
.origin-grid { grid-template-columns: 1fr; gap: 36px; }
.team-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.stat-row { gap: 20px; }
}
footer{background:var(--bg);border-top:1px solid var(--sand);padding:60px max(24px,calc((100vw - 1160px)/2)) 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.footer-logo-mark{width:30px;height:30px;border-radius:7px;background:var(--g700);display:flex;align-items:center;justify-content:center}
.footer-logo-mark svg{width:14px;height:14px}
.footer-logo-name{font-family:'Onest',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.footer-tagline{font-size:0.85rem;color:var(--ink3);line-height:1.65;max-width:260px;margin-bottom:20px}
.footer-contact{font-size:0.82rem;color:var(--ink3)}
.footer-contact a{color:var(--g500)}
.footer-col h4{font-family:'Onest',sans-serif;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:0.88rem;color:var(--ink2);transition:color 0.22s ease}
.footer-col ul a:hover{color:var(--g700)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sand);padding-top:24px}
.footer-bottom p{font-size:0.8rem;color:var(--ink3)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer-bottom{flex-direction:column;gap:8px;text-align:center}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
:root{--g900:#173626;--g700:#1e5c3a;--g500:#2d7d53;--g400:#3d9966;--g300:#5db37d;--g50:#eef8f2;--bg:#faf9f6;--ink:#151515;--ink2:#404040;--ink3:#767676;--sand:#e6e0d5;--t:.22s ease}
.cta-section{background:var(--g900);text-align:center;padding:96px max(24px,calc((100vw - 1160px)/2));position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(45,125,83,0.25) 0%,transparent 70%)}
.cta-inner{position:relative;z-index:1}
.cta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:white;margin-bottom:20px}
.cta-eyebrow::before{content:'';width:18px;height:2px;background:var(--g400);border-radius:2px}
.cta-section h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:600;color:white;margin-bottom:16px;letter-spacing:-0.02em;line-height:1.15}
.cta-section h2 em{font-style:italic;color:var(--g300)}
.cta-sub{font-size:1.05rem;color:rgba(255,255,255,0.6);margin-bottom:40px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:10px;font-family:inherit;font-size:0.9rem;font-weight:500;cursor:pointer;border:none;transition:all var(--t);white-space:nowrap;text-decoration:none}
.btn-xl{padding:14px 32px;font-size:1rem;font-weight:600;border-radius:12px}
.btn-cta-white{background:white;color:var(--g900)}
.btn-cta-white:hover{background:var(--g50);transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.btn-cta-ghost{background:transparent;color:rgba(255,255,255,0.75);border:1.5px solid rgba(255,255,255,0.2)}
.btn-cta-ghost:hover{background:rgba(255,255,255,0.08);color:white;border-color:rgba(255,255,255,0.35)}
.cta-note{font-size:0.82rem;color:rgba(255,255,255,0.4)}
.cta-note a{color:rgba(255,255,255,0.6);border-bottom:1px dashed rgba(255,255,255,0.25)}
.cta-note a:hover{color:white}
footer{background:var(--bg);border-top:1px solid var(--sand);padding:60px max(24px,calc((100vw - 1160px)/2)) 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.footer-logo-mark{width:30px;height:30px;border-radius:7px;background:var(--g700);display:flex;align-items:center;justify-content:center}
.footer-logo-mark svg{width:14px;height:14px}
.footer-logo-name{font-family:inherit;font-weight:600;font-size:1.05rem;color:var(--ink)}
.footer-tagline{font-size:0.85rem;color:var(--ink3);line-height:1.65;max-width:260px;margin-bottom:20px}
.footer-contact{font-size:0.82rem;color:var(--ink3)}
.footer-contact a{color:var(--g500)}
.footer-col h4{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0}
.footer-col ul a{font-size:0.88rem;color:var(--ink2);transition:color var(--t);text-decoration:none}
.footer-col ul a:hover{color:var(--g700)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--sand);padding-top:24px}
.footer-bottom p{font-size:0.8rem;color:var(--ink3)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.cta-section{padding:72px 24px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px;text-align:center}}
</style>
</head>
<body>
<nav>
<a href="/" class="nav-logo">
<div class="nav-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<span class="nav-name">АгроТО</span>
</a>
<a href="https://app.agroto.ru" class="btn btn-primary">Попробовать</a>
</nav>
<!-- HERO -->
<section class="about-hero">
<div class="wrap">
<div>
<div class="hero-eyebrow">О нас</div>
<h1>Сделано на ферме.<br><em>Для фермы.</em></h1>
<p>АгроТО родился не в офисе и не из маркетинговых исследований. Его придумали и написали люди, которые сами столкнулись с хаосом в обслуживании оборудования на реальном молочном предприятии.</p>
<p>Мы из Череповца. И мы точно знаем, каково это — узнать о поломке вакуумного насоса постфактум.</p>
</div>
<div class="hero-card">
<div class="hero-card-label">АгроТО в цифрах</div>
<div class="stat-row">
<div class="stat">
<div class="stat-num">2025</div>
<div class="stat-label">год основания</div>
</div>
<div class="stat">
<div class="stat-num">1</div>
<div class="stat-label">реальное предприятие<br>в основе</div>
</div>
<div class="stat">
<div class="stat-num"></div>
<div class="stat-label">итераций до<br>первого релиза</div>
</div>
</div>
</div>
</div>
</section>
<!-- ИСТОРИЯ -->
<section class="section section-alt">
<div class="wrap">
<div class="hero-eyebrow">Как всё началось</div>
<h2 class="section-title">Бардак надоел.<br><em>Решили починить.</em></h2>
<div class="origin-grid">
<div class="origin-text">
<p>В 2025 году на молочном предприятии <strong>ООО Агромилк</strong> в Череповце накопилась классическая проблема: обслуживание оборудования велось в Excel, WhatsApp и голове главного механика. Плановые ТО срывались, запчасти заказывались в последний момент, история ремонтов терялась.</p>
<p>Стало понятно — нужна система. Не просто таблица, а полноценный инструмент, который умеет планировать, напоминать, фиксировать и анализировать. Назвали её внутри команды просто: <em>«Система предотвращения поломок»</em>.</p>
<p>Так появился АгроТО — сначала как внутренний инструмент, потом как продукт для всей отрасли.</p>
</div>
<div>
<div class="quote-block">
<p>«Мы не хотели покупать западную CMMS за огромные деньги с поддержкой на английском. Хотели что-то своё — понятное механику, удобное на телефоне и сделанное с пониманием специфики российского АПК.»</p>
<cite>— основатель АгроТО, Череповец</cite>
</div>
<div class="timeline">
<div class="tl-item active">
<div class="tl-dot"></div>
<div class="tl-date">Начало 2025</div>
<div class="tl-title">Первый прототип</div>
<div class="tl-text">Запуск на реальном предприятии ООО Агромилк. Тестирование на живых задачах.</div>
</div>
<div class="tl-item active">
<div class="tl-dot"></div>
<div class="tl-date">Середина 2025</div>
<div class="tl-title">Полноценная платформа</div>
<div class="tl-text">Склад запчастей, аварийные заявки, аналитика, мобильный доступ.</div>
</div>
<div class="tl-item active">
<div class="tl-dot"></div>
<div class="tl-date">2026</div>
<div class="tl-title">Открытый SaaS</div>
<div class="tl-text">Запуск agroto.ru. Первые клиенты за пределами Агромилк.</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-date">Впереди</div>
<div class="tl-title">ИИ и IoT</div>
<div class="tl-text">Интеграция с датчиками оборудования, предиктивное ТО.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- КОМАНДА — скрыто временно -->
<!-- ЦЕННОСТИ -->
<section class="section section-alt">
<div class="wrap">
<div class="hero-eyebrow">Принципы</div>
<h2 class="section-title">Во что мы верим</h2>
<div class="values-grid">
<div class="value-card">
<div class="value-ico">
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3>Сделано в России, для России</h3>
<p>Никаких иностранных зависимостей. Данные хранятся в России. Интерфейс понятен механику из Вологды, а не менеджеру из Амстердама.</p>
</div>
<div class="value-card">
<div class="value-ico">
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
</div>
<h3>Простота прежде всего</h3>
<p>Механик не должен читать инструкцию. Если действие требует больше двух кликов — мы делаем это снова.</p>
</div>
<div class="value-card">
<div class="value-ico">
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3>Клиент — партнёр</h3>
<p>Мы маленькие, и это значит — каждый клиент важен лично. Ваша обратная связь попадает напрямую к разработчику и меняет продукт.</p>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="cta-inner">
<div class="cta-eyebrow">Начните сегодня</div>
<h2>Возьмите оборудование<br><em>под контроль</em></h2>
<p class="cta-sub">Быстрое внедрение. Персональная поддержка на старте.</p>
<div class="cta-actions">
<a href="https://app.agroto.ru" class="btn btn-xl btn-cta-white">
Начать работу
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="https://app.agroto.ru" class="btn btn-xl btn-cta-ghost">Смотреть демо</a>
</div>
<p class="cta-note">Или напишите нам: <a href="mailto:info@agroto.ru">info@agroto.ru</a></p>
</div>
</section>
<footer>
<div class="footer-grid">
<div>
<div class="footer-logo">
<div class="footer-logo-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<span class="footer-logo-name">АгроТО</span>
</div>
<p class="footer-tagline">CMMS-платформа для управления обслуживанием оборудования на агропредприятиях России.</p>
<p class="footer-contact">Написать нам: <a href="mailto:info@agroto.ru">info@agroto.ru</a></p>
</div>
<div class="footer-col">
<h4>Продукт</h4>
<ul>
<li><a href="/#features">Возможности</a></li>
<li><a href="/#pricing">Тарифы</a></li>
<li><a href="/#how">Как работает</a></li>
<li><a href="/#faq">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Компания</h4>
<ul>
<li><a href="/about.html">О нас</a></li>
<li><a href="/blog.html">Блог</a></li>
<li><a href="/contacts.html">Контакты</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Поддержка</h4>
<ul>
<li><a href="/docs.html">Документация</a></li>
<li><a href="/kb.html">База знаний</a></li>
<li><a href="mailto:info@agroto.ru">Email</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 АгроТО. Все права защищены.</p>
<p>Сделано в России 🇷🇺</p>
</div>
</footer>
</body>
</html>