wasrusgen/wasrusgen1-crm
1
0
Fork 0
mirror of https://github.com/wasrusgen/wasrusgen1-crm.git synced 2026-06-03 23:04:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

landing: hover-микроанимации кнопок и блоков (блик, стрелка, свечение иконок/карточек)

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
wasrusgen 2026-06-03 19:56:28 +03:00
parent 6ad0441ddd
commit 32f1a0241b
2 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/consult_landing.html
View File

@ -68,15 +68,29 @@
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
background: var(--accent); color: #fff; padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; transition: all 0.2s;
font-size: 16px; font-weight: 600; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s;
box-shadow: 0 4px 20px rgba(16,185,129,0.3);
position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(16,185,129,0.4); }
/* блик, пробегающий по кнопке при наведении (timeweb-style) */
.btn-primary::after {
content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; z-index: -1;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(16,185,129,0.45); }
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(-1px) scale(.98); }
/* стрелка → в тексте кнопки уезжает вправо */
.btn-arrow { display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.btn-primary:hover .btn-arrow { transform: translateX(5px); }
.btn-outline {
background: transparent; color: var(--text); padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; border: 1px solid var(--border); transition: all 0.2s;
font-size: 16px; font-weight: 600; border: 1px solid var(--border);
transition: border-color .25s, color .25s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,185,129,.18); }
.btn-outline:active { transform: translateY(-1px) scale(.98); }
.hero-stat { display: flex; gap: 48px; justify-content: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border); }
.stat-item { text-align: center; }
.stat-num { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 800; color: var(--accent); }
@ -110,8 +124,10 @@
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
padding: 28px; transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: rgba(16,185,129,0.4); transform: translateY(-2px); }
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.feature-card:hover { border-color: rgba(16,185,129,0.45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,185,129,.12); }
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; }
.feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
.feature-card:hover .feature-icon svg { stroke: #10B981; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.feature-card p { font-size: 14px; color: var(--muted); }
@ -134,6 +150,8 @@
display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.funnel-step.active .funnel-num { background: var(--accent); color: #fff; }
.funnel-num { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.funnel-step:hover .funnel-num { transform: translateY(-2px) scale(1.1); box-shadow: 0 8px 20px rgba(16,185,129,.3); }
.funnel-step h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.funnel-step p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.funnel-desc { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
@ -235,7 +253,7 @@
<h1>Разберём ваш бизнес<br><em>по полочкам</em></h1>
<p>За несколько дней находим, где вы теряете деньги и время: процессы, люди, учёт. Даём целевую модель, регламенты и план внедрения — понятным языком, без слайдов на 100 страниц.</p>
<div class="hero-btns">
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary">Получить бесплатную диагностику</a>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary">Получить бесплатную диагностику <span class="btn-arrow">→</span></a>
<a href="#funnel" class="btn-outline">Как это работает</a>
</div>
<div class="hero-stat">
@ -366,7 +384,7 @@
<div class="demo-card reveal" style="grid-column:1/-1;text-align:center;padding:40px 28px">
<h3 style="font-size:22px;margin-bottom:8px">15 минут — и вы увидите, где теряете деньги</h3>
<p style="margin-bottom:22px">Бесплатная диагностика без обязательств. Расскажете о бизнесе — Елена структурирует и покажет первые точки.</p>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary" style="display:inline-block">Начать бесплатную диагностику →</a>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary" style="display:inline-block">Начать бесплатную диагностику <span class="btn-arrow">→</span></a>
</div>
</div>
</div>

34
docs/main.html
View File

@ -68,15 +68,29 @@
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
background: var(--accent); color: #fff; padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; transition: all 0.2s;
font-size: 16px; font-weight: 600; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s;
box-shadow: 0 4px 20px rgba(16,185,129,0.3);
position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(16,185,129,0.4); }
/* блик, пробегающий по кнопке при наведении (timeweb-style) */
.btn-primary::after {
content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; z-index: -1;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(16,185,129,0.45); }
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(-1px) scale(.98); }
/* стрелка → в тексте кнопки уезжает вправо */
.btn-arrow { display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.btn-primary:hover .btn-arrow { transform: translateX(5px); }
.btn-outline {
background: transparent; color: var(--text); padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; border: 1px solid var(--border); transition: all 0.2s;
font-size: 16px; font-weight: 600; border: 1px solid var(--border);
transition: border-color .25s, color .25s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,185,129,.18); }
.btn-outline:active { transform: translateY(-1px) scale(.98); }
.hero-stat { display: flex; gap: 48px; justify-content: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border); }
.stat-item { text-align: center; }
.stat-num { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 800; color: var(--accent); }
@ -110,8 +124,10 @@
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
padding: 28px; transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: rgba(16,185,129,0.4); transform: translateY(-2px); }
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.feature-card:hover { border-color: rgba(16,185,129,0.45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,185,129,.12); }
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; }
.feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
.feature-card:hover .feature-icon svg { stroke: #10B981; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.feature-card p { font-size: 14px; color: var(--muted); }
@ -134,6 +150,8 @@
display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.funnel-step.active .funnel-num { background: var(--accent); color: #fff; }
.funnel-num { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.funnel-step:hover .funnel-num { transform: translateY(-2px) scale(1.1); box-shadow: 0 8px 20px rgba(16,185,129,.3); }
.funnel-step h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.funnel-step p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.funnel-desc { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
@ -235,7 +253,7 @@
<h1>Разберём ваш бизнес<br><em>по полочкам</em></h1>
<p>За несколько дней находим, где вы теряете деньги и время: процессы, люди, учёт. Даём целевую модель, регламенты и план внедрения — понятным языком, без слайдов на 100 страниц.</p>
<div class="hero-btns">
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary">Получить бесплатную диагностику</a>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary">Получить бесплатную диагностику <span class="btn-arrow">→</span></a>
<a href="#funnel" class="btn-outline">Как это работает</a>
</div>
<div class="hero-stat">
@ -366,7 +384,7 @@
<div class="demo-card reveal" style="grid-column:1/-1;text-align:center;padding:40px 28px">
<h3 style="font-size:22px;margin-bottom:8px">15 минут — и вы увидите, где теряете деньги</h3>
<p style="margin-bottom:22px">Бесплатная диагностика без обязательств. Расскажете о бизнесе — Елена структурирует и покажет первые точки.</p>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary" style="display:inline-block">Начать бесплатную диагностику →</a>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-primary" style="display:inline-block">Начать бесплатную диагностику <span class="btn-arrow">→</span></a>
</div>
</div>
</div>