Improve landing: remove free tier, add gradient/grid background, enhance pricing cards
This commit is contained in:
neo committed
1 parent
da076701d3
commit
3d25533397
1 file changed
+116
-31
+116
-31
@@ -143,10 +143,40 @@
|
|||||||
overflow-x: hidden;
|
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
|
ACCESSIBILITY
|
||||||
═══════════════════════════════════════════ */
|
═══════════════════════════════════════════ */
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--accent);
|
outline: 2px solid var(--accent);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
@@ -155,6 +185,38 @@
|
|||||||
/* ═══════════════════════════════════════════
|
/* ═══════════════════════════════════════════
|
||||||
ABSTRACT GEOMETRY BACKGROUND (Bauhaus)
|
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 {
|
.geo-bg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -1708,9 +1770,9 @@
|
|||||||
═══════════════════════════════════════════ */
|
═══════════════════════════════════════════ */
|
||||||
.pricing-grid {
|
.pricing-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 1.25rem;
|
gap: 1.5rem;
|
||||||
max-width: 1000px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1722,24 +1784,50 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
transition: all 0.3s var(--ease-out);
|
transition: all 0.3s var(--ease-out);
|
||||||
position: relative;
|
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 {
|
.pricing-card:hover {
|
||||||
border-color: var(--border-hover);
|
border-color: var(--accent);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 40px rgba(255, 61, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-card.featured {
|
.pricing-card.featured {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(255, 61, 0, 0.03) 0%,
|
||||||
|
var(--bg-card) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-card.featured::before {
|
.pricing-card.featured::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card.featured::after {
|
||||||
content: "Популярный";
|
content: "Популярный";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.625rem;
|
top: 1rem;
|
||||||
left: 50%;
|
right: 1rem;
|
||||||
transform: translateX(-50%);
|
padding: 0.25rem 0.75rem;
|
||||||
padding: 0.25rem 1rem;
|
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 0.6875rem;
|
font-size: 0.6875rem;
|
||||||
@@ -1749,8 +1837,6 @@
|
|||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Enterprise pricing card */
|
|
||||||
/* Pricing enterprise styles */
|
|
||||||
.pricing-card.enterprise {
|
.pricing-card.enterprise {
|
||||||
border-color: var(--accent-secondary);
|
border-color: var(--accent-secondary);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
@@ -1758,7 +1844,10 @@
|
|||||||
rgba(34, 197, 94, 0.05) 0%,
|
rgba(34, 197, 94, 0.05) 0%,
|
||||||
var(--bg-card) 100%
|
var(--bg-card) 100%
|
||||||
);
|
);
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
|
.pricing-card.enterprise::before {
|
||||||
|
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-label-custom {
|
.pricing-label-custom {
|
||||||
@@ -2274,6 +2363,20 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 -->
|
<!-- Skip link -->
|
||||||
|
|
||||||
<!-- Abstract Geometry Background -->
|
<!-- Abstract Geometry Background -->
|
||||||
@@ -4404,24 +4507,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pricing-grid">
|
<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-card featured">
|
||||||
<div class="pricing-label-popular">Популярный</div>
|
<div class="pricing-label-popular">Популярный</div>
|
||||||
<div class="pricing-name">База</div>
|
<div class="pricing-name">База</div>
|
||||||
|
|||||||
Reference in new issue
Block a user