gendesign/preview/landing.html
lekss361 f1bc821c2b feat(preview): add static mockups behind basic auth at /preview/*
4 HTML mockups (landing/site-finder/analytics/monitoring) — alternative
designs для audit-review без замены существующих React-страниц.

- Caddy file_server на handle_path /preview/* (внутри gendsgn.ru block)
- Bind mount ./preview:/srv/preview:ro в caddy container
- basic auth: user=preview / pwd shared via private channel
- Static, isolated — не влияет на /, /site-finder, /analytics (Next.js routes)
2026-05-17 11:15:13 +03:00

646 lines
41 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>gendsgn — аналитика спроса для девелоперов</title>
<meta name="description" content="Что строят на рынке и что на самом деле продаётся. Региональная аналитика спроса на основе 6,83 млн ДДУ Росреестра, портфеля ДОМ.РФ и Яндекс.Недвижимости." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
/* Surface */
--bg-app: #F6F7F9;
--bg-card: #FFFFFF;
--bg-card-alt: #FAFBFC;
--bg-headline: #0F172A;
/* Borders */
--border-soft: #EEF0F3;
--border-card: #E6E8EC;
--border-strong: #D1D5DB;
/* Text */
--fg-primary: #111111;
--fg-secondary: #5B6066;
--fg-tertiary: #73767E;
--fg-on-dark: #E2E8F0;
--fg-on-dark-muted: #94A3B8;
/* Brand / CTA */
--accent: #1D4ED8;
--accent-hover: #1E40AF;
--accent-soft: #DBEAFE;
--accent-2: #F2994A;
/* Semantic */
--success: #0A7A3A;
--success-soft: #DCFCE7;
--warn: #9A6700;
--warn-soft: #FEF3C7;
--danger: #B3261E;
--danger-soft: #FEE2E2;
/* Data-viz */
--viz-1: #1D4ED8;
--viz-2: #0EA5E9;
--viz-3: #14B8A6;
--viz-4: #F59E0B;
--viz-5: #8B5CF6;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-app); scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--fg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* ============ DEV NAV (временный, hide on print) ============ */
.dev-nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; gap: 18px;
height: 38px; padding: 0 18px;
background: #0b0f1a; color: rgba(255,255,255,0.92);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px; letter-spacing: 0.04em;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dev-nav .dev-label {
display: inline-flex; align-items: center; gap: 8px;
color: #fbbf24; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
.dev-nav .dev-label::before { content:''; width:6px; height:6px; border-radius:50%; background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,0.22); }
.dev-nav .dev-tabs { display: inline-flex; gap: 2px; align-items: center; }
.dev-nav .dev-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.16); margin: 0 6px; }
.dev-nav .dev-tabs a {
padding: 5px 11px; border-radius: 5px;
color: rgba(255,255,255,0.62); text-decoration: none;
transition: background .12s, color .12s;
}
.dev-nav .dev-tabs a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.dev-nav .dev-tabs a[aria-current="page"] { color: #0b0f1a; background: #fbbf24; font-weight: 600; }
.dev-nav .dev-hint { margin-left: auto; color: rgba(255,255,255,0.36); white-space: nowrap; }
@media print { .dev-nav { display: none !important; } }
@media (max-width: 720px) { .dev-nav .dev-hint { display: none; } .dev-nav { gap: 12px; padding: 0 12px; } }
/* ============ TOP NAV ============ */
header.nav {
position: sticky; top: 38px; z-index: 30;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--border-card);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--fg-primary); letter-spacing: -0.01em; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.brand-mark::before { content: 'gd'; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { font-size: 13.5px; color: var(--fg-secondary); font-weight: 500; }
.nav-links a:hover { color: var(--fg-primary); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; font-weight: 500; font-size: 13.5px; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.btn-secondary:hover { filter: brightness(0.94); }
.btn-tertiary { background: transparent; color: var(--fg-primary); border-color: var(--border-card); }
.btn-tertiary:hover { border-color: var(--fg-primary); }
.btn-link { background: transparent; color: var(--accent); padding: 0; height: auto; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14px; }
/* ============ HERO ============ */
.hero { padding: 56px 0 24px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
.hero h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--fg-primary); max-width: 620px; text-wrap: balance; }
.hero .deck { font-size: 16px; line-height: 1.55; color: var(--fg-secondary); margin-top: 16px; max-width: 580px; }
.hero .cta { margin-top: 24px; display: flex; gap: 12px; align-items: center; }
.hero .cta .note { color: var(--fg-tertiary); font-size: 12.5px; margin-left: 4px; }
/* hero stat panel — right side */
.hero-stats { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 20px; }
.hero-stats h3 { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-secondary); font-weight: 500; margin-bottom: 12px; }
.hero-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.hero-stat:first-of-type { border-top: 0; padding-top: 0; }
.hero-stat:last-child { padding-bottom: 0; }
.hero-stat .label { font-size: 12.5px; color: var(--fg-secondary); }
.hero-stat .value { font-size: 18px; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.01em; }
/* ============ HEADLINE BAR ============ */
.headline-bar {
background: var(--bg-headline); color: var(--fg-on-dark);
border-radius: 12px; padding: 16px 20px;
display: flex; align-items: center; gap: 16px;
margin-top: 24px;
}
.headline-bar .tag { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.headline-bar .verdict { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--fg-on-dark); }
.headline-bar .verdict b { color: #fff; font-weight: 600; }
.headline-bar .caveat { margin-left: auto; font-size: 11.5px; color: var(--fg-on-dark-muted); white-space: nowrap; }
/* ============ SECTIONS ============ */
.section { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 20px; margin-top: 24px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head .titles h2 { font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-primary); }
.section-head .titles .sub { font-size: 12.5px; color: var(--fg-secondary); margin-top: 4px; }
.section-head .right { display: flex; gap: 8px; align-items: center; }
.btn-compact { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 6px; }
/* ============ KPI ROW ============ */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.kpi { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 16px 18px; }
.kpi .label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-secondary); font-weight: 500; }
.kpi .value { font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.015em; margin-top: 8px; }
.kpi .hint { font-size: 12.5px; color: var(--fg-secondary); margin-top: 6px; }
.kpi .delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 8px; padding: 2px 8px; border-radius: 4px; }
.kpi .delta.pos { color: var(--success); background: var(--success-soft); }
.kpi .delta.neg { color: var(--danger); background: var(--danger-soft); }
/* ============ PARADOX SECTION ============ */
.paradox { margin-top: 32px; }
.paradox-chart { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: stretch; }
.paradox-legend { padding-right: 16px; border-right: 1px solid var(--border-soft); }
.paradox-legend h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-secondary); font-weight: 500; margin-bottom: 12px; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; }
.legend-row .sw { width: 12px; height: 12px; border-radius: 3px; }
.legend-row .label { color: var(--fg-primary); font-weight: 500; }
.legend-row .meta { color: var(--fg-secondary); margin-left: auto; font-size: 12px; }
.paradox-rows { display: flex; flex-direction: column; gap: 8px; }
.paradox-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 16px; padding: 8px 0; }
.paradox-row .seg { font-size: 13px; font-weight: 500; color: var(--fg-primary); }
.paradox-row .bars { display: flex; flex-direction: column; gap: 4px; }
.bar { height: 14px; border-radius: 4px; position: relative; }
.bar .v { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.bar.supply { background: var(--fg-tertiary); }
.bar.demand { background: var(--accent); }
.paradox-row .delta-chip { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.delta-chip.pos { color: var(--success); background: var(--success-soft); }
.delta-chip.neg { color: var(--danger); background: var(--danger-soft); }
/* ============ MODULES ============ */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.module { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.module-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.module-head h3 { font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.module-head .badge { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: 4px; color: var(--accent); background: var(--accent-soft); }
.module p { font-size: 13.5px; color: var(--fg-secondary); line-height: 1.5; margin-bottom: 16px; }
.module .preview { background: var(--bg-card-alt); border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.module .cta-row { display: flex; gap: 12px; align-items: center; margin-top: auto; }
/* mini preview shapes per module */
.preview-table { display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.preview-table .row { display: grid; grid-template-columns: 1fr 56px 32px; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--border-soft); }
.preview-table .row:first-child { border-top: 0; color: var(--fg-secondary); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.preview-table .row .num { text-align: right; color: var(--fg-primary); font-weight: 600; }
.preview-table .row .num.pos { color: var(--success); }
.preview-table .row .num.neg { color: var(--danger); }
.preview-table .row .pill { font-size: 9.5px; padding: 2px 6px; border-radius: 4px; text-align: center; font-weight: 600; }
.preview-table .row .pill.hot { color: var(--danger); background: var(--danger-soft); }
.preview-table .row .pill.warm { color: var(--warn); background: var(--warn-soft); }
.preview-table .row .pill.cool { color: var(--success); background: var(--success-soft); }
.preview-map { position: relative; height: 132px; background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%); border-radius: 6px; overflow: hidden; }
.preview-map svg { width: 100%; height: 100%; display: block; }
.preview-feed { display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; }
.preview-feed .row { display: grid; grid-template-columns: 14px 1fr 60px; gap: 8px; align-items: center; }
.preview-feed .row .dot { width: 8px; height: 8px; border-radius: 50%; }
.preview-feed .row .dot.b { background: var(--accent); }
.preview-feed .row .dot.s { background: var(--success); }
.preview-feed .row .dot.w { background: var(--warn); }
.preview-feed .row .dot.d { background: var(--danger); }
.preview-feed .row .who { color: var(--fg-primary); font-weight: 500; }
.preview-feed .row .meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--fg-tertiary); text-align: right; }
/* ============ PRICING ============ */
.pricing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
.price-card { background: var(--bg-card); border: 1px solid var(--accent); border-radius: 12px; padding: 24px; position: relative; }
.price-card.alt { border-color: var(--border-card); }
.price-card .tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 10px; border-radius: 4px; margin-bottom: 12px; }
.price-card.alt .tag { background: var(--bg-card-alt); color: var(--fg-secondary); border: 1px solid var(--border-card); }
.price-card h3 { font-size: 20px; font-weight: 600; color: var(--fg-primary); margin-bottom: 4px; letter-spacing: -0.01em; }
.price-card .sub { font-size: 13px; color: var(--fg-secondary); }
.price-card .num { display: flex; align-items: baseline; gap: 6px; margin: 16px 0; }
.price-card .num b { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-primary); }
.price-card .num span { color: var(--fg-secondary); font-size: 14px; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 24px; }
.price-card li { font-size: 13px; color: var(--fg-primary); padding: 8px 0; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; }
.price-card li:first-child { border-top: 0; }
.price-card li::before { content: ''; width: 14px; height: 14px; border-radius: 4px; background: var(--accent-soft); flex-shrink: 0; }
.price-card.alt li::before { background: var(--bg-card-alt); border: 1px solid var(--border-card); }
.price-card .meta { font-size: 12px; color: var(--fg-secondary); padding-top: 16px; border-top: 1px solid var(--border-soft); }
/* ============ FAQ ============ */
.faq { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.faq h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.faq .sub { font-size: 13px; color: var(--fg-secondary); margin-top: 8px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border-card); padding: 16px 0; cursor: pointer; }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item summary { font-size: 15px; font-weight: 500; color: var(--fg-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--fg-secondary); font-size: 20px; font-weight: 400; transition: transform .12s; }
.faq-item[open] summary::after { content: ''; }
.faq-item .a { font-size: 14px; color: var(--fg-secondary); margin-top: 12px; line-height: 1.55; max-width: 720px; }
/* ============ FOOTER ============ */
footer.site { border-top: 1px solid var(--border-card); padding: 32px 0 48px; margin-top: 48px; background: var(--bg-app); }
footer .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
footer .col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-secondary); margin-bottom: 8px; font-weight: 500; }
footer .col a { display: block; font-size: 13px; color: var(--fg-primary); padding: 4px 0; }
footer .col a:hover { color: var(--accent); }
footer .legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--fg-secondary); display: flex; justify-content: space-between; }
/* ============ SECTION-TITLES ABOVE ============ */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 48px 0 16px; padding-top: 16px; border-top: 1px solid var(--border-card); }
.section-title h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.section-title .sub { font-size: 13px; color: var(--fg-secondary); }
/* ============ utility ============ */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; gap: 24px; }
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.modules { grid-template-columns: 1fr; }
.pricing { grid-template-columns: 1fr; }
.faq { grid-template-columns: 1fr; }
.paradox-chart { grid-template-columns: 1fr; }
.paradox-legend { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
}
</style>
</head>
<body>
<aside class="dev-nav" aria-label="Dev navigation">
<span class="dev-label">DEV · ТОЛЬКО ДЛЯ РАЗРАБОТКИ</span>
<nav class="dev-tabs" aria-label="WIP страницы">
<a href="landing.html" aria-current="page">лендинг</a>
<a href="analytics.html">/analytics</a>
<a href="site-finder.html">/recommend</a>
<a href="monitoring.html">/developers</a>
<span class="dev-sep"></span>
<a href="audit.html">audit&nbsp;(live)</a>
<a href="gendsgn-audit.html">audit&nbsp;(отчёт)</a>
</nav>
<span class="dev-hint">временная панель · скроется в print</span>
</aside>
<header class="nav">
<div class="wrap nav-inner">
<a href="#" class="brand"><span class="brand-mark"></span><span>gendsgn</span></a>
<nav class="nav-links" aria-label="Основная навигация">
<a href="#product">Продукт</a>
<a href="#paradox">Аналитика спроса</a>
<a href="#pricing">Пилот</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav-cta">
<a href="analytics.html" class="btn btn-tertiary">Demo аналитики →</a>
<a href="#pricing" class="btn btn-primary">Запросить пилот</a>
</div>
</div>
</header>
<main class="wrap">
<!-- ============ HERO ============ -->
<section class="hero">
<div class="hero-grid">
<div>
<h1>Цифры рынка перед тем, как заливать фундамент.</h1>
<p class="deck">Что строят на рынке и что на самом деле продаётся — по 6,83 млн ДДУ Росреестра, портфелю ДОМ.РФ и активным новостройкам Яндекс.Недвижимости. Свердловская область, обновление еженедельно.</p>
<div class="cta">
<a href="#pricing" class="btn btn-primary btn-lg">Запросить пилот</a>
<a href="analytics.html" class="btn btn-link">Открыть demo аналитики →</a>
</div>
<p class="cta" style="margin-top:16px;color:var(--fg-tertiary);font-size:12.5px;">3 из 3 пилотных мест открыто · старт пилота — 2 недели · фикс-цена 30 000 ₽/мес</p>
</div>
<aside class="hero-stats" aria-label="Покрытие данных">
<h3>Покрытие данных</h3>
<div class="hero-stat"><span class="label">ДДУ в индексе (Росреестр)</span><span class="value">6 832 411</span></div>
<div class="hero-stat"><span class="label">Объекты ДОМ.РФ в Свердловской</span><span class="value">1 482</span></div>
<div class="hero-stat"><span class="label">Девелоперы в leaderboard</span><span class="value">87</span></div>
<div class="hero-stat"><span class="label">Глубина истории</span><span class="value">14 мес</span></div>
<div class="hero-stat"><span class="label">Обновление</span><span class="value">7 дней</span></div>
</aside>
</div>
</section>
<!-- ============ HEADLINE BAR ============ -->
<div class="headline-bar" role="status">
<span class="tag">Вердикт квартала</span>
<p class="verdict">Дефицит средне-большого жилья 80+ м²: <b>37%</b> сделок Росреестра, но <b>11%</b> портфеля ДОМ.РФ. Окно сужается к <b>Q3 2026</b>.</p>
<span class="caveat">данные: ДОМ.РФ · Росреестр · март 2026</span>
</div>
<!-- ============ KPI ROW ============ -->
<div class="kpi-row">
<div class="kpi">
<div class="label">Объём строительства</div>
<div class="value">5,8 млн м²</div>
<div class="hint">Свердловская обл., активная фаза</div>
<span class="delta pos">↑ 4,1% YoY</span>
</div>
<div class="kpi">
<div class="label">Sold % (медиана)</div>
<div class="value">61,4 %</div>
<div class="hint">по объектам в продаже &gt; 6 мес</div>
<span class="delta neg">↓ 3,2 пп QoQ</span>
</div>
<div class="kpi">
<div class="label">Средняя цена</div>
<div class="value">186 тыс ₽</div>
<div class="hint">за м², первичка, март 2026</div>
<span class="delta pos">↑ 1,8% MoM</span>
</div>
<div class="kpi">
<div class="label">Активных новостроек</div>
<div class="value">347</div>
<div class="hint">в Яндекс.Недв · в открытой продаже</div>
<span class="delta pos">+12 за месяц</span>
</div>
</div>
<!-- ============ PARADOX SECTION ============ -->
<div class="section-title" id="paradox">
<div>
<h2>Парадокс портфеля: что строят vs что продаётся</h2>
<div class="sub">Доля каждого сегмента в активном портфеле ДОМ.РФ против доли в сделках Росреестра за 14 месяцев</div>
</div>
<a href="analytics.html" class="btn btn-link">Открыть в /analytics →</a>
</div>
<section class="section paradox">
<div class="paradox-chart">
<aside class="paradox-legend">
<h3>Условные обозначения</h3>
<div class="legend-row"><span class="sw" style="background:var(--fg-tertiary)"></span><span class="label">Портфель ДОМ.РФ</span><span class="meta">что строят</span></div>
<div class="legend-row"><span class="sw" style="background:var(--accent)"></span><span class="label">Сделки Росреестра</span><span class="meta">что покупают</span></div>
<div style="font-size:11.5px;color:var(--fg-secondary);margin-top:16px;line-height:1.5;">
Δ пп — разница между долей в сделках и долей в портфеле. Положительная — дефицит предложения, отрицательная — затоваривание.
</div>
</aside>
<div class="paradox-rows" role="table">
<div class="paradox-row">
<div class="seg">Студии до 30 м²</div>
<div class="bars">
<div class="bar supply" style="width:24%"><span class="v">24%</span></div>
<div class="bar demand" style="width:9%"><span class="v">9%</span></div>
</div>
<div class="delta-chip neg">15 пп</div>
</div>
<div class="paradox-row">
<div class="seg">1-комн. 3045 м²</div>
<div class="bars">
<div class="bar supply" style="width:31%"><span class="v">31%</span></div>
<div class="bar demand" style="width:24%"><span class="v">24%</span></div>
</div>
<div class="delta-chip neg">7 пп</div>
</div>
<div class="paradox-row">
<div class="seg">2-комн. 4565 м²</div>
<div class="bars">
<div class="bar supply" style="width:22%"><span class="v">22%</span></div>
<div class="bar demand" style="width:23%"><span class="v">23%</span></div>
</div>
<div class="delta-chip pos">+1 пп</div>
</div>
<div class="paradox-row">
<div class="seg">3-комн. 6585 м²</div>
<div class="bars">
<div class="bar supply" style="width:13%"><span class="v">13%</span></div>
<div class="bar demand" style="width:24%"><span class="v">24%</span></div>
</div>
<div class="delta-chip pos">+11 пп</div>
</div>
<div class="paradox-row">
<div class="seg">4+ комн. / 85+ м²</div>
<div class="bars">
<div class="bar supply" style="width:11%"><span class="v">11%</span></div>
<div class="bar demand" style="width:20%"><span class="v">20%</span></div>
</div>
<div class="delta-chip pos">+9 пп</div>
</div>
</div>
</div>
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--fg-secondary);">
Иллюстративные данные пилотной выборки. В продуктовой версии — разрез по 17 районам области, классу жилья и году ввода. Источник: ДОМ.РФ (портфель в активной фазе строительства), Росреестр (сделки ДДУ за 14 мес).
</div>
</section>
<!-- ============ MODULES ============ -->
<div class="section-title" id="product">
<div>
<h2>Три рабочих модуля</h2>
<div class="sub">Не «features», а конкретные вопросы, на которые финдиректор девелопера ищет ответ</div>
</div>
</div>
<div class="modules">
<article class="module">
<div class="module-head">
<h3>Аналитика спроса</h3>
<span class="badge">/analytics</span>
</div>
<p>«В каких районах и сегментах сделки опережают предложение?» Разбивка sold % по комнатности, классу, году ввода. Бенчмарк против топ-15 девелоперов области.</p>
<div class="preview">
<div class="preview-table" aria-hidden="true">
<div class="row"><span>район / сегмент</span><span class="num">Δ пп</span><span class="pill">статус</span></div>
<div class="row"><span>Академический · 3к</span><span class="num pos">+14</span><span class="pill hot">дефицит</span></div>
<div class="row"><span>ВИЗ · студии</span><span class="num neg">12</span><span class="pill cool">избыток</span></div>
<div class="row"><span>Уралмаш · 2к</span><span class="num pos">+3</span><span class="pill warm">баланс</span></div>
</div>
</div>
<div class="cta-row">
<a href="analytics.html" class="btn btn-tertiary btn-compact">Открыть demo</a>
<a href="#pricing" class="btn btn-link">в пилот →</a>
</div>
</article>
<article class="module">
<div class="module-head">
<h3>Рекомендатор площадки</h3>
<span class="badge">/recommend</span>
</div>
<p>«Какую квартирографию закладывать на участке в Академическом, чтобы выйти за 22 месяца?» Mix по комнатности, прогноз срока 80 % продаж, расчёт выручки.</p>
<div class="preview">
<div class="preview-map" aria-hidden="true">
<svg viewBox="0 0 320 132" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="lg1" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#cfd6e0"/><stop offset="1" stop-color="#dde3eb"/></linearGradient>
</defs>
<rect width="320" height="132" fill="url(#lg1)"/>
<path d="M0,80 Q80,60 160,90 T320,70" stroke="#0EA5E9" stroke-width="2" fill="none" stroke-dasharray="0"/>
<path d="M0,40 Q120,30 200,50 T320,40" stroke="#1D4ED8" stroke-width="2.5" fill="none"/>
<circle cx="60" cy="50" r="4" fill="#0A7A3A"/>
<circle cx="120" cy="48" r="4" fill="#0A7A3A"/>
<circle cx="180" cy="60" r="4" fill="#F2994A"/>
<circle cx="220" cy="62" r="4" fill="#F2994A"/>
<circle cx="260" cy="58" r="4" fill="#B3261E"/>
<text x="6" y="14" font-family="ui-monospace,Menlo" font-size="8" fill="#5B6066">srok %</text>
</svg>
</div>
</div>
<div class="cta-row">
<a href="site-finder.html" class="btn btn-tertiary btn-compact">Открыть demo</a>
<a href="#pricing" class="btn btn-link">в пилот →</a>
</div>
</article>
<article class="module">
<div class="module-head">
<h3>Топ-15 девелоперов</h3>
<span class="badge">/developers</span>
</div>
<p>«Кто продаёт быстрее в моём районе и за счёт чего?» Velocity-карта по площади и Δ sold %, фильтр по классу. Drill-down до объекта.</p>
<div class="preview">
<div class="preview-feed" aria-hidden="true">
<div class="row"><span class="dot s"></span><span class="who">PRINZIP</span><span class="meta">sold 74 %</span></div>
<div class="row"><span class="dot b"></span><span class="who">Брусника</span><span class="meta">sold 68 %</span></div>
<div class="row"><span class="dot w"></span><span class="who">Атомстройком.</span><span class="meta">sold 52 %</span></div>
<div class="row"><span class="dot d"></span><span class="who">КОРТРОС</span><span class="meta">sold 41 %</span></div>
</div>
</div>
<div class="cta-row">
<a href="monitoring.html" class="btn btn-tertiary btn-compact">Открыть demo</a>
<a href="#pricing" class="btn btn-link">в пилот →</a>
</div>
</article>
</div>
<!-- ============ PRICING ============ -->
<div class="section-title" id="pricing">
<div>
<h2>Пилот — 30 000 ₽ в месяц</h2>
<div class="sub">Один тариф, без апсейлов. 3 из 3 пилотных мест открыто, ввод данных за 2 недели.</div>
</div>
</div>
<div class="pricing">
<div class="price-card">
<span class="tag">Пилот · 6 месяцев</span>
<h3>gendsgn для одного девелопера</h3>
<p class="sub">Полный доступ к трём модулям. Свердловская область как первый регион, остальные — по запросу.</p>
<div class="num"><b>30 000 ₽</b><span>/ мес · фикс</span></div>
<ul>
<li>Аналитика спроса по 17 районам области</li>
<li>Рекомендатор площадки с прогнозом срока продаж</li>
<li>Бенчмарк против топ-15 девелоперов</li>
<li>Еженедельный апдейт данных Росреестра</li>
<li>Экспорт в Excel и CSV для финмодели</li>
<li>Запрос новых разрезов от пилотного клиента — приоритет</li>
</ul>
<a href="#" class="btn btn-primary btn-lg" style="width:100%;justify-content:center;">Запросить пилот</a>
<div class="meta" style="margin-top:16px;">Контакт менеджера — Алексей Демидов · al@gendsgn.ru</div>
</div>
<div class="price-card alt">
<span class="tag">После пилота</span>
<h3>Региональная лицензия</h3>
<p class="sub">Когда пилот закроется и продукт перейдёт к платным клиентам.</p>
<div class="num"><b>от 120 000 ₽</b><span>/ мес · region-pack</span></div>
<ul>
<li>Подключение дополнительных регионов</li>
<li>API для отдела финансового планирования</li>
<li>Бенчмарк против выбранных конкурентов</li>
<li>Кастомные разрезы и custom alerting</li>
</ul>
<a href="#" class="btn btn-tertiary btn-lg" style="width:100%;justify-content:center;">Запросить расчёт</a>
<div class="meta" style="margin-top:16px;">Расчёт индивидуально, после квалификации пилота</div>
</div>
</div>
<div style="margin-top:24px;padding:16px;background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px;font-size:13px;color:var(--fg-primary);">
<b style="color:var(--warn);">Честный дисклеймер:</b> мы pre-revenue. Сайт показывает реальный продукт в работе на ваших данных. До первой ARR-метрики команда живёт за счёт основателей, и пилотных клиентов мы выбираем сами, а не наоборот.
</div>
<!-- ============ FAQ ============ -->
<div class="section-title" id="faq">
<div>
<h2>Частые возражения</h2>
<div class="sub">Что обычно спрашивают финдиректора прежде, чем согласиться на пилот</div>
</div>
</div>
<div class="faq">
<div>
<p style="font-size:13px;color:var(--fg-secondary);">Если ваше возражение не разобрано — напишите на <a href="mailto:al@gendsgn.ru" style="color:var(--accent)">al@gendsgn.ru</a>, ответим за 1 рабочий день.</p>
</div>
<div class="faq-list">
<details class="faq-item">
<summary>Чем вы отличаетесь от собственной BI-команды?</summary>
<div class="a">Мы не делаем дашборд под отдел — мы продаём готовый рыночный разрез по 6,83 млн ДДУ и портфелю ДОМ.РФ, который ваша BI собирала бы сама 46 месяцев. Внутренняя команда нужна, чтобы интерпретировать наши цифры в контексте конкретного проекта.</div>
</details>
<details class="faq-item">
<summary>Откуда у вас данные Росреестра и ДОМ.РФ?</summary>
<div class="a">ДОМ.РФ — открытый портфель новостроек. Росреестр — публичные ДДУ через выписки ЕГРН и партнёрские интеграции (без серых источников). Яндекс.Недвижимость — публичный листинг активных объектов в продаже.</div>
</details>
<details class="faq-item">
<summary>Что входит в «обновление 7 дней»?</summary>
<div class="a">Раз в неделю — пересчёт sold %, добавление новых ДДУ, обновление цен по активным объектам. Раз в месяц — пересмотр квартирографии и портфеля ДОМ.РФ. Любое окно &lt; 7 дней — кешируем предыдущий снимок и помечаем «stale».</div>
</details>
<details class="faq-item">
<summary>Почему только Свердловская область?</summary>
<div class="a">Мы pre-revenue и заточили пайплайн под один регион, чтобы доказать ROI за 6 месяцев пилота. Добавление второго региона — около 6 недель работы на наш бэк. Если в пилот зайдёт девелопер другой области — мы её добавим в очередь.</div>
</details>
<details class="faq-item">
<summary>Можно ли использовать данные в внутреннем финмоделировании?</summary>
<div class="a">Да. Все ключевые разрезы экспортируются в Excel и CSV (sold %, цены, mix). Лицензия пилота позволяет использовать выгрузки во внутреннем финмодуле без отдельного согласования.</div>
</details>
<details class="faq-item">
<summary>Что будет после 6 месяцев пилота?</summary>
<div class="a">Совместный отчёт по конкретным cases (где наши рекомендации совпали со сделкой, где разошлись), и переход на регулярную лицензию либо корректное расставание. Никаких автоматических продлений с отдельным счётом.</div>
</details>
</div>
</div>
</main>
<footer class="site">
<div class="wrap">
<div class="row">
<div class="col" style="max-width:280px;">
<div class="brand" style="margin-bottom:12px;"><span class="brand-mark"></span><span>gendsgn</span></div>
<p style="font-size:13px;color:var(--fg-secondary);line-height:1.55;">Рыночная аналитика для застройщиков. Свердловская область, далее — по запросу пилотных клиентов.</p>
</div>
<div class="col">
<h4>Продукт</h4>
<a href="analytics.html">Аналитика спроса</a>
<a href="site-finder.html">Рекомендатор площадки</a>
<a href="monitoring.html">Топ-15 девелоперов</a>
</div>
<div class="col">
<h4>Команда</h4>
<a href="#">О нас</a>
<a href="#">Методология</a>
<a href="#">Источники данных</a>
</div>
<div class="col">
<h4>Контакты</h4>
<a href="mailto:al@gendsgn.ru">al@gendsgn.ru</a>
<a href="https://t.me/gendsgn">Telegram</a>
<a href="#">+7 343 000 00 00</a>
</div>
</div>
<div class="legal">
<span>© 2026 gendsgn · Екатеринбург, Свердловская область</span>
<span>Данные: ДОМ.РФ, Росреестр, Яндекс.Недвижимость · обновление еженедельно</span>
</div>
</div>
</footer>
</body>
</html>