neo/calls24-landing
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve landing: remove free tier, add gradient/grid background, enhance pricing cards

Browse Source
This commit is contained in:
neo committed 2026-07-07 21:02:26 +05:00
1 parent da076701d3
commit 3d25533397
1 file changed
+116 -31
Download Patch File Download Diff File Expand all files Collapse all files
index-v4.html
+116 -31
View File
@@ -143,10 +143,40 @@
overflow-x: hidden;
}
/* ═══════════════════════════════════════════
BACKGROUND
═══════════════════════════════════════════ */
.bg-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}
.bg-grid {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
}
/* ═══════════════════════════════════════════
ACCESSIBILITY
═══════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
@@ -155,6 +185,38 @@
/* ═══════════════════════════════════════════
ABSTRACT GEOMETRY BACKGROUND (Bauhaus)
═══════════════════════════════════════════ */
body {
position: relative;
}
.bg-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}
.bg-grid {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
}
.geo-bg {
position: fixed;
top: 0;
@@ -1708,9 +1770,9 @@
═══════════════════════════════════════════ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
max-width: 1000px;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 900px;
margin: 0 auto;
}
@@ -1722,24 +1784,50 @@
text-align: center;
transition: all 0.3s var(--ease-out);
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
opacity: 0;
transition: opacity 0.3s;
}
.pricing-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(255, 61, 0, 0.1);
}
.pricing-card:hover::before {
opacity: 1;
}
.pricing-card.featured {
border-color: var(--accent);
background: linear-gradient(
135deg,
rgba(255, 61, 0, 0.03) 0%,
var(--bg-card) 100%
);
}
.pricing-card.featured::before {
opacity: 1;
}
.pricing-card.featured::after {
content: "Популярный";
position: absolute;
top: -0.625rem;
left: 50%;
transform: translateX(-50%);
padding: 0.25rem 1rem;
top: 1rem;
right: 1rem;
padding: 0.25rem 0.75rem;
background: var(--accent);
color: white;
font-size: 0.6875rem;
@@ -1749,8 +1837,6 @@
letter-spacing: 0.05em;
}
/* Enterprise pricing card */
/* Pricing enterprise styles */
.pricing-card.enterprise {
border-color: var(--accent-secondary);
background: linear-gradient(
@@ -1758,7 +1844,10 @@
rgba(34, 197, 94, 0.05) 0%,
var(--bg-card) 100%
);
position: relative;
}
.pricing-card.enterprise::before {
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary));
}
.pricing-label-custom {
@@ -2274,6 +2363,20 @@
</style>
</head>
<body>
<!-- Background Effects -->
<div class="bg-gradient"></div>
<div class="bg-grid"></div>
<div class="geo-bg">
<div class="geo-shape geo-circle geo-circle-1"></div>
<div class="geo-shape geo-circle geo-circle-2"></div>
<div class="geo-shape geo-circle geo-circle-3"></div>
<div class="geo-shape geo-square geo-square-1"></div>
<div class="geo-shape geo-square geo-square-2"></div>
<div class="geo-shape geo-line geo-line-1"></div>
<div class="geo-shape geo-line geo-line-2"></div>
<div class="geo-shape geo-dots geo-dots-1"></div>
<div class="geo-shape geo-dots geo-dots-2"></div>
</div>
<!-- Skip link -->
<!-- Abstract Geometry Background -->
@@ -4404,24 +4507,6 @@
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-name">Бесплатный аудит</div>
<div class="pricing-desc">
Попробуйте без обязательств
</div>
<div class="pricing-price">0 ₽</div>
<ul class="pricing-features">
<li>До 20 звонков</li>
<li>Базовый отчёт</li>
<li>Общий балл по звонкам</li>
</ul>
<a
href="#"
class="btn btn-secondary"
style="width: 100%; justify-content: center"
>Загрузить звонки</a
>
</div>
<div class="pricing-card featured">
<div class="pricing-label-popular">Популярный</div>
<div class="pricing-name">База</div>