mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 14:04:46 +00:00
635 lines
45 KiB
HTML
635 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>@wasrusgen1 CRM — система управления мебельным бизнесом</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--bg:#0F0F1A;
|
||
--primary:#047857;
|
||
--dark:#064E3B;
|
||
--mid:#10B981;
|
||
--text:#F8FAFC;
|
||
--card:#1A1A2E;
|
||
--card-2:#21213a;
|
||
--muted:#94A3B8;
|
||
--line:rgba(255,255,255,.08);
|
||
--line-2:rgba(255,255,255,.14);
|
||
}
|
||
html,body{height:100%}
|
||
body{
|
||
font-family:'Inter',sans-serif;
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
overflow:hidden;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
|
||
/* ── Deck shell ─────────────────────────────────── */
|
||
.deck{position:fixed;inset:0;}
|
||
.slide{
|
||
position:absolute;inset:0;
|
||
display:none;
|
||
flex-direction:column;
|
||
justify-content:center;
|
||
padding:5vh 6.5vw 9vh;
|
||
opacity:0;
|
||
transition:opacity .45s ease;
|
||
}
|
||
.slide.active{display:flex;opacity:1;animation:fadeUp .5s ease both}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
/* gradient blobs */
|
||
.slide::before{content:'';position:absolute;top:-15vh;right:-10vw;width:46vw;height:46vw;
|
||
background:radial-gradient(circle,rgba(16,185,129,.13)0%,transparent 70%);pointer-events:none;z-index:0}
|
||
.slide::after{content:'';position:absolute;bottom:-12vh;left:-6vw;width:34vw;height:34vw;
|
||
background:radial-gradient(circle,rgba(4,120,87,.18)0%,transparent 70%);pointer-events:none;z-index:0}
|
||
.slide>*{position:relative;z-index:1}
|
||
|
||
/* ── Typography ─────────────────────────────────── */
|
||
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
|
||
text-transform:uppercase;letter-spacing:.14em;color:var(--mid);margin-bottom:1.4vh}
|
||
.kicker::before{content:'';width:26px;height:2px;background:var(--mid);border-radius:2px}
|
||
h1.title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(2.2rem,4.6vw,4.4rem);
|
||
line-height:1.04;letter-spacing:-.02em;margin-bottom:2vh}
|
||
h2.title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.8rem,3.4vw,3rem);
|
||
line-height:1.08;letter-spacing:-.02em;margin-bottom:1vh}
|
||
.lead{font-size:clamp(1rem,1.5vw,1.35rem);color:var(--muted);max-width:48ch;line-height:1.55}
|
||
.grad{background:linear-gradient(100deg,var(--mid),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
|
||
/* ── Cover ──────────────────────────────────────── */
|
||
#s1{background:linear-gradient(150deg,#022C22 0%,#064E3B 42%,#047857 120%);justify-content:center}
|
||
#s1::before{top:-22vh;right:-16vw;width:60vw;height:60vw;background:radial-gradient(circle,rgba(16,185,129,.22)0%,transparent 68%)}
|
||
.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:3.4vh}
|
||
.at-badge{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.12);
|
||
border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
|
||
.at-badge svg{width:32px;height:32px}
|
||
.brand-stack{display:flex;flex-direction:column;line-height:1}
|
||
.brand-handle{font-family:'Montserrat',sans-serif;font-size:.8rem;font-weight:500;
|
||
letter-spacing:.05em;color:rgba(255,255,255,.55);margin-bottom:5px}
|
||
.brand-name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:-1px;color:#fff}
|
||
#s1 h1{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(2.6rem,5.4vw,5rem);
|
||
line-height:1.05;letter-spacing:-.025em;color:#fff;max-width:18ch;margin-bottom:2.4vh}
|
||
#s1 .cover-sub{font-size:clamp(1.05rem,1.7vw,1.5rem);color:rgba(255,255,255,.72);max-width:42ch;margin-bottom:5vh}
|
||
.cover-meta{display:flex;gap:3vw;flex-wrap:wrap}
|
||
.cover-meta b{display:block;font-size:1rem;color:#fff;font-weight:600;margin-bottom:3px}
|
||
.cover-meta span{font-size:.85rem;color:rgba(255,255,255,.55)}
|
||
|
||
/* ── generic cards ──────────────────────────────── */
|
||
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.6vw 1.7vw}
|
||
.card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
|
||
font-size:1.4rem;margin-bottom:14px}
|
||
.ic.green{background:rgba(16,185,129,.14);}
|
||
.ic.red{background:rgba(239,68,68,.14)}
|
||
.card h3{font-size:1.12rem;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
|
||
.card p{font-size:.92rem;color:var(--muted);line-height:1.5}
|
||
|
||
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4vw}
|
||
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw}
|
||
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1vw}
|
||
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1vw}
|
||
.mt{margin-top:3vh}
|
||
|
||
.head-block{margin-bottom:3.4vh;max-width:62ch}
|
||
|
||
/* problem vs solution flow */
|
||
.flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
|
||
.flow-node{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
|
||
font-size:.9rem;font-weight:600;flex:1;min-width:120px;text-align:center}
|
||
.flow-node.bad{border-color:rgba(239,68,68,.4);color:#FCA5A5}
|
||
.flow-node.good{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.08);color:#A7F3D0}
|
||
.flow-arrow{color:var(--muted);font-size:1.3rem}
|
||
.flow-hub{background:linear-gradient(135deg,var(--primary),var(--dark));border:none;
|
||
border-radius:16px;padding:20px;text-align:center;flex:1.3;min-width:160px}
|
||
.flow-hub .h-t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;color:#fff}
|
||
.flow-hub .h-s{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:4px}
|
||
|
||
/* roles */
|
||
.role-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.5vh 1.2vw;
|
||
display:flex;flex-direction:column;gap:8px;transition:.2s}
|
||
.role-card:hover{border-color:var(--mid);transform:translateY(-3px)}
|
||
.role-ic{width:44px;height:44px;border-radius:11px;background:rgba(16,185,129,.14);
|
||
display:flex;align-items:center;justify-content:center;font-size:1.35rem}
|
||
.role-card h3{font-size:1.02rem;font-weight:700}
|
||
.role-card .zone{font-size:.82rem;color:var(--mid);font-weight:600}
|
||
.role-card p{font-size:.82rem;color:var(--muted);line-height:1.45}
|
||
|
||
/* pipeline */
|
||
.pipe{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;overflow:visible}
|
||
.pstep{flex:1;background:var(--card);border:1px solid var(--line);position:relative;
|
||
padding:2vh 0.6vw;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
|
||
.pstep:first-child{border-radius:14px 0 0 14px}
|
||
.pstep:last-child{border-radius:0 14px 14px 0}
|
||
.pstep+.pstep{border-left:none}
|
||
.pstep .pn{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.8rem;color:var(--mid);opacity:.7}
|
||
.pstep .pic{font-size:1.5rem}
|
||
.pstep .pl{font-size:.84rem;font-weight:600;line-height:1.15}
|
||
.pstep::after{content:'';position:absolute;right:-9px;top:50%;transform:translateY(-50%) rotate(45deg);
|
||
width:16px;height:16px;background:var(--card);border-top:1px solid var(--line);border-right:1px solid var(--line);z-index:2}
|
||
.pstep:last-child::after{display:none}
|
||
.pstep.hl{background:linear-gradient(160deg,var(--primary),var(--dark));border-color:transparent}
|
||
.pstep.hl .pn,.pstep.hl .pl{color:#fff}
|
||
.pstep.hl::after{background:var(--primary);border-color:transparent}
|
||
|
||
/* dashboard */
|
||
.dash{display:grid;grid-template-columns:1.3fr 1fr;gap:1.3vw}
|
||
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6vh 1.3vw}
|
||
.panel-h{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:1.4vh}
|
||
.kpi-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.9vw;margin-bottom:1.4vh}
|
||
.kpi{background:var(--card-2);border-radius:12px;padding:1.3vh 1vw}
|
||
.kpi .v{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
|
||
.kpi .l{font-size:.74rem;color:var(--muted);margin-top:3px}
|
||
.kpi .d{font-size:.74rem;font-weight:700;margin-top:5px}
|
||
.up{color:var(--mid)}.down{color:#FCA5A5}
|
||
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
|
||
.bar-row .bl{font-size:.82rem;color:var(--muted);width:90px;flex-shrink:0}
|
||
.bar-track{flex:1;height:9px;background:var(--card-2);border-radius:6px;overflow:hidden}
|
||
.bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--mid));border-radius:6px}
|
||
.bar-row .bv{font-size:.8rem;font-weight:700;width:46px;text-align:right}
|
||
table{width:100%;border-collapse:collapse}
|
||
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:6px 6px;font-weight:700}
|
||
td{font-size:.84rem;padding:8px 6px;border-top:1px solid var(--line)}
|
||
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px}
|
||
.pill.ok{background:rgba(16,185,129,.16);color:var(--mid)}
|
||
.pill.warn{background:rgba(251,191,36,.16);color:#FCD34D}
|
||
.pill.late{background:rgba(239,68,68,.16);color:#FCA5A5}
|
||
|
||
/* managers / schedule grid */
|
||
.sched{width:100%;border-collapse:collapse;font-size:.8rem}
|
||
.sched th,.sched td{border:1px solid var(--line);padding:7px 8px;text-align:center}
|
||
.sched th{background:var(--card-2);color:var(--muted)}
|
||
.cell-busy{background:rgba(4,120,87,.32);color:#fff;font-weight:600;border-radius:0}
|
||
.cell-free{color:var(--muted);opacity:.5}
|
||
.cell-gps{background:rgba(16,185,129,.18);color:var(--mid);font-weight:600}
|
||
|
||
/* rating */
|
||
.rate-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.7vh 1.3vw}
|
||
.stars{color:var(--mid);font-size:1.15rem;letter-spacing:2px}
|
||
.scorebig{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-.02em}
|
||
.scorebig small{font-size:1rem;color:var(--muted);font-weight:600}
|
||
.crit{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:.86rem}
|
||
.crit .cn{color:var(--muted)}
|
||
.crit .cs{font-weight:700}
|
||
|
||
/* KB articles */
|
||
.kb-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
|
||
.kb-cover{height:90px;background:linear-gradient(135deg,var(--primary),var(--dark));
|
||
display:flex;align-items:center;justify-content:center;font-size:2rem}
|
||
.kb-body{padding:1.4vh 1vw;display:flex;flex-direction:column;gap:6px;flex:1}
|
||
.kb-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mid)}
|
||
.kb-body h3{font-size:.98rem;font-weight:700;line-height:1.2}
|
||
.kb-body p{font-size:.8rem;color:var(--muted);line-height:1.4;flex:1}
|
||
.kb-meta{font-size:.74rem;color:var(--muted);display:flex;gap:12px;border-top:1px solid var(--line);padding-top:8px}
|
||
|
||
/* tech */
|
||
.feat{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
|
||
border-radius:14px;padding:1.5vh 1.2vw}
|
||
.feat .fic{width:42px;height:42px;border-radius:11px;background:rgba(16,185,129,.14);
|
||
display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
|
||
.feat h3{font-size:1rem;font-weight:700;margin-bottom:4px}
|
||
.feat p{font-size:.84rem;color:var(--muted);line-height:1.45}
|
||
|
||
/* pricing */
|
||
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2.4vh 1.5vw;
|
||
display:flex;flex-direction:column;gap:1.2vh;position:relative}
|
||
.plan.pop{border-color:var(--mid);background:linear-gradient(180deg,rgba(16,185,129,.07),var(--card))}
|
||
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
|
||
background:var(--mid);color:#04211a;font-size:.7rem;font-weight:800;text-transform:uppercase;
|
||
letter-spacing:.06em;padding:4px 12px;border-radius:20px}
|
||
.plan .pn{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.2rem}
|
||
.plan .pp{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2rem;letter-spacing:-.02em}
|
||
.plan .pp small{font-size:.85rem;color:var(--muted);font-weight:500}
|
||
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:.6vh}
|
||
.plan li{font-size:.86rem;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
|
||
.plan li::before{content:'✓';color:var(--mid);font-weight:800}
|
||
.roi-box{background:linear-gradient(135deg,var(--primary),var(--dark));border-radius:18px;
|
||
padding:2.4vh 2vw;display:flex;align-items:center;gap:2vw;margin-top:3vh}
|
||
.roi-box .rb-num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.6rem;color:#fff;line-height:1}
|
||
.roi-box .rb-txt{font-size:1.05rem;color:rgba(255,255,255,.85);line-height:1.4}
|
||
|
||
/* CTA */
|
||
#s12{background:linear-gradient(150deg,#022C22 0%,#064E3B 45%,#047857 120%);text-align:center;align-items:center;justify-content:center}
|
||
#s12 h1{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(2.2rem,4.6vw,4rem);color:#fff;margin-bottom:2vh;letter-spacing:-.02em}
|
||
#s12 .cta-sub{font-size:clamp(1rem,1.6vw,1.4rem);color:rgba(255,255,255,.75);max-width:40ch;margin:0 auto 4vh}
|
||
.cta-cards{display:flex;gap:1.4vw;justify-content:center;flex-wrap:wrap;margin-bottom:4vh}
|
||
.cta-c{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;
|
||
padding:2.2vh 2vw;min-width:200px;backdrop-filter:blur(8px)}
|
||
.cta-c .cc-n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.7rem;color:#fff}
|
||
.cta-c .cc-l{font-size:.9rem;color:rgba(255,255,255,.7);margin-top:6px}
|
||
.cta-btn{display:inline-block;background:#fff;color:var(--dark);font-weight:800;font-size:1.05rem;
|
||
padding:16px 40px;border-radius:14px;text-decoration:none}
|
||
.cta-contact{margin-top:3vh;color:rgba(255,255,255,.7);font-size:.95rem}
|
||
|
||
/* ── Chrome: nav + progress ─────────────────────── */
|
||
.chrome{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;
|
||
justify-content:space-between;padding:14px 28px;pointer-events:none}
|
||
.nav-btns{display:flex;gap:10px;pointer-events:auto}
|
||
.nav-btn{width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line-2);
|
||
color:var(--text);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
|
||
.nav-btn:hover{background:var(--primary);border-color:var(--primary)}
|
||
.nav-btn:disabled{opacity:.3;cursor:default}
|
||
.nav-btn:disabled:hover{background:var(--card);border-color:var(--line-2)}
|
||
.counter{font-size:.85rem;color:var(--muted);font-weight:600;pointer-events:auto;
|
||
background:var(--card);border:1px solid var(--line);padding:8px 14px;border-radius:11px}
|
||
.counter b{color:var(--text)}
|
||
.progress{position:fixed;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--mid));
|
||
z-index:60;transition:width .4s ease;border-radius:0 3px 3px 0}
|
||
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
|
||
padding:16px 28px;pointer-events:none}
|
||
.topbar .tb-brand{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.9rem;color:var(--muted);letter-spacing:-.01em}
|
||
.topbar .tb-brand span{color:var(--mid)}
|
||
.topbar .tb-page{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
|
||
|
||
@media (max-width:900px){
|
||
.grid-5,.grid-4{grid-template-columns:repeat(2,1fr)}
|
||
.grid-3{grid-template-columns:1fr}
|
||
.dash{grid-template-columns:1fr}
|
||
.pipe{flex-wrap:wrap}
|
||
.pstep{min-width:30%}.pstep::after{display:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="topbar">
|
||
<div class="tb-brand">@<span>wasrusgen1</span> CRM</div>
|
||
<div class="tb-page" id="pageLabel">Титул</div>
|
||
</div>
|
||
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 1 ── COVER ───────────────────────────────────── -->
|
||
<section class="slide active" data-label="Титул" id="s1">
|
||
<div class="brand-row">
|
||
<div class="at-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
|
||
</svg>
|
||
</div>
|
||
<div class="brand-stack">
|
||
<div class="brand-handle">@wasrusgen1</div>
|
||
<div class="brand-name">CRM</div>
|
||
</div>
|
||
</div>
|
||
<div class="kicker" style="color:rgba(255,255,255,.7)">CRM для мебельных салонов нового поколения</div>
|
||
<h1>Управляйте мебельным бизнесом как единой системой</h1>
|
||
<div class="cover-sub">Видеть бизнес в реальном времени. Управлять без потерь.</div>
|
||
<div class="cover-meta">
|
||
<div><b>Централизация</b><span>Вся сеть в одном окне</span></div>
|
||
<div><b>Прозрачность</b><span>Данные без искажений</span></div>
|
||
<div><b>Стандартизация</b><span>Единые процессы продаж</span></div>
|
||
<div><b>Качество</b><span>Контроль сервиса на местах</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2 ── PROBLEM ─────────────────────────────────── -->
|
||
<section class="slide" data-label="Проблема" id="s2">
|
||
<div class="head-block">
|
||
<div class="kicker">Проблема</div>
|
||
<h2 class="title">Мебельный бизнес работает <span class="grad">вслепую</span></h2>
|
||
<p class="lead">На рынке нет специализированной CRM для мебельных салонов. Каждый салон — отдельный остров данных.</p>
|
||
</div>
|
||
<div class="grid-4">
|
||
<div class="card"><div class="ic red">📊</div><h3>Excel-хаос</h3><p>Заказы, замеры и клиенты — в десятках разрозненных таблиц. Версии расходятся, данные теряются.</p></div>
|
||
<div class="card"><div class="ic red">🕶️</div><h3>Собственник слеп</h3><p>Нет единой картины. О проблемах узнаёшь постфактум — когда клиент уже ушёл.</p></div>
|
||
<div class="card"><div class="ic red">🔀</div><h3>Данные искажаются</h3><p>Ручной ввод, переписывание, человеческий фактор. Цифры в отчётах не сходятся с реальностью.</p></div>
|
||
<div class="card"><div class="ic red">🧩</div><h3>Разные системы</h3><p>Менеджер, замерщик и сборщик работают каждый в своём. Информация не передаётся по цепочке.</p></div>
|
||
</div>
|
||
<div class="mt">
|
||
<div class="flow">
|
||
<div class="flow-node bad">Салон №1<br><small style="color:var(--muted)">Excel</small></div>
|
||
<span class="flow-arrow">✕</span>
|
||
<div class="flow-node bad">Салон №2<br><small style="color:var(--muted)">Google Sheets</small></div>
|
||
<span class="flow-arrow">✕</span>
|
||
<div class="flow-node bad">Замерщики<br><small style="color:var(--muted)">блокнот / WhatsApp</small></div>
|
||
<span class="flow-arrow">✕</span>
|
||
<div class="flow-node bad">Собственник<br><small style="color:var(--muted)">не видит ничего</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 ── SOLUTION ────────────────────────────────── -->
|
||
<section class="slide" data-label="Решение" id="s3">
|
||
<div class="head-block">
|
||
<div class="kicker">Решение</div>
|
||
<h2 class="title">Одна система — <span class="grad">весь бизнес как на ладони</span></h2>
|
||
<p class="lead">Все салоны, сотрудники и заказы — в едином пространстве. Данные вводятся один раз и идут по цепочке без потерь.</p>
|
||
</div>
|
||
<div class="flow mt">
|
||
<div class="flow-node good">Салон №1</div>
|
||
<div class="flow-node good">Салон №2</div>
|
||
<div class="flow-node good">Замерщики</div>
|
||
<span class="flow-arrow" style="color:var(--mid)">→</span>
|
||
<div class="flow-hub"><div class="h-t">@wasrusgen1 CRM</div><div class="h-s">единое облако данных</div></div>
|
||
<span class="flow-arrow" style="color:var(--mid)">→</span>
|
||
<div class="flow-node good">Собственник<br><small style="color:var(--mid)">видит всё в реальном времени</small></div>
|
||
</div>
|
||
<div class="grid-4 mt">
|
||
<div class="card"><div class="ic green">🗂️</div><h3>Централизация</h3><p>Все данные в одном месте — никаких разрозненных таблиц.</p></div>
|
||
<div class="card"><div class="ic green">🔎</div><h3>Прозрачность</h3><p>Собственник видит реальное состояние сети 24/7.</p></div>
|
||
<div class="card"><div class="ic green">⚙️</div><h3>Стандартизация</h3><p>Единый процесс продаж и сервиса во всех салонах.</p></div>
|
||
<div class="card"><div class="ic green">⭐</div><h3>Качество</h3><p>Контроль работы сотрудников и оценка клиентом.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4 ── ROLES ───────────────────────────────────── -->
|
||
<section class="slide" data-label="Роли" id="s4">
|
||
<div class="head-block">
|
||
<div class="kicker">Кто использует систему</div>
|
||
<h2 class="title">5 ролей — каждая видит <span class="grad">своё</span></h2>
|
||
<p class="lead">Права доступа настроены под задачу. Сотрудник видит только то, что нужно для работы.</p>
|
||
</div>
|
||
<div class="grid-5">
|
||
<div class="role-card"><div class="role-ic">👑</div><h3>КД / Собственник</h3><div class="zone">Вся сеть</div><p>Выручка, рейтинги, план/факт по всем салонам.</p></div>
|
||
<div class="role-card"><div class="role-ic">🏢</div><h3>Директор салона</h3><div class="zone">Свой салон</div><p>Команда, заказы и показатели одной точки.</p></div>
|
||
<div class="role-card"><div class="role-ic">🧑💼</div><h3>Менеджер</h3><div class="zone">Заказы и клиенты</div><p>Ведёт сделки от лида до закрытия, записи.</p></div>
|
||
<div class="role-card"><div class="role-ic">📐</div><h3>Замерщик</h3><div class="zone">Задания на замер</div><p>Получает задачи, GPS-чекин, отметка о выполнении.</p></div>
|
||
<div class="role-card"><div class="role-ic">🔧</div><h3>Сборщик</h3><div class="zone">Монтаж</div><p>Сборка, фото чистоты, оценки качества работ.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5 ── PIPELINE ────────────────────────────────── -->
|
||
<section class="slide" data-label="Воронка заказа" id="s5">
|
||
<div class="head-block">
|
||
<div class="kicker">Воронка заказа</div>
|
||
<h2 class="title">Путь заказа — <span class="grad">8 контролируемых этапов</span></h2>
|
||
<p class="lead">Каждый этап фиксируется в системе. Видно, где заказ «застрял», и кто за него отвечает.</p>
|
||
</div>
|
||
<div class="pipe mt">
|
||
<div class="pstep"><span class="pn">01</span><span class="pic">🎯</span><span class="pl">Лид</span></div>
|
||
<div class="pstep"><span class="pn">02</span><span class="pic">📐</span><span class="pl">Замер</span></div>
|
||
<div class="pstep"><span class="pn">03</span><span class="pic">✏️</span><span class="pl">Проект</span></div>
|
||
<div class="pstep"><span class="pn">04</span><span class="pic">🔌</span><span class="pl">Техника</span></div>
|
||
<div class="pstep hl"><span class="pn">05</span><span class="pic">🧮</span><span class="pl">Технолог</span></div>
|
||
<div class="pstep"><span class="pn">06</span><span class="pic">🏭</span><span class="pl">Производство</span></div>
|
||
<div class="pstep"><span class="pn">07</span><span class="pic">🔧</span><span class="pl">Сборка</span></div>
|
||
<div class="pstep"><span class="pn">08</span><span class="pic">✅</span><span class="pl">Закрыт</span></div>
|
||
</div>
|
||
<div class="grid-3 mt">
|
||
<div class="card"><div class="ic green">⏱️</div><h3>Сроки под контролем</h3><p>Система подсвечивает заказы, которые задерживаются на этапе дольше нормы.</p></div>
|
||
<div class="card"><div class="ic green">👤</div><h3>Ответственный на каждом шаге</h3><p>Понятно, кто двигает заказ дальше и где зона ответственности.</p></div>
|
||
<div class="card"><div class="ic green">🔔</div><h3>Автоуведомления</h3><p>Менеджер и клиент получают статус автоматически — без ручных звонков.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 ── OWNER DASHBOARD ─────────────────────────── -->
|
||
<section class="slide" data-label="Дашборд собственника" id="s6">
|
||
<div class="head-block">
|
||
<div class="kicker">Дашборд собственника</div>
|
||
<h2 class="title">Что видит КД <span class="grad">каждое утро</span></h2>
|
||
</div>
|
||
<div class="dash">
|
||
<div class="panel">
|
||
<div class="panel-h">Выручка по салонам · месяц</div>
|
||
<div class="bar-row"><span class="bl">Москва-Север</span><div class="bar-track"><div class="bar-fill" style="width:92%"></div></div><span class="bv">4.6М</span></div>
|
||
<div class="bar-row"><span class="bl">Москва-Юг</span><div class="bar-track"><div class="bar-fill" style="width:74%"></div></div><span class="bv">3.7М</span></div>
|
||
<div class="bar-row"><span class="bl">СПб-Центр</span><div class="bar-track"><div class="bar-fill" style="width:68%"></div></div><span class="bv">3.4М</span></div>
|
||
<div class="bar-row"><span class="bl">Казань</span><div class="bar-track"><div class="bar-fill" style="width:51%"></div></div><span class="bv">2.5М</span></div>
|
||
<div class="bar-row"><span class="bl">Краснодар</span><div class="bar-track"><div class="bar-fill" style="width:44%"></div></div><span class="bv">2.2М</span></div>
|
||
<div class="panel-h" style="margin-top:2vh">Просроченные заказы</div>
|
||
<table>
|
||
<tr><th>Заказ</th><th>Салон</th><th>Этап</th><th>Статус</th></tr>
|
||
<tr><td>#4821</td><td>Казань</td><td>Производство</td><td><span class="pill late">+6 дн</span></td></tr>
|
||
<tr><td>#4790</td><td>СПб-Центр</td><td>Сборка</td><td><span class="pill warn">+2 дн</span></td></tr>
|
||
<tr><td>#4763</td><td>Москва-Юг</td><td>Замер</td><td><span class="pill late">+4 дн</span></td></tr>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="kpi-row">
|
||
<div class="kpi"><div class="v">16.4М ₽</div><div class="l">Выручка сети</div><div class="d up">▲ 12% к плану</div></div>
|
||
<div class="kpi"><div class="v">87%</div><div class="l">План / факт</div><div class="d up">▲ 5 п.п.</div></div>
|
||
<div class="kpi"><div class="v">142</div><div class="l">Заказов в работе</div><div class="d down">▼ 3 просрочены</div></div>
|
||
<div class="kpi"><div class="v">4.8<small>/5</small></div><div class="l">Средний рейтинг</div><div class="d up">▲ 0.2</div></div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-h">Топ сотрудников по рейтингу</div>
|
||
<table>
|
||
<tr><th>Сотрудник</th><th>Роль</th><th>Балл</th></tr>
|
||
<tr><td>А. Орлова</td><td>Менеджер</td><td><span class="pill ok">9.6</span></td></tr>
|
||
<tr><td>Р. Васильев</td><td>Замерщик</td><td><span class="pill ok">9.4</span></td></tr>
|
||
<tr><td>Д. Соколов</td><td>Сборщик</td><td><span class="pill ok">9.1</span></td></tr>
|
||
<tr><td>М. Лебедь</td><td>Менеджер</td><td><span class="pill warn">7.2</span></td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7 ── MANAGERS ────────────────────────────────── -->
|
||
<section class="slide" data-label="Управление менеджерами" id="s7">
|
||
<div class="head-block">
|
||
<div class="kicker">Управление менеджерами</div>
|
||
<h2 class="title">Шахматка записей и <span class="grad">контроль на местах</span></h2>
|
||
</div>
|
||
<div class="dash">
|
||
<div class="panel">
|
||
<div class="panel-h">Шахматка записей · сегодня</div>
|
||
<table class="sched">
|
||
<tr><th>Время</th><th>Орлова</th><th>Лебедь</th><th>Замер</th></tr>
|
||
<tr><td>10:00</td><td class="cell-busy">Клиент К.</td><td class="cell-free">—</td><td class="cell-gps">📍 GPS</td></tr>
|
||
<tr><td>12:00</td><td class="cell-busy">Клиент М.</td><td class="cell-busy">Клиент П.</td><td class="cell-free">—</td></tr>
|
||
<tr><td>14:00</td><td class="cell-free">—</td><td class="cell-busy">Клиент С.</td><td class="cell-gps">📍 GPS</td></tr>
|
||
<tr><td>16:00</td><td class="cell-busy">Клиент В.</td><td class="cell-free">—</td><td class="cell-busy">Замер №4821</td></tr>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="grid-2" style="gap:1vw">
|
||
<div class="card"><div class="ic green">🗓️</div><h3>Расписание</h3><p>Все встречи и замеры команды — в одном календаре.</p></div>
|
||
<div class="card"><div class="ic green">📍</div><h3>GPS-чекин</h3><p>Замерщик отмечается на адресе — факт выезда подтверждён.</p></div>
|
||
<div class="card"><div class="ic green">📨</div><h3>Заявки</h3><p>Лиды распределяются по менеджерам автоматически.</p></div>
|
||
<div class="card"><div class="ic green">📈</div><h3>Нагрузка</h3><p>Видно, кто перегружен, а у кого есть свободные слоты.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8 ── RATING ──────────────────────────────────── -->
|
||
<section class="slide" data-label="Рейтинговая система" id="s8">
|
||
<div class="head-block">
|
||
<div class="kicker">Рейтинговая система</div>
|
||
<h2 class="title">Оценки <span class="grad">влияют на премию</span></h2>
|
||
<p class="lead">Сотрудников оценивают коллеги по цепочке и клиент. Оценки анонимны — честность вместо страха.</p>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="rate-card">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
||
<div><div style="color:var(--muted);font-size:.85rem">Менеджер</div><div class="scorebig">9.6<small>/10</small></div></div>
|
||
<div class="stars">★★★★★</div>
|
||
</div>
|
||
<div class="crit"><span class="cn">Скорость ответа</span><span class="cs up">9.8</span></div>
|
||
<div class="crit"><span class="cn">Точность проекта</span><span class="cs up">9.5</span></div>
|
||
<div class="crit"><span class="cn">Оценка клиента</span><span class="cs up">9.4</span></div>
|
||
</div>
|
||
<div class="rate-card">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
||
<div><div style="color:var(--muted);font-size:.85rem">Замерщик</div><div class="scorebig">9.4<small>/10</small></div></div>
|
||
<div class="stars">★★★★★</div>
|
||
</div>
|
||
<div class="crit"><span class="cn">Точность замера</span><span class="cs up">9.7</span></div>
|
||
<div class="crit"><span class="cn">Пунктуальность</span><span class="cs up">9.2</span></div>
|
||
<div class="crit"><span class="cn">Оценка клиента</span><span class="cs up">9.3</span></div>
|
||
</div>
|
||
<div class="rate-card">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
||
<div><div style="color:var(--muted);font-size:.85rem">Сборщик</div><div class="scorebig">9.1<small>/10</small></div></div>
|
||
<div class="stars">★★★★☆</div>
|
||
</div>
|
||
<div class="crit"><span class="cn">Качество монтажа</span><span class="cs up">9.3</span></div>
|
||
<div class="crit"><span class="cn">Чистота после работ</span><span class="cs up">8.8</span></div>
|
||
<div class="crit"><span class="cn">Оценка клиента</span><span class="cs up">9.2</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-3 mt">
|
||
<div class="card"><div class="ic green">🤝</div><h3>Оценка по цепочке</h3><p>Сотрудники оценивают друг друга — критерии под каждую роль.</p></div>
|
||
<div class="card"><div class="ic green">🕵️</div><h3>Анонимность</h3><p>Кто поставил оценку — не видно. Объективная обратная связь.</p></div>
|
||
<div class="card"><div class="ic green">💰</div><h3>Влияние на премию</h3><p>Рейтинг автоматически учитывается при расчёте бонусов.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9 ── KNOWLEDGE BASE ──────────────────────────── -->
|
||
<section class="slide" data-label="База знаний" id="s9">
|
||
<div class="head-block">
|
||
<div class="kicker">База знаний</div>
|
||
<h2 class="title">Экспертиза <span class="grad">встроена в систему</span></h2>
|
||
<p class="lead">Готовые статьи помогают менеджеру с низкими компетенциями работать на уровне эксперта — и отправлять материалы клиенту в один клик.</p>
|
||
</div>
|
||
<div class="grid-4">
|
||
<div class="kb-card"><div class="kb-cover">📏</div><div class="kb-body"><div class="kb-tag">Эргономика</div><h3>Эргономика кухонного помещения</h3><p>Рабочий треугольник, высоты, расстояния между зонами.</p><div class="kb-meta"><span>📖 6 мин</span><span>📤 Клиенту</span></div></div></div>
|
||
<div class="kb-card"><div class="kb-cover">🔌</div><div class="kb-body"><div class="kb-tag">Техника</div><h3>Подбор встраиваемой техники</h3><p>Как подобрать технику под габариты и бюджет клиента.</p><div class="kb-meta"><span>📖 8 мин</span><span>📤 Клиенту</span></div></div></div>
|
||
<div class="kb-card"><div class="kb-cover">🚪</div><div class="kb-body"><div class="kb-tag">Хранение</div><h3>Системы хранения и наполнение</h3><p>Фурнитура, выдвижные механизмы, организация шкафов.</p><div class="kb-meta"><span>📖 5 мин</span><span>📤 Клиенту</span></div></div></div>
|
||
<div class="kb-card"><div class="kb-cover">💡</div><div class="kb-body"><div class="kb-tag">Свет</div><h3>Освещение рабочих зон</h3><p>Подсветка столешницы, сценарии света, температура.</p><div class="kb-meta"><span>📖 4 мин</span><span>📤 Клиенту</span></div></div></div>
|
||
</div>
|
||
<div class="grid-3 mt">
|
||
<div class="card"><div class="ic green">🎓</div><h3>Рост компетенций</h3><p>Новый сотрудник быстро выходит на качество продаж.</p></div>
|
||
<div class="card"><div class="ic green">📤</div><h3>Отправка клиенту</h3><p>Статья уходит клиенту прямо из карточки сделки.</p></div>
|
||
<div class="card"><div class="ic green">✍️</div><h3>Свои материалы</h3><p>Собственник добавляет регламенты и стандарты сети.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10 ── TECH ───────────────────────────────────── -->
|
||
<section class="slide" data-label="Технические детали" id="s10">
|
||
<div class="head-block">
|
||
<div class="kicker">Технические детали</div>
|
||
<h2 class="title">Современная <span class="grad">облачная архитектура</span></h2>
|
||
<p class="lead">Ничего не нужно устанавливать. Работает в браузере и на телефоне, подключение — за один день.</p>
|
||
</div>
|
||
<div class="grid-2">
|
||
<div class="feat"><div class="fic">📱</div><div><h3>Мобильная CRM</h3><p>Замерщики и сборщики работают с телефона прямо на объекте.</p></div></div>
|
||
<div class="feat"><div class="fic">🌐</div><div><h3>Работает в браузере</h3><p>Никаких установок и серверов в салоне — открыл и работаешь.</p></div></div>
|
||
<div class="feat"><div class="fic">⚡</div><div><h3>Подключение за 1 день</h3><p>Заводим салоны, роли и сотрудников — и сразу в работу.</p></div></div>
|
||
<div class="feat"><div class="fic">☁️</div><div><h3>Данные в облаке</h3><p>Резервное копирование, доступ из любой точки, ничего не теряется.</p></div></div>
|
||
<div class="feat"><div class="fic">🔒</div><div><h3>Разграничение доступа</h3><p>Каждая роль видит только свою зону. Данные под защитой.</p></div></div>
|
||
<div class="feat"><div class="fic">🛟</div><div><h3>Поддержка 24/7</h3><p>Помогаем на старте и сопровождаем на всём пути.</p></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 11 ── PRICING / ROI ──────────────────────────── -->
|
||
<section class="slide" data-label="Стоимость и ROI" id="s11">
|
||
<div class="head-block">
|
||
<div class="kicker">Стоимость и ROI</div>
|
||
<h2 class="title">Тарифы под <span class="grad">размер бизнеса</span></h2>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="plan">
|
||
<div class="pn">Старт</div>
|
||
<div class="pp">— ₽<small>/мес</small></div>
|
||
<ul><li>1 салон</li><li>до 5 пользователей</li><li>Воронка и заказы</li><li>База знаний</li></ul>
|
||
</div>
|
||
<div class="plan pop">
|
||
<div class="plan-badge">Популярный</div>
|
||
<div class="pn">Бизнес</div>
|
||
<div class="pp">— ₽<small>/мес</small></div>
|
||
<ul><li>до 3 салонов</li><li>до 25 пользователей</li><li>Рейтинговая система</li><li>GPS-чекин и шахматка</li><li>Дашборд собственника</li></ul>
|
||
</div>
|
||
<div class="plan">
|
||
<div class="pn">Сеть</div>
|
||
<div class="pp">— ₽<small>/мес</small></div>
|
||
<ul><li>Неограниченно салонов</li><li>Неограниченно пользователей</li><li>Все функции Бизнес</li><li>Персональный менеджер</li><li>Кастомизация процессов</li></ul>
|
||
</div>
|
||
</div>
|
||
<div class="roi-box">
|
||
<div class="rb-num">×3</div>
|
||
<div class="rb-txt"><b>1 удержанный клиент = 3 месяца подписки.</b> Система окупается, если помогает не потерять хотя бы одну сделку в квартал.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 12 ── CTA ────────────────────────────────────── -->
|
||
<section class="slide" data-label="Следующий шаг" id="s12">
|
||
<div class="kicker" style="color:rgba(255,255,255,.7);justify-content:center">Следующий шаг</div>
|
||
<h1>Посмотрите систему на своём бизнесе</h1>
|
||
<div class="cta-sub">Покажем дашборд на ваших салонах и настроим под ваши процессы.</div>
|
||
<div class="cta-cards">
|
||
<div class="cta-c"><div class="cc-n">30 минут</div><div class="cc-l">Демо системы онлайн</div></div>
|
||
<div class="cta-c"><div class="cc-n">3 дня</div><div class="cc-l">Полное внедрение в сети</div></div>
|
||
<div class="cta-c"><div class="cc-n">Бесплатно</div><div class="cc-l">Первый месяц работы</div></div>
|
||
</div>
|
||
<a class="cta-btn" href="#">Записаться на демо →</a>
|
||
<div class="cta-contact">@wasrusgen1 · i@wasrusgen.ru</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<!-- chrome -->
|
||
<div class="progress" id="progress"></div>
|
||
<div class="chrome">
|
||
<div class="counter">Слайд <b id="cur">1</b> / <b id="total">12</b></div>
|
||
<div class="nav-btns">
|
||
<button class="nav-btn" id="prev" aria-label="Назад">←</button>
|
||
<button class="nav-btn" id="next" aria-label="Вперёд">→</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
const slides=[...document.querySelectorAll('.slide')];
|
||
const total=slides.length;
|
||
let i=0;
|
||
const elCur=document.getElementById('cur');
|
||
const elTotal=document.getElementById('total');
|
||
const elProg=document.getElementById('progress');
|
||
const elPrev=document.getElementById('prev');
|
||
const elNext=document.getElementById('next');
|
||
const elLabel=document.getElementById('pageLabel');
|
||
elTotal.textContent=total;
|
||
|
||
function show(n){
|
||
i=Math.max(0,Math.min(total-1,n));
|
||
slides.forEach((s,k)=>s.classList.toggle('active',k===i));
|
||
elCur.textContent=i+1;
|
||
elProg.style.width=((i+1)/total*100)+'%';
|
||
elPrev.disabled=i===0;
|
||
elNext.disabled=i===total-1;
|
||
elLabel.textContent=slides[i].dataset.label||'';
|
||
}
|
||
function nextS(){show(i+1)}
|
||
function prevS(){show(i-1)}
|
||
|
||
elNext.addEventListener('click',nextS);
|
||
elPrev.addEventListener('click',prevS);
|
||
document.addEventListener('keydown',e=>{
|
||
if(e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '){e.preventDefault();nextS();}
|
||
else if(e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();prevS();}
|
||
else if(e.key==='Home'){show(0);}
|
||
else if(e.key==='End'){show(total-1);}
|
||
});
|
||
// swipe
|
||
let x0=null;
|
||
document.addEventListener('touchstart',e=>x0=e.touches[0].clientX,{passive:true});
|
||
document.addEventListener('touchend',e=>{
|
||
if(x0===null)return;
|
||
const dx=e.changedTouches[0].clientX-x0;
|
||
if(Math.abs(dx)>50){dx<0?nextS():prevS();}
|
||
x0=null;
|
||
},{passive:true});
|
||
|
||
show(0);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|