simbiot-harness/artifacts/landing-cil-by-backup-2026-10-11.html

444 lines
22 KiB
HTML
Raw 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.0">
<title>42 — Друзья Коллективного Разума</title>
<meta name="description" content="Кооператив «Друзья Коллективного Разума» — мы строим автономные компании на AI">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--paper: #faf8f3;
--surface: #ffffff;
--ink: #1a1a18;
--ink2: #1a1a18;
--mut: #55534b;
--dim: #8a877b;
--vio: #5b4be0;
--line: rgba(26,26,24,.12);
--line2: rgba(26,26,24,.07);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--vio); color: #fff; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: 'JetBrains Mono', monospace; }
/* ── nav ── */
nav {
position: fixed; top: 0; width: 100%; z-index: 100;
background: rgba(250,248,243,.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.logo { font-size: 1.5rem; font-weight: 900; letter-spacing: -.04em; color: var(--ink); }
.logo em { font-style: normal; color: var(--vio); }
.logo span { color: var(--mut); font-weight: 500; font-size: .95rem; margin-left: 10px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--mut); text-decoration: none; font-size: .85rem; font-weight: 600;
transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.lang-switch {
font-family: 'JetBrains Mono', monospace; font-size: .75rem;
padding: 4px 10px; border: 1px solid var(--line); color: var(--mut);
text-decoration: none; letter-spacing: 1px;
}
.lang-switch:hover { border-color: var(--ink); color: var(--ink); }
.btn-portal {
padding: 9px 22px; border: 1px solid var(--ink); border-radius: 0;
font-size: .85rem; font-weight: 600;
background: var(--ink); color: var(--paper);
transition: background .15s, color .15s;
}
.btn-portal:hover { background: var(--vio); border-color: var(--vio); }
/* ── hero ── */
.hero {
min-height: 100svh; display: flex; flex-direction: column;
justify-content: center;
padding: 140px 0 80px;
border-bottom: 1px solid var(--line);
position: relative;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
.hero h1 {
font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; line-height: 1.02;
letter-spacing: -.035em; margin: 24px 0 28px;
}
.hero h1 em { font-style: normal; color: var(--vio); }
.hero .sub { font-size: 1.15rem; color: var(--mut); max-width: 560px; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-lg {
display: inline-block; padding: 16px 32px;
border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
font-weight: 700; font-size: .95rem; text-decoration: none;
transition: background .15s, border-color .15s;
}
.btn-lg:hover { background: var(--vio); border-color: var(--vio); }
.btn-ghost {
display: inline-block; padding: 16px 32px;
border: 1px solid var(--line); background: transparent; color: var(--ink);
font-weight: 600; font-size: .95rem; text-decoration: none;
transition: border-color .15s;
}
.btn-ghost:hover { border-color: var(--ink); }
/* hero facts panel */
.facts {
border: 1px solid var(--line); background: var(--surface);
}
.facts .hd {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px; border-bottom: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim);
}
.facts .hd b { color: var(--vio); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vio); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.facts .row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 15px 20px; border-bottom: 1px solid var(--line2);
}
.facts .row:last-child { border-bottom: none; }
.facts .k { font-size: .8rem; color: var(--mut); }
.facts .v { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.facts .v em { font-style: normal; color: var(--vio); }
/* section scaffolding */
section { padding: 96px 0; }
.sec-label {
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; color: var(--vio);
display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-h { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; }
.sec-desc { font-size: 1.05rem; color: var(--mut); max-width: 640px; margin-bottom: 48px; }
/* ── mission ── */
.mission { border-top: 1px solid var(--line); }
.mission-grid { display: grid; grid-template-columns: .4fr 1fr; gap: 48px; align-items: start; }
.mission-num {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(4rem, 10vw, 7.5rem); font-weight: 500; line-height: .9;
color: var(--vio);
}
.mission p { font-size: 1.25rem; line-height: 1.65; color: var(--ink); max-width: 720px; }
.mission p + p { margin-top: 16px; }
.mission .mono-note {
margin-top: 24px; font-family: 'JetBrains Mono', monospace;
font-size: .8rem; color: dim;
}
.mission .mono-note { color: var(--dim); }
/* ── board: spec sheet rows ── */
.board .rows { border-top: 1px solid var(--line); }
.brow {
display: grid; grid-template-columns: 64px 1.1fr 1fr 2fr;
gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line);
align-items: baseline;
}
.brow .idx { font-family: 'JetBrains Mono', monospace; color: var(--dim); font-size: .85rem; }
.brow .nm { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.brow .rl { font-family: 'JetBrains Mono', monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--vio); }
.brow .ds { color: var(--mut); font-size: .95rem; }
/* ── projects: ledger grid ── */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pcard {
position: relative; padding: 32px; min-height: 220px;
border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: var(--surface); text-decoration: none; color: inherit;
display: flex; flex-direction: column; gap: 10px;
transition: background .15s;
}
.pcard:hover { background: #f4f1e8; }
.pcard .pnum { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--dim); }
.pcard .pname { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.pcard .pown { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--vio); text-transform: uppercase; letter-spacing: 1px; }
.pcard .pdesc { font-size: .88rem; color: var(--mut); line-height: 1.55; flex: 1; }
.pcard .plink { font-size: .8rem; font-weight: 600; color: var(--ink); }
.pcard .plink::after { content: ' →'; color: var(--vio); }
.pcard .arrow-corner {
position: absolute; top: 18px; right: 18px; opacity: 0;
transition: opacity .15s; font-size: 1.1rem; color: var(--vio);
}
.pcard:hover .arrow-corner { opacity: 1; }
/* ── CTA: ink block ── */
.cta { background: var(--ink); color: var(--paper); padding: 110px 0; }
.cta .sec-label { color: #b9b6a8; }
.cta .sec-label::after { background: rgba(250,248,243,.2); }
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 20px; }
.cta p { color: #b9b6a8; font-size: 1.1rem; margin-bottom: 40px; }
.cta .btn-lg { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta .btn-lg:hover { background: var(--vio); color: #fff; border-color: var(--vio); }
/* ── footer ── */
footer { padding: 36px 0; border-top: 1px solid var(--line); }
footer .wrap {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
}
footer .f-links { display: flex; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--mut); text-decoration: none; font-size: .85rem; }
footer a:hover { color: var(--ink); }
/* ── payment logos strip ── */
.pay-strip { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pay-strip .pl { height: 30px; display: flex; align-items: center; }
.pay-strip .pl img { max-height: 30px; width: auto; opacity: .9; }
.pay-strip .pl span { font-size: .78rem; color: var(--mut); letter-spacing: .02em; }
/* ── requisites block ── */
.requisites { font-size: .85rem; color: var(--mut); line-height: 1.7; margin-top: 22px; }
.requisites b { color: var(--ink); font-weight: 600; }
/* ── legal/compliance pages ── */
.legal-page .wrap { max-width: 860px; }
.legal-page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 18px 0 8px; }
.legal-page .upd { color: var(--mut); font-size: .85rem; margin-bottom: 28px; }
.legal-page h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.legal-page p, .legal-page li { color: var(--ink); font-size: .95rem; line-height: 1.75; }
.legal-page ul { padding-left: 22px; margin: 10px 0; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .9rem; }
.legal-page th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.legal-page td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page .price-by { font-weight: 700; white-space: nowrap; }
footer .cop { color: var(--dim); font-size: .8rem; font-family: 'JetBrains Mono', monospace; }
/* reveal animation */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.rv.vis { opacity: 1; transform: none; }
/* Mobile */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
.mission-grid { grid-template-columns: 1fr; gap: 24px; }
.pgrid { grid-template-columns: 1fr; }
.brow { grid-template-columns: 1fr 2fr; row-gap: 4px; }
.brow .idx { display: none; }
.nav-links a:not(.btn-portal) { display: none; }
section { padding: 64px 0; }
}
</style>
</head>
<body>
<nav>
<div class="wrap">
<div class="logo">4<em>2</em><span>Друзья Коллективного Разума</span></div>
<div class="nav-links">
<a href="#mission">Миссия</a>
<a href="#board">Правление</a>
<a href="#projects">Проекты</a>
<a href="/en" class="lang-switch" hreflang="en" title="English version">EN</a>
<a href="/cabinet" class="btn-portal" id="portalBtn">Войти →</a>
</div>
</div>
</nav>
<!-- Hero -->
<div class="hero">
<div class="wrap hero-grid">
<div>
<div class="sec-label">Кооператив · с 16.07.2026 · Минск</div>
<h1>Люди решают.<br>Агенты <em>работают.</em></h1>
<p class="sub">Мы строим автоматизированные компании, где ИИ-агенты выполняют рутинные операции, а люди держат суждение и ответственность. Прозрачные процессы, измеримый результат.</p>
<div class="hero-cta">
<a href="/cabinet" class="btn-lg" id="heroBtn">Войти в портал</a>
<a href="#projects" class="btn-ghost">Смотреть проекты</a>
</div>
</div>
<aside class="facts">
<div class="hd"><span>КОЛЛЕКТИВ / СЕЙЧАС</span><b><span class="dot"></span>WORKING</b></div>
<div class="row"><span class="k">Членов правления</span><span class="v">3</span></div>
<div class="row"><span class="k">Проектов в работе</span><span class="v">6</span></div>
<div class="row"><span class="k">AI-агентов в флоте</span><span class="v">7<em>+</em></span></div>
<div class="row"><span class="k">Серверов</span><span class="v">6</span></div>
<div class="row"><span class="k">Формат</span><span class="v">Кооператив</span></div>
<div class="row"><span class="k">Юрисдикция</span><span class="v">BY</span></div>
</aside>
</div>
</div>
<!-- Mission -->
<section id="mission" class="mission">
<div class="wrap">
<div class="sec-label">01 / Миссия</div>
<div class="mission-grid rv">
<div class="mission-num">42</div>
<div>
<p>Все миссии одинаково важны. 42 объединяет их все — это ответ на главный вопрос жизни, вселенной и всего такого.</p>
<p>Каждый участник преследует свою миссию, а коллектив усиливает каждого. Нет неважных миссий и нет неважных людей.</p>
<div class="mono-note">// статус: идём с 16.07.2026, набор — раз в квартал</div>
</div>
</div>
</div>
</section>
<!-- Board -->
<section id="board" class="board">
<div class="wrap">
<div class="sec-label">02 / Правление</div>
<h2 class="sec-h rv">Трое у штурвала</h2>
<p class="sec-desc rv">Консенсус правления — механизм принятия решений кооператива.</p>
<div class="rows rv">
<div class="brow">
<div class="idx">001</div>
<div class="nm">Алекс Шкор</div>
<div class="rl">Председатель</div>
<div class="ds">Архитектор кооператива. Симбиот, Кибербанк, Domostroy. AI-инфраструктура и стратегия.</div>
</div>
<div class="brow">
<div class="idx">002</div>
<div class="nm">Влад Шемардинов</div>
<div class="rl">Член правления</div>
<div class="ds">Видеопродакшн и контент. ReelsUp: подкасты и видео превращаются в вирусные рилсы.</div>
</div>
<div class="brow">
<div class="idx">003</div>
<div class="nm">Юра Бокач</div>
<div class="rl">Секретарь</div>
<div class="ds">Монетикс, финансовая архитектура, документооборот. Залоговые системы и аналитика.</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects">
<div class="wrap">
<div class="sec-label">03 / Проекты</div>
<h2 class="sec-h rv">Что мы строим</h2>
<p class="sec-desc rv">Каждый проект — отдельный бизнес внутри кооператива. Доля кооператива — 50%.</p>
<div class="pgrid rv">
<a href="https://simbiot.cil.by" class="pcard">
<div class="pnum">P-01</div>
<div class="pname">Симбиот</div>
<div class="pown">Alex Shkor</div>
<div class="pdesc">Автопилот для бизнеса. Рой AI-агентов ведёт операции — маркетинг, финансы, поддержка. 24/7 без людей.</div>
<div class="plink">simbiot.cil.by</div>
<div class="arrow-corner">↗</div>
</a>
<a href="https://reelsup1.cil.by" class="pcard">
<div class="pnum">P-02</div>
<div class="pname">ReelsUp</div>
<div class="pown">Vlad Shemardinov</div>
<div class="pdesc">Твой подкаст уже содержит вирусные клипы. AI находит, нарезает и публикует короткие видео автоматически.</div>
<div class="plink">reelsup1.cil.by</div>
<div class="arrow-corner">↗</div>
</a>
<div class="pcard" aria-hidden="false">
<div class="pnum">P-03</div>
<div class="pname">Монетикс</div>
<div class="pown">Yura Bokach</div>
<div class="pdesc">Финансовые инструменты и аналитика на базе AI. Развитие человеческого потенциала через ИИ.</div>
<div class="plink">В разработке</div>
<div class="arrow-corner">·</div>
</div>
<div class="pcard" aria-hidden="false">
<div class="pnum">P-04</div>
<div class="pname">Кибербанк</div>
<div class="pown">Alex Shkor</div>
<div class="pdesc">Внутренняя система учёта и взаиморасчётов кооператива: финансовая модель проектов, скоринг, прозрачная отчётность для пайщиков.</div>
<div class="plink">В разработке</div>
<div class="arrow-corner">·</div>
</div>
<div class="pcard" aria-hidden="false">
<div class="pnum">P-05</div>
<div class="pname">Domostroy</div>
<div class="pown">Alex Shkor</div>
<div class="plink">В разработке</div>
<div class="pdesc">ИИ-агент, который строит дома в любой точке мира. От проекта до реализации — полностью автоматизировано.</div>
<div class="arrow-corner">·</div>
</div>
<div class="pcard" aria-hidden="false">
<div class="pnum">P-06</div>
<div class="pname">AI Corp</div>
<div class="pown">Dmitry Siasitski</div>
<div class="pdesc">Консалтинг по внедрению AI в компаниях. От аудита до развёртывания автономных агентов.</div>
<div class="plink">В разработке</div>
<div class="arrow-corner">·</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="wrap">
<div class="sec-label">04 / Вход</div>
<h2 class="rv">Готовы строить будущее?</h2>
<p class="rv">Войдите в портал кооператива или свяжитесь с правлением.</p>
<a href="/login" class="btn-lg rv" id="ctaBtn">Войти в портал</a>
</div>
</section>
<footer>
<div class="wrap">
<span class="cop">© 2026 Кооператив «42» · cil.by</span>
<div class="f-links">
<a href="/cabinet">Портал</a>
<a href="/en">EN</a>
<a href="/services">Услуги и цены</a>
<a href="/terms">Правила оплаты и возврата</a>
<a href="https://simbiot.cil.by">Симбиот</a>
<a href="https://reelsup1.cil.by">ReelsUp</a>
</div>
<div class="requisites">
<b>Потребительский кооператив «ДРУЗЬЯ КОЛЛЕКТИВНОГО РАЗУМА»</b><br>
Свидетельство о государственной регистрации: дата регистрации 16.07.2026, состоит на учёте в ИМНС по Фрунзенскому району г. Минска (УНП 194018234)<br>
Юридический адрес: 220078, Республика Беларусь, г. Минск, ул. Маршала Лосика, д. 53, оф. 385<br>
УНП 194018234 · Тел.: +375 25 900 50 03 · alex.shkor@gmail.com<br>
ЗАО «Альфа-Банк» · БИК ALFABY2X · Карт-счёт BY85ALFA30152K15980010270000 (BYN)
</div>
<div class="pay-strip">
<span class="pl"><img src="/static/img/pay/visa.svg" alt="VISA" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/visa-secure.svg" alt="Visa Secure" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/mastercard.svg" alt="MasterCard" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/mc-id-check.svg" alt="MasterCard ID Check" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/belkart.svg" alt="Белкарт" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/belkart-ip.svg" alt="Белкарт ИнтернетПароль" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/applepay.svg" alt="Apple Pay" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/samsungpay.svg" alt="Samsung Pay" loading="lazy"></span>
<span class="pl"><img src="/static/img/pay/alfabank.svg" alt="Альфа-Банк" loading="lazy"></span>
</div>
</div>
</footer>
<script>
// logged-in? → switch buttons to cabinet
fetch('/api/me').then(r=>{if(r.ok){return r.json()}}).then(d=>{
if(d&&d.user){
const btn=document.getElementById('portalBtn');
if(btn){btn.href='/cabinet';btn.textContent='Кабинет →';}
const h=document.getElementById('heroBtn');
if(h){h.href='/cabinet';h.textContent='Открыть кабинет';}
const c=document.getElementById('ctaBtn');
if(c){c.href='/cabinet';c.textContent='Открыть кабинет';}
}
}).catch(()=>{});
// reveal on scroll
const io = new IntersectionObserver(es => es.forEach(e => e.isIntersecting && e.target.classList.add('vis')), {threshold:.1});
document.querySelectorAll('.rv').forEach(el => io.observe(el));
</script>
</body>
</html>