314 lines
26 KiB
HTML
314 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body { margin: 0; }
|
||
::selection { background: #7E3B2D; color: #F3ECDD; }
|
||
</style>
|
||
</helmet>
|
||
|
||
<div style="background:#F3ECDD; color:#231B12; font-family:'Spectral',Georgia,serif; min-height:100%; overflow-x:hidden; position:relative;">
|
||
|
||
<!-- ============ NAV ============ -->
|
||
<header style="position:sticky; top:0; z-index:50; background:rgba(243,236,221,0.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(35,27,18,0.12);">
|
||
<div style="max-width:1240px; margin:0 auto; padding:0 40px; height:78px; display:flex; align-items:center; justify-content:space-between;">
|
||
<a href="#top" style="display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit;">
|
||
<span style="font-family:'Playfair Display',serif; font-size:26px; letter-spacing:0.02em;">Heritage</span>
|
||
<span style="width:6px; height:6px; border-radius:50%; background:#7E3B2D; display:inline-block; transform:translateY(-3px);"></span>
|
||
</a>
|
||
<nav style="display:flex; align-items:center; gap:38px;">
|
||
<a href="#about" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">О проекте</a>
|
||
<a href="#how" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Как это работает</a>
|
||
<a href="#book" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Книга</a>
|
||
<a href="#pricing" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#5C5142; text-decoration:none; transition:color .3s ease;" onMouseOver="{{ navHover }}" onMouseOut="{{ navOut }}">Тарифы</a>
|
||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:#F3ECDD; background:#231B12; padding:12px 22px; border-radius:2px; text-decoration:none; transition:background .3s ease;" onMouseOver="{{ ctaHover }}" onMouseOut="{{ ctaOut }}">Начать</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section id="top" style="max-width:1240px; margin:0 auto; padding:84px 40px 96px; display:grid; grid-template-columns:1.04fr 0.96fr; gap:72px; align-items:center;">
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:30px;">
|
||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D;">Семейное наследие · с 2025</span>
|
||
</div>
|
||
<h1 style="font-family:'Playfair Display',serif; font-weight:400; font-size:74px; line-height:1.02; letter-spacing:-0.01em; margin:0 0 28px;">
|
||
История вашей<br>семьи, сохранённая<br><span style="font-style:italic; color:#7E3B2D;">на поколения</span>
|
||
</h1>
|
||
<p style="font-size:21px; line-height:1.55; color:#564B3C; max-width:480px; margin:0 0 40px; font-weight:300;">
|
||
Мы записываем голоса, собираем фотографии и письма, бережно восстанавливаем родословную — и превращаем всё это в книгу и частный архив, который останется детям и внукам.
|
||
</p>
|
||
<div style="display:flex; align-items:center; gap:24px;">
|
||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#F3ECDD; background:#7E3B2D; padding:17px 34px; border-radius:2px; text-decoration:none; transition:transform .3s ease, background .3s ease; display:inline-block;" onMouseOver="{{ primHover }}" onMouseOut="{{ primOut }}">Создать наследие</a>
|
||
<a href="#how" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#231B12; text-decoration:none; border-bottom:1px solid rgba(35,27,18,0.4); padding-bottom:3px;">Как это устроено →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:relative;">
|
||
<div style="position:absolute; inset:-14px -14px 24px 24px; border:1px solid rgba(169,133,76,0.55); border-radius:2px; z-index:0;"></div>
|
||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="hero-portrait" shape="rounded" radius="2" placeholder="Перетащите семейное фото" style="display:block; position:relative; z-index:1; width:100%; height:560px; box-shadow:0 30px 70px -30px rgba(35,27,18,0.5);" hint-size="100%,560px"></x-import>
|
||
<div style="position:absolute; z-index:2; left:-30px; bottom:36px; background:#F3ECDD; border:1px solid rgba(35,27,18,0.14); padding:18px 22px; max-width:208px; box-shadow:0 18px 40px -20px rgba(35,27,18,0.45);">
|
||
<div style="font-family:'Playfair Display',serif; font-size:34px; line-height:1; color:#7E3B2D;">3 462</div>
|
||
<div style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#6B5E4C; margin-top:7px;">сохранённых истории</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ VALUES STRIP ============ -->
|
||
<div style="border-top:1px solid rgba(35,27,18,0.12); border-bottom:1px solid rgba(35,27,18,0.12); background:#EFE6D2;">
|
||
<div style="max-width:1240px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;">
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Голос</span>
|
||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Фотографии</span>
|
||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Письма</span>
|
||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Родословная</span>
|
||
<span style="width:5px; height:5px; border-radius:50%; background:#A9854C;"></span>
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#564B3C;">Реликвии</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ MANIFESTO / ABOUT ============ -->
|
||
<section id="about" style="max-width:980px; margin:0 auto; padding:120px 40px 110px; text-align:center;">
|
||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D; margin-bottom:30px;">Почему это важно</div>
|
||
<p style="font-family:'Playfair Display',serif; font-weight:400; font-size:42px; line-height:1.34; letter-spacing:-0.005em; margin:0; color:#2B2216;">
|
||
Каждое поколение уносит с собой истории, которые больше <span style="font-style:italic; color:#7E3B2D;">некому рассказать.</span> Имена забываются, фотографии теряются, голоса стихают. Мы возвращаем их домой.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ============ HOW IT WORKS ============ -->
|
||
<section id="how" style="background:#231B12; color:#EDE4D2;">
|
||
<div style="max-width:1240px; margin:0 auto; padding:108px 40px 116px;">
|
||
<div style="display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:74px; flex-wrap:wrap;">
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:22px;">
|
||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#C9A05E;">Как это работает</span>
|
||
</div>
|
||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:54px; line-height:1.05; margin:0; max-width:560px;">Четыре шага<br>от памяти к <span style="font-style:italic; color:#C9A05E;">наследию</span></h2>
|
||
</div>
|
||
<p style="font-size:18px; line-height:1.6; color:#B6AB95; max-width:380px; font-weight:300; margin:0;">Мы ведём вас за руку на каждом этапе. От вас — только желание сохранить. Всё остальное берём на себя.</p>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(237,228,210,0.18);">
|
||
<sc-for list="{{ steps }}" as="step" hint-placeholder-count="4">
|
||
<div style="padding:40px 28px 44px; border-right:1px solid rgba(237,228,210,0.18); transition:background .35s ease;" onMouseOver="{{ stepHover }}" onMouseOut="{{ stepOut }}">
|
||
<div style="font-family:'Playfair Display',serif; font-size:20px; color:#C9A05E; margin-bottom:54px;">{{ step.num }}</div>
|
||
<h3 style="font-family:'Playfair Display',serif; font-weight:500; font-size:25px; margin:0 0 14px; line-height:1.15;">{{ step.title }}</h3>
|
||
<p style="font-size:15.5px; line-height:1.62; color:#A99E88; font-weight:300; margin:0;">{{ step.body }}</p>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ THE BOOK ============ -->
|
||
<section id="book" style="max-width:1240px; margin:0 auto; padding:120px 40px;">
|
||
<div style="display:grid; grid-template-columns:0.94fr 1.06fr; gap:80px; align-items:center;">
|
||
<div style="position:relative;">
|
||
<div style="position:absolute; inset:24px -18px -18px 18px; background:#EFE6D2; border:1px solid rgba(35,27,18,0.12); z-index:0;"></div>
|
||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="book-shot" shape="rounded" radius="2" placeholder="Фото готовой книги" style="display:block; position:relative; z-index:1; width:100%; height:540px; box-shadow:0 36px 80px -34px rgba(35,27,18,0.55);" hint-size="100%,540px"></x-import>
|
||
</div>
|
||
<div>
|
||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:26px;">
|
||
<span style="width:38px; height:1px; background:#A9854C;"></span>
|
||
<span style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D;">Что вы получаете</span>
|
||
</div>
|
||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:52px; line-height:1.06; margin:0 0 30px;">Книга, которую<br>хочется <span style="font-style:italic; color:#7E3B2D;">передать дальше</span></h2>
|
||
<p style="font-size:19px; line-height:1.6; color:#564B3C; font-weight:300; margin:0 0 40px; max-width:480px;">Ручной переплёт, бумага хлопкового оттенка, оттиск фамильного герба на обложке. Внутри — выверенная вёрстка, отреставрированные снимки и расшифрованные голоса близких.</p>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(35,27,18,0.12); border:1px solid rgba(35,27,18,0.12);">
|
||
<sc-for list="{{ features }}" as="f" hint-placeholder-count="4">
|
||
<div style="background:#F3ECDD; padding:24px 26px;">
|
||
<div style="font-family:'Playfair Display',serif; font-size:19px; color:#2B2216; margin-bottom:7px;">{{ f.title }}</div>
|
||
<div style="font-size:14.5px; line-height:1.5; color:#6B5E4C; font-weight:300;">{{ f.body }}</div>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ QUOTE ============ -->
|
||
<section style="background:#EFE6D2; border-top:1px solid rgba(35,27,18,0.12); border-bottom:1px solid rgba(35,27,18,0.12);">
|
||
<div style="max-width:1000px; margin:0 auto; padding:104px 40px; text-align:center;">
|
||
<div style="font-family:'Playfair Display',serif; font-size:72px; line-height:0; color:#A9854C; height:40px;">“</div>
|
||
<blockquote style="font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:38px; line-height:1.34; margin:0 0 36px; color:#2B2216;">
|
||
Я держала в руках книгу и впервые услышала голос бабушки так, будто она рядом. Теперь это есть у каждого в нашей семье.
|
||
</blockquote>
|
||
<div style="display:flex; align-items:center; justify-content:center; gap:16px;">
|
||
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="quote-avatar" shape="circle" placeholder="" style="display:block; width:52px; height:52px;" hint-size="52px,52px"></x-import>
|
||
<div style="text-align:left;">
|
||
<div style="font-family:'Manrope',sans-serif; font-size:14px; color:#2B2216;">Анна Воронцова</div>
|
||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.06em; color:#7E3B2D; text-transform:uppercase; margin-top:3px;">Москва · семья из 4 поколений</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PRICING ============ -->
|
||
<section id="pricing" style="max-width:1240px; margin:0 auto; padding:120px 40px 110px;">
|
||
<div style="text-align:center; margin-bottom:70px;">
|
||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#7E3B2D; margin-bottom:22px;">Форматы участия</div>
|
||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:54px; line-height:1.05; margin:0;">Выберите глубину <span style="font-style:italic; color:#7E3B2D;">наследия</span></h2>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;">
|
||
<sc-for list="{{ plans }}" as="plan" hint-placeholder-count="3">
|
||
<div style="border:1px solid {{ plan.border }}; background:{{ plan.bg }}; color:{{ plan.fg }}; padding:42px 36px 40px; display:flex; flex-direction:column; position:relative;">
|
||
<sc-if value="{{ plan.featured }}" hint-placeholder-val="{{ false }}">
|
||
<span style="position:absolute; top:-12px; left:36px; background:#A9854C; color:#231B12; font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:6px 14px;">Чаще всего выбирают</span>
|
||
</sc-if>
|
||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:{{ plan.label }}; margin-bottom:22px;">{{ plan.name }}</div>
|
||
<div style="display:flex; align-items:baseline; gap:6px; margin-bottom:8px;">
|
||
<span style="font-family:'Playfair Display',serif; font-size:48px; line-height:1;">{{ plan.price }}</span>
|
||
<span style="font-size:15px; color:{{ plan.muted }};">{{ plan.unit }}</span>
|
||
</div>
|
||
<p style="font-size:15px; line-height:1.55; color:{{ plan.muted }}; font-weight:300; margin:0 0 28px; min-height:48px;">{{ plan.tagline }}</p>
|
||
<div style="height:1px; background:{{ plan.border }}; margin-bottom:26px;"></div>
|
||
<div style="display:flex; flex-direction:column; gap:14px; margin-bottom:36px; flex:1;">
|
||
<sc-for list="{{ plan.items }}" as="item" hint-placeholder-count="4">
|
||
<div style="display:flex; gap:12px; align-items:flex-start;">
|
||
<span style="color:#A9854C; font-size:15px; line-height:1.4;">✦</span>
|
||
<span style="font-size:15px; line-height:1.45; color:{{ plan.fg }}; font-weight:300;">{{ item }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<a href="#start" style="font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; text-align:center; padding:15px; text-decoration:none; color:{{ plan.btnFg }}; background:{{ plan.btnBg }}; border:1px solid {{ plan.btnBorder }}; transition:opacity .3s ease;" onMouseOver="{{ planHover }}" onMouseOut="{{ planOut }}">{{ plan.cta }}</a>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FINAL CTA ============ -->
|
||
<section id="start" style="background:#7E3B2D; color:#F3ECDD;">
|
||
<div style="max-width:1000px; margin:0 auto; padding:120px 40px; text-align:center;">
|
||
<div style="font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:#E9C9A0; margin-bottom:30px;">Начните сегодня</div>
|
||
<h2 style="font-family:'Playfair Display',serif; font-weight:400; font-size:60px; line-height:1.08; margin:0 0 32px;">Пока истории ещё<br><span style="font-style:italic;">можно услышать</span></h2>
|
||
<p style="font-size:20px; line-height:1.6; color:#F0DCC6; font-weight:300; max-width:540px; margin:0 auto 44px;">Оставьте заявку — мы свяжемся, обсудим вашу семью и составим план первой беседы. Без обязательств.</p>
|
||
<form onSubmit="{{ onSubmit }}" style="display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center;">
|
||
<input type="email" required placeholder="Ваш e-mail" style="flex:1; min-width:240px; background:rgba(243,236,221,0.1); border:1px solid rgba(243,236,221,0.4); color:#F3ECDD; font-family:'Spectral',serif; font-size:16px; padding:16px 20px; border-radius:2px; outline:none;">
|
||
<button type="submit" style="font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.04em; color:#231B12; background:#F3ECDD; border:none; padding:16px 32px; border-radius:2px; cursor:pointer; transition:transform .3s ease;" onMouseOver="{{ primHover }}" onMouseOut="{{ primOut }}">Оставить заявку</button>
|
||
</form>
|
||
<sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
|
||
<div style="margin-top:24px; font-family:'Spectral',serif; font-style:italic; font-size:17px; color:#F0DCC6;">Спасибо. Мы свяжемся с вами в течение двух дней.</div>
|
||
</sc-if>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer style="background:#231B12; color:#A99E88;">
|
||
<div style="max-width:1240px; margin:0 auto; padding:64px 40px 40px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(237,228,210,0.16);">
|
||
<div style="max-width:300px;">
|
||
<div style="font-family:'Playfair Display',serif; font-size:26px; color:#EDE4D2; margin-bottom:14px;">Heritage</div>
|
||
<p style="font-size:15px; line-height:1.6; font-weight:300; margin:0;">Студия семейного наследия. Сохраняем голоса, лица и истории — бережно и навсегда.</p>
|
||
</div>
|
||
<div style="display:flex; gap:64px; flex-wrap:wrap;">
|
||
<div style="display:flex; flex-direction:column; gap:13px;">
|
||
<span style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#6F6450;">Навигация</span>
|
||
<a href="#about" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">О проекте</a>
|
||
<a href="#how" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Как это работает</a>
|
||
<a href="#book" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Книга</a>
|
||
<a href="#pricing" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">Тарифы</a>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:13px;">
|
||
<span style="font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#6F6450;">Контакты</span>
|
||
<a href="mailto:hello@heritage.studio" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">hello@heritage.studio</a>
|
||
<a href="tel:+70000000000" style="color:#C5BAA3; text-decoration:none; font-size:15px; font-weight:300;">+7 000 000-00-00</a>
|
||
<span style="color:#C5BAA3; font-size:15px; font-weight:300;">Москва · Санкт-Петербург</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
|
||
<span style="font-family:'Manrope',sans-serif; font-size:12px; color:#6F6450;">© 2026 Heritage Studio. Все права защищены.</span>
|
||
<span style="font-family:'Spectral',serif; font-style:italic; font-size:14px; color:#8B7F69;">Память живёт, пока её передают.</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1240,"height":900}}">
|
||
class Component extends DCLogic {
|
||
state = { submitted: false };
|
||
|
||
renderVals() {
|
||
const hover = (over, props) => (e) => Object.assign(e.currentTarget.style, over ? props.on : props.off);
|
||
return {
|
||
submitted: this.state.submitted,
|
||
onSubmit: (e) => { e.preventDefault(); this.setState({ submitted: true }); },
|
||
|
||
navHover: (e) => { e.currentTarget.style.color = '#7E3B2D'; },
|
||
navOut: (e) => { e.currentTarget.style.color = '#5C5142'; },
|
||
ctaHover: (e) => { e.currentTarget.style.background = '#7E3B2D'; },
|
||
ctaOut: (e) => { e.currentTarget.style.background = '#231B12'; },
|
||
primHover:(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; },
|
||
primOut: (e) => { e.currentTarget.style.transform = 'translateY(0)'; },
|
||
stepHover:(e) => { e.currentTarget.style.background = 'rgba(201,160,94,0.07)'; },
|
||
stepOut: (e) => { e.currentTarget.style.background = 'transparent'; },
|
||
planHover:(e) => { e.currentTarget.style.opacity = '0.82'; },
|
||
planOut: (e) => { e.currentTarget.style.opacity = '1'; },
|
||
|
||
steps: [
|
||
{ num: '01', title: 'Беседа', body: 'Тёплое интервью с близкими. Записываем голос и истории — дома или онлайн, в удобном ритме.' },
|
||
{ num: '02', title: 'Архив', body: 'Собираем и оцифровываем фотографии, письма, документы. Реставрируем то, что выцвело от времени.' },
|
||
{ num: '03', title: 'Родословная', body: 'Восстанавливаем линии семьи, сверяем даты и имена, строим наглядное древо до прадедов.' },
|
||
{ num: '04', title: 'Книга', body: 'Верстаем и печатаем именную книгу в ручном переплёте. Плюс приватный цифровой архив.' },
|
||
],
|
||
|
||
features: [
|
||
{ title: 'Ручной переплёт', body: 'Лён или кожа, тиснёная обложка, сшитый блок.' },
|
||
{ title: 'Реставрация фото', body: 'Возвращаем чёткость старым снимкам.' },
|
||
{ title: 'Голос близких', body: 'QR ведёт к аудиозаписям внутри книги.' },
|
||
{ title: 'Семейное древо', body: 'Разворот с выверенной родословной.' },
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
name: 'Хроника', price: '85 000', unit: '₽', featured: false,
|
||
tagline: 'Одна линия семьи, бережно собранная в книгу.',
|
||
bg: '#F3ECDD', fg: '#231B12', border: 'rgba(35,27,18,0.16)',
|
||
label: '#7E3B2D', muted: '#6B5E4C',
|
||
btnFg: '#231B12', btnBg: 'transparent', btnBorder: 'rgba(35,27,18,0.4)',
|
||
cta: 'Выбрать',
|
||
items: ['До 3 интервью', 'Оцифровка 50 фотографий', 'Книга 80 страниц, 2 экз.', 'Цифровой архив'],
|
||
},
|
||
{
|
||
name: 'Наследие', price: '180 000', unit: '₽', featured: true,
|
||
tagline: 'Полная история рода с реставрацией и древом.',
|
||
bg: '#2B2216', fg: '#EDE4D2', border: 'rgba(237,228,210,0.22)',
|
||
label: '#C9A05E', muted: '#A99E88',
|
||
btnFg: '#231B12', btnBg: '#A9854C', btnBorder: '#A9854C',
|
||
cta: 'Выбрать',
|
||
items: ['До 8 интервью', 'Оцифровка 200 фотографий', 'Реставрация снимков', 'Книга 160 страниц, 5 экз.', 'Семейное древо', 'Аудиоархив с QR'],
|
||
},
|
||
{
|
||
name: 'Династия', price: 'от 360 000', unit: '₽', featured: false,
|
||
tagline: 'Архивная экспедиция и фамильное издание.',
|
||
bg: '#F3ECDD', fg: '#231B12', border: 'rgba(35,27,18,0.16)',
|
||
label: '#7E3B2D', muted: '#6B5E4C',
|
||
btnFg: '#231B12', btnBg: 'transparent', btnBorder: 'rgba(35,27,18,0.4)',
|
||
cta: 'Обсудить',
|
||
items: ['Без ограничений по интервью', 'Работа в архивах и ЗАГС', 'Многотомное издание', 'Тираж для всей семьи', 'Персональный куратор'],
|
||
},
|
||
],
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|