admin
1729 lines
90 KiB
HTML
1729 lines
90 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>АгроТО — CMMS для агропредприятий | 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;
|
||
--sh1: 0 1px 4px rgba(0,0,0,0.05);
|
||
--sh2: 0 4px 20px rgba(0,0,0,0.08);
|
||
--sh3: 0 12px 48px rgba(0,0,0,0.10);
|
||
--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;
|
||
}
|
||
|
||
/* subtle grain */
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
opacity: 0.025;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
h1,h2,h3,h4 { font-family: 'Onest', sans-serif; line-height: 1.12; letter-spacing: -0.02em; }
|
||
p { color: var(--ink2); }
|
||
|
||
a { text-decoration: none; color: inherit; }
|
||
|
||
.wrap { padding-left: max(24px, calc((100vw - 1160px)/2)); padding-right: max(24px, calc((100vw - 1160px)/2)); }
|
||
|
||
/* ── 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.88);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color var(--t), box-shadow var(--t);
|
||
}
|
||
nav.scrolled { border-color: rgba(0,0,0,0.07); box-shadow: 0 1px 16px rgba(0,0,0,0.06); }
|
||
|
||
.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-family: 'Onest', sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink); }
|
||
|
||
.nav-links { display: flex; gap: 28px; list-style: none; }
|
||
.nav-links a { font-size: 0.9rem; font-weight: 400; color: var(--ink2); transition: color var(--t); }
|
||
.nav-links a:hover { color: var(--ink); }
|
||
|
||
.nav-right { display: flex; align-items: center; gap: 10px; }
|
||
|
||
/* hamburger */
|
||
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
|
||
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--t); }
|
||
|
||
/* mobile menu */
|
||
.nav-mobile {
|
||
display: none; position: fixed; top: 64px; left: 0; right: 0;
|
||
background: var(--white); border-bottom: 1px solid var(--sand);
|
||
padding: 20px max(24px, calc((100vw - 1160px)/2)) 28px;
|
||
flex-direction: column; gap: 4px; z-index: 199;
|
||
box-shadow: var(--sh3);
|
||
}
|
||
.nav-mobile.open { display: flex; }
|
||
.nav-mobile a { font-size: 1rem; padding: 10px 0; color: var(--ink2); border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||
.nav-mobile a:last-child { border: none; }
|
||
.nav-mobile .btn { margin-top: 12px; text-align: center; justify-content: center; }
|
||
|
||
/* ── BUTTONS ─────────────────────────────────── */
|
||
.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); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30,92,58,0.3); }
|
||
.btn-ghost { background: transparent; color: var(--ink2); border: 1.5px solid var(--sand); }
|
||
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: #ccc; }
|
||
.btn-lg { padding: 12px 26px; font-size: 0.95rem; border-radius: var(--r2); }
|
||
.btn-xl { padding: 14px 32px; font-size: 1rem; border-radius: var(--r2); font-weight: 500; }
|
||
.btn-outline-green { background: transparent; color: var(--g700); border: 1.5px solid var(--g200); }
|
||
.btn-outline-green:hover { background: var(--g50); border-color: var(--g400); }
|
||
|
||
/* ── SECTION BASE ────────────────────────────── */
|
||
.section { padding: 96px max(24px, calc((100vw - 1160px)/2)); }
|
||
|
||
.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: 16px;
|
||
}
|
||
.eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--g400); border-radius: 2px; }
|
||
|
||
.section-title {
|
||
font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--ink);
|
||
max-width: 640px; margin-bottom: 16px;
|
||
}
|
||
.section-title em { font-style: italic; color: var(--g500); }
|
||
|
||
.section-sub {
|
||
font-size: 1.05rem; color: var(--ink2); max-width: 540px;
|
||
line-height: 1.7; margin-bottom: 52px;
|
||
}
|
||
|
||
/* ── HERO ────────────────────────────────────── */
|
||
.hero {
|
||
padding-top: 140px; padding-bottom: 80px;
|
||
padding-left: max(24px, calc((100vw - 1160px)/2));
|
||
padding-right: max(24px, calc((100vw - 1160px)/2));
|
||
position: relative; overflow: hidden;
|
||
}
|
||
|
||
/* field-row background */
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute; top: 0; right: 0;
|
||
width: 52%; height: 100%;
|
||
background: linear-gradient(135deg, var(--g50) 0%, #e8f4ec 100%);
|
||
clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 560px; }
|
||
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 14px; border-radius: 99px;
|
||
background: var(--g50); border: 1px solid var(--g100);
|
||
font-size: 0.8rem; font-weight: 500; color: var(--g700); margin-bottom: 24px;
|
||
}
|
||
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g400); animation: pulse 2s infinite; }
|
||
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.6rem, 5vw, 4.2rem);
|
||
font-weight: 600; line-height: 1.07;
|
||
letter-spacing: -0.03em; color: var(--ink); margin-bottom: 22px;
|
||
}
|
||
.hero h1 em { font-style: italic; color: var(--g500); }
|
||
|
||
.hero-sub { font-size: 1.1rem; color: var(--ink2); line-height: 1.72; max-width: 460px; margin-bottom: 36px; }
|
||
|
||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
|
||
|
||
.hero-trust { display: flex; align-items: center; gap: 12px; }
|
||
.hero-avatars { display: flex; }
|
||
.hero-avatars span {
|
||
width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--white);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.65rem; font-weight: 600; color: white; margin-left: -8px;
|
||
}
|
||
.hero-avatars span:first-child { margin-left: 0; }
|
||
.hero-trust-text { font-size: 0.85rem; color: var(--ink3); }
|
||
.hero-trust-text strong { color: var(--ink2); }
|
||
|
||
/* hero visual */
|
||
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
|
||
|
||
.hero-dash {
|
||
background: var(--white);
|
||
border-radius: var(--r3);
|
||
box-shadow: var(--sh3), 0 0 0 1px rgba(0,0,0,0.06);
|
||
overflow: hidden; width: 100%; max-width: 460px;
|
||
animation: float 4s ease-in-out infinite;
|
||
}
|
||
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
|
||
|
||
.dash-bar {
|
||
background: var(--g900); padding: 10px 16px;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.dash-dots { display: flex; gap: 5px; }
|
||
.dash-dots i { width: 10px; height: 10px; border-radius: 50%; }
|
||
.dash-dots i:nth-child(1){ background:#ff5f57 }
|
||
.dash-dots i:nth-child(2){ background:#ffbd2e }
|
||
.dash-dots i:nth-child(3){ background:#28c840 }
|
||
.dash-title { font-size: 0.75rem; color: rgba(255,255,255,0.5); font-family: 'Onest', sans-serif; margin-left: 4px; }
|
||
|
||
.dash-body { padding: 20px; }
|
||
|
||
.dash-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
|
||
.dash-kpi {
|
||
background: var(--bg); border-radius: var(--r); padding: 12px;
|
||
text-align: center; border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.dash-kpi-num { font-family: 'Onest', sans-serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
|
||
.dash-kpi-num.red { color: #e74c3c; }
|
||
.dash-kpi-num.amber{ color: #e67e22; }
|
||
.dash-kpi-num.green{ color: var(--g500); }
|
||
.dash-kpi-label { font-size: 0.7rem; color: var(--ink3); margin-top: 3px; }
|
||
|
||
.dash-tasks { display: flex; flex-direction: column; gap: 7px; }
|
||
.dash-task {
|
||
display: flex; align-items: center; gap: 10px;
|
||
background: var(--bg); border-radius: var(--r); padding: 9px 12px;
|
||
border-left: 3px solid transparent; border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.dash-task.t-over { border-left-color: #e74c3c; }
|
||
.dash-task.t-prog { border-left-color: #e67e22; }
|
||
.dash-task.t-pend { border-left-color: var(--g400); }
|
||
.dash-task-ico {
|
||
width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.t-over .dash-task-ico { background: #fdecea; }
|
||
.t-prog .dash-task-ico { background: #fef3e2; }
|
||
.t-pend .dash-task-ico { background: var(--g50); }
|
||
.dash-task-ico svg { width: 14px; height: 14px; }
|
||
.t-over .dash-task-ico svg { stroke: #e74c3c; }
|
||
.t-prog .dash-task-ico svg { stroke: #e67e22; }
|
||
.t-pend .dash-task-ico svg { stroke: var(--g500); }
|
||
.dash-task-info { flex: 1; min-width: 0; }
|
||
.dash-task-name { font-size: 0.8rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.dash-task-meta { font-size: 0.7rem; color: var(--ink3); }
|
||
.dash-tag {
|
||
font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
|
||
}
|
||
.t-over .dash-tag { background: #fdecea; color: #e74c3c; }
|
||
.t-prog .dash-tag { background: #fef3e2; color: #e67e22; }
|
||
.t-pend .dash-tag { background: var(--g50); color: var(--g600); }
|
||
|
||
/* floating badges */
|
||
.hero-float {
|
||
position: absolute;
|
||
background: var(--white); border-radius: var(--r2); padding: 10px 14px;
|
||
box-shadow: var(--sh2); border: 1px solid rgba(0,0,0,0.07);
|
||
display: flex; align-items: center; gap: 9px; font-size: 0.8rem; font-weight: 500;
|
||
white-space: nowrap; z-index: 10;
|
||
}
|
||
.hero-float-1 { top: -16px; left: -24px; animation: floatB 3.5s ease-in-out infinite 0.5s; }
|
||
.hero-float-2 { bottom: -16px; right: -16px; animation: floatB 3.5s ease-in-out infinite 1s; }
|
||
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
|
||
.float-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.float-dot.green { background: var(--g400); }
|
||
.float-dot.blue { background: #3b82f6; }
|
||
|
||
/* ── LOGOS ───────────────────────────────────── */
|
||
.logos { padding: 32px max(24px, calc((100vw - 1160px)/2)); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); background: var(--white); }
|
||
.logos-label { font-size: 0.78rem; font-weight: 500; color: var(--ink3); text-align: center; margin-bottom: 24px; letter-spacing: 0.05em; text-transform: uppercase; }
|
||
.logos-marquee-wrap { overflow: hidden; position: relative; }
|
||
.logos-marquee-wrap::before,
|
||
.logos-marquee-wrap::after {
|
||
content: ''; position: absolute; top: 0; width: 80px; height: 100%; z-index: 2; pointer-events: none;
|
||
}
|
||
.logos-marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
|
||
.logos-marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--white), transparent); }
|
||
.logos-row { display: flex; align-items: center; gap: 12px; width: max-content; animation: logos-scroll 28s linear infinite; }
|
||
.logos-row:hover { animation-play-state: paused; }
|
||
@keyframes logos-scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.logo-pill {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 8px 18px; border-radius: 99px;
|
||
background: var(--bg2); border: 1px solid var(--sand);
|
||
font-size: 0.85rem; font-weight: 500; color: var(--ink2);
|
||
transition: var(--t);
|
||
}
|
||
.logo-pill:hover { background: var(--white); border-color: var(--g200); color: var(--ink); }
|
||
.logo-pill svg { width: 16px; height: 16px; }
|
||
|
||
/* ── PROBLEM ─────────────────────────────────── */
|
||
.problem-section { background: var(--white); }
|
||
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
|
||
.problem-card {
|
||
padding: 28px; border-radius: var(--r2);
|
||
background: var(--bg); border: 1px solid var(--sand);
|
||
transition: var(--t);
|
||
}
|
||
.problem-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--g100); }
|
||
.problem-ico {
|
||
width: 44px; height: 44px; border-radius: var(--r);
|
||
background: #fff3f3; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.problem-ico svg { width: 20px; height: 20px; stroke: #e74c3c; }
|
||
.problem-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
|
||
.problem-card p { font-size: 0.9rem; line-height: 1.65; color: var(--ink3); }
|
||
|
||
/* ── FEATURES ────────────────────────────────── */
|
||
.features-intro { max-width: 600px; margin-bottom: 56px; }
|
||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||
.feat-card { grid-column: span 1; }
|
||
.feat-card {
|
||
padding: 32px; border-radius: var(--r2);
|
||
background: var(--white); border: 1px solid var(--sand);
|
||
transition: all var(--t); position: relative; overflow: hidden;
|
||
}
|
||
.feat-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||
background: linear-gradient(90deg, var(--g400), var(--g200));
|
||
transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
|
||
}
|
||
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--sh3); border-color: var(--g100); }
|
||
.feat-card:hover::before { transform: scaleX(1); }
|
||
.feat-ico {
|
||
width: 48px; height: 48px; border-radius: var(--r2); margin-bottom: 20px;
|
||
background: var(--g50); display: flex; align-items: center; justify-content: center;
|
||
transition: background var(--t);
|
||
}
|
||
.feat-card:hover .feat-ico { background: var(--g100); }
|
||
.feat-ico svg { width: 22px; height: 22px; stroke: var(--g700); }
|
||
.feat-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
|
||
.feat-card p { font-size: 0.88rem; line-height: 1.68; color: var(--ink3); margin-bottom: 16px; }
|
||
.feat-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g500); }
|
||
|
||
/* ── HOW ─────────────────────────────────────── */
|
||
.how-section { background: var(--white); }
|
||
.how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; position: relative; }
|
||
.how-steps::before {
|
||
content: ''; position: absolute; top: 28px; left: calc(100%/6); right: calc(100%/6);
|
||
height: 1px; background: repeating-linear-gradient(90deg, var(--sand) 0, var(--sand) 8px, transparent 8px, transparent 16px);
|
||
z-index: 0;
|
||
}
|
||
.how-step { text-align: center; padding: 0 24px; position: relative; z-index: 1; }
|
||
.how-num {
|
||
width: 56px; height: 56px; border-radius: 50%;
|
||
background: var(--white); border: 2px solid var(--g200);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: 'Onest', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--g700);
|
||
margin: 0 auto 24px; box-shadow: 0 0 0 6px var(--g50);
|
||
}
|
||
.how-step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
|
||
.how-step p { font-size: 0.88rem; color: var(--ink3); line-height: 1.68; }
|
||
|
||
/* ── METRICS ─────────────────────────────────── */
|
||
.metrics-section { background: var(--g50); border-top: 1px solid var(--g100); border-bottom: 1px solid var(--g100); }
|
||
.metrics-header { text-align: center; margin-bottom: 56px; }
|
||
.metrics-header .section-title { margin: 0 auto 0; }
|
||
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
|
||
.metric {
|
||
text-align: center; padding: 48px 24px;
|
||
background: var(--white); border: 1px solid var(--g100);
|
||
}
|
||
.metric:first-child { border-radius: var(--r2) 0 0 var(--r2); }
|
||
.metric:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
|
||
.metric-num {
|
||
font-family: 'Onest', sans-serif; font-size: 3rem; font-weight: 700;
|
||
color: var(--g700); line-height: 1; margin-bottom: 10px;
|
||
}
|
||
.metric-label { font-size: 0.88rem; color: var(--ink2); line-height: 1.5; }
|
||
|
||
/* ── PRICING ─────────────────────────────────── */
|
||
.pricing-header { text-align: center; margin-bottom: 36px; }
|
||
.pricing-header .section-title, .pricing-header .section-sub { max-width: 520px; margin-left: auto; margin-right: auto; }
|
||
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
|
||
.pricing-card {
|
||
background: var(--white); border-radius: var(--r3); padding: 28px;
|
||
border: 1.5px solid var(--sand); position: relative; overflow: hidden;
|
||
transition: box-shadow var(--t);
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.pricing-card:hover { box-shadow: var(--sh3); }
|
||
.pricing-card.featured {
|
||
border-color: var(--g500); box-shadow: 0 0 0 1px var(--g500), var(--sh2);
|
||
transform: scale(1.02);
|
||
}
|
||
.pricing-card.featured:hover { box-shadow: 0 0 0 1px var(--g500), var(--sh3); }
|
||
.pricing-ribbon {
|
||
position: absolute; top: 20px; right: -28px;
|
||
background: var(--g700); color: white;
|
||
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
|
||
padding: 5px 36px; transform: rotate(35deg);
|
||
}
|
||
.pricing-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink3); margin-bottom: 8px; }
|
||
.pricing-plan { font-family: 'Onest', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
|
||
.pricing-desc { font-size: 0.83rem; color: var(--ink3); line-height: 1.55; margin-bottom: 16px; min-height: auto; }
|
||
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
|
||
.pricing-amount { font-family: 'Onest', sans-serif; font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; }
|
||
.pricing-amount.contact { font-size: 1.6rem; }
|
||
.pricing-cur { font-size: 1.2rem; font-weight: 500; color: var(--ink2); }
|
||
.pricing-per { font-size: 0.85rem; color: var(--ink3); }
|
||
.pricing-divider { height: 1px; background: var(--sand); margin: 0 0 16px; }
|
||
.pricing-feats { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 0; flex: 1; padding-bottom: 24px; }
|
||
.pricing-feats li { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--ink2); }
|
||
.pricing-feats li svg { width: 16px; height: 16px; stroke: var(--g500); flex-shrink: 0; }
|
||
.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }
|
||
|
||
/* ── CAROUSEL (общий) ───────────────────────── */
|
||
.carousel-wrap { position: relative; }
|
||
/* На десктопе carousel-page прозрачен — карточки идут прямо в грид */
|
||
.features-grid .carousel-page { display: contents; }
|
||
.problem-grid .carousel-page { display: contents; }
|
||
.carousel-dots {
|
||
display: none;
|
||
justify-content: center; gap: 7px;
|
||
margin-top: 24px;
|
||
}
|
||
.carousel-dot {
|
||
width: 7px; height: 7px; border-radius: 50%;
|
||
background: var(--sand); border: none; padding: 0; cursor: pointer;
|
||
transition: background 0.2s, transform 0.2s;
|
||
}
|
||
.carousel-dot.active { background: var(--g500); transform: scale(1.3); }
|
||
|
||
/* ── PRICING CAROUSEL ────────────────────────── */
|
||
.pricing-carousel-wrap { position: relative; }
|
||
.pricing-dots {
|
||
display: none;
|
||
justify-content: center; gap: 7px;
|
||
margin-top: 28px;
|
||
}
|
||
.pricing-dot {
|
||
width: 7px; height: 7px; border-radius: 50%;
|
||
background: var(--sand); border: none; padding: 0; cursor: pointer;
|
||
transition: background 0.2s, transform 0.2s;
|
||
}
|
||
.pricing-dot.active { background: var(--g500); transform: scale(1.25); }
|
||
|
||
/* ── TESTIMONIALS ────────────────────────────── */
|
||
.testimonials-section { background: var(--bg2); }
|
||
.testi-header { text-align: center; margin-bottom: 52px; }
|
||
.testi-header .section-title { margin: 0 auto 16px; }
|
||
.testi-header .section-sub { margin: 0 auto; }
|
||
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
|
||
.testi-card {
|
||
background: var(--white); border-radius: var(--r2); padding: 32px;
|
||
border: 1px solid var(--sand); transition: var(--t);
|
||
}
|
||
.testi-card:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
|
||
.testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
|
||
.testi-stars svg { width: 16px; height: 16px; fill: #f59e0b; stroke: none; }
|
||
.testi-text { font-size: 0.92rem; line-height: 1.72; color: var(--ink2); margin-bottom: 24px; font-style: italic; }
|
||
.testi-author { display: flex; align-items: center; gap: 12px; }
|
||
.testi-avatar {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0;
|
||
}
|
||
.testi-name { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
|
||
.testi-co { font-size: 0.8rem; color: var(--ink3); }
|
||
|
||
/* ── FAQ ─────────────────────────────────────── */
|
||
.faq-section { background: var(--white); }
|
||
.faq-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
|
||
.faq-title { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 600; color: var(--ink); }
|
||
.faq-list { display: flex; flex-direction: column; }
|
||
.faq-item { border-bottom: 1px solid var(--sand); }
|
||
.faq-q {
|
||
width: 100%; background: none; border: none; cursor: pointer;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 20px 0; text-align: left; gap: 16px;
|
||
}
|
||
.faq-q-text { font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
|
||
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.25s ease; }
|
||
.faq-icon svg { width: 20px; height: 20px; stroke: var(--ink3); }
|
||
.faq-item.open .faq-icon { transform: rotate(45deg); }
|
||
.faq-a { display: none; padding: 0 0 20px; font-size: 0.88rem; color: var(--ink2); line-height: 1.72; }
|
||
.faq-item.open .faq-a { display: block; }
|
||
|
||
/* ── CTA ─────────────────────────────────────── */
|
||
.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; }
|
||
.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-cta-white { background: white; color: var(--g900); font-weight: 600; }
|
||
.btn-cta-white:hover { background: var(--g50); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,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 ──────────────────────────────────── */
|
||
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(--g600); 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 var(--t); }
|
||
.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); }
|
||
|
||
/* ── SCROLL REVEAL ───────────────────────────── */
|
||
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
|
||
.reveal.visible { opacity: 1; transform: none; }
|
||
|
||
/* ── RESPONSIVE ──────────────────────────────── */
|
||
|
||
/* ── Tablet (≤1000px) ── */
|
||
@media (max-width: 1000px) {
|
||
/* Hero: скрываем визуал, центрируем текст */
|
||
.hero-inner { grid-template-columns: 1fr; min-height: auto; }
|
||
.hero::before { display: none; }
|
||
.hero-visual { display: none; }
|
||
.hero { padding-top: 120px; padding-bottom: 72px; }
|
||
.hero-text { text-align: center; }
|
||
.hero-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
|
||
.hero-actions { justify-content: center; }
|
||
.hero-trust { justify-content: center; }
|
||
|
||
/* Грид-перестройки */
|
||
.problem-grid { grid-template-columns: 1fr 1fr; }
|
||
.features-grid { grid-template-columns: repeat(2,1fr); }
|
||
.feat-card { grid-column: span 1 !important; }
|
||
|
||
/* Как работает: вертикально с числами слева */
|
||
.how-steps::before { display: none; }
|
||
.how-steps { grid-template-columns: 1fr; gap: 40px; }
|
||
.how-step { text-align: left; padding: 0; display: flex; align-items: flex-start; gap: 20px; }
|
||
.how-num { margin: 0; flex-shrink: 0; }
|
||
|
||
/* Метрики 2×2 */
|
||
.metrics-grid { grid-template-columns: repeat(2,1fr); }
|
||
.metric:first-child { border-radius: var(--r2) 0 0 0; }
|
||
.metric:last-child { border-radius: 0 0 var(--r2) 0; }
|
||
.metric:nth-child(2) { border-radius: 0 var(--r2) 0 0; }
|
||
.metric:nth-child(3) { border-radius: 0 0 0 var(--r2); }
|
||
|
||
/* Тарифы стопкой */
|
||
.pricing-card.featured { transform: none; }
|
||
|
||
/* Отзывы 2 колонки */
|
||
.testi-grid { grid-template-columns: 1fr 1fr; }
|
||
|
||
/* FAQ: заголовок над списком */
|
||
.faq-inner { grid-template-columns: 1fr; gap: 40px; }
|
||
|
||
/* Футер 2 колонки */
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
|
||
/* Навигация */
|
||
.nav-links { display: none; }
|
||
/* Показываем dots у всех каруселей */
|
||
.carousel-dots { display: flex; }
|
||
.pricing-dots { display: flex; }
|
||
|
||
/* Проблема и Возможности: 2 карточки на страницу */
|
||
.problem-grid,
|
||
.features-grid {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
gap: 16px;
|
||
padding-bottom: 4px;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
.problem-grid::-webkit-scrollbar,
|
||
.features-grid::-webkit-scrollbar { display: none; }
|
||
|
||
.carousel-page {
|
||
flex: 0 0 calc(88vw - 48px);
|
||
max-width: 400px;
|
||
scroll-snap-align: start;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Отзывы: 1 карточка на страницу */
|
||
.testi-grid {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
gap: 16px;
|
||
padding-bottom: 4px;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
.testi-grid::-webkit-scrollbar { display: none; }
|
||
.testi-grid .testi-card {
|
||
flex: 0 0 calc(88vw - 48px);
|
||
max-width: 460px;
|
||
scroll-snap-align: start;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pricing-grid {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
gap: 20px;
|
||
padding-bottom: 4px;
|
||
scroll-padding-left: 24px;
|
||
/* Скрываем скроллбар */
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
.pricing-grid::-webkit-scrollbar { display: none; }
|
||
.pricing-card {
|
||
scroll-snap-align: center;
|
||
flex: 0 0 82%;
|
||
max-width: 360px;
|
||
}
|
||
.pricing-card.featured { transform: none; box-shadow: 0 0 0 1px var(--g500), var(--sh2); }
|
||
.nav-burger { display: flex; }
|
||
}
|
||
|
||
/* ── Mobile (≤640px) ── */
|
||
@media (max-width: 640px) {
|
||
/* Секции: меньше вертикальных отступов */
|
||
.section { padding-top: 60px; padding-bottom: 60px; }
|
||
|
||
/* Типографика заголовков */
|
||
.section-title { font-size: 1.85rem; }
|
||
.section-sub { font-size: 0.95rem; margin-bottom: 36px; }
|
||
|
||
/* Hero */
|
||
.hero { padding-top: 100px; padding-bottom: 60px; }
|
||
.hero h1 { font-size: 2.1rem; }
|
||
.hero-sub { font-size: 1rem; margin-bottom: 28px; }
|
||
.hero-actions {
|
||
flex-direction: column; align-items: stretch;
|
||
gap: 10px;
|
||
}
|
||
.hero-actions .btn { justify-content: center; width: 100%; }
|
||
.hero-trust { flex-direction: column; gap: 8px; text-align: center; }
|
||
|
||
/* Навигация: скрываем «Войти» на маленьких экранах */
|
||
.nav-right .btn-ghost { display: none; }
|
||
.nav-right .btn-primary { padding: 8px 16px; font-size: 0.85rem; }
|
||
|
||
/* Проблемы: 1 колонка */
|
||
.problem-grid { grid-template-columns: 1fr; }
|
||
.problem-card { padding: 22px; }
|
||
|
||
/* Фичи: 1 колонка */
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.feat-card { grid-column: span 1 !important; padding: 24px; }
|
||
|
||
/* Метрики: 2×2, меньше паддинг */
|
||
.metrics-grid { grid-template-columns: 1fr 1fr; }
|
||
.metric { padding: 32px 16px; }
|
||
.metric-num { font-size: 2.4rem; }
|
||
|
||
/* Тарифы: 1 колонка, полная ширина */
|
||
.pricing-card { padding: 28px 24px; }
|
||
.pricing-desc { min-height: auto; }
|
||
|
||
/* Отзывы: 1 колонка */
|
||
.testi-grid { grid-template-columns: 1fr; }
|
||
.testi-card { padding: 24px; }
|
||
|
||
/* FAQ */
|
||
.faq-title { font-size: 1.6rem; }
|
||
.faq-q-text { font-size: 0.9rem; }
|
||
|
||
/* CTA-секция */
|
||
.cta-section { padding-top: 72px; padding-bottom: 72px; }
|
||
.cta-section h2 { font-size: 1.85rem; }
|
||
.cta-sub { font-size: 0.95rem; margin-bottom: 28px; }
|
||
.cta-actions {
|
||
flex-direction: column; align-items: stretch;
|
||
gap: 10px; max-width: 320px; margin: 0 auto 20px;
|
||
}
|
||
.cta-actions .btn { justify-content: center; width: 100%; }
|
||
|
||
/* Футер */
|
||
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
|
||
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
|
||
footer { padding-top: 48px; padding-bottom: 32px; }
|
||
}
|
||
|
||
/* ── Very small (≤400px) ── */
|
||
@media (max-width: 400px) {
|
||
.hero h1 { font-size: 1.8rem; }
|
||
.section-title { font-size: 1.65rem; }
|
||
.cta-section h2 { font-size: 1.65rem; }
|
||
.metric-num { font-size: 2rem; }
|
||
.pricing-card { padding: 24px 18px; }
|
||
.testi-card { padding: 20px; }
|
||
.feat-card { padding: 20px; }
|
||
.problem-card { padding: 18px; }
|
||
.hero-badge { font-size: 0.75rem; }
|
||
}
|
||
|
||
/* ── LEAD MODAL ─────────────────────────────── */
|
||
.lead-overlay {
|
||
position: fixed; inset: 0; z-index: 1000;
|
||
background: rgba(15,23,18,0.55); backdrop-filter: blur(4px);
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 16px;
|
||
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
|
||
}
|
||
.lead-overlay.active { opacity: 1; pointer-events: all; }
|
||
.lead-modal {
|
||
background: var(--white); border-radius: var(--r3); padding: 40px;
|
||
width: 100%; max-width: 480px; position: relative;
|
||
box-shadow: 0 24px 64px rgba(0,0,0,0.18);
|
||
transform: translateY(16px) scale(0.98); transition: transform 0.25s ease;
|
||
}
|
||
.lead-overlay.active .lead-modal { transform: translateY(0) scale(1); }
|
||
.lead-modal-close {
|
||
position: absolute; top: 16px; right: 16px;
|
||
width: 32px; height: 32px; border-radius: 50%;
|
||
background: var(--bg2); border: none; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; color: var(--ink3);
|
||
transition: var(--t);
|
||
}
|
||
.lead-modal-close:hover { background: var(--sand); color: var(--ink); }
|
||
.lead-modal-eyebrow { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g500); margin-bottom: 8px; }
|
||
.lead-modal h3 { font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
|
||
.lead-modal-sub { font-size: 0.85rem; color: var(--ink3); margin-bottom: 28px; }
|
||
.lead-plan-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: var(--g50); border: 1px solid var(--g200); color: var(--g700);
|
||
font-size: 0.78rem; font-weight: 600; padding: 4px 12px; border-radius: 99px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.lead-plan-badge.hidden { display: none; }
|
||
.lead-form { display: flex; flex-direction: column; gap: 14px; }
|
||
.lead-field { display: flex; flex-direction: column; gap: 5px; }
|
||
.lead-field label { font-size: 0.8rem; font-weight: 500; color: var(--ink2); }
|
||
.lead-field input, .lead-field select {
|
||
height: 44px; padding: 0 14px; border-radius: var(--r1);
|
||
border: 1.5px solid var(--sand); background: var(--bg2);
|
||
font-size: 0.9rem; color: var(--ink); outline: none;
|
||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||
font-family: inherit;
|
||
}
|
||
.lead-field input:focus, .lead-field select:focus {
|
||
border-color: var(--g400); background: var(--white);
|
||
box-shadow: 0 0 0 3px rgba(74,158,100,0.12);
|
||
}
|
||
.lead-field input::placeholder { color: var(--ink3); }
|
||
.lead-submit {
|
||
height: 48px; margin-top: 4px; background: var(--g700); color: white;
|
||
border: none; border-radius: var(--r1); font-size: 0.95rem; font-weight: 600;
|
||
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
transition: background 0.2s, transform 0.15s;
|
||
}
|
||
.lead-submit:hover { background: var(--g900); transform: translateY(-1px); }
|
||
.lead-submit:disabled { opacity: 0.6; pointer-events: none; }
|
||
.lead-note { font-size: 0.75rem; color: var(--ink3); text-align: center; margin-top: 10px; }
|
||
.lead-success {
|
||
display: none; flex-direction: column; align-items: center;
|
||
text-align: center; padding: 16px 0;
|
||
}
|
||
.lead-success.show { display: flex; }
|
||
.lead-success-ico {
|
||
width: 56px; height: 56px; border-radius: 50%;
|
||
background: var(--g50); border: 2px solid var(--g200);
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.lead-success-ico svg { width: 26px; height: 26px; stroke: var(--g500); }
|
||
.lead-success h4 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
|
||
.lead-success p { font-size: 0.88rem; color: var(--ink3); line-height: 1.6; }
|
||
@media (max-width: 480px) {
|
||
.lead-modal { padding: 28px 20px; }
|
||
.lead-modal h3 { font-size: 1.2rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav id="main-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>
|
||
|
||
<ul class="nav-links">
|
||
<li><a href="#features">Возможности</a></li>
|
||
<li><a href="#how">Как работает</a></li>
|
||
<li><a href="#pricing">Тарифы</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
</ul>
|
||
|
||
<div class="nav-right">
|
||
<a href="https://app.agroto.ru" class="btn btn-ghost">Войти</a>
|
||
<button class="nav-burger" id="nav-burger" aria-label="Меню">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="nav-mobile" id="nav-mobile">
|
||
<a href="#features">Возможности</a>
|
||
<a href="#how">Как работает</a>
|
||
<a href="#pricing">Тарифы</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="https://app.agroto.ru" class="btn btn-ghost btn-lg">Войти</a>
|
||
</div>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-inner">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">
|
||
<span class="hero-badge-dot"></span>
|
||
Разработано для АПК России
|
||
</div>
|
||
<h1>Обслуживание<br>оборудования<br><em>без хаоса</em></h1>
|
||
<p class="hero-sub">АгроТО — CMMS-платформа для управления обслуживанием оборудования на агропредприятиях. Плановое ТО, аварийные заявки, склад запчастей — всё в одной системе.</p>
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary btn-xl open-lead-modal" data-plan="">
|
||
Начать работу
|
||
<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>
|
||
</button>
|
||
<a href="https://app.agroto.ru" class="btn btn-ghost btn-xl">Смотреть демо</a>
|
||
</div>
|
||
<div class="hero-trust">
|
||
<div class="hero-avatars">
|
||
<span style="background:var(--g700)">АМ</span>
|
||
<span style="background:var(--g500)">КФ</span>
|
||
<span style="background:#e76f51">ПА</span>
|
||
<span style="background:#3b82f6">СН</span>
|
||
</div>
|
||
<span class="hero-trust-text"><strong>20+ предприятий</strong> уже в системе</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-visual">
|
||
<div class="hero-float hero-float-1">
|
||
<span class="float-dot blue"></span>
|
||
Новая аварийная заявка
|
||
</div>
|
||
<div class="hero-dash">
|
||
<div class="dash-bar">
|
||
<div class="dash-dots"><i></i><i></i><i></i></div>
|
||
<span class="dash-title">Производство — Панель управления</span>
|
||
</div>
|
||
<div class="dash-body">
|
||
<div class="dash-kpis">
|
||
<div class="dash-kpi">
|
||
<div class="dash-kpi-num red">3</div>
|
||
<div class="dash-kpi-label">Просрочено</div>
|
||
</div>
|
||
<div class="dash-kpi">
|
||
<div class="dash-kpi-num amber">7</div>
|
||
<div class="dash-kpi-label">В работе</div>
|
||
</div>
|
||
<div class="dash-kpi">
|
||
<div class="dash-kpi-num green">24</div>
|
||
<div class="dash-kpi-label">Завершено</div>
|
||
</div>
|
||
</div>
|
||
<div class="dash-tasks">
|
||
<div class="dash-task t-over">
|
||
<div class="dash-task-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
|
||
</div>
|
||
<div class="dash-task-info">
|
||
<div class="dash-task-name">ТО мельницы №3</div>
|
||
<div class="dash-task-meta">Сидоров В. · Мельничный комплекс</div>
|
||
</div>
|
||
<span class="dash-tag">Просрочено</span>
|
||
</div>
|
||
<div class="dash-task t-prog">
|
||
<div class="dash-task-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M12 2v2M4.93 4.93l1.41 1.41M2 12h2M4.93 19.07l1.41-1.41M12 22v-2M19.07 19.07l-1.41-1.41M22 12h-2"/></svg>
|
||
</div>
|
||
<div class="dash-task-info">
|
||
<div class="dash-task-name">ТО компрессорной станции</div>
|
||
<div class="dash-task-meta">Петров С. · Насосная №2</div>
|
||
</div>
|
||
<span class="dash-tag">В работе</span>
|
||
</div>
|
||
<div class="dash-task t-pend">
|
||
<div class="dash-task-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
|
||
</div>
|
||
<div class="dash-task-info">
|
||
<div class="dash-task-name">Плановый осмотр зернодробилки</div>
|
||
<div class="dash-task-meta">Иванов А. · Кормоцех</div>
|
||
</div>
|
||
<span class="dash-tag">Сегодня</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-float hero-float-2">
|
||
<span class="float-dot green"></span>
|
||
ТО выполнено — склад обновлён
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LOGOS -->
|
||
<div class="logos">
|
||
<p class="logos-label">Доверяют агропредприятия</p>
|
||
<div class="logos-marquee-wrap">
|
||
<div class="logos-row">
|
||
<div class="logo-pill">Агромилк</div>
|
||
<div class="logo-pill">АгроМолоко</div>
|
||
<div class="logo-pill">КФХ «Заря»</div>
|
||
<div class="logo-pill">Степной Агро</div>
|
||
<div class="logo-pill">МолокоПро</div>
|
||
<div class="logo-pill">ГринФарм</div>
|
||
<div class="logo-pill">АгроМолоко Демо</div>
|
||
<div class="logo-pill">УралАгро</div>
|
||
<div class="logo-pill">Агромилк</div>
|
||
<div class="logo-pill">АгроМолоко</div>
|
||
<div class="logo-pill">КФХ «Заря»</div>
|
||
<div class="logo-pill">Степной Агро</div>
|
||
<div class="logo-pill">МолокоПро</div>
|
||
<div class="logo-pill">ГринФарм</div>
|
||
<div class="logo-pill">АгроМолоко Демо</div>
|
||
<div class="logo-pill">УралАгро</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROBLEM -->
|
||
<section class="section problem-section reveal" id="problem">
|
||
<div class="eyebrow">Проблема</div>
|
||
<h2 class="section-title">Как это бывает<br><em>без системы учёта</em></h2>
|
||
<p class="section-sub">Знакомо? Мы разработали систему именно для того, чтобы это больше не повторялось.</p>
|
||
<div class="carousel-wrap" data-carousel="problem-grid">
|
||
<div class="problem-grid" id="problem-grid">
|
||
<div class="carousel-page">
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||
</div>
|
||
<h3>Excel и бумажные журналы</h3>
|
||
<p>Расписание ТО в таблицах, история ремонтов в тетрадях. Сложно найти, легко потерять, невозможно анализировать.</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.1 1.18 2 2 0 012.1 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/></svg>
|
||
</div>
|
||
<h3>Хаос в коммуникациях</h3>
|
||
<p>Заявки через WhatsApp, статусы передаются устно. Кто-то забыл, кто-то не передал — оборудование простаивает.</p>
|
||
</div>
|
||
</div><!-- /page 1 -->
|
||
<div class="carousel-page">
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||
</div>
|
||
<h3>Проблемы со складом</h3>
|
||
<p>Нужная запчасть отсутствует в самый неподходящий момент. Или наоборот — склад переполнен неликвидом.</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>
|
||
</div>
|
||
<h3>Срывы сроков ТО</h3>
|
||
<p>Плановое обслуживание откладывается «на потом». В итоге мелкая неисправность превращается в дорогой ремонт.</p>
|
||
</div>
|
||
</div><!-- /page 2 -->
|
||
<div class="carousel-page">
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||
</div>
|
||
<h3>Нет аналитики</h3>
|
||
<p>Непонятно, сколько стоит обслуживание каждой единицы оборудования и когда выгоднее заменить, чем ремонтировать.</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-ico">
|
||
<svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
</div>
|
||
<h3>Нет контроля</h3>
|
||
<p>Руководитель узнаёт о проблемах постфактум. Нет единого взгляда на состояние всего оборудования предприятия.</p>
|
||
</div>
|
||
</div><!-- /page 3 -->
|
||
</div><!-- /problem-grid -->
|
||
<div class="carousel-dots" id="problem-grid-dots">
|
||
<button class="carousel-dot active" data-idx="0"></button>
|
||
<button class="carousel-dot" data-idx="1"></button>
|
||
<button class="carousel-dot" data-idx="2"></button>
|
||
</div>
|
||
</div><!-- /carousel-wrap -->
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="section reveal" id="features">
|
||
<div class="features-intro">
|
||
<div class="eyebrow">Возможности</div>
|
||
<h2 class="section-title">Всё что нужно для<br><em>полного контроля</em></h2>
|
||
<p class="section-sub" style="margin-bottom:0">АгроТО объединяет все процессы обслуживания оборудования вашего предприятия в одной платформе.</p>
|
||
</div>
|
||
<div class="carousel-wrap" data-carousel="features-grid">
|
||
<div class="features-grid" id="features-grid">
|
||
<div class="carousel-page">
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||
</div>
|
||
<h3>Плановое ТО</h3>
|
||
<p>Гибкие расписания по дате, моточасам или пробегу. Автоматическое создание задач и уведомления ответственным.</p>
|
||
<span class="feat-tag">Автоматизация</span>
|
||
</div>
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
</div>
|
||
<h3>Аварийные заявки</h3>
|
||
<p>Быстрая регистрация поломки прямо с телефона. Назначение исполнителя и отслеживание статуса в реальном времени.</p>
|
||
<span class="feat-tag">Мобильно</span>
|
||
</div>
|
||
</div><!-- /page 1 -->
|
||
<div class="carousel-page">
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27,6.96 12,12.01 20.73,6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
||
</div>
|
||
<h3>Управление складом</h3>
|
||
<p>Учёт запчастей и расходников. Минимальные остатки, заявки на закупку, автоматическое списание при ТО.</p>
|
||
<span class="feat-tag">Склад</span>
|
||
</div>
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"/></svg>
|
||
</div>
|
||
<h3>Роли и доступы</h3>
|
||
<p>Гибкая система ролей: механик видит только свои задачи, начальник — всю картину по предприятию.</p>
|
||
<span class="feat-tag">Безопасность</span>
|
||
</div>
|
||
</div><!-- /page 2 -->
|
||
<div class="carousel-page">
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||
</div>
|
||
<h3>Аналитика и отчёты</h3>
|
||
<p>Стоимость ТО по каждой единице оборудования, загруженность специалистов, динамика поломок — в удобных графиках.</p>
|
||
<span class="feat-tag">Аналитика</span>
|
||
</div>
|
||
<div class="feat-card">
|
||
<div class="feat-ico">
|
||
<svg fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 2a8 8 0 018 8c0 3-1.5 5.5-4 7l-1 3H9l-1-3C5.5 15.5 4 13 4 10a8 8 0 018-8z"/><path d="M9 21h6"/><path d="M9.5 10.5c.5-1 1.5-1.5 2.5-1.5s2 .5 2.5 1.5"/><circle cx="9.5" cy="8.5" r="0.5" fill="currentColor"/><circle cx="14.5" cy="8.5" r="0.5" fill="currentColor"/></svg>
|
||
</div>
|
||
<h3>ИИ-помощник</h3>
|
||
<p>Встроенный чат с ИИ-ассистентом прямо в интерфейсе. Отвечает на вопросы по оборудованию, помогает механикам быстрее разобраться в задачах — доступен в любой момент.</p>
|
||
<span class="feat-tag">Искусственный интеллект</span>
|
||
</div>
|
||
</div><!-- /page 3 -->
|
||
</div><!-- /features-grid -->
|
||
<div class="carousel-dots" id="features-grid-dots">
|
||
<button class="carousel-dot active" data-idx="0"></button>
|
||
<button class="carousel-dot" data-idx="1"></button>
|
||
<button class="carousel-dot" data-idx="2"></button>
|
||
</div>
|
||
</div><!-- /carousel-wrap -->
|
||
</section>
|
||
|
||
<!-- HOW -->
|
||
<section class="section how-section reveal" id="how">
|
||
<div style="text-align:center;margin-bottom:56px">
|
||
<div class="eyebrow" style="justify-content:center">Как работает</div>
|
||
<h2 class="section-title" style="margin:0 auto 16px">Запуск за три шага</h2>
|
||
<p class="section-sub" style="margin:0 auto">Никаких длительных внедрений. Начните работать уже в первый день.</p>
|
||
</div>
|
||
<div class="how-steps">
|
||
<div class="how-step">
|
||
<div class="how-num">1</div>
|
||
<div>
|
||
<h3>Добавьте оборудование</h3>
|
||
<p>Внесите доильные установки, вакуумные насосы, транспортёры, фильтры и другое оборудование. Назначьте ответственных по каждой единице.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<div class="how-num">2</div>
|
||
<div>
|
||
<h3>Настройте расписания</h3>
|
||
<p>Создайте шаблоны регламентного ТО с нужной периодичностью. Система сама будет создавать задачи.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<div class="how-num">3</div>
|
||
<div>
|
||
<h3>Работайте и следите</h3>
|
||
<p>Механики получают задачи, отмечают выполнение. Вы видите всю картину в реальном времени.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- METRICS -->
|
||
<section class="section metrics-section reveal">
|
||
<div class="metrics-header">
|
||
<div class="eyebrow" style="justify-content:center">Результаты</div>
|
||
<h2 class="section-title" style="margin:0 auto">Цифры говорят сами за себя</h2>
|
||
</div>
|
||
<div class="metrics-grid">
|
||
<div class="metric">
|
||
<div class="metric-num" data-target="-40" data-suffix="%">−40%</div>
|
||
<div class="metric-label">Снижение внеплановых<br>простоев техники</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-num">×3</div>
|
||
<div class="metric-label">Скорость обработки<br>аварийных заявок</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-num" data-target="-25" data-suffix="%">−25%</div>
|
||
<div class="metric-label">Затраты на складские<br>запасы</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-num">5 дней</div>
|
||
<div class="metric-label">Среднее время<br>внедрения</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section class="section reveal" id="pricing">
|
||
<div class="pricing-header">
|
||
<div class="eyebrow" style="justify-content:center">Тарифы</div>
|
||
<h2 class="section-title">Простые и прозрачные<br>условия</h2>
|
||
<p class="section-sub">Без скрытых платежей. Прозрачные условия без скрытых платежей.</p>
|
||
</div>
|
||
<div class="pricing-carousel-wrap">
|
||
<div class="pricing-grid" id="pricing-grid">
|
||
|
||
<div class="pricing-card">
|
||
<div class="pricing-badge">Старт</div>
|
||
<div class="pricing-plan">Базовый</div>
|
||
<div class="pricing-desc">Для небольших КФХ и хозяйств с одним участком.</div>
|
||
<div class="pricing-price">
|
||
<span class="pricing-amount">4 900</span>
|
||
<span class="pricing-cur">₽</span>
|
||
<span class="pricing-per">/ мес</span>
|
||
</div>
|
||
<div class="pricing-divider"></div>
|
||
<ul class="pricing-feats">
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> До 50 единиц оборудования</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> До 5 пользователей</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Плановое ТО и задачи</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Аварийные заявки</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Базовая аналитика</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Мобильный доступ</li>
|
||
</ul>
|
||
<button class="btn btn-primary open-lead-modal" data-plan="Базовый">Начать работу</button>
|
||
</div>
|
||
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-ribbon">Популярный</div>
|
||
<div class="pricing-badge">Для роста</div>
|
||
<div class="pricing-plan">Профессиональный</div>
|
||
<div class="pricing-desc">Для средних хозяйств и агрохолдингов с несколькими участками.</div>
|
||
<div class="pricing-price">
|
||
<span class="pricing-amount">12 900</span>
|
||
<span class="pricing-cur">₽</span>
|
||
<span class="pricing-per">/ мес</span>
|
||
</div>
|
||
<div class="pricing-divider"></div>
|
||
<ul class="pricing-feats">
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> До 300 единиц оборудования</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> До 25 пользователей</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Всё из Базового</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Управление складом</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Расширенная аналитика</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> PDF-отчёты</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Приоритетная поддержка</li>
|
||
</ul>
|
||
<button class="btn btn-outline-green open-lead-modal" data-plan="Профессиональный">Начать работу</button>
|
||
</div>
|
||
|
||
<div class="pricing-card">
|
||
<div class="pricing-badge">Корпоративный</div>
|
||
<div class="pricing-plan">Энтерпрайз</div>
|
||
<div class="pricing-desc">Для агрохолдингов и предприятий, работающих без постоянного интернета.</div>
|
||
<div class="pricing-price">
|
||
<span class="pricing-amount contact">По запросу</span>
|
||
</div>
|
||
<div class="pricing-divider"></div>
|
||
<ul class="pricing-feats">
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Неограниченное оборудование</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Неограниченные пользователи</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Всё из Профессионального</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Физический сервер на вашей площадке</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Работа без интернета (полный офлайн)</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Встроенная офлайн-модель ИИ на борту</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Интеграция с 1С</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> SLA и персональный менеджер</li>
|
||
<li><svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg> Индивидуальные доработки</li>
|
||
</ul>
|
||
<button class="btn btn-primary open-lead-modal" data-plan="Энтерпрайз">Связаться с нами</button>
|
||
</div>
|
||
|
||
</div><!-- /pricing-grid -->
|
||
<div class="pricing-dots" id="pricing-dots">
|
||
<button class="pricing-dot active" data-idx="0"></button>
|
||
<button class="pricing-dot" data-idx="1"></button>
|
||
<button class="pricing-dot" data-idx="2"></button>
|
||
</div>
|
||
</div><!-- /pricing-carousel-wrap -->
|
||
</section>
|
||
|
||
<!-- TESTIMONIALS -->
|
||
<section class="section testimonials-section reveal">
|
||
<div class="testi-header">
|
||
<div class="eyebrow" style="justify-content:center">Отзывы</div>
|
||
<h2 class="section-title">Говорят наши клиенты</h2>
|
||
<p class="section-sub">Реальные отзывы от руководителей и инженеров агропредприятий.</p>
|
||
</div>
|
||
<div class="carousel-wrap" data-carousel="testi-grid">
|
||
<div class="testi-grid" id="testi-grid">
|
||
<div class="testi-card">
|
||
<div class="testi-stars">
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
</div>
|
||
<p class="testi-text">«Раньше механики звонили по телефону и писали в WhatsApp. Теперь всё в одном месте — заявка создана, исполнитель назначен, статус виден сразу. Простои сократились ощутимо.»</p>
|
||
<div class="testi-author">
|
||
<div class="testi-avatar" style="background:var(--g700)">АС</div>
|
||
<div>
|
||
<div class="testi-name">Алексей Смирнов</div>
|
||
<div class="testi-co">Главный инженер, КФХ «Заря»</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testi-card">
|
||
<div class="testi-stars">
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
</div>
|
||
<p class="testi-text">«Наконец-то вижу все участки в одном экране. Раньше чтобы понять состояние дел нужно было объехать пол-хозяйства. Теперь открываю телефон — и картина полная.»</p>
|
||
<div class="testi-author">
|
||
<div class="testi-avatar" style="background:#e76f51">МК</div>
|
||
<div>
|
||
<div class="testi-name">Михаил Козлов</div>
|
||
<div class="testi-co">Директор, АгроМолоко</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testi-card">
|
||
<div class="testi-stars">
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
<svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
|
||
</div>
|
||
<p class="testi-text">«Внедрение заняло буквально один день. Внесли технику, настроили расписания ТО — и всё заработало. Поддержка отвечает быстро, под нас даже доработали пару функций.»</p>
|
||
<div class="testi-author">
|
||
<div class="testi-avatar" style="background:var(--g500)">НП</div>
|
||
<div>
|
||
<div class="testi-name">Наталья Петрова</div>
|
||
<div class="testi-co">Зам. директора, Степной Агро</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-dots" id="testi-grid-dots">
|
||
<button class="carousel-dot active" data-idx="0"></button>
|
||
<button class="carousel-dot" data-idx="1"></button>
|
||
<button class="carousel-dot" data-idx="2"></button>
|
||
</div>
|
||
</div><!-- /carousel-wrap -->
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="section faq-section reveal" id="faq">
|
||
<div class="faq-inner">
|
||
<div>
|
||
<div class="eyebrow">FAQ</div>
|
||
<h2 class="faq-title">Частые<br>вопросы</h2>
|
||
</div>
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Нужны ли технические знания для работы с системой?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">Нет. АгроТО разработан так, чтобы им мог пользоваться любой сотрудник — от механика до руководителя хозяйства. Интуитивный интерфейс, минимум кликов для основных действий. Обучение занимает 1–2 часа.</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Как происходит подключение к системе?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">После оформления заявки мы свяжемся с вами, согласуем детали и закрепим персонального менеджера. Средний срок запуска — 5 рабочих дней. Мы помогаем с настройкой системы, импортом данных и обучением сотрудников.</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Можно ли импортировать данные из Excel?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">Да. Поддерживается импорт оборудования, расписаний и склада из Excel-таблиц. Если у вас нестандартный формат данных, мы поможем с переносом в рамках онбординга.</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Работает ли система на мобильных устройствах?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">Да, АгроТО — это PWA (прогрессивное веб-приложение). Оно устанавливается на телефон как обычное приложение и работает в том числе при нестабильном интернете с очередью оффлайн-действий.</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Где хранятся данные? Это безопасно?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">Данные хранятся на серверах в России, передача зашифрована по HTTPS. На тарифе Энтерпрайз мы поставляем физический сервер, который разворачивается внутри сети вашего предприятия: система работает полностью офлайн, постоянный доступ к интернету не требуется. Все данные остаются только у вас.</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q">
|
||
<span class="faq-q-text">Есть ли интеграция с 1С?</span>
|
||
<span class="faq-icon"><svg fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
|
||
</button>
|
||
<div class="faq-a">Интеграция с 1С доступна на тарифе Энтерпрайз. АгроТО получает данные из 1С: номенклатура склада запчастей, остатки, приход и расход материалов. Это главное — вам не нужно вести склад в двух системах. Данные идут из 1С в АгроТО, а не наоборот.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section reveal">
|
||
<div class="cta-inner">
|
||
<div class="cta-eyebrow">Начните сегодня</div>
|
||
<h2>Возьмите оборудование<br><em>под контроль</em></h2>
|
||
<p class="cta-sub">Быстрое внедрение. Персональная поддержка на старте.</p>
|
||
<div class="cta-actions">
|
||
<button class="btn btn-xl btn-cta-white open-lead-modal" data-plan="">
|
||
Начать работу
|
||
<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>
|
||
</button>
|
||
<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 -->
|
||
<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 style="display:flex;gap:16px;align-items:center">Сделано в России 🇷🇺 · <a href="/privacy.html" style="color:var(--ink3);text-decoration:none;font-size:0.8rem" onmouseover="this.style.color='var(--g500)'" onmouseout="this.style.color='var(--ink3)'">Политика обработки персональных данных</a></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ── Nav scroll shadow ───────────────────────────
|
||
const nav = document.getElementById('main-nav');
|
||
window.addEventListener('scroll', () => {
|
||
nav.classList.toggle('scrolled', window.scrollY > 8);
|
||
}, { passive: true });
|
||
|
||
// ── Mobile burger ───────────────────────────────
|
||
const burger = document.getElementById('nav-burger');
|
||
const mobileMenu = document.getElementById('nav-mobile');
|
||
burger.addEventListener('click', () => {
|
||
const open = mobileMenu.classList.toggle('open');
|
||
burger.querySelectorAll('span')[0].style.transform = open ? 'rotate(45deg) translate(5px,5px)' : '';
|
||
burger.querySelectorAll('span')[1].style.opacity = open ? '0' : '1';
|
||
burger.querySelectorAll('span')[2].style.transform = open ? 'rotate(-45deg) translate(5px,-5px)' : '';
|
||
});
|
||
mobileMenu.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => {
|
||
mobileMenu.classList.remove('open');
|
||
burger.querySelectorAll('span').forEach(s => { s.style.transform = ''; s.style.opacity = ''; });
|
||
});
|
||
});
|
||
|
||
// ── Scroll reveal with stagger ──────────────────
|
||
const revealObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry, i) => {
|
||
if (entry.isIntersecting) {
|
||
setTimeout(() => entry.target.classList.add('visible'), i * 90);
|
||
revealObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
|
||
|
||
// ── Smooth scroll ───────────────────────────────
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
const t = document.querySelector(a.getAttribute('href'));
|
||
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
|
||
});
|
||
});
|
||
|
||
// ── Универсальная карусель ─────────────────────
|
||
function initCarousel(gridId, dotsId, getPageCount) {
|
||
const grid = document.getElementById(gridId);
|
||
const dots = document.querySelectorAll('#' + dotsId + ' .carousel-dot');
|
||
if (!grid || !dots.length) return;
|
||
|
||
function getActivePage() {
|
||
const pages = grid.querySelectorAll('.carousel-page, .testi-card');
|
||
if (!pages.length) return 0;
|
||
const scrollCenter = grid.scrollLeft + grid.offsetWidth / 2;
|
||
let closest = 0, minDist = Infinity;
|
||
pages.forEach((p, i) => {
|
||
const center = p.offsetLeft + p.offsetWidth / 2;
|
||
const dist = Math.abs(scrollCenter - center);
|
||
if (dist < minDist) { minDist = dist; closest = i; }
|
||
});
|
||
return closest;
|
||
}
|
||
|
||
function updateDots(idx) {
|
||
dots.forEach((d, i) => d.classList.toggle('active', i === idx));
|
||
}
|
||
|
||
dots.forEach(dot => {
|
||
dot.addEventListener('click', () => {
|
||
const idx = +dot.dataset.idx;
|
||
const pages = grid.querySelectorAll('.carousel-page, .testi-card');
|
||
if (pages[idx]) {
|
||
const targetLeft = pages[idx].offsetLeft - (grid.offsetWidth - pages[idx].offsetWidth) / 2;
|
||
grid.scrollTo({ left: Math.max(0, targetLeft), behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
let t;
|
||
grid.addEventListener('scroll', () => {
|
||
clearTimeout(t);
|
||
t = setTimeout(() => updateDots(getActivePage()), 60);
|
||
}, { passive: true });
|
||
}
|
||
|
||
// Инициализируем все карусели
|
||
initCarousel('problem-grid', 'problem-grid-dots');
|
||
initCarousel('features-grid', 'features-grid-dots');
|
||
initCarousel('testi-grid', 'testi-grid-dots');
|
||
|
||
// ── Pricing carousel dots ──────────────────────
|
||
(function() {
|
||
const grid = document.getElementById('pricing-grid');
|
||
const dots = document.querySelectorAll('.pricing-dot');
|
||
if (!grid || !dots.length) return;
|
||
|
||
// Клик по точке — скроллим к нужной карточке
|
||
dots.forEach(dot => {
|
||
dot.addEventListener('click', () => {
|
||
const idx = +dot.dataset.idx;
|
||
const cards = grid.querySelectorAll('.pricing-card');
|
||
if (cards[idx]) {
|
||
cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// Обновляем активную точку при скролле
|
||
let scrollTimer;
|
||
grid.addEventListener('scroll', () => {
|
||
clearTimeout(scrollTimer);
|
||
scrollTimer = setTimeout(() => {
|
||
const cards = grid.querySelectorAll('.pricing-card');
|
||
const gridCenter = grid.scrollLeft + grid.offsetWidth / 2;
|
||
let closest = 0, minDist = Infinity;
|
||
cards.forEach((card, i) => {
|
||
const cardCenter = card.offsetLeft + card.offsetWidth / 2;
|
||
const dist = Math.abs(gridCenter - cardCenter);
|
||
if (dist < minDist) { minDist = dist; closest = i; }
|
||
});
|
||
dots.forEach((d, i) => d.classList.toggle('active', i === closest));
|
||
}, 60);
|
||
}, { passive: true });
|
||
|
||
// На мобиле центрируем featured карточку при загрузке (только scrollLeft — не трогаем страницу)
|
||
function centerFeatured() {
|
||
if (window.innerWidth > 1000) return;
|
||
const featured = grid.querySelector('.pricing-card.featured');
|
||
if (featured) {
|
||
const targetLeft = featured.offsetLeft - (grid.offsetWidth - featured.offsetWidth) / 2;
|
||
grid.scrollLeft = targetLeft;
|
||
dots.forEach((d, i) => d.classList.toggle('active', +d.dataset.idx === 1));
|
||
}
|
||
}
|
||
window.addEventListener('load', centerFeatured);
|
||
window.addEventListener('resize', () => { clearTimeout(window._priceRT); window._priceRT = setTimeout(centerFeatured, 100); });
|
||
})();
|
||
|
||
// ── FAQ accordion ───────────────────────────────
|
||
document.querySelectorAll('.faq-q').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const item = btn.closest('.faq-item');
|
||
const wasOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
|
||
if (!wasOpen) item.classList.add('open');
|
||
});
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
<!-- LEAD MODAL -->
|
||
<div class="lead-overlay" id="leadOverlay" role="dialog" aria-modal="true" aria-labelledby="leadModalTitle">
|
||
<div class="lead-modal">
|
||
<button class="lead-modal-close" id="leadClose" aria-label="Закрыть">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
|
||
<!-- Форма -->
|
||
<div id="leadFormWrap">
|
||
<div class="lead-modal-eyebrow">Оставить заявку</div>
|
||
<h3 id="leadModalTitle">Подключение к АгроТО</h3>
|
||
<p class="lead-modal-sub">Наш менеджер свяжется с вами в течение одного рабочего дня</p>
|
||
<div class="lead-plan-badge hidden" id="leadPlanBadge">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"/></svg>
|
||
<span id="leadPlanName"></span>
|
||
</div>
|
||
<form class="lead-form" id="leadForm" novalidate>
|
||
<div class="lead-field">
|
||
<label for="leadName">Ваше имя *</label>
|
||
<input type="text" id="leadName" name="name" placeholder="Иван Петров" required autocomplete="name">
|
||
</div>
|
||
<div class="lead-field">
|
||
<label for="leadPhone">Телефон *</label>
|
||
<input type="tel" id="leadPhone" name="phone" placeholder="+7 (900) 000-00-00" required autocomplete="tel">
|
||
</div>
|
||
<div class="lead-field">
|
||
<label for="leadCompany">Название предприятия</label>
|
||
<input type="text" id="leadCompany" name="company" placeholder="КФХ «Пример»" autocomplete="organization">
|
||
</div>
|
||
<div class="lead-field">
|
||
<label for="leadEmail">Email</label>
|
||
<input type="email" id="leadEmail" name="email" placeholder="ivan@agro.ru" autocomplete="email">
|
||
</div>
|
||
<button type="submit" class="lead-submit" id="leadSubmit">
|
||
Отправить заявку
|
||
<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>
|
||
</button>
|
||
<p class="lead-note" id="leadError" style="color:var(--red,#e04040);display:none"></p>
|
||
<p class="lead-note">Нажимая кнопку, вы соглашаетесь с обработкой персональных данных</p>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Успех -->
|
||
<div class="lead-success" id="leadSuccess">
|
||
<div class="lead-success-ico">
|
||
<svg fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg>
|
||
</div>
|
||
<h4>Заявка принята!</h4>
|
||
<p>Спасибо, <span id="leadSuccessName"></span>! Мы свяжемся с вами в течение одного рабочего дня и расскажем о следующих шагах.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ── LEAD MODAL ───────────────────────────────────── */
|
||
(function() {
|
||
const overlay = document.getElementById('leadOverlay');
|
||
const closeBtn = document.getElementById('leadClose');
|
||
const form = document.getElementById('leadForm');
|
||
const formWrap = document.getElementById('leadFormWrap');
|
||
const success = document.getElementById('leadSuccess');
|
||
const submitBtn= document.getElementById('leadSubmit');
|
||
const errEl = document.getElementById('leadError');
|
||
const planBadge= document.getElementById('leadPlanBadge');
|
||
const planName = document.getElementById('leadPlanName');
|
||
const successName = document.getElementById('leadSuccessName');
|
||
|
||
function openModal(plan) {
|
||
if (plan) {
|
||
planBadge.classList.remove('hidden');
|
||
planName.textContent = 'Тариф: ' + plan;
|
||
form.dataset.plan = plan;
|
||
} else {
|
||
planBadge.classList.add('hidden');
|
||
form.dataset.plan = '';
|
||
}
|
||
formWrap.style.display = '';
|
||
success.classList.remove('show');
|
||
errEl.style.display = 'none';
|
||
form.reset();
|
||
submitBtn.disabled = false;
|
||
overlay.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
setTimeout(() => document.getElementById('leadName').focus(), 100);
|
||
}
|
||
|
||
function closeModal() {
|
||
overlay.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.querySelectorAll('.open-lead-modal').forEach(btn => {
|
||
btn.addEventListener('click', () => openModal(btn.dataset.plan || ''));
|
||
});
|
||
|
||
closeBtn.addEventListener('click', closeModal);
|
||
overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });
|
||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
|
||
|
||
form.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const name = document.getElementById('leadName').value.trim();
|
||
const phone = document.getElementById('leadPhone').value.trim();
|
||
const company = document.getElementById('leadCompany').value.trim();
|
||
const email = document.getElementById('leadEmail').value.trim();
|
||
const plan = form.dataset.plan || '';
|
||
|
||
if (!name) { showErr('Пожалуйста, введите ваше имя'); return; }
|
||
if (!phone) { showErr('Пожалуйста, введите телефон'); return; }
|
||
|
||
submitBtn.disabled = true;
|
||
submitBtn.textContent = 'Отправляем…';
|
||
errEl.style.display = 'none';
|
||
|
||
try {
|
||
const resp = await fetch('https://app.agroto.ru/api/public/lead', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name, phone, company, email, plan, source: 'landing' })
|
||
});
|
||
const data = await resp.json();
|
||
if (!resp.ok) throw new Error(data.error || 'Ошибка сервера');
|
||
successName.textContent = name;
|
||
formWrap.style.display = 'none';
|
||
success.classList.add('show');
|
||
} catch(err) {
|
||
showErr('Не удалось отправить заявку. Напишите нам: info@agroto.ru');
|
||
submitBtn.disabled = false;
|
||
submitBtn.innerHTML = 'Отправить заявку <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>';
|
||
}
|
||
});
|
||
|
||
function showErr(msg) {
|
||
errEl.textContent = msg;
|
||
errEl.style.display = 'block';
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|