Files
2026-10-17 19:45:51 +04:00

223 lines
26 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">
<title>Barev Club — лендинг v2</title>
<script src="./vendor/react.js"></script>
<script src="./vendor/react-dom.js"></script>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&amp;family=Onest:wght@400;500;600&amp;display=swap" rel="stylesheet">
<style>
body{margin:0;background:#FBF6EE}
a{color:#1E1B1A}a:hover{color:#B8235A}
</style>
</helmet>
<div style="font-family: 'Onest', system-ui, sans-serif; color: #1E1B1A; background: #FBF6EE; width: 100%">
<div style="max-width: 1240px; margin: 0 auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 12px">
<header style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #FFFFFF">
<div style="display: flex; align-items: center; gap: 8px">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4A1028" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.5"></circle><path d="M8 12.5l2.6 2.6L16 9.5"></path></svg>
<div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 20px; color: #4A1028">Barev Club</div>
</div>
<nav style="display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; font-weight: 500">
<a href="#services" style="text-decoration: none">Услуги</a>
<a href="#how" style="text-decoration: none">Как это работает</a>
<a href="#plans" style="text-decoration: none">Членство</a>
<a href="#faq" style="text-decoration: none">Вопросы</a>
</nav>
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 4px">
<sc-for list="{{langs}}" as="l" hint-placeholder-count="5">
<button onClick="{{l.pick}}" style="{{l.style}}">{{l.code}}</button>
</sc-for>
<a href="https://t.me/" style="margin-left: 6px; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: #1E1B1A; color: #FFFFFF; font-weight: 600; font-size: 14px; text-decoration: none">Открыть в Telegram</a>
</div>
</header>
<section style="display: flex; flex-wrap: wrap; gap: 12px">
<div style="flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 40px; border-radius: 36px; background: #F6C3D3; display: flex; flex-direction: column; gap: 22px">
<div style="align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: #4A1028">Для тех, кто переехал в Ереван</div>
<h1 style="margin: 0; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: clamp(40px, 5.4vw, 74px); line-height: 0.98; letter-spacing: -2px; color: #4A1028">{{title}}</h1>
<p style="margin: 0; font-size: 19px; line-height: 1.5; color: #4A1028; max-width: 560px">{{sub}}</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px">
<a href="https://t.me/" style="display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; background: #1E1B1A; color: #FFFFFF; font-weight: 600; font-size: 16px; text-decoration: none">{{cta}}
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a href="#services" style="display: inline-flex; align-items: center; height: 56px; padding: 0 24px; border-radius: 999px; background: #FFFFFF; font-weight: 600; font-size: 16px; text-decoration: none">Смотреть услуги</a>
</div>
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto">
<div style="padding: 14px; border-radius: 22px; background: #FFFFFF"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 22px; color: #B8235A">1</div><div style="font-size: 14px; font-weight: 500">Открой бота в Telegram</div></div>
<div style="padding: 14px; border-radius: 22px; background: #FFFFFF"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 22px; color: #B8235A">2</div><div style="font-size: 14px; font-weight: 500">Выбери услугу и время</div></div>
<div style="padding: 14px; border-radius: 22px; background: #FFFFFF"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 22px; color: #B8235A">3</div><div style="font-size: 14px; font-weight: 500">Следи за статусом в приложении</div></div>
</div>
</div>
<div style="flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px">
<div style="padding: 20px; border-radius: 36px; background: #FFFFFF; display: flex; flex-direction: column; gap: 8px">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px"><div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 20px">Мои заявки</div><div style="font-size: 13px; color: #5C5550">в приложении</div></div>
<div style="padding: 12px 14px; border-radius: 20px; background: #BCD0F2; color: #12264D; display: flex; align-items: center; gap: 10px"><div style="flex: 1"><div style="font-weight: 600; font-size: 14px">Трансфер · аэропорт → дом</div><div style="font-size: 12px">Сегодня 12:30</div></div><span style="padding: 4px 10px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 600">Ждёт вас</span></div>
<div style="padding: 12px 14px; border-radius: 20px; background: #A8C38A; color: #1F3311; display: flex; align-items: center; gap: 10px"><div style="flex: 1"><div style="font-weight: 600; font-size: 14px">Клининг · генеральная</div><div style="font-size: 12px">Сб 16:00</div></div><span style="padding: 4px 10px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 600">Назначен</span></div>
<div style="padding: 12px 14px; border-radius: 20px; background: #F9CDB0; color: #4D200A; display: flex; align-items: center; gap: 10px"><div style="flex: 1"><div style="font-weight: 600; font-size: 14px">Соцкарта</div><div style="font-size: 12px">Документы проверяются</div></div><span style="padding: 4px 10px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 600">В работе</span></div>
<div style="padding: 12px 14px; border-radius: 20px; background: #CFC8F5; color: #2B1F5C; display: flex; align-items: center; gap: 10px"><div style="flex: 1"><div style="font-weight: 600; font-size: 14px">Армянский A1 · урок 3</div><div style="font-size: 12px">Сегодня 15:00 · онлайн</div></div><span style="padding: 4px 10px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 600">Сегодня</span></div>
</div>
<div style="display: flex; gap: 12px">
<div style="flex: 1; padding: 18px; border-radius: 30px; background: #F7DA6E; display: flex; align-items: center; gap: 12px">
<div style="position: relative; width: 72px; height: 72px; flex: none; transform: rotate(-10deg)">
<svg aria-hidden="true" viewBox="0 0 100 100" width="72" height="72" style="position: absolute; inset: 0"><g fill="#B8235A"><circle cx="50" cy="50" r="34"></circle><circle cx="82" cy="50" r="16"></circle><circle cx="75.9" cy="68.8" r="16"></circle><circle cx="59.9" cy="80.4" r="16"></circle><circle cx="40.1" cy="80.4" r="16"></circle><circle cx="24.1" cy="68.8" r="16"></circle><circle cx="18" cy="50" r="16"></circle><circle cx="24.1" cy="31.2" r="16"></circle><circle cx="40.1" cy="19.6" r="16"></circle><circle cx="59.9" cy="19.6" r="16"></circle><circle cx="75.9" cy="31.2" r="16"></circle></g></svg>
<div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px">5</div>
</div>
<div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.15; color: #4A1028">языков:<br>RU EN 中文 HY ES</div>
</div>
<div style="flex: 1; padding: 18px; border-radius: 30px; background: #CFC8F5; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #2B1F5C">
<div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.15">Без установки</div>
<div style="font-size: 13px">Всё внутри Telegram</div>
</div>
</div>
</div>
</section>
<section id="services" style="display: flex; flex-wrap: wrap; gap: 12px">
<div style="flex: 1 1 270px; min-width: 0; box-sizing: border-box; padding: 24px; border-radius: 32px; background: #A8C38A; color: #1F3311; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; justify-content: space-between; align-items: center"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px">Быт</div>
<svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v9H4z"></path></svg></div>
<div style="display: flex; flex-direction: column; gap: 6px">
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Клининг</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Ремонт</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Трансфер</span><span>от [ЦЕНА] ֏</span></div>
</div>
<div style="font-size: 14px">Проверенные исполнители, статус заказа в приложении.</div>
<a href="https://t.me/" style="margin-top: auto; font-weight: 700; color: #1F3311">Заказать →</a>
</div>
<div style="flex: 1 1 270px; min-width: 0; box-sizing: border-box; padding: 24px; border-radius: 32px; background: #F9CDB0; color: #4D200A; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; justify-content: space-between; align-items: center"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px">Документы</div>
<svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6"></path></svg></div>
<div style="display: flex; flex-direction: column; gap: 6px">
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Соцкарта</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Перевод паспорта</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">ВНЖ</span><span>от [ЦЕНА] ֏</span></div>
</div>
<div style="font-size: 14px">Нотариальный перевод и сопровождение до готового документа.</div>
<a href="https://t.me/" style="margin-top: auto; font-weight: 700; color: #4D200A">Оформить →</a>
</div>
<div style="flex: 1 1 270px; min-width: 0; box-sizing: border-box; padding: 24px; border-radius: 32px; background: #CFC8F5; color: #2B1F5C; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; justify-content: space-between; align-items: center"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px; line-height: 1">Обучение и карьера</div>
<svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: none"><path d="M4 5h6a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h6z"></path></svg></div>
<div style="display: flex; flex-direction: column; gap: 6px">
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Армянский</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Английский</span><span>от [ЦЕНА] ֏</span></div>
<div style="height: 46px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px"><span style="font-weight: 600">Карьерный консультант</span><span>от [ЦЕНА] ֏</span></div>
</div>
<div style="font-size: 14px">Онлайн и офлайн, в удобное время.</div>
<a href="https://t.me/" style="margin-top: auto; font-weight: 700; color: #2B1F5C">Записаться →</a>
</div>
<div style="flex: 1 1 270px; min-width: 0; box-sizing: border-box; padding: 24px; border-radius: 32px; background: #F7DA6E; color: #4A1028; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; justify-content: space-between; align-items: center"><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px; line-height: 1">Скидки и подарки</div>
<svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: none"><path d="M4 8h16v4H4zM5 12h14v8H5zM12 8v12M12 8c-2-3-6-3-6 0M12 8c2-3 6-3 6 0"></path></svg></div>
<div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -2px">до −[N]%</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px">
<span style="padding: 8px 14px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 500">Кофейни</span>
<span style="padding: 8px 14px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 500">Рестораны</span>
<span style="padding: 8px 14px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 500">Подарки партнёров</span>
</div>
<div style="font-size: 14px">Покажи клубную карту в Telegram на кассе.</div>
<a href="https://t.me/" style="margin-top: auto; font-weight: 700; color: #4A1028">Смотреть партнёров →</a>
</div>
</section>
<section id="how" style="display: flex; flex-wrap: wrap; gap: 12px">
<div style="flex: 999 1 640px; min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 36px; background: #1E1B1A; color: #FFFFFF; display: flex; flex-direction: column; gap: 18px">
<h2 style="margin: 0; font-family: 'Rubik', sans-serif; font-size: 34px; letter-spacing: -1px"><span style="font-weight: 700">Как это</span> <span style="font-weight: 400; font-style: italic">работает</span></h2>
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px">
<div style="padding: 16px; border-radius: 24px; background: #2E2A28; display: flex; flex-direction: column; gap: 8px"><div style="width: 36px; height: 36px; border-radius: 50%; background: #F6C3D3; color: #4A1028; display: flex; align-items: center; justify-content: center; font-weight: 700">1</div><div style="font-weight: 600">Отсканируй QR</div><div style="font-size: 13px; color: #CFC8C2">Из договора аренды или с сайта</div></div>
<div style="padding: 16px; border-radius: 24px; background: #2E2A28; display: flex; flex-direction: column; gap: 8px"><div style="width: 36px; height: 36px; border-radius: 50%; background: #F7DA6E; color: #4A1028; display: flex; align-items: center; justify-content: center; font-weight: 700">2</div><div style="font-weight: 600">Выбери язык</div><div style="font-size: 13px; color: #CFC8C2">Пять языков на выбор</div></div>
<div style="padding: 16px; border-radius: 24px; background: #2E2A28; display: flex; flex-direction: column; gap: 8px"><div style="width: 36px; height: 36px; border-radius: 50%; background: #A8C38A; color: #1F3311; display: flex; align-items: center; justify-content: center; font-weight: 700">3</div><div style="font-weight: 600">Закажи услугу</div><div style="font-size: 13px; color: #CFC8C2">Время, адрес, оплата</div></div>
<div style="padding: 16px; border-radius: 24px; background: #2E2A28; display: flex; flex-direction: column; gap: 8px"><div style="width: 36px; height: 36px; border-radius: 50%; background: #BCD0F2; color: #12264D; display: flex; align-items: center; justify-content: center; font-weight: 700">4</div><div style="font-weight: 600">Следи за статусом</div><div style="font-size: 13px; color: #CFC8C2">Чат с исполнителем внутри</div></div>
</div>
</div>
<div style="flex: 1 1 340px; min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 36px; background: #A8C38A; display: flex; align-items: center; gap: 16px">
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px">
<div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.05; color: #1F3311">Сняли квартиру через [АГЕНТСТВО]?</div>
<div style="font-size: 15px; color: #1F3311">Код на месяц Barev+ уже в договоре.</div>
</div>
<div style="width: 120px; height: 110px; flex: none; box-sizing: border-box; padding: 14px; background: #F7DA6E; border-radius: 6px; transform: rotate(6deg); display: flex; flex-direction: column; justify-content: space-between">
<div style="font-family: 'Rubik', sans-serif; font-style: italic; font-size: 20px; font-weight: 500; color: #4A1028">Подарок!</div>
<div style="font-size: 12px; color: #4A1028">1 месяц Barev+</div>
</div>
</div>
</section>
<section id="plans" style="display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch">
<div style="flex: 1 1 300px; min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 36px; background: #FFFFFF; display: flex; flex-direction: column; gap: 14px">
<div style="display: flex; justify-content: space-between; align-items: baseline"><div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 28px">Barev</div><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 32px">0 ֏</div></div>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 15px">
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1F7A52" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>Скидки и подарки партнёров</div>
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1F7A52" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>Все услуги по обычной цене</div>
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1F7A52" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>Статусы заявок и чат</div>
</div>
<a href="https://t.me/" style="margin-top: auto; display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; border: 2px solid #1E1B1A; font-weight: 600; text-decoration: none">Вступить бесплатно</a>
</div>
<div style="flex: 1 1 300px; min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 36px; background: #CFC8F5; color: #2B1F5C; display: flex; flex-direction: column; gap: 14px">
<div style="display: flex; justify-content: space-between; align-items: baseline"><div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 28px">Barev+</div><div style="font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 24px">[ЦЕНА] ֏/мес</div></div>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 15px">
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B8235A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>Всё из Barev</div>
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B8235A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>−[N]% на документы и быт</div>
<div style="display: flex; gap: 8px; align-items: center"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B8235A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"></path></svg>−[N]% на обучение и карьеру</div>
</div>
<a href="https://t.me/" style="margin-top: auto; display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #1E1B1A; color: #FFFFFF; font-weight: 600; text-decoration: none">Попробовать Barev+</a>
</div>
<div id="faq" style="flex: 1 1 340px; min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 36px; background: #F6C3D3; color: #4A1028; display: flex; flex-direction: column; gap: 8px">
<div style="font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 28px; margin-bottom: 4px">Вопросы</div>
<sc-for list="{{faq}}" as="q" hint-placeholder-count="4">
<div style="border-radius: 20px; background: #FFFFFF; overflow: hidden">
<button onClick="{{q.toggle}}" style="width: 100%; min-height: 48px; padding: 12px 16px; border: none; background: transparent; font-family: inherit; font-size: 15px; font-weight: 600; color: #1E1B1A; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer"><span>{{q.q}}</span><span aria-hidden="true">{{q.sign}}</span></button>
<sc-if value="{{q.open}}" hint-placeholder-val="{{false}}">
<div style="padding: 0 16px 14px; font-size: 14px; line-height: 1.45; color: #5C5550">{{q.a}}</div>
</sc-if>
</div>
</sc-for>
</div>
</section>
<footer style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 18px 24px; border-radius: 999px; background: #FFFFFF; font-size: 14px; color: #5C5550">
<div style="font-family: 'Rubik', sans-serif; font-weight: 700; color: #4A1028">Barev Club · Ереван</div>
<div style="display: flex; flex-wrap: wrap; gap: 20px"><a href="https://t.me/">Стать партнёром</a><a href="mailto:[EMAIL]">[EMAIL]</a><a href="#">Политика конфиденциальности</a></div>
</footer>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2400}}'>
class Component extends DCLogic {
constructor(props) {
super(props);
this.state = { lang: 'RU', open: 0 };
}
renderVals() {
const copy = {
RU: { t: 'Ереван — как дома. С первого дня.', s: 'Быт, документы, обучение и скидки партнёров — в одном клубе в Telegram.', c: 'Вступить бесплатно' },
EN: { t: 'Yerevan feels like home. From day one.', s: 'Home services, documents, learning and partner discounts — one club in Telegram.', c: 'Join for free' },
'中文': { t: '在埃里温,从第一天起就像在家。', s: '生活服务、证件、学习和合作伙伴优惠——尽在 Telegram 俱乐部。', c: '免费加入' },
'ՀԱՅ': { t: 'Երևանը՝ ինչպես տանը։ Առաջին օրվանից։', s: 'Կենցաղ, փաստաթղթեր, ուսում և գործընկերների զեղչեր՝ մեկ ակումբում Telegram-ում։', c: 'Միանալ անվճար' },
ES: { t: 'Ereván como en casa. Desde el primer día.', s: 'Servicios del hogar, documentos, formación y descuentos de socios — un club en Telegram.', c: 'Únete gratis' }
};
const codes = ['RU', 'EN', '中文', 'ՀԱՅ', 'ES'];
const cur = this.state.lang;
const base = 'min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; ';
const langs = codes.map((code) => ({ code: code, pick: () => this.setState({ lang: code }), style: base + (code === cur ? 'background: #F6C3D3; color: #4A1028;' : 'background: transparent; color: #1E1B1A;') }));
const qs = [
['Нужно что-то устанавливать?', 'Нет. Клуб работает внутри Telegram: открываешь бота и пользуешься.'],
['На каких языках можно общаться?', 'Русский, английский, китайский, армянский и испанский.'],
['Чем Barev+ отличается от бесплатного?', 'Скидки [N]% на документы, быт, обучение и карьерные консультации.'],
['Как получить подарок от агентства?', 'Код на месяц Barev+ указан в договоре аренды. Введи его в боте.']
];
const faq = qs.map(([q, a], i) => ({ q: q, a: a, open: this.state.open === i, sign: this.state.open === i ? '−' : '+', toggle: () => this.setState({ open: this.state.open === i ? -1 : i }) }));
const c = copy[cur];
return { langs: langs, title: c.t, sub: c.s, cta: c.c, faq: faq };
}
}
</script>
</body>
</html>