1831 lines
85 KiB
PHP
1831 lines
85 KiB
PHP
|
<?php
|
|||
|
|
|
|||
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
|
|||
|
|
|
|||
|
|
if (isset($_SESSION['id'])) {
|
|||
|
|
header("location:sale.php");
|
|||
|
|
exit();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$get = clearInputData($_GET);
|
|||
|
|
if ($_GET['ok_auth']) {
|
|||
|
|
$user = new User;
|
|||
|
|
$msg = $user->auth($get);
|
|||
|
|
}
|
|||
|
|
if ($get['msg'])
|
|||
|
|
$msg = $get['msg'];
|
|||
|
|
if ($_POST['ok_auth2']) {
|
|||
|
|
$post = clearInputData($_POST);
|
|||
|
|
$user = new User;
|
|||
|
|
$msg2 = $user->check_sms($post);
|
|||
|
|
}
|
|||
|
|
if ($_POST['ok_auth3']) {
|
|||
|
|
$post = clearInputData($_POST);
|
|||
|
|
$user = new User;
|
|||
|
|
$msg2 = $user->check_sms($post, 1);
|
|||
|
|
}
|
|||
|
|
if ($_POST['ok_user']) {
|
|||
|
|
$post = clearInputData($_POST);
|
|||
|
|
$user = new User;
|
|||
|
|
$msg_user = $user->reg($post);
|
|||
|
|
}
|
|||
|
|
header('Access-Control-Allow-Origin: *');
|
|||
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/promo/templates/lw-new-header.php");
|
|||
|
|
|
|||
|
|
$path = $_SERVER['SCRIPT_NAME'];
|
|||
|
|
$path = ltrim($path, '/');
|
|||
|
|
$fileName = preg_replace('/[\/\.php]+/', '', $path);
|
|||
|
|
?>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* ─── TOKENS ─── */
|
|||
|
|
:root {
|
|||
|
|
--white: #ffffff;
|
|||
|
|
--bg: #f4f7f5;
|
|||
|
|
--bg2: #eaf0ec;
|
|||
|
|
--border: #dfe8e2;
|
|||
|
|
--border2: #cfdbd4;
|
|||
|
|
|
|||
|
|
/* Brand green — точный цвет JoyWork #4CAF50 */
|
|||
|
|
--brand: #4CAF50;
|
|||
|
|
--brand-light: #66BB6A;
|
|||
|
|
--brand-hover: #43A047;
|
|||
|
|
--brand-soft: rgba(76,175,80,0.08);
|
|||
|
|
--brand-mid: rgba(76,175,80,0.16);
|
|||
|
|
|
|||
|
|
--text: #1a1a1a;
|
|||
|
|
--text2: #555f57;
|
|||
|
|
--text3: #8fa090;
|
|||
|
|
|
|||
|
|
--success: #4CAF50;
|
|||
|
|
--success-bg: rgba(76,175,80,0.09);
|
|||
|
|
--danger: #e53935;
|
|||
|
|
--danger-bg: rgba(229,57,53,0.07);
|
|||
|
|
--orange: #e67e22;
|
|||
|
|
--orange-bg: rgba(230,126,34,0.08);
|
|||
|
|
|
|||
|
|
--shadow-sm: 0 2px 8px rgba(76,175,80,0.07);
|
|||
|
|
--shadow-md: 0 8px 32px rgba(76,175,80,0.12);
|
|||
|
|
--shadow-lg: 0 20px 60px rgba(76,175,80,0.15);
|
|||
|
|
|
|||
|
|
--radius: 16px;
|
|||
|
|
--radius-sm: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|||
|
|
html { scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
|
|||
|
|
body {
|
|||
|
|
font-family:'Lato',Helvetica,sans-serif;
|
|||
|
|
background:var(--white);
|
|||
|
|
color:var(--text);
|
|||
|
|
overflow-x:hidden;
|
|||
|
|
max-width:100%;
|
|||
|
|
-webkit-font-smoothing:antialiased;
|
|||
|
|
letter-spacing:0.25px;
|
|||
|
|
}
|
|||
|
|
h1,h2,h3,h4 { font-family:'Lato',Helvetica,sans-serif; line-height:1.12; font-weight:600; }
|
|||
|
|
|
|||
|
|
/* ─── SECTION ─── */
|
|||
|
|
.section-inner { max-width:1200px; margin:0 auto; padding:88px 40px; }
|
|||
|
|
.section-inner.pt-0 { padding-top:0; }
|
|||
|
|
|
|||
|
|
/* ─── TAG/LABEL ─── */
|
|||
|
|
.tag {
|
|||
|
|
display:inline-flex; align-items:center; gap:6px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
border-radius:100px; padding:5px 14px;
|
|||
|
|
font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
|
|||
|
|
color:var(--brand); margin-bottom:20px;
|
|||
|
|
}
|
|||
|
|
.tag-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
|
|||
|
|
|
|||
|
|
/* ─── HERO ─── */
|
|||
|
|
.hero {
|
|||
|
|
padding-top:130px; background:var(--white);
|
|||
|
|
overflow:hidden; position:relative;
|
|||
|
|
}
|
|||
|
|
.hero-bg-shape {
|
|||
|
|
position:absolute; top:-120px; right:-200px; pointer-events:none;
|
|||
|
|
width:700px; height:700px; border-radius:50%;
|
|||
|
|
background:radial-gradient(ellipse,rgba(26,158,90,0.06) 0%,transparent 70%);
|
|||
|
|
}
|
|||
|
|
.hero-bg-shape2 {
|
|||
|
|
position:absolute; bottom:-100px; left:-150px; pointer-events:none;
|
|||
|
|
width:500px; height:500px; border-radius:50%;
|
|||
|
|
background:radial-gradient(ellipse,rgba(26,158,90,0.04) 0%,transparent 65%);
|
|||
|
|
}
|
|||
|
|
.hero-inner {
|
|||
|
|
max-width:1200px; margin:0 auto; padding:72px 40px 140px;
|
|||
|
|
display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
|
|||
|
|
}
|
|||
|
|
.hero-kicker {
|
|||
|
|
display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
border-radius:100px; padding:6px 16px;
|
|||
|
|
font-size:12px; font-weight:700; text-transform:uppercase;
|
|||
|
|
letter-spacing:.07em; color:var(--brand);
|
|||
|
|
}
|
|||
|
|
.kicker-live {
|
|||
|
|
width:7px; height:7px; border-radius:50%; background:var(--brand);
|
|||
|
|
animation:pulse 2s infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
|
|||
|
|
|
|||
|
|
.hero h1 {
|
|||
|
|
font-size:clamp(32px,3.8vw,52px); font-weight:700;
|
|||
|
|
color:#000000;
|
|||
|
|
margin-bottom:20px; line-height:1.12;
|
|||
|
|
}
|
|||
|
|
.hero h1 em { font-style:normal; color:var(--brand); }
|
|||
|
|
.hero-sub {
|
|||
|
|
font-size:16px; line-height:1.75; color:var(--text2);
|
|||
|
|
max-width:520px; margin-bottom:36px;
|
|||
|
|
}
|
|||
|
|
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
|
|||
|
|
.btn-hero-primary {
|
|||
|
|
background:var(--brand); color:#fff; border:none;
|
|||
|
|
padding:14px 32px; border-radius:10px;
|
|||
|
|
font-size:16px; font-weight:700; cursor:pointer; font-family:'Manrope',sans-serif;
|
|||
|
|
box-shadow:0 8px 24px rgba(26,158,90,.3); transition:.2s;
|
|||
|
|
}
|
|||
|
|
.btn-hero-primary:hover {
|
|||
|
|
background:var(--brand-hover); transform:translateY(-1px);
|
|||
|
|
box-shadow:0 12px 32px rgba(26,158,90,.4);
|
|||
|
|
}
|
|||
|
|
.btn-video {
|
|||
|
|
display:flex; align-items:center; gap:10px;
|
|||
|
|
background:none; border:none; cursor:pointer; color:var(--text);
|
|||
|
|
font-family:'Manrope',sans-serif; font-size:15px; font-weight:600; transition:.15s;
|
|||
|
|
}
|
|||
|
|
.btn-video:hover { color:var(--brand); }
|
|||
|
|
.btn-video:hover .vplay { background:var(--brand); }
|
|||
|
|
.vplay {
|
|||
|
|
width:42px; height:42px; border-radius:50%; background:var(--text);
|
|||
|
|
display:flex; align-items:center; justify-content:center; transition:.2s;
|
|||
|
|
}
|
|||
|
|
.vplay svg { width:14px; height:14px; fill:#fff; margin-left:2px; }
|
|||
|
|
|
|||
|
|
.hero-benefits {
|
|||
|
|
display:flex; flex-direction:column; gap:10px;
|
|||
|
|
margin-top:28px; padding-top:28px; border-top:1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.hero-benefit {
|
|||
|
|
display:flex; align-items:flex-start; gap:10px;
|
|||
|
|
font-size:14px; color:var(--text2); line-height:1.45;
|
|||
|
|
}
|
|||
|
|
.hb-icon {
|
|||
|
|
width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
display:flex; align-items:center; justify-content:center; color:var(--brand);
|
|||
|
|
}
|
|||
|
|
.hb-icon svg { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
|
|||
|
|
/* ─── HERO RIGHT: screenshot frame ─── */
|
|||
|
|
.hero-right { position:relative; }
|
|||
|
|
.hero-screenshot-wrap { position:relative; padding-bottom:20px; margin-right:-100px; }
|
|||
|
|
|
|||
|
|
.screenshot-frame {
|
|||
|
|
background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:var(--radius);
|
|||
|
|
box-shadow:var(--shadow-lg), 0 0 0 1px var(--border);
|
|||
|
|
overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.screenshot-topbar {
|
|||
|
|
background:#f4f8f6; border-bottom:1px solid var(--border);
|
|||
|
|
padding:10px 14px; display:flex; align-items:center; gap:8px;
|
|||
|
|
}
|
|||
|
|
.m-dots { display:flex; gap:5px; }
|
|||
|
|
.m-dot { width:9px; height:9px; border-radius:50%; }
|
|||
|
|
.m-url {
|
|||
|
|
flex:1; background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:6px; padding:4px 12px; font-size:11px; color:var(--text3);
|
|||
|
|
max-width:300px; margin:0 auto; text-align:center;
|
|||
|
|
}
|
|||
|
|
.screenshot-img { width:100%; display:block; }
|
|||
|
|
|
|||
|
|
/* floating chips */
|
|||
|
|
.float-chip {
|
|||
|
|
position:absolute; background:var(--white);
|
|||
|
|
border:1px solid var(--border); border-radius:12px;
|
|||
|
|
padding:12px 16px; box-shadow:var(--shadow-md);
|
|||
|
|
animation:chipFloat 3.5s ease-in-out infinite; z-index:2;
|
|||
|
|
}
|
|||
|
|
.fc-a { left:50%; top:-28px; transform:translateX(-50%); min-width:180px; animation-delay:0s; }
|
|||
|
|
.fc-b { right:-50px; top:100px; min-width:164px; animation-delay:1.2s; }
|
|||
|
|
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
|
|||
|
|
.chip-label { font-size:10px; color:var(--text3); margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em; }
|
|||
|
|
.chip-val { font-family:'Lato',Helvetica,sans-serif; font-weight:800; font-size:15px; color:var(--brand); }
|
|||
|
|
.chip-sub { font-size:11px; color:var(--text2); margin-top:3px; }
|
|||
|
|
.chip-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-right:5px; }
|
|||
|
|
|
|||
|
|
/* ─── PROBLEM / SOLUTION ─── */
|
|||
|
|
.problem { background:var(--bg); border-top:1px solid var(--border); }
|
|||
|
|
.ps-header { text-align:center; max-width:680px; margin:0 auto 56px; }
|
|||
|
|
.section-h2 { font-size:clamp(26px,3vw,44px); font-weight:700; margin-bottom:14px; }
|
|||
|
|
.section-h2 em { font-style:normal; color:var(--brand); }
|
|||
|
|
.section-sub { font-size:16px; color:var(--text2); line-height:1.7; }
|
|||
|
|
|
|||
|
|
.ps-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; position:relative; }
|
|||
|
|
.ps-col { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
|
|||
|
|
.ps-col-head {
|
|||
|
|
padding:20px 24px 16px; display:flex; align-items:center; gap:10px;
|
|||
|
|
border-bottom:1px solid var(--border); background:var(--white);
|
|||
|
|
}
|
|||
|
|
.ps-col-icon {
|
|||
|
|
width:36px; height:36px; border-radius:9px;
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
}
|
|||
|
|
.ps-col-icon.bad { background:var(--danger-bg); color:var(--danger); }
|
|||
|
|
|
|||
|
|
.ps-col-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.ps-col-title { font-family:'Lato',Helvetica,sans-serif; font-weight:800; font-size:16px; }
|
|||
|
|
.ps-col-title.bad { color:var(--danger); }
|
|||
|
|
.ps-col-title.good { color:var(--brand); }
|
|||
|
|
|
|||
|
|
.ps-col-body { background:var(--white); padding:16px 24px; display:flex; flex-direction:column; gap:10px; }
|
|||
|
|
.ps-item { display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:10px; }
|
|||
|
|
.ps-item.bad { background:var(--danger-bg); border:1px solid rgba(220,38,38,0.12); }
|
|||
|
|
.ps-item.good { background:var(--brand-soft); border:1px solid var(--brand-mid); }
|
|||
|
|
.ps-item-icon { flex-shrink:0; margin-top:2px; }
|
|||
|
|
.ps-item-icon svg {
|
|||
|
|
width:16px; height:16px; stroke:currentColor; fill:none;
|
|||
|
|
stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
|
|||
|
|
display:block;
|
|||
|
|
}
|
|||
|
|
.ps-item.bad .ps-item-icon { color:var(--danger); opacity:.75; }
|
|||
|
|
.ps-item.good .ps-item-icon { color:var(--brand); }
|
|||
|
|
.ps-item-text { font-size:13px; line-height:1.55; color:var(--text2); }
|
|||
|
|
|
|||
|
|
.ps-arrow {
|
|||
|
|
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
|
|||
|
|
z-index:10; width:48px; height:48px; border-radius:50%;
|
|||
|
|
background:var(--white); border:2px solid var(--border);
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
box-shadow:var(--shadow-md);
|
|||
|
|
}
|
|||
|
|
.ps-arrow svg { width:20px; height:20px; stroke:var(--text3); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
|
|||
|
|
/* ─── VIDEO ─── */
|
|||
|
|
.video-section { background:var(--white); }
|
|||
|
|
.video-label { text-align:center; margin-bottom:32px; }
|
|||
|
|
.video-embed-wrap {
|
|||
|
|
border-radius:var(--radius); overflow:hidden;
|
|||
|
|
position:relative; padding-top:56.25%;
|
|||
|
|
background:#0c1a10;
|
|||
|
|
box-shadow:var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
.video-embed-wrap iframe {
|
|||
|
|
position:absolute; top:0; left:0;
|
|||
|
|
width:100%; height:100%; border:0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── VIDEO 2 колонки ─── */
|
|||
|
|
.v3-wrap {
|
|||
|
|
display:grid; grid-template-columns:1fr 1fr;
|
|||
|
|
gap:56px; align-items:center;
|
|||
|
|
}
|
|||
|
|
.v3-video-col { position:relative; }
|
|||
|
|
.v3-embed {
|
|||
|
|
border-radius:16px; overflow:hidden;
|
|||
|
|
position:relative; padding-top:56.25%;
|
|||
|
|
background:#0c1a10;
|
|||
|
|
box-shadow:var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
.v3-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
|
|||
|
|
.v3-text-col {}
|
|||
|
|
.v3-title { font-size:24px; font-weight:800; color:var(--text); line-height:1.25; margin-bottom:8px; }
|
|||
|
|
.v3-sub { font-size:14px; color:var(--text2); margin-bottom:24px; line-height:1.6; }
|
|||
|
|
.v3-points { display:flex; flex-direction:column; gap:12px; }
|
|||
|
|
.v3-point {
|
|||
|
|
display:flex; align-items:flex-start; gap:12px;
|
|||
|
|
}
|
|||
|
|
.v3-point-icon {
|
|||
|
|
width:28px; height:28px; border-radius:8px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
flex-shrink:0; margin-top:1px;
|
|||
|
|
}
|
|||
|
|
.v3-point-icon svg { width:14px; height:14px; stroke:var(--brand); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.v3-point-text { font-size:13px; color:var(--text2); line-height:1.55; }
|
|||
|
|
.v3-point-text strong { color:var(--text); font-weight:700; }
|
|||
|
|
|
|||
|
|
/* ─── FEATURES ─── */
|
|||
|
|
.features { background:var(--bg); border-top:1px solid var(--border); }
|
|||
|
|
.feat-header { text-align:center; max-width:600px; margin:0 auto 56px; }
|
|||
|
|
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
|
|||
|
|
|
|||
|
|
.feat-card {
|
|||
|
|
background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:var(--radius); padding:28px;
|
|||
|
|
transition:.25s; cursor:default; position:relative; overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.feat-card:hover { border-color:var(--brand-mid); box-shadow:var(--shadow-md); transform:translateY(-3px); }
|
|||
|
|
.feat-card::before {
|
|||
|
|
content:''; position:absolute; top:0; left:0; right:0; height:3px;
|
|||
|
|
background:linear-gradient(90deg,var(--brand),#4fd68a);
|
|||
|
|
opacity:0; transition:.25s;
|
|||
|
|
}
|
|||
|
|
.feat-card:hover::before { opacity:1; }
|
|||
|
|
|
|||
|
|
.feat-icon {
|
|||
|
|
width:48px; height:48px; border-radius:12px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
color:var(--brand); margin-bottom:18px;
|
|||
|
|
}
|
|||
|
|
.feat-icon svg {
|
|||
|
|
width:22px; height:22px; stroke:currentColor; fill:none;
|
|||
|
|
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
|
|||
|
|
}
|
|||
|
|
.feat-card h3 { font-family:'Lato',Helvetica,sans-serif; font-weight:700; font-size:17px; margin-bottom:10px; }
|
|||
|
|
.feat-card p { font-size:14px; color:var(--text2); line-height:1.65; }
|
|||
|
|
.feat-num {
|
|||
|
|
position:absolute; top:20px; right:20px;
|
|||
|
|
font-family:'Lato',Helvetica,sans-serif; font-weight:900; font-size:36px;
|
|||
|
|
color:var(--bg2); line-height:1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── RESULTS + CTA ─── */
|
|||
|
|
.results { background:var(--white); border-top:1px solid var(--border); }
|
|||
|
|
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
|
|||
|
|
.results-list { display:flex; flex-direction:column; gap:16px; }
|
|||
|
|
.result-item { display:flex; gap:16px; align-items:flex-start; }
|
|||
|
|
.ri-icon {
|
|||
|
|
width:44px; height:44px; border-radius:11px; flex-shrink:0;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
display:flex; align-items:center; justify-content:center; color:var(--brand);
|
|||
|
|
}
|
|||
|
|
.ri-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.ri-body strong { display:block; font-size:15px; font-weight:700; margin-bottom:3px; }
|
|||
|
|
.ri-body span { font-size:13px; color:var(--text2); line-height:1.5; }
|
|||
|
|
|
|||
|
|
.cta-box {
|
|||
|
|
background:linear-gradient(145deg,var(--brand) 0%,#0e6e38 100%);
|
|||
|
|
border-radius:var(--radius); padding:48px 40px;
|
|||
|
|
text-align:center; position:relative; overflow:hidden;
|
|||
|
|
box-shadow:0 24px 64px rgba(26,158,90,.28);
|
|||
|
|
}
|
|||
|
|
.cta-box-bg {
|
|||
|
|
position:absolute; inset:0; pointer-events:none;
|
|||
|
|
background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(255,255,255,.09),transparent);
|
|||
|
|
}
|
|||
|
|
.cta-box h3 {
|
|||
|
|
font-family:'Lato',Helvetica,sans-serif; font-weight:700; font-size:26px;
|
|||
|
|
color:#fff; letter-spacing:-.5px; margin-bottom:14px;
|
|||
|
|
}
|
|||
|
|
.cta-box p { font-size:15px; color:rgba(255,255,255,.8); line-height:1.7; margin-bottom:28px; }
|
|||
|
|
.btn-cta-white {
|
|||
|
|
background:#fff; color:var(--brand); border:none; padding:14px 36px;
|
|||
|
|
border-radius:10px; font-size:16px; font-weight:800; cursor:pointer;
|
|||
|
|
font-family:'Manrope',sans-serif; transition:.2s;
|
|||
|
|
box-shadow:0 6px 20px rgba(0,0,0,.14); display:block; width:100%; margin-bottom:10px;
|
|||
|
|
}
|
|||
|
|
.btn-cta-white:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.2); }
|
|||
|
|
.btn-cta-outline {
|
|||
|
|
background:transparent; color:rgba(255,255,255,.9);
|
|||
|
|
border:2px solid rgba(255,255,255,.35); padding:12px 36px; border-radius:10px;
|
|||
|
|
font-size:15px; font-weight:600; cursor:pointer; font-family:'Manrope',sans-serif;
|
|||
|
|
transition:.2s; display:block; width:100%;
|
|||
|
|
}
|
|||
|
|
.btn-cta-outline:hover { border-color:rgba(255,255,255,.7); }
|
|||
|
|
.cta-note { font-size:12px; color:rgba(255,255,255,.5); margin-top:14px; }
|
|||
|
|
|
|||
|
|
/* ─── FOOTER ─── */
|
|||
|
|
footer { background:var(--text); padding:40px; }
|
|||
|
|
.footer-inner {
|
|||
|
|
max-width:1200px; margin:0 auto;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between;
|
|||
|
|
}
|
|||
|
|
.footer-logo { font-family:'Lato',Helvetica,sans-serif; font-weight:900; font-size:20px; color:#fff; }
|
|||
|
|
.footer-links { display:flex; gap:24px; }
|
|||
|
|
.footer-links a { font-size:13px; color:rgba(255,255,255,.5); text-decoration:none; transition:.15s; }
|
|||
|
|
.footer-links a:hover { color:rgba(255,255,255,.9); }
|
|||
|
|
.footer-copy { font-size:13px; color:rgba(255,255,255,.35); }
|
|||
|
|
|
|||
|
|
/* ─── REVEAL ─── */
|
|||
|
|
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s,transform .65s; }
|
|||
|
|
.reveal.visible { opacity:1; transform:translateY(0); }
|
|||
|
|
.reveal-delay1 { transition-delay:.1s; }
|
|||
|
|
.reveal-delay2 { transition-delay:.2s; }
|
|||
|
|
.reveal-delay3 { transition-delay:.3s; }
|
|||
|
|
|
|||
|
|
/* ─── HERO ANIMATIONS ─── */
|
|||
|
|
.hero-left > * { animation:fadeUp .7s both; }
|
|||
|
|
.hero-kicker { animation-delay:.05s; }
|
|||
|
|
.hero h1 { animation-delay:.15s; }
|
|||
|
|
.hero-sub { animation-delay:.25s; }
|
|||
|
|
.hero-actions { animation-delay:.35s; }
|
|||
|
|
.hero-trust { animation-delay:.45s; }
|
|||
|
|
.hero-right { animation:fadeUp .8s .3s both; }
|
|||
|
|
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
|
|||
|
|
|
|||
|
|
/* ─── PHONE MOCKUP ─── */
|
|||
|
|
.phone-wrap {
|
|||
|
|
position:absolute; bottom:-100px; left:-44px; z-index:10;
|
|||
|
|
animation:chipFloat 4s 0.6s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
.phone-mockup {
|
|||
|
|
width:210px;
|
|||
|
|
background:#111;
|
|||
|
|
border-radius:38px;
|
|||
|
|
border:4px solid #111;
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 0 1px #3a3a3a,
|
|||
|
|
inset 0 0 0 0.5px rgba(255,255,255,0.06),
|
|||
|
|
0 32px 80px rgba(0,0,0,0.45),
|
|||
|
|
0 8px 24px rgba(0,0,0,0.3);
|
|||
|
|
overflow:hidden;
|
|||
|
|
position:relative;
|
|||
|
|
}
|
|||
|
|
/* Left buttons */
|
|||
|
|
.phone-btn-left {
|
|||
|
|
position:absolute; left:-11px; top:80px;
|
|||
|
|
display:flex; flex-direction:column; gap:10px; z-index:20;
|
|||
|
|
}
|
|||
|
|
.phone-btn-left span {
|
|||
|
|
display:block; width:4px; height:30px; background:#2a2a2a;
|
|||
|
|
border-radius:3px 0 0 3px;
|
|||
|
|
}
|
|||
|
|
.phone-btn-left span:first-child { height:20px; top:0; }
|
|||
|
|
/* Right button */
|
|||
|
|
.phone-btn-right {
|
|||
|
|
position:absolute; right:-11px; top:100px; z-index:20;
|
|||
|
|
width:4px; height:56px; background:#2a2a2a;
|
|||
|
|
border-radius:0 3px 3px 0;
|
|||
|
|
}
|
|||
|
|
/* Status bar */
|
|||
|
|
.phone-statusbar {
|
|||
|
|
background:#fff; height:46px; position:relative;
|
|||
|
|
display:flex; align-items:flex-end; justify-content:space-between;
|
|||
|
|
padding:0 16px 7px;
|
|||
|
|
}
|
|||
|
|
.phone-island {
|
|||
|
|
position:absolute; top:14px; left:50%; transform:translateX(-50%);
|
|||
|
|
width:26px; height:8px; background:#111;
|
|||
|
|
border-radius:100px; z-index:2;
|
|||
|
|
}
|
|||
|
|
.phone-statusbar-time { font-size:12px; font-weight:700; color:#000; font-family:'Lato',sans-serif; }
|
|||
|
|
.phone-statusbar-icons { display:flex; align-items:center; gap:4px; }
|
|||
|
|
.phone-statusbar-icons svg { display:block; }
|
|||
|
|
/* Nav bar */
|
|||
|
|
.phone-navbar {
|
|||
|
|
background:#fff;
|
|||
|
|
border-bottom:0.5px solid rgba(0,0,0,0.15);
|
|||
|
|
padding:9px 14px;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between;
|
|||
|
|
}
|
|||
|
|
.phone-nav-back {
|
|||
|
|
display:flex; align-items:center; gap:2px;
|
|||
|
|
font-size:13px; color:#007AFF; font-weight:400;
|
|||
|
|
font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
.phone-nav-back svg { width:8px; height:14px; stroke:#007AFF; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.phone-nav-title { font-size:14px; font-weight:600; color:#000; font-family:-apple-system,'SF Pro Text','Lato',sans-serif; }
|
|||
|
|
.phone-nav-more { color:#007AFF; font-size:18px; line-height:1; font-weight:600; }
|
|||
|
|
/* App content wrapper */
|
|||
|
|
.phone-content {
|
|||
|
|
position:relative; overflow:hidden;
|
|||
|
|
height:380px;
|
|||
|
|
}
|
|||
|
|
/* Background app screen (visible behind overlay) */
|
|||
|
|
.phone-bg-app {
|
|||
|
|
position:absolute; inset:0;
|
|||
|
|
background:#f5f5f7;
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
.phone-bg-navbar {
|
|||
|
|
background:#fff; border-bottom:0.5px solid rgba(0,0,0,0.12);
|
|||
|
|
padding:10px 14px; text-align:center;
|
|||
|
|
font-size:12px; font-weight:600; color:#1c1c1e;
|
|||
|
|
font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
.phone-bg-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
|
|||
|
|
.phone-bg-label { height:7px; background:#dde0e5; border-radius:4px; width:45%; }
|
|||
|
|
.phone-bg-field { height:30px; background:#fff; border-radius:8px; border:0.5px solid #d1d1d6; }
|
|||
|
|
.phone-bg-field--filled {
|
|||
|
|
height:auto; padding:6px 10px;
|
|||
|
|
font-size:10px; color:#1c1c1e;
|
|||
|
|
font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
display:flex; align-items:center;
|
|||
|
|
}
|
|||
|
|
.phone-bg-row { display:flex; gap:6px; }
|
|||
|
|
.phone-bg-row .phone-bg-field { flex:1; }
|
|||
|
|
/* Dark overlay */
|
|||
|
|
.phone-overlay {
|
|||
|
|
position:absolute; inset:0; z-index:1;
|
|||
|
|
background:rgba(0,0,0,0.42);
|
|||
|
|
}
|
|||
|
|
/* Modal bottom sheet */
|
|||
|
|
.phone-modal {
|
|||
|
|
position:absolute; bottom:0; left:0; right:0; z-index:2;
|
|||
|
|
background:#f0f0f5;
|
|||
|
|
border-radius:20px 20px 0 0;
|
|||
|
|
padding:10px 16px 28px;
|
|||
|
|
display:flex; flex-direction:column; align-items:center;
|
|||
|
|
text-align:center;
|
|||
|
|
}
|
|||
|
|
.phone-modal-handle {
|
|||
|
|
width:36px; height:4px; background:#c7c7cc;
|
|||
|
|
border-radius:2px; margin-bottom:18px;
|
|||
|
|
}
|
|||
|
|
.phone-success-circle {
|
|||
|
|
width:36px; height:36px; border-radius:50%;
|
|||
|
|
background:var(--brand);
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
margin-bottom:10px;
|
|||
|
|
box-shadow:0 4px 16px rgba(76,175,80,0.35);
|
|||
|
|
}
|
|||
|
|
.phone-success-circle svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.phone-success-title {
|
|||
|
|
font-size:14px; font-weight:700; color:#6b6b6b;
|
|||
|
|
margin-bottom:6px; font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
.phone-success-body {
|
|||
|
|
font-size:10px; color:#8e8e93; line-height:1.55;
|
|||
|
|
margin-bottom:16px;
|
|||
|
|
font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
.phone-success-body strong { font-weight:600; color:#6b6b6b; display:block; }
|
|||
|
|
.phone-action-btn {
|
|||
|
|
display:block; width:100%;
|
|||
|
|
background:var(--brand); color:#fff; border:none;
|
|||
|
|
border-radius:13px; padding:12px;
|
|||
|
|
font-size:13px; font-weight:600; cursor:pointer;
|
|||
|
|
font-family:-apple-system,'SF Pro Text','Lato',sans-serif;
|
|||
|
|
letter-spacing:-.01em;
|
|||
|
|
box-shadow:0 4px 14px rgba(76,175,80,0.35);
|
|||
|
|
}
|
|||
|
|
/* Home indicator */
|
|||
|
|
.phone-home {
|
|||
|
|
background:#f0f0f5; padding:8px 0 12px;
|
|||
|
|
display:flex; justify-content:center;
|
|||
|
|
}
|
|||
|
|
.phone-home-bar { width:90px; height:5px; background:rgba(0,0,0,0.18); border-radius:3px; }
|
|||
|
|
|
|||
|
|
/* ─── PROMO BANNER ─── */
|
|||
|
|
|
|||
|
|
/* Общая обёртка для закруглённых вариантов */
|
|||
|
|
.promo-wrap {
|
|||
|
|
background:var(--white);
|
|||
|
|
padding:24px 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Вариант A: тёмная закруглённая карточка */
|
|||
|
|
.promo-a {
|
|||
|
|
background:linear-gradient(90deg,#1a1a1a 0%,#222 100%);
|
|||
|
|
border-radius:20px;
|
|||
|
|
max-width:1200px; margin:0 auto;
|
|||
|
|
box-shadow:0 8px 32px rgba(0,0,0,0.18);
|
|||
|
|
}
|
|||
|
|
.promo-a-inner {
|
|||
|
|
padding:20px 28px;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between; gap:24px;
|
|||
|
|
}
|
|||
|
|
.promo-a-left { display:flex; align-items:center; gap:16px; }
|
|||
|
|
.promo-a-icon {
|
|||
|
|
width:40px; height:40px; border-radius:10px;
|
|||
|
|
background:rgba(76,175,80,0.2); border:1px solid rgba(76,175,80,0.3);
|
|||
|
|
display:flex; align-items:center; justify-content:center; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.promo-a-icon svg { width:18px; height:18px; stroke:#4CAF50; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.promo-a-text { font-size:15px; color:rgba(255,255,255,0.7); line-height:1.5; }
|
|||
|
|
.promo-a-text strong { color:#fff; font-weight:700; }
|
|||
|
|
.promo-a-text .jw-g { color:#4CAF50; }
|
|||
|
|
.promo-a-badge {
|
|||
|
|
background:rgba(76,175,80,0.15); border:1px solid rgba(76,175,80,0.3);
|
|||
|
|
color:#4CAF50; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
|
|||
|
|
padding:4px 12px; border-radius:100px; white-space:nowrap; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.promo-a-btn {
|
|||
|
|
background:var(--brand); color:#fff; border:none;
|
|||
|
|
padding:10px 24px; border-radius:100px; font-size:14px; font-weight:700;
|
|||
|
|
font-family:'Lato',sans-serif; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0;
|
|||
|
|
box-shadow:0 4px 16px rgba(76,175,80,0.4);
|
|||
|
|
}
|
|||
|
|
.promo-a-btn:hover { background:var(--brand-hover); }
|
|||
|
|
|
|||
|
|
/* Вариант B: светлая закруглённая карточка с рамкой */
|
|||
|
|
.promo-b {
|
|||
|
|
background:var(--white);
|
|||
|
|
border:1.5px solid var(--border);
|
|||
|
|
border-radius:20px;
|
|||
|
|
max-width:1200px; margin:0 auto;
|
|||
|
|
box-shadow:0 4px 20px rgba(0,0,0,0.06);
|
|||
|
|
}
|
|||
|
|
.promo-b-inner {
|
|||
|
|
padding:20px 28px;
|
|||
|
|
display:flex; align-items:center; gap:24px;
|
|||
|
|
}
|
|||
|
|
.promo-b-tag {
|
|||
|
|
display:inline-flex; align-items:center; gap:6px;
|
|||
|
|
background:#fdecea; border:1px solid rgba(229,57,53,0.25);
|
|||
|
|
color:#e53935; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
|
|||
|
|
padding:4px 12px; border-radius:100px; white-space:nowrap; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.promo-b-tag svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.promo-b-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; }
|
|||
|
|
.promo-b-text { flex:1; font-size:15px; color:var(--text2); line-height:1.55; }
|
|||
|
|
.promo-b-text strong { color:var(--text); font-weight:700; }
|
|||
|
|
.promo-b-text .jw-g { color:#4CAF50; }
|
|||
|
|
.promo-b-btn {
|
|||
|
|
background:var(--white); color:var(--text); border:1.5px solid var(--border2);
|
|||
|
|
padding:10px 24px; border-radius:100px; font-size:14px; font-weight:700;
|
|||
|
|
font-family:'Lato',sans-serif; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.promo-b-btn:hover { border-color:var(--brand); color:var(--brand); }
|
|||
|
|
|
|||
|
|
/* Вариант C: зелёный закруглённый градиент с цифрой */
|
|||
|
|
.promo-c {
|
|||
|
|
background:linear-gradient(100deg,#2e7d32 0%,#43a047 50%,#388e3c 100%);
|
|||
|
|
border-radius:20px;
|
|||
|
|
max-width:1200px; margin:0 auto;
|
|||
|
|
box-shadow:0 8px 32px rgba(76,175,80,0.3);
|
|||
|
|
}
|
|||
|
|
.promo-c-inner {
|
|||
|
|
padding:20px 28px;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between; gap:32px;
|
|||
|
|
}
|
|||
|
|
.promo-c-left { display:flex; align-items:center; gap:28px; flex:1; }
|
|||
|
|
.promo-c-stat {
|
|||
|
|
flex-shrink:0; text-align:center;
|
|||
|
|
border-right:1px solid rgba(255,255,255,0.2); padding-right:28px;
|
|||
|
|
}
|
|||
|
|
.promo-c-stat-val { font-size:32px; font-weight:900; color:#fff; line-height:1; }
|
|||
|
|
.promo-c-stat-lbl { font-size:11px; color:rgba(255,255,255,0.75); margin-top:2px; font-weight:600; }
|
|||
|
|
.promo-c-text { font-size:15px; color:rgba(255,255,255,0.85); line-height:1.55; }
|
|||
|
|
.promo-c-text strong { color:#fff; font-weight:800; }
|
|||
|
|
.promo-c-text .jw-b2 { color:#fff; font-weight:900; }
|
|||
|
|
.promo-c-btn {
|
|||
|
|
background:#fff; color:#2e7d32; border:none;
|
|||
|
|
padding:11px 26px; border-radius:100px; font-size:14px; font-weight:800;
|
|||
|
|
font-family:'Lato',sans-serif; cursor:pointer; transition:.2s; white-space:nowrap; flex-shrink:0;
|
|||
|
|
box-shadow:0 4px 16px rgba(0,0,0,0.15);
|
|||
|
|
}
|
|||
|
|
.promo-c-btn:hover { background:#f1f8f1; }
|
|||
|
|
|
|||
|
|
/* старый .promo-btn (оставляем для совместимости) */
|
|||
|
|
.promo-banner {
|
|||
|
|
background:linear-gradient(90deg,#f0f9f0,#e8f5e9);
|
|||
|
|
border-top:1px solid var(--brand-mid);
|
|||
|
|
border-bottom:1px solid var(--brand-mid);
|
|||
|
|
}
|
|||
|
|
.promo-inner {
|
|||
|
|
max-width:1200px; margin:0 auto; padding:18px 40px;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between; gap:24px;
|
|||
|
|
}
|
|||
|
|
.promo-text { font-size:15px; color:var(--text2); line-height:1.55; }
|
|||
|
|
.promo-text strong { color:var(--text); font-weight:700; }
|
|||
|
|
.promo-btn {
|
|||
|
|
background:var(--brand); color:#fff; border:none;
|
|||
|
|
padding:11px 28px; border-radius:100px; font-size:14px; font-weight:700;
|
|||
|
|
cursor:pointer; font-family:'Manrope',sans-serif;
|
|||
|
|
white-space:nowrap; flex-shrink:0; transition:.2s;
|
|||
|
|
box-shadow:0 4px 14px rgba(76,175,80,.28);
|
|||
|
|
}
|
|||
|
|
.promo-btn:hover { background:var(--brand-hover); }
|
|||
|
|
|
|||
|
|
/* ─── TABS SECTION ─── */
|
|||
|
|
.tabs-section { background:var(--white); border-top:1px solid var(--border); }
|
|||
|
|
.tabs-nav {
|
|||
|
|
display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px;
|
|||
|
|
}
|
|||
|
|
.tab-btn {
|
|||
|
|
padding:9px 20px; border-radius:100px;
|
|||
|
|
border:1.5px solid var(--border2);
|
|||
|
|
background:var(--white); color:var(--text2);
|
|||
|
|
font-size:13px; font-weight:600; font-family:'Lato',Helvetica,sans-serif;
|
|||
|
|
cursor:pointer; transition:.15s; white-space:nowrap; line-height:1;
|
|||
|
|
}
|
|||
|
|
.tab-btn:hover { border-color:var(--brand-mid); color:var(--text); background:var(--brand-soft); }
|
|||
|
|
.tab-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
|
|||
|
|
|
|||
|
|
.tab-panel { display:none; }
|
|||
|
|
.tab-panel.active {
|
|||
|
|
display:grid; grid-template-columns:5fr 7fr;
|
|||
|
|
gap:72px; align-items:center;
|
|||
|
|
}
|
|||
|
|
.tab-title {
|
|||
|
|
font-size:clamp(20px,2.2vw,30px); font-weight:700;
|
|||
|
|
color:var(--text); margin-bottom:24px; line-height:1.2;
|
|||
|
|
}
|
|||
|
|
.tab-block { margin-bottom:18px; }
|
|||
|
|
.tab-who {
|
|||
|
|
display:inline-block; font-size:11px; font-weight:800;
|
|||
|
|
text-transform:uppercase; letter-spacing:.07em;
|
|||
|
|
margin-bottom:6px;
|
|||
|
|
}
|
|||
|
|
.tab-who.dev { color:var(--brand); }
|
|||
|
|
.tab-who.agent { color:var(--text3); }
|
|||
|
|
.tab-desc {
|
|||
|
|
font-size:14px; line-height:1.7; color:var(--text2);
|
|||
|
|
}
|
|||
|
|
.tab-desc strong { color:var(--text); font-weight:700; }
|
|||
|
|
.btn-tab-action {
|
|||
|
|
display:inline-flex; align-items:center; gap:10px; margin-top:10px;
|
|||
|
|
border:1.5px solid var(--border2); border-radius:10px;
|
|||
|
|
padding:11px 22px; background:var(--white);
|
|||
|
|
font-size:14px; font-weight:600; color:var(--text);
|
|||
|
|
font-family:'Lato',Helvetica,sans-serif; cursor:pointer; transition:.2s;
|
|||
|
|
}
|
|||
|
|
.btn-tab-action:hover { border-color:var(--brand); color:var(--brand); }
|
|||
|
|
.btn-tab-action svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
|
|||
|
|
.tab-visual { position:relative; }
|
|||
|
|
.tab-frame {
|
|||
|
|
background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:var(--radius);
|
|||
|
|
box-shadow:var(--shadow-lg), 0 0 0 1px var(--border);
|
|||
|
|
overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.tab-frame-bar {
|
|||
|
|
background:#f4f8f6; border-bottom:1px solid var(--border);
|
|||
|
|
padding:10px 14px; display:flex; align-items:center; gap:8px;
|
|||
|
|
}
|
|||
|
|
.tab-frame-img { width:100%; display:block; }
|
|||
|
|
/* placeholder ui inside tab frames */
|
|||
|
|
.tab-ui { padding:20px; background:var(--bg); min-height:260px; }
|
|||
|
|
.tab-ui-header {
|
|||
|
|
background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:12px;
|
|||
|
|
display:flex; align-items:center; gap:10px;
|
|||
|
|
}
|
|||
|
|
.tab-ui-icon {
|
|||
|
|
width:32px; height:32px; border-radius:8px;
|
|||
|
|
background:var(--brand-soft); border:1px solid var(--brand-mid);
|
|||
|
|
display:flex; align-items:center; justify-content:center; color:var(--brand); flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.tab-ui-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
|
|||
|
|
.tab-ui-title { font-size:14px; font-weight:700; color:var(--text); }
|
|||
|
|
.tab-ui-sub { font-size:12px; color:var(--text3); margin-top:2px; }
|
|||
|
|
.tab-ui-rows { display:flex; flex-direction:column; gap:8px; }
|
|||
|
|
.tab-ui-row {
|
|||
|
|
background:var(--white); border:1px solid var(--border);
|
|||
|
|
border-radius:var(--radius-sm); padding:12px 16px;
|
|||
|
|
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
|||
|
|
}
|
|||
|
|
.tab-ui-row-left { display:flex; align-items:center; gap:10px; }
|
|||
|
|
.tab-ui-row-thumb { width:36px; height:36px; border-radius:8px; background:var(--bg2); flex-shrink:0; }
|
|||
|
|
.tab-ui-row-name { font-size:13px; font-weight:600; color:var(--text); }
|
|||
|
|
.tab-ui-row-meta { font-size:11px; color:var(--text3); margin-top:2px; }
|
|||
|
|
.tab-ui-badge {
|
|||
|
|
font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px;
|
|||
|
|
white-space:nowrap;
|
|||
|
|
}
|
|||
|
|
.tab-ui-badge.green { background:var(--success-bg); color:var(--brand); }
|
|||
|
|
.tab-ui-badge.gray { background:var(--bg2); color:var(--text3); }
|
|||
|
|
.tab-ui-badge.orange{ background:var(--orange-bg); color:var(--orange); }
|
|||
|
|
|
|||
|
|
/* ─── PRESENTATION MOCKUP ─── */
|
|||
|
|
.pres-mockup {
|
|||
|
|
background:#fff;
|
|||
|
|
border:1px solid var(--border);
|
|||
|
|
border-radius:16px;
|
|||
|
|
overflow:hidden;
|
|||
|
|
box-shadow:var(--shadow-lg), 0 0 0 1px var(--border);
|
|||
|
|
font-family:'Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
.pres-header {
|
|||
|
|
display:flex; align-items:center; gap:10px;
|
|||
|
|
padding:10px 16px;
|
|||
|
|
background:#f8faf9;
|
|||
|
|
border-bottom:1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.pres-logo-dot {
|
|||
|
|
width:22px; height:22px; border-radius:6px;
|
|||
|
|
background:var(--brand);
|
|||
|
|
flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.pres-dev-name {
|
|||
|
|
font-size:13px; font-weight:700; color:var(--text);
|
|||
|
|
}
|
|||
|
|
.pres-badge {
|
|||
|
|
margin-left:auto;
|
|||
|
|
font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
|
|||
|
|
background:var(--brand-soft); color:var(--brand);
|
|||
|
|
border:1px solid var(--brand-mid);
|
|||
|
|
padding:3px 9px; border-radius:100px;
|
|||
|
|
}
|
|||
|
|
/* Render block */
|
|||
|
|
.pres-render {
|
|||
|
|
position:relative; height:130px; overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.pres-render-sky {
|
|||
|
|
position:absolute; inset:0;
|
|||
|
|
background:linear-gradient(180deg,#c9e4f8 0%,#e8f4fd 70%,#d4eac8 100%);
|
|||
|
|
}
|
|||
|
|
.pres-render-ground {
|
|||
|
|
position:absolute; bottom:0; left:0; right:0; height:28px;
|
|||
|
|
background:#8dc36a;
|
|||
|
|
}
|
|||
|
|
.pres-render-building {
|
|||
|
|
position:absolute; bottom:28px;
|
|||
|
|
background:linear-gradient(180deg,#e8eef5 0%,#d0dbe8 100%);
|
|||
|
|
border-radius:3px 3px 0 0;
|
|||
|
|
}
|
|||
|
|
.pres-b1 { width:34%; left:8%; height:88px; background:linear-gradient(180deg,#dce6f0 0%,#c5d5e8 100%); }
|
|||
|
|
.pres-b2 { width:28%; left:38%; height:110px; background:linear-gradient(180deg,#e4edf5 0%,#cad8e8 100%); z-index:2; }
|
|||
|
|
.pres-b3 { width:30%; right:6%; height:76px; background:linear-gradient(180deg,#d8e2ec 0%,#c0d0e0 100%); }
|
|||
|
|
/* windows grid on buildings via box-shadow pattern */
|
|||
|
|
.pres-b1::after, .pres-b2::after, .pres-b3::after {
|
|||
|
|
content:''; position:absolute; inset:8px 6px;
|
|||
|
|
background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 5px, transparent 5px, transparent 11px),
|
|||
|
|
repeating-linear-gradient(0deg,rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 4px, transparent 4px, transparent 10px);
|
|||
|
|
}
|
|||
|
|
.pres-render-trees {
|
|||
|
|
position:absolute; bottom:26px; left:0; right:0; height:20px;
|
|||
|
|
background:radial-gradient(ellipse 30px 18px at 12% 100%,#5fa84f 50%,transparent 51%),
|
|||
|
|
radial-gradient(ellipse 24px 16px at 22% 100%,#4d9e44 50%,transparent 51%),
|
|||
|
|
radial-gradient(ellipse 28px 18px at 68% 100%,#5ca84e 50%,transparent 51%),
|
|||
|
|
radial-gradient(ellipse 22px 14px at 80% 100%,#4a9640 50%,transparent 51%),
|
|||
|
|
radial-gradient(ellipse 26px 16px at 93% 100%,#58a44c 50%,transparent 51%);
|
|||
|
|
z-index:3;
|
|||
|
|
}
|
|||
|
|
.pres-render-label {
|
|||
|
|
position:absolute; bottom:32px; right:10px; z-index:4;
|
|||
|
|
font-size:9px; font-weight:600; color:#fff;
|
|||
|
|
background:rgba(0,0,0,0.38); backdrop-filter:blur(3px);
|
|||
|
|
padding:3px 8px; border-radius:100px;
|
|||
|
|
}
|
|||
|
|
/* Description row */
|
|||
|
|
.pres-desc-row {
|
|||
|
|
display:flex; align-items:flex-start; gap:12px;
|
|||
|
|
padding:10px 14px; border-bottom:1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.pres-desc-text { flex:1; }
|
|||
|
|
.pres-desc-title { font-size:13px; font-weight:800; color:var(--text); margin-bottom:3px; }
|
|||
|
|
.pres-desc-sub { font-size:11px; line-height:1.5; color:var(--text2); }
|
|||
|
|
.pres-stats {
|
|||
|
|
display:flex; flex-direction:column; gap:4px; flex-shrink:0;
|
|||
|
|
align-items:flex-end;
|
|||
|
|
}
|
|||
|
|
.pres-stat { text-align:right; }
|
|||
|
|
.pres-stat-val { font-size:14px; font-weight:900; color:var(--brand); line-height:1; }
|
|||
|
|
.pres-stat-lbl { font-size:9px; color:var(--text3); margin-top:1px; }
|
|||
|
|
/* Bottom row: plan + chars */
|
|||
|
|
.pres-bottom-row {
|
|||
|
|
display:grid; grid-template-columns:1fr 1fr; gap:0;
|
|||
|
|
}
|
|||
|
|
.pres-plan-wrap {
|
|||
|
|
padding:10px 12px; border-right:1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
.pres-plan-title, .pres-chars-title {
|
|||
|
|
font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
|
|||
|
|
color:var(--text3); margin-bottom:8px;
|
|||
|
|
}
|
|||
|
|
.pres-plan {
|
|||
|
|
position:relative; width:100%; height:110px;
|
|||
|
|
background:#f0f4f8; border-radius:8px; overflow:hidden;
|
|||
|
|
display:grid; grid-template-columns:55% 45%; grid-template-rows:55% 45%;
|
|||
|
|
}
|
|||
|
|
.pres-room {
|
|||
|
|
border:1px solid rgba(255,255,255,0.9);
|
|||
|
|
font-size:8px; font-weight:700;
|
|||
|
|
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|||
|
|
line-height:1.3; color:rgba(0,0,0,0.6);
|
|||
|
|
text-align:center; padding:2px;
|
|||
|
|
}
|
|||
|
|
.pres-room-living { background:#cde8f5; grid-row:1; grid-column:1; }
|
|||
|
|
.pres-room-bedroom { background:#d5e8d4; grid-row:1; grid-column:2; }
|
|||
|
|
.pres-room-kitchen { background:#fdebd0; grid-row:2; grid-column:1; }
|
|||
|
|
.pres-room-bath { background:#e8d5e8; grid-row:2; grid-column:2 }
|
|||
|
|
.pres-room-hall { display:none; }
|
|||
|
|
.pres-room-balcony { display:none; }
|
|||
|
|
/* Characteristics */
|
|||
|
|
.pres-chars { padding:10px 12px; }
|
|||
|
|
.pres-char-row {
|
|||
|
|
display:flex; justify-content:space-between; align-items:baseline;
|
|||
|
|
margin-bottom:5px; gap:6px;
|
|||
|
|
}
|
|||
|
|
.pres-char-key { font-size:10px; color:var(--text3); flex-shrink:0; }
|
|||
|
|
.pres-char-val { font-size:11px; font-weight:700; color:var(--text); text-align:right; }
|
|||
|
|
.pres-price { color:var(--brand); font-size:12px; }
|
|||
|
|
.pres-cta {
|
|||
|
|
margin-top:8px; width:100%; text-align:center;
|
|||
|
|
background:var(--brand); color:#fff;
|
|||
|
|
font-size:11px; font-weight:800; padding:6px 10px; border-radius:8px;
|
|||
|
|
cursor:pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── PRESENTATION COLLAGE ─── */
|
|||
|
|
.pres-collage {
|
|||
|
|
position:relative;
|
|||
|
|
height:420px;
|
|||
|
|
}
|
|||
|
|
.pres-ci {
|
|||
|
|
position:absolute;
|
|||
|
|
border-radius:12px;
|
|||
|
|
overflow:hidden;
|
|||
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
border:1px solid rgba(0,0,0,0.08);
|
|||
|
|
}
|
|||
|
|
.pres-ci img { width:100%; display:block; }
|
|||
|
|
|
|||
|
|
/* Скрин 1 — верхний левый, сзади */
|
|||
|
|
.pres-ci-1 { width:35%; top:0; left:7%; z-index:1; }
|
|||
|
|
/* Скрин 2 — правый верхний, средний слой */
|
|||
|
|
.pres-ci-2 { width:32%; top:30px; right:7%; z-index:2; }
|
|||
|
|
/* Скрин 3 — нижний центр, спереди */
|
|||
|
|
.pres-ci-3 { width:35%; top:60px; left:50%; transform:translateX(-50%); z-index:3; }
|
|||
|
|
|
|||
|
|
/* ─── VITRINA COLLAGE ─── */
|
|||
|
|
.vc-collage {
|
|||
|
|
position:relative;
|
|||
|
|
height:440px;
|
|||
|
|
}
|
|||
|
|
.vc-ci {
|
|||
|
|
position:absolute;
|
|||
|
|
border-radius:12px;
|
|||
|
|
overflow:hidden;
|
|||
|
|
box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
|
|||
|
|
border:1px solid rgba(0,0,0,0.08);
|
|||
|
|
}
|
|||
|
|
.vc-ci img { width:100%; display:block; }
|
|||
|
|
|
|||
|
|
/* Фасад — верхний левый угол, сзади */
|
|||
|
|
.vc-ci-fasad {
|
|||
|
|
width:66%; top:0; left:0; z-index:1;
|
|||
|
|
}
|
|||
|
|
/* План — правый верхний угол, средний слой */
|
|||
|
|
.vc-ci-plan {
|
|||
|
|
width:60%; top:30px; right:0; z-index:2;
|
|||
|
|
}
|
|||
|
|
/* Шахматка — нижний центр, спереди */
|
|||
|
|
.vc-ci-shahmatka {
|
|||
|
|
width:68%; bottom:0; left:50%; transform:translateX(-50%); z-index:3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vc-wrap { display:flex; flex-direction:column; gap:8px; }
|
|||
|
|
.vc-card {
|
|||
|
|
background:#fff; border-radius:10px;
|
|||
|
|
border:1px solid #e0e0e0; overflow:hidden;
|
|||
|
|
box-shadow:0 4px 18px rgba(0,0,0,0.09);
|
|||
|
|
font-family:-apple-system,'Lato',sans-serif;
|
|||
|
|
}
|
|||
|
|
/* App top bar */
|
|||
|
|
.vc-tabs {
|
|||
|
|
display:flex; gap:0; padding:0 14px;
|
|||
|
|
border-bottom:1px solid #e8e8e8; background:#fff;
|
|||
|
|
}
|
|||
|
|
.vc-tab {
|
|||
|
|
font-size:11px; font-weight:600; padding:9px 12px 8px; cursor:pointer;
|
|||
|
|
border-bottom:2px solid transparent; color:#888; white-space:nowrap;
|
|||
|
|
}
|
|||
|
|
.vc-tab.active { color:#1a1a1a; border-bottom-color:#4CAF50; }
|
|||
|
|
.vc-tab-badge {
|
|||
|
|
display:inline-block; background:#FF5722; color:#fff;
|
|||
|
|
font-size:8px; font-weight:700; border-radius:3px;
|
|||
|
|
padding:1px 4px; margin-left:4px; vertical-align:middle;
|
|||
|
|
}
|
|||
|
|
.vc-breadcrumb {
|
|||
|
|
font-size:10px; color:#888; padding:5px 14px;
|
|||
|
|
border-bottom:1px solid #f0f0f0; background:#f9f9f9;
|
|||
|
|
display:flex; align-items:center; gap:4px;
|
|||
|
|
}
|
|||
|
|
.vc-breadcrumb a { color:#4CAF50; }
|
|||
|
|
|
|||
|
|
/* Chess grid */
|
|||
|
|
.vc-chess-wrap { display:flex; }
|
|||
|
|
.vc-chess-left { padding:6px 10px; overflow-x:auto; flex:1; }
|
|||
|
|
.vc-chess-entrances {
|
|||
|
|
display:flex; gap:2px; margin-left:22px; margin-bottom:3px;
|
|||
|
|
}
|
|||
|
|
.vc-entrance-label {
|
|||
|
|
font-size:9px; color:#888; font-weight:500;
|
|||
|
|
text-align:center;
|
|||
|
|
}
|
|||
|
|
.vc-chess-rows { display:flex; flex-direction:column; gap:2px; }
|
|||
|
|
.vc-chess-row { display:flex; align-items:center; gap:2px; }
|
|||
|
|
.vc-floor-num { font-size:9px; color:#888; width:16px; text-align:right; flex-shrink:0; margin-right:4px; }
|
|||
|
|
.vc-group { display:flex; gap:2px; margin-right:6px; }
|
|||
|
|
.vc-apt {
|
|||
|
|
width:18px; height:18px; border-radius:3px;
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
font-size:7px; font-weight:700; color:#fff; cursor:pointer;
|
|||
|
|
flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.vc-apt.g { background:#4CAF50; } /* свободна */
|
|||
|
|
.vc-apt.r { background:#f44336; } /* продана */
|
|||
|
|
.vc-apt.gr { background:#9E9E9E; } /* недоступна */
|
|||
|
|
.vc-apt.t { background:#26C6DA; } /* бронь */
|
|||
|
|
.vc-apt.y { background:#FFA726; } /* резерв */
|
|||
|
|
|
|||
|
|
/* Apartment detail panel */
|
|||
|
|
.vc-detail {
|
|||
|
|
width:160px; flex-shrink:0; border-left:1px solid #eee;
|
|||
|
|
padding:10px 12px; font-size:10px;
|
|||
|
|
}
|
|||
|
|
.vc-detail-title { font-size:11px; font-weight:700; color:#1a1a1a; margin-bottom:6px; line-height:1.3; }
|
|||
|
|
.vc-detail-meta { display:flex; gap:10px; color:#555; margin-bottom:8px; }
|
|||
|
|
.vc-detail-plan {
|
|||
|
|
background:#e8f4fd; border-radius:6px;
|
|||
|
|
height:80px; display:flex; align-items:center; justify-content:center;
|
|||
|
|
margin-bottom:8px; position:relative; overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.vc-detail-plan-inner {
|
|||
|
|
width:60px; height:55px; border:1.5px solid #1565C0; position:relative;
|
|||
|
|
background:rgba(100,160,255,0.15);
|
|||
|
|
}
|
|||
|
|
.vc-detail-plan-inner::after {
|
|||
|
|
content:''; position:absolute; bottom:0; left:40%;
|
|||
|
|
width:60%; height:40%; border-top:1.5px solid #1565C0; border-left:1.5px solid #1565C0;
|
|||
|
|
}
|
|||
|
|
.vc-btn-zaявка {
|
|||
|
|
display:block; width:100%; text-align:center;
|
|||
|
|
background:#4CAF50; color:#fff; border:none; border-radius:6px;
|
|||
|
|
padding:6px; font-size:10px; font-weight:700; cursor:pointer;
|
|||
|
|
margin-bottom:6px;
|
|||
|
|
}
|
|||
|
|
.vc-detail-price { font-size:12px; font-weight:700; color:#1a1a1a; margin-bottom:2px; }
|
|||
|
|
.vc-detail-psm { font-size:9px; color:#888; }
|
|||
|
|
.vc-free-badge {
|
|||
|
|
float:right; background:#4CAF50; color:#fff;
|
|||
|
|
font-size:9px; font-weight:700; border-radius:4px; padding:2px 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Plan card content */
|
|||
|
|
.vc-plan-wrap { padding:10px 14px; }
|
|||
|
|
.vc-plan-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
|
|||
|
|
.vc-plan-title { font-size:11px; font-weight:700; color:#1a1a1a; }
|
|||
|
|
.vc-plan-select {
|
|||
|
|
font-size:9px; border:1px solid #ddd; border-radius:4px;
|
|||
|
|
padding:3px 8px; color:#555; display:flex; align-items:center; gap:4px;
|
|||
|
|
}
|
|||
|
|
.vc-plan-grid {
|
|||
|
|
display:grid;
|
|||
|
|
grid-template-columns:1fr 1fr 1fr 1fr;
|
|||
|
|
grid-template-rows:1fr 1fr 1fr;
|
|||
|
|
gap:2px; height:100px; border-radius:6px; overflow:hidden;
|
|||
|
|
border:1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
.vc-room {
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
font-size:8px; font-weight:600; color:rgba(0,0,0,0.5);
|
|||
|
|
}
|
|||
|
|
.vc-room.pink { background:#FFCDD2; }
|
|||
|
|
.vc-room.blue { background:#BBDEFB; }
|
|||
|
|
.vc-room.green { background:#C8E6C9; }
|
|||
|
|
.vc-room.yellow{ background:#FFF9C4; }
|
|||
|
|
.vc-room.white { background:#f5f5f5; border:1px solid #e0e0e0; }
|
|||
|
|
|
|||
|
|
/* Facade card content */
|
|||
|
|
.vc-facade-wrap { position:relative; }
|
|||
|
|
.vc-facade-img {
|
|||
|
|
height:120px; background:linear-gradient(170deg,#87CEEB 0%,#b0d4f1 35%,#8aab6e 60%,#6a8f4e 100%);
|
|||
|
|
position:relative; overflow:hidden;
|
|||
|
|
display:flex; align-items:flex-end; justify-content:center;
|
|||
|
|
}
|
|||
|
|
.vc-building {
|
|||
|
|
width:100%; height:80px; position:absolute; bottom:20px;
|
|||
|
|
display:flex; align-items:flex-end; justify-content:center; gap:2px;
|
|||
|
|
}
|
|||
|
|
.vc-bld-block { border-radius:2px 2px 0 0; background:#c8a882; position:relative; overflow:hidden; }
|
|||
|
|
.vc-bld-block::after {
|
|||
|
|
content:''; position:absolute; inset:0;
|
|||
|
|
background:repeating-linear-gradient(90deg,rgba(255,255,255,0.15) 0,rgba(255,255,255,0.15) 3px,transparent 3px,transparent 10px);
|
|||
|
|
}
|
|||
|
|
.vc-facade-tooltip {
|
|||
|
|
position:absolute; top:16px; left:50%; transform:translateX(-50%);
|
|||
|
|
background:#fff; border-radius:8px; padding:8px 12px;
|
|||
|
|
box-shadow:0 4px 16px rgba(0,0,0,0.18); font-size:10px; white-space:nowrap;
|
|||
|
|
}
|
|||
|
|
.vc-facade-tooltip-title { font-weight:700; color:#1a1a1a; margin-bottom:4px; }
|
|||
|
|
.vc-facade-tooltip-row { display:flex; align-items:center; gap:6px; color:#555; }
|
|||
|
|
.vc-tooltip-badge {
|
|||
|
|
width:16px; height:16px; border-radius:50%; background:#9E9E9E;
|
|||
|
|
display:flex; align-items:center; justify-content:center;
|
|||
|
|
font-size:7px; font-weight:700; color:#fff; flex-shrink:0;
|
|||
|
|
}
|
|||
|
|
.vc-facade-bottom {
|
|||
|
|
padding:6px 12px; border-top:1px solid #f0f0f0; background:#fafafa;
|
|||
|
|
font-size:9px; color:#888; display:flex; align-items:center; gap:4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ─── RESPONSIVE ─── */
|
|||
|
|
@media(max-width:1000px){
|
|||
|
|
.fc-a,.fc-b { display:none; }
|
|||
|
|
.hero-inner { grid-template-columns:1fr; gap:40px; }
|
|||
|
|
.hero h1 { font-size:36px; }
|
|||
|
|
.phone-mockup { bottom:-24px; left:10px; }
|
|||
|
|
}
|
|||
|
|
@media(max-width:768px){
|
|||
|
|
/* Hero — скрываем правую колонку со скриншотом */
|
|||
|
|
.hero-right { display:none; }
|
|||
|
|
.hero-inner { padding:52px 20px 40px; }
|
|||
|
|
.hero h1 { font-size:30px; }
|
|||
|
|
.hero-sub { font-size:15px; max-width:100%; }
|
|||
|
|
.hero-benefits { gap:8px; }
|
|||
|
|
.hero-actions { flex-direction:column; align-items:stretch; }
|
|||
|
|
.btn-hero-primary,.btn-video { width:100%; justify-content:center; }
|
|||
|
|
|
|||
|
|
/* Promo */
|
|||
|
|
.promo-wrap { padding:16px; }
|
|||
|
|
.promo-a-inner,.promo-b-inner,.promo-c-inner {
|
|||
|
|
flex-direction:column; gap:12px; padding:18px 20px; text-align:center;
|
|||
|
|
}
|
|||
|
|
.promo-b-divider { display:none; }
|
|||
|
|
.promo-a-btn,.promo-b-btn,.promo-c-btn { width:100%; border-radius:10px; }
|
|||
|
|
.promo-c-left { flex-direction:column; gap:12px; }
|
|||
|
|
.promo-c-stat { border-right:none; padding-right:0; }
|
|||
|
|
|
|||
|
|
/* Tabs */
|
|||
|
|
.tab-btn { font-size:12px; padding:8px 12px; }
|
|||
|
|
.tab-panel.active { grid-template-columns:1fr; gap:24px; }
|
|||
|
|
.tab-visual { display:none; }
|
|||
|
|
|
|||
|
|
/* Problem */
|
|||
|
|
.ps-grid { grid-template-columns:1fr; }
|
|||
|
|
.ps-arrow { display:none; }
|
|||
|
|
.section-inner { padding:48px 20px; }
|
|||
|
|
|
|||
|
|
/* Video */
|
|||
|
|
.v3-wrap { grid-template-columns:1fr; gap:28px; }
|
|||
|
|
|
|||
|
|
/* Features */
|
|||
|
|
.features-grid { grid-template-columns:1fr; }
|
|||
|
|
|
|||
|
|
/* Results */
|
|||
|
|
.results-grid { grid-template-columns:1fr; gap:24px; }
|
|||
|
|
|
|||
|
|
/* Collages */
|
|||
|
|
.vc-collage { height:260px; }
|
|||
|
|
.pres-collage { height:240px; }
|
|||
|
|
|
|||
|
|
/* Footer */
|
|||
|
|
.footer-inner { flex-direction:column; gap:20px; text-align:center; }
|
|||
|
|
.footer-links { flex-wrap:wrap; justify-content:center; }
|
|||
|
|
|
|||
|
|
/* Phone */
|
|||
|
|
.phone-mockup { display:none; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media(max-width:480px){
|
|||
|
|
.hero h1 { font-size:26px; }
|
|||
|
|
.section-h2 { font-size:22px; }
|
|||
|
|
.tab-btn { font-size:11px; padding:7px 10px; }
|
|||
|
|
.feat-card { padding:20px; }
|
|||
|
|
.v3-title { font-size:20px; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Глобальный сброс ширины для всех секций на мобильном */
|
|||
|
|
@media(max-width:768px){
|
|||
|
|
/* Главный фикс: grid/flex дети должны уметь сжиматься */
|
|||
|
|
.hero-left, .hero-right,
|
|||
|
|
.tab-text, .tab-visual,
|
|||
|
|
.v3-video-col, .v3-text-col,
|
|||
|
|
.ps-card, .feat-card, .res-card,
|
|||
|
|
.promo-a-inner, .promo-b-inner, .promo-c-inner {
|
|||
|
|
min-width: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-wrap: break-word;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Текст не вылезает */
|
|||
|
|
p, h1, h2, h3, span, div {
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Таб-навигация скроллится горизонтально */
|
|||
|
|
.tabs-nav {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
padding-bottom: 4px;
|
|||
|
|
scrollbar-width: none;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
.tabs-nav::-webkit-scrollbar { display: none; }
|
|||
|
|
.tab-btn { flex-shrink: 0; }
|
|||
|
|
|
|||
|
|
/* Коллажи и фреймы */
|
|||
|
|
.vc-collage, .pres-collage { width:100%; overflow:hidden; }
|
|||
|
|
.tab-frame, .tab-ui { width:100%; overflow:hidden; }
|
|||
|
|
|
|||
|
|
/* Промо */
|
|||
|
|
.promo-a, .promo-b, .promo-c { width:100%; box-sizing:border-box; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- ─── ЭКРАН 1: HERO ─── -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="hero-bg-shape"></div>
|
|||
|
|
<div class="hero-bg-shape2"></div>
|
|||
|
|
|
|||
|
|
<div class="hero-inner">
|
|||
|
|
<!-- LEFT -->
|
|||
|
|
<div class="hero-left">
|
|||
|
|
<h1>Кабинет агента<br>для <em>девелопера</em></h1>
|
|||
|
|
|
|||
|
|
<p class="hero-sub">
|
|||
|
|
Подключайте агентства недвижимости к продажам ваших ЖК через единый кабинет. Показывайте объекты, передавайте материалы, принимайте фиксации клиентов и ведите работу по заявкам внутри Joy<span class="jw-g">Work</span>.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div class="hero-actions">
|
|||
|
|
<button class="btn-hero-primary" onclick="toggleSign('<?= $fileName ?>')">Попробовать бесплатно</button>
|
|||
|
|
<button class="btn-video" onclick="scrollToVideo()">
|
|||
|
|
<div class="vplay">
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
|||
|
|
</div>
|
|||
|
|
Смотреть видеообзор
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="hero-benefits">
|
|||
|
|
<div class="hero-benefit">
|
|||
|
|
<div class="hb-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<span>Увеличивайте продажи за счёт агентского канала</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-benefit">
|
|||
|
|
<div class="hb-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<span>Снижайте нагрузку на менеджеров застройщика</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-benefit">
|
|||
|
|
<div class="hb-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<span>Лучшее готовое решение кабинета брокера</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- RIGHT: actual screenshot -->
|
|||
|
|
<div class="hero-right">
|
|||
|
|
<div class="hero-screenshot-wrap">
|
|||
|
|
|
|||
|
|
<div class="float-chip fc-a">
|
|||
|
|
<div class="chip-label">Новых фиксаций</div>
|
|||
|
|
<div class="chip-val">+14 сегодня</div>
|
|||
|
|
<div class="chip-sub"><span class="chip-dot"></span>3 в обработке</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="float-chip fc-b">
|
|||
|
|
<div class="chip-label">Партнёры</div>
|
|||
|
|
<div class="chip-val">38 агентств</div>
|
|||
|
|
<div class="chip-sub">↑ 3 новых за неделю</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="screenshot-frame">
|
|||
|
|
<div class="screenshot-topbar">
|
|||
|
|
<div class="m-dots">
|
|||
|
|
<div class="m-dot" style="background:#ff5f57"></div>
|
|||
|
|
<div class="m-dot" style="background:#ffbd2e"></div>
|
|||
|
|
<div class="m-dot" style="background:#28c840"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="m-url">app.joywork.ru — Кабинет агента</div>
|
|||
|
|
</div>
|
|||
|
|
<img
|
|||
|
|
src="/images/promo/kabinet-dlya-developera-1.png"
|
|||
|
|
alt="Интерфейс кабинета агента JoyWork — витрина ЖК"
|
|||
|
|
class="screenshot-img"
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Phone mockup (iPhone style) -->
|
|||
|
|
<div class="phone-wrap">
|
|||
|
|
<div class="phone-btn-left">
|
|||
|
|
<span style="height:20px"></span>
|
|||
|
|
<span></span>
|
|||
|
|
<span></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="phone-btn-right"></div>
|
|||
|
|
<div class="phone-mockup">
|
|||
|
|
<!-- Status bar -->
|
|||
|
|
<div class="phone-statusbar">
|
|||
|
|
<div class="phone-island"></div>
|
|||
|
|
<span class="phone-statusbar-time">9:41</span>
|
|||
|
|
<div class="phone-statusbar-icons">
|
|||
|
|
<!-- Signal bars -->
|
|||
|
|
<svg width="17" height="12" viewBox="0 0 17 12" fill="none"><rect x="0" y="6" width="3" height="6" rx="1" fill="#000"/><rect x="4.5" y="4" width="3" height="8" rx="1" fill="#000"/><rect x="9" y="1.5" width="3" height="10.5" rx="1" fill="#000"/><rect x="13.5" y="0" width="3.5" height="12" rx="1" fill="#000" opacity=".25"/></svg>
|
|||
|
|
<!-- Battery -->
|
|||
|
|
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="#000" stroke-opacity=".35"/><rect x="22.5" y="3.5" width="2" height="5" rx="1" fill="#000" fill-opacity=".4"/><rect x="2" y="2" width="17" height="8" rx="2" fill="#000"/></svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- App screen with modal overlay -->
|
|||
|
|
<div class="phone-content">
|
|||
|
|
<!-- Background app (peeks above modal) -->
|
|||
|
|
<div class="phone-bg-app">
|
|||
|
|
<div class="phone-bg-navbar">Фиксация клиента</div>
|
|||
|
|
<div class="phone-bg-body">
|
|||
|
|
<div class="phone-bg-label"></div>
|
|||
|
|
<div class="phone-bg-field phone-bg-field--filled">Демидов Иван Петрович</div>
|
|||
|
|
<div class="phone-bg-label" style="width:35%;margin-top:6px"></div>
|
|||
|
|
<div class="phone-bg-field phone-bg-field--filled">+7 921 994-32-12</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Dark overlay -->
|
|||
|
|
<div class="phone-overlay"></div>
|
|||
|
|
<!-- Modal bottom sheet -->
|
|||
|
|
<div class="phone-modal">
|
|||
|
|
<div class="phone-modal-handle"></div>
|
|||
|
|
<div class="phone-success-circle">
|
|||
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="phone-success-title">Клиент зафиксирован!</div>
|
|||
|
|
<div class="phone-success-body">
|
|||
|
|
<strong>до 20 сентября</strong>
|
|||
|
|
</div>
|
|||
|
|
<button class="phone-action-btn">Подробнее</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Home indicator -->
|
|||
|
|
<div class="phone-home">
|
|||
|
|
<div class="phone-home-bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ─── ПРОМО-БАННЕР ─── -->
|
|||
|
|
<div class="promo-wrap">
|
|||
|
|
<div class="promo-b">
|
|||
|
|
<div class="promo-b-inner">
|
|||
|
|
<div class="promo-b-tag">
|
|||
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|||
|
|
Включено в тариф
|
|||
|
|
</div>
|
|||
|
|
<div class="promo-b-divider"></div>
|
|||
|
|
<div class="promo-b-text">
|
|||
|
|
<strong>Кабинет агента в CRM Joy<span class="jw-g">Work</span> входит в основной тариф</strong> и не оплачивается дополнительно. Экономьте до 30% расходов на CRM.
|
|||
|
|
</div>
|
|||
|
|
<button class="promo-b-btn" onclick="toggleSign('<?= $fileName ?>')">Попробовать →</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ─── ЭКРАН 2: ФУНКЦИОНАЛ С ТАБАМИ ─── -->
|
|||
|
|
<section class="tabs-section" id="tabs">
|
|||
|
|
<div class="section-inner">
|
|||
|
|
|
|||
|
|
<div class="reveal" style="text-align:center;max-width:640px;margin:0 auto 40px">
|
|||
|
|
<div class="tag"><span class="tag-dot"></span>Кабинет агента</div>
|
|||
|
|
<h2 class="section-h2">Всё для управления<br><em>агентским каналом</em></h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Tab nav -->
|
|||
|
|
<div class="tabs-nav reveal">
|
|||
|
|
<button class="tab-btn active" onclick="switchTab(this,0)">Витрина ЖК и объектов</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,1)">Презентация</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,2)">Фиксация клиентов</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,3)">Материалы и документы</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,4)">Новости для агентств</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,5)">История работы</button>
|
|||
|
|
<button class="tab-btn" onclick="switchTab(this,6)">Управление сотрудниками партнёра</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 0: Витрина ── -->
|
|||
|
|
<div class="tab-panel active" id="tab-0">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Витрина ЖК и объектов<br>для агентств</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>Открывайте агентствам только нужные ЖК и объекты.</strong> Шахматка, планировки, фасады — всё как в CRM вашего менеджера. Полный контроль над тем, что видит партнёр.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Видит актуальные объекты с ценами и наличием квартир. Может самостоятельно подбирать варианты для клиента без звонков менеджеру.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="vc-collage">
|
|||
|
|
<!-- Фасад — сзади слева -->
|
|||
|
|
<div class="vc-ci vc-ci-fasad">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-5.png" alt="Фасад ЖК">
|
|||
|
|
</div>
|
|||
|
|
<!-- План этажа — снизу справа -->
|
|||
|
|
<div class="vc-ci vc-ci-plan">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-6.png" alt="План этажа">
|
|||
|
|
</div>
|
|||
|
|
<!-- Шахматка — главная, спереди -->
|
|||
|
|
<div class="vc-ci vc-ci-shahmatka">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-7.png" alt="Шахматка квартир">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 1: Презентация ── -->
|
|||
|
|
<div class="tab-panel" id="tab-1">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Формирование презентации<br>для клиента</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<p class="tab-desc">Агент может в 2 клика сформировать презентацию из подходящих объектов и отправить клиенту в любой мессенджер. Презентация будет сформирована под брендом агентства, где работает брокер.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="pres-collage">
|
|||
|
|
<div class="pres-ci pres-ci-1">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-8.png" alt="Презентация — скрин 1">
|
|||
|
|
</div>
|
|||
|
|
<div class="pres-ci pres-ci-2">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-9.png" alt="Презентация — скрин 2">
|
|||
|
|
</div>
|
|||
|
|
<div class="pres-ci pres-ci-3">
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-10.png" alt="Презентация — скрин 3">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 2: Фиксация ── -->
|
|||
|
|
<div class="tab-panel" id="tab-2">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Фиксация клиентов<br>прямо в CRM</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>Настраивайте сроки и правила фиксации под каждый ЖК.</strong> Заявки поступают прямо в CRM без звонков и переписки. Проверка уникальности клиента — автоматически.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Заполняет форму и отправляет клиента на фиксацию за 30 секунд. Никаких звонков и ожидания. Статус фиксации — в личном кабинете.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="tab-frame">
|
|||
|
|
<div class="tab-frame-bar">
|
|||
|
|
<div class="m-dots"><div class="m-dot" style="background:#ff5f57"></div><div class="m-dot" style="background:#ffbd2e"></div><div class="m-dot" style="background:#28c840"></div></div>
|
|||
|
|
<div class="m-url">app.joywork.ru — Фиксация клиента</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-ui">
|
|||
|
|
<div class="tab-ui-header">
|
|||
|
|
<div class="tab-ui-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
|
|||
|
|
<div><div class="tab-ui-title">Новая фиксация клиента</div><div class="tab-ui-sub">ЖК «Северный парк»</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-ui-rows">
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">Смирнов Алексей Владимирович</div><div class="tab-ui-row-meta">+7 921 123-45-67 · зафиксирован до 20 сентября</div></div></div><span class="tab-ui-badge green">Активна</span></div>
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">Петрова Мария Сергеевна</div><div class="tab-ui-row-meta">+7 911 987-65-43 · зафиксирована до 14 октября</div></div></div><span class="tab-ui-badge green">Активна</span></div>
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">Козлов Дмитрий Иванович</div><div class="tab-ui-row-meta">+7 905 321-00-11 · истёк срок</div></div></div><span class="tab-ui-badge gray">Истекла</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 3: Материалы ── -->
|
|||
|
|
<div class="tab-panel" id="tab-3">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Материалы и документы<br>в одном месте</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>Публикуйте рендеры, PDF-презентации, условия вознаграждения и договоры.</strong> Агенты находят нужное сами — не нужно отвечать на одни и те же вопросы.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Скачивает актуальные материалы для презентации клиенту в любой момент — без запросов к менеджеру застройщика.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="tab-frame">
|
|||
|
|
<div class="tab-frame-bar">
|
|||
|
|
<div class="m-dots"><div class="m-dot" style="background:#ff5f57"></div><div class="m-dot" style="background:#ffbd2e"></div><div class="m-dot" style="background:#28c840"></div></div>
|
|||
|
|
<div class="m-url">app.joywork.ru — Материалы и документы</div>
|
|||
|
|
</div>
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-2.png" alt="Материалы и документы" style="width:100%;display:block;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 4: Новости ── -->
|
|||
|
|
<div class="tab-panel" id="tab-4">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Новости и обновления<br>для агентств</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>Публикуйте новости о запусках, акциях и изменениях.</strong> Все подключённые агентства видят ленту прямо в своём кабинете — без рассылок и звонков.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Всегда в курсе актуальных предложений и новостей застройщика прямо в рабочем интерфейсе. Не пропускает акции и спецпредложения.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="tab-frame">
|
|||
|
|
<div class="tab-frame-bar">
|
|||
|
|
<div class="m-dots"><div class="m-dot" style="background:#ff5f57"></div><div class="m-dot" style="background:#ffbd2e"></div><div class="m-dot" style="background:#28c840"></div></div>
|
|||
|
|
<div class="m-url">app.joywork.ru — Новости</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-ui">
|
|||
|
|
<div class="tab-ui-header">
|
|||
|
|
<div class="tab-ui-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
|
|||
|
|
<div><div class="tab-ui-title">Лента новостей</div><div class="tab-ui-sub">3 новых публикации</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-ui-rows">
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">🏗 Старт продаж 4-й очереди</div><div class="tab-ui-row-meta">Сегодня · 48 квартир в продаже</div></div></div><span class="tab-ui-badge green">Новое</span></div>
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">🎁 Акция: +1% к вознаграждению</div><div class="tab-ui-row-meta">До 30 сентября</div></div></div><span class="tab-ui-badge orange">Акция</span></div>
|
|||
|
|
<div class="tab-ui-row"><div class="tab-ui-row-left"><div><div class="tab-ui-row-name">📋 Обновлены условия фиксации</div><div class="tab-ui-row-meta">3 дня назад</div></div></div><span class="tab-ui-badge gray">Инфо</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 5: История работы ── -->
|
|||
|
|
<div class="tab-panel" id="tab-5">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">История работы<br>и заявок</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>По каждой заявке — встроенный чат с агентом.</strong> Вся история переписки и статусов сохраняется в CRM. Менеджер отвечает прямо из системы.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Ведёт переписку по заявке прямо из кабинета. Видит все статусы и историю. Не нужно переключаться между мессенджерами.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="tab-frame">
|
|||
|
|
<div class="tab-frame-bar">
|
|||
|
|
<div class="m-dots"><div class="m-dot" style="background:#ff5f57"></div><div class="m-dot" style="background:#ffbd2e"></div><div class="m-dot" style="background:#28c840"></div></div>
|
|||
|
|
<div class="m-url">app.joywork.ru — История работы</div>
|
|||
|
|
</div>
|
|||
|
|
<img src="images/promo/kabinet-dlya-developera-3.png" alt="История работы" style="width:100%;display:block;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── TAB 6: Управление сотрудниками ── -->
|
|||
|
|
<div class="tab-panel" id="tab-6">
|
|||
|
|
<div class="tab-text">
|
|||
|
|
<h3 class="tab-title">Управление сотрудниками<br>партнёра</h3>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who dev">Застройщик</span>
|
|||
|
|
<p class="tab-desc">
|
|||
|
|
<strong>Добавляйте агентства и настраивайте доступы.</strong> Контролируйте, кто из сотрудников партнёра активен и работает с вашими объектами.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-block">
|
|||
|
|
<span class="tab-who agent">Агент</span>
|
|||
|
|
<p class="tab-desc">Руководитель агентства самостоятельно управляет своей командой — добавляет сотрудников, назначает роли и контролирует активность.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-tab-action" onclick="toggleSign('<?= $fileName ?>')">
|
|||
|
|
Посмотреть сервис
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-visual">
|
|||
|
|
<div class="tab-frame">
|
|||
|
|
<div class="tab-frame-bar">
|
|||
|
|
<div class="m-dots"><div class="m-dot" style="background:#ff5f57"></div><div class="m-dot" style="background:#ffbd2e"></div><div class="m-dot" style="background:#28c840"></div></div>
|
|||
|
|
<div class="m-url">app.joywork.ru — Сотрудники партнёра</div>
|
|||
|
|
</div>
|
|||
|
|
<img src="/images/promo/kabinet-dlya-developera-4.png" alt="Управление сотрудниками партнёра" style="width:100%;display:block;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ─── ВИДЕО ─── -->
|
|||
|
|
<section class="video-section" id="video-section">
|
|||
|
|
<div class="section-inner">
|
|||
|
|
<div class="reveal video-label">
|
|||
|
|
<div class="tag"><span class="tag-dot"></span>Видеообзор</div>
|
|||
|
|
<h2 class="section-h2" style="margin-bottom:10px">Посмотрите, как работает<br><em>кабинет агента</em></h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="v3-wrap reveal">
|
|||
|
|
<div class="v3-video-col">
|
|||
|
|
<div class="v3-embed">
|
|||
|
|
<iframe
|
|||
|
|
src="https://vk.com/video_ext.php?oid=-140502045&id=456239178&hd=2"
|
|||
|
|
allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
|
|||
|
|
allowfullscreen
|
|||
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|||
|
|
></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="v3-text-col">
|
|||
|
|
<div class="v3-sub">Короткий обзор ключевых возможностей. Смотрите, как выглядит кабинет агента изнутри и почему он закрывает все задачи агентского канала.</div>
|
|||
|
|
<div class="v3-points">
|
|||
|
|
<div class="v3-point">
|
|||
|
|
<div class="v3-point-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<div class="v3-point-text"><strong>Витрина и фиксация</strong> — как агент видит объекты и отправляет клиента в CRM за 30 секунд</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="v3-point">
|
|||
|
|
<div class="v3-point-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<div class="v3-point-text"><strong>Презентация клиенту</strong> — генерация лендинга в 2 клика и отправка в мессенджер</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="v3-point">
|
|||
|
|
<div class="v3-point-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<div class="v3-point-text"><strong>Управление агентствами</strong> — подключение партнёров, роли, аналитика</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="v3-point">
|
|||
|
|
<div class="v3-point-icon"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|||
|
|
<div class="v3-point-text"><strong>Настройка за 1 день</strong> — готовое решение без разработки и интеграций</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ─── ЭКРАН 3: ВОЗМОЖНОСТИ ─── -->
|
|||
|
|
<section class="features" id="features">
|
|||
|
|
<div class="section-inner">
|
|||
|
|
<div class="feat-header reveal">
|
|||
|
|
<div class="tag"><span class="tag-dot"></span>Преимущества</div>
|
|||
|
|
<h2 class="section-h2">Управление агентским каналом<br>в Joy<span class="jw-g">Work</span></h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="features-grid">
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal">
|
|||
|
|
<div class="feat-num">01</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Здание / Витрина ЖК -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Витрина ЖК и объектов</h3>
|
|||
|
|
<p>Агентства видят только те жилые комплексы и объекты, которые вы открыли. Шахматка, планировки, фасады — всё как в CRM менеджера.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal reveal-delay1">
|
|||
|
|
<div class="feat-num">02</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Геопин / Фиксация -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Фиксация клиентов</h3>
|
|||
|
|
<p>Партнёр заполняет форму и отправляет клиента на фиксацию за 30 секунд. Заявка мгновенно появляется в вашей CRM без звонков.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal reveal-delay2">
|
|||
|
|
<div class="feat-num">03</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Папка / Материалы -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Материалы и документы</h3>
|
|||
|
|
<p>Рендеры, PDF-презентации, условия вознаграждения, агентский договор — всё в одном месте. Агент сам находит нужный файл.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal">
|
|||
|
|
<div class="feat-num">04</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Новости / Лента -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Новости для агентств</h3>
|
|||
|
|
<p>Публикуйте обновления, запуски новых комплексов и акции. Партнёры видят ленту новостей прямо в своём кабинете.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal reveal-delay1">
|
|||
|
|
<div class="feat-num">05</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Чат / Заявки -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Заявки и история работы</h3>
|
|||
|
|
<p>По каждой заявке — встроенный чат. Агент пишет из кабинета, менеджер отвечает из CRM. Вся история сохраняется.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="feat-card reveal reveal-delay2">
|
|||
|
|
<div class="feat-num">06</div>
|
|||
|
|
<div class="feat-icon">
|
|||
|
|
<!-- Пользователи / Агентства -->
|
|||
|
|
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<h3>Управление агентствами</h3>
|
|||
|
|
<p>Добавляйте организации и сотрудников. Руководитель агентства может сам управлять своей командой — делегируйте.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ─── ЭКРАН 4: РЕЗУЛЬТАТ + CTA ─── -->
|
|||
|
|
<section class="results" id="results">
|
|||
|
|
<div class="section-inner">
|
|||
|
|
<div class="results-grid">
|
|||
|
|
|
|||
|
|
<!-- Left: benefits -->
|
|||
|
|
<div class="reveal">
|
|||
|
|
<div class="tag"><span class="tag-dot"></span>Результат для девелопера</div>
|
|||
|
|
<h2 class="section-h2" style="margin-bottom:32px">Joy<span class="jw-g">Work</span> превращает<br>агентский канал<br>в <em>системный инструмент</em></h2>
|
|||
|
|
|
|||
|
|
<div class="results-list">
|
|||
|
|
<div class="result-item">
|
|||
|
|
<div class="ri-icon">
|
|||
|
|
<!-- Тренд вверх -->
|
|||
|
|
<svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="ri-body">
|
|||
|
|
<strong>Больше охват через агентский канал</strong>
|
|||
|
|
<span>Подключайте неограниченное число агентств и масштабируйте партнёрскую сеть</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="result-item">
|
|||
|
|
<div class="ri-icon">
|
|||
|
|
<!-- Глаз -->
|
|||
|
|
<svg 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>
|
|||
|
|
<div class="ri-body">
|
|||
|
|
<strong>Прозрачная работа с клиентами и заявками</strong>
|
|||
|
|
<span>Видите все фиксации, статусы и историю переписки в одном месте</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="result-item">
|
|||
|
|
<div class="ri-icon">
|
|||
|
|
<!-- Молния -->
|
|||
|
|
<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="ri-body">
|
|||
|
|
<strong>Меньше ручной работы менеджеров</strong>
|
|||
|
|
<span>Агенты находят информацию самостоятельно — не надо отвечать на повторяющиеся вопросы</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="result-item">
|
|||
|
|
<div class="ri-icon">
|
|||
|
|
<!-- Цель -->
|
|||
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="ri-body">
|
|||
|
|
<strong>Единая система вместо чатов и таблиц</strong>
|
|||
|
|
<span>Весь агентский канал — в Joy<span class="jw-g">Work</span>. Удобно девелоперу и партнёрам</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Right: CTA -->
|
|||
|
|
<div class="reveal reveal-delay1">
|
|||
|
|
<div class="cta-box">
|
|||
|
|
<div class="cta-box-bg"></div>
|
|||
|
|
<h3>Запустите продажи через агентства в единой системе</h3>
|
|||
|
|
<p>Подключите первых партнёров уже сегодня. Настройка за 1 день, обучение включено.</p>
|
|||
|
|
<button class="btn-cta-white" onclick="toggleSign('<?= $fileName ?>')">Попробовать бесплатно</button>
|
|||
|
|
<button class="btn-cta-outline" onclick="scrollToVideo()">Смотреть видеообзор</button>
|
|||
|
|
<div class="cta-note">Без обязательств · Бесплатная настройка «под ключ»</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Scroll reveal
|
|||
|
|
const observer = new IntersectionObserver(
|
|||
|
|
entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
|
|||
|
|
{ threshold: 0.12 }
|
|||
|
|
);
|
|||
|
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|||
|
|
|
|||
|
|
// Scroll to video
|
|||
|
|
function scrollToVideo() {
|
|||
|
|
document.getElementById('video-section').scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Tab switching
|
|||
|
|
function switchTab(btn, index) {
|
|||
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|||
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
document.getElementById('tab-' + index).classList.add('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<?php
|
|||
|
|
require_once($_SERVER['DOCUMENT_ROOT'] . "/promo/templates/footer.php");
|
|||
|
|
?>
|