v1: AI RecSys лендинг
This commit is contained in:
parent
18a141cd12
commit
8e6358efa7
330
index.html
330
index.html
@ -3,161 +3,233 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>FinPlan AI — ИИ-агент финансового планирования</title>
|
<title>AI RecSys — Интеллектуальная система рекомендаций</title>
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
|
||||||
<style>
|
<style>
|
||||||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--green:#00C853;--green-50:#E8F5E9}
|
:root{--ink:#0a0e17;--ink2:#131a2b;--cyan:#00E5FF;--purple:#B44AFF;--pink:#FF3D8A;--green:#00E676;--white:#fff;--gray:#5B6573;--gray-light:#9aa3b2}
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--white);background:var(--ink);overflow-x:hidden}
|
||||||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||||||
.hero{background:var(--ink);color:var(--white);padding:100px 24px;text-align:center}
|
|
||||||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:20px}
|
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
|
||||||
.hero h1 span{color:var(--cyan)}
|
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(0,229,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(180,74,255,.06) 0%,transparent 50%);animation:pulse 8s ease-in-out infinite}
|
||||||
.hero p{font-size:20px;color:#9aa3b2;max-width:640px;margin:0 auto 36px}
|
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
|
||||||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:17px;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s}
|
.hero-content{position:relative;z-index:1}
|
||||||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,.3)}
|
.hero-badge{display:inline-block;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);color:var(--cyan);padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:24px}
|
||||||
.btn-white{background:var(--white);color:var(--ink)}
|
.hero h1{font-size:64px;font-weight:800;line-height:1.05;margin-bottom:24px;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||||
.btn-green{background:var(--green);color:var(--white)}
|
.hero p{font-size:20px;color:var(--gray-light);max-width:600px;margin-bottom:36px;line-height:1.7}
|
||||||
.section{padding:80px 24px}
|
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:10px;font-weight:700;text-decoration:none;font-size:16px;transition:all .3s ease;cursor:pointer;border:none}
|
||||||
.section h2{font-size:36px;font-weight:700;margin-bottom:12px;text-align:center}
|
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,229,255,.35)}
|
||||||
.section .subtitle{color:var(--gray-500);text-align:center;max-width:560px;margin:0 auto 48px;font-size:18px}
|
.btn-outline{background:transparent;border:2px solid var(--cyan);color:var(--cyan)}
|
||||||
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:1140px;margin:0 auto}
|
.btn-outline:hover{background:rgba(0,229,255,.1)}
|
||||||
.feature-card{background:var(--gray-100);border-radius:16px;padding:36px 28px;text-align:center;transition:transform .25s}
|
|
||||||
.feature-card:hover{transform:translateY(-4px)}
|
.section{padding:80px 0}
|
||||||
.feature-card .icon{font-size:48px;margin-bottom:16px;display:block}
|
.section h2{font-size:42px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,var(--white),var(--gray-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||||
.feature-card h3{font-size:20px;font-weight:700;margin-bottom:10px}
|
.section-sub{font-size:18px;color:var(--gray);max-width:650px;margin-bottom:48px}
|
||||||
.feature-card p{color:var(--gray-500);font-size:15px;line-height:1.55}
|
|
||||||
.how{background:var(--gray-100)}
|
.how-it-works{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
|
||||||
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;max-width:900px;margin:0 auto}
|
.step{text-align:center;padding:32px 20px;background:var(--ink2);border:1px solid rgba(255,255,255,.05);border-radius:16px;position:relative;transition:all .3s ease}
|
||||||
.step{text-align:center;padding:20px}
|
.step:hover{border-color:var(--cyan);transform:translateY(-4px)}
|
||||||
.step-num{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;background:var(--ink);color:var(--cyan);border-radius:50%;font-size:22px;font-weight:800;margin-bottom:16px}
|
.step-num{width:44px;height:44px;background:linear-gradient(135deg,var(--cyan),var(--purple));border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--ink);margin:0 auto 16px}
|
||||||
.step h3{font-size:19px;font-weight:700;margin-bottom:8px}
|
.step h3{font-size:17px;font-weight:700;margin-bottom:8px}
|
||||||
.step p{color:var(--gray-500);font-size:15px}
|
.step p{font-size:14px;color:var(--gray);line-height:1.5}
|
||||||
.faq{max-width:720px;margin:0 auto}
|
.step-arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--cyan);font-size:20px;opacity:.4}
|
||||||
.faq-item{border-bottom:1px solid var(--gray-100);padding:20px 0}
|
|
||||||
.faq-item summary{font-size:18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
|
.demo-panel{background:var(--ink2);border:1px solid rgba(0,229,255,.15);border-radius:20px;padding:40px;margin-top:48px;position:relative;overflow:hidden}
|
||||||
.faq-item summary::after{content:'+';font-size:24px;color:var(--cyan);transition:transform .2s}
|
.demo-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink))}
|
||||||
.faq-item[open] summary::after{transform:rotate(45deg)}
|
.demo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
|
||||||
.faq-item p{margin-top:12px;color:var(--gray-500);line-height:1.6}
|
.demo-header h3{font-size:20px;font-weight:700}
|
||||||
.cta-section{background:var(--ink);color:var(--white);text-align:center;padding:100px 24px}
|
.demo-tabs{display:flex;gap:8px}
|
||||||
.cta-section h2{font-size:40px;font-weight:800;margin-bottom:16px}
|
.demo-tab{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid transparent;color:var(--gray)}
|
||||||
.cta-section p{color:#9aa3b2;font-size:19px;max-width:520px;margin:0 auto 32px}
|
.demo-tab.active{background:rgba(0,229,255,.12);border-color:var(--cyan);color:var(--cyan)}
|
||||||
.form-inline{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:480px;margin:0 auto}
|
.demo-grid{display:grid;grid-template-columns:1fr 320px;gap:28px}
|
||||||
.form-inline input{flex:1;min-width:220px;padding:16px 20px;border-radius:8px;border:2px solid transparent;font-size:16px;outline:none}
|
.client-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:24px}
|
||||||
.form-inline input:focus{border-color:var(--cyan)}
|
.client-info{display:flex;align-items:center;gap:16px;margin-bottom:20px}
|
||||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
|
.client-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-size:22px}
|
||||||
.reveal.in{opacity:1;transform:none}
|
.client-name{font-weight:700;font-size:17px}
|
||||||
|
.client-id{font-size:13px;color:var(--gray)}
|
||||||
|
.purchases-title{font-size:13px;color:var(--gray);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
|
||||||
|
.purchase-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);border-radius:10px;margin-bottom:8px;transition:all .2s}
|
||||||
|
.purchase-item:hover{background:rgba(255,255,255,.05)}
|
||||||
|
.purchase-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,229,255,.08)}
|
||||||
|
.purchase-name{font-size:14px;font-weight:600}
|
||||||
|
.purchase-date{font-size:12px;color:var(--gray);margin-left:auto}
|
||||||
|
.recommendations-panel{background:rgba(0,229,255,.04);border:1px solid rgba(0,229,255,.12);border-radius:14px;padding:24px}
|
||||||
|
.rec-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cyan);margin-bottom:16px;font-weight:600}
|
||||||
|
.rec-item{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:10px;border-left:3px solid var(--green);transition:all .2s}
|
||||||
|
.rec-item:hover{background:rgba(255,255,255,.07);transform:translateX(4px)}
|
||||||
|
.rec-icon{font-size:22px}
|
||||||
|
.rec-info{flex:1}
|
||||||
|
.rec-name{font-size:14px;font-weight:600}
|
||||||
|
.rec-reason{font-size:12px;color:var(--gray);margin-top:2px}
|
||||||
|
.rec-score{font-size:13px;font-weight:700;color:var(--green);background:rgba(0,230,118,.1);padding:4px 10px;border-radius:6px}
|
||||||
|
|
||||||
|
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
|
||||||
|
.feature-card{background:var(--ink2);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:32px;transition:all .3s ease}
|
||||||
|
.feature-card:hover{border-color:rgba(180,74,255,.4);transform:translateY(-4px)}
|
||||||
|
.feature-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px}
|
||||||
|
.feature-icon.cyan-bg{background:rgba(0,229,255,.1)}
|
||||||
|
.feature-icon.purple-bg{background:rgba(180,74,255,.1)}
|
||||||
|
.feature-icon.pink-bg{background:rgba(255,61,138,.1)}
|
||||||
|
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
|
||||||
|
.feature-card p{font-size:14px;color:var(--gray);line-height:1.6}
|
||||||
|
|
||||||
|
.tech-stack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
|
||||||
|
.tech-tag{padding:10px 22px;background:var(--ink2);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:14px;font-weight:600;color:var(--gray-light);transition:all .2s}
|
||||||
|
.tech-tag:hover{border-color:var(--cyan);color:var(--cyan)}
|
||||||
|
|
||||||
|
.cta-section{text-align:center;padding:100px 24px;position:relative}
|
||||||
|
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,229,255,.08) 0%,transparent 70%)}
|
||||||
|
.cta-content{position:relative;z-index:1;max-width:650px;margin:0 auto}
|
||||||
|
.cta-section h2{font-size:44px;font-weight:800;margin-bottom:20px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));background-clip:text}
|
||||||
|
.cta-section p{font-size:18px;color:var(--gray-light);margin-bottom:36px}
|
||||||
|
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||||||
|
|
||||||
|
.footer{text-align:center;padding:40px 24px;border-top:1px solid rgba(255,255,255,.05);color:var(--gray);font-size:14px}
|
||||||
|
|
||||||
|
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
|
||||||
|
.reveal{opacity:0;animation:fadeInUp .7s ease forwards}
|
||||||
|
.reveal.d1{animation-delay:.1s}.reveal.d2{animation-delay:.2s}.reveal.d3{animation-delay:.3s}.reveal.d4{animation-delay:.4s}
|
||||||
|
|
||||||
|
@media (max-width:900px){
|
||||||
|
.how-it-works{grid-template-columns:repeat(2,1fr)}
|
||||||
|
.step-arrow{display:none}
|
||||||
|
.demo-grid{grid-template-columns:1fr}
|
||||||
|
.features-grid{grid-template-columns:1fr 1fr}
|
||||||
|
.hero h1{font-size:42px}
|
||||||
|
.section h2{font-size:32px}
|
||||||
|
}
|
||||||
@media (max-width:640px){
|
@media (max-width:640px){
|
||||||
.hero h1{font-size:34px}.hero{padding:60px 20px}
|
.hero h1{font-size:34px}.hero p{font-size:17px}
|
||||||
.section h2{font-size:28px}.section{padding:56px 20px}
|
.section h2{font-size:28px}.section{padding:56px 0}
|
||||||
.cta-section h2{font-size:28px}.cta-section{padding:64px 20px}
|
.how-it-works{grid-template-columns:1fr}
|
||||||
|
.features-grid{grid-template-columns:1fr}
|
||||||
.container{padding:48px 20px}
|
.container{padding:48px 20px}
|
||||||
|
.cta-section h2{font-size:30px}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero"><div class="container">
|
||||||
<div class="container">
|
<div class="hero-content reveal">
|
||||||
<h1><span>FinPlan AI</span><br>Твой личный финансовый помощник</h1>
|
<div class="hero-badge">AI-POWERED RECOMMENDATIONS</div>
|
||||||
<p>ИИ-агент, который анализирует расходы, строит бюджеты, помогает копить и инвестировать — без сложных таблиц и банковских приложений.</p>
|
<h1>Умные рекомендации<br>для каждого клиента</h1>
|
||||||
<a href="#cta" class="btn">Попробовать бесплатно</a>
|
<p>ИИ-агент анализирует историю покупок из базы данных и персонально подбирает товары, которые ваш клиент захочет купить следующим.</p>
|
||||||
|
<div style="display:flex;gap:14px;flex-wrap:wrap">
|
||||||
|
<a href="#demo" class="btn">Смотреть демо ⚡</a>
|
||||||
|
<a href="#features" class="btn btn-outline">Как это работает</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div></section>
|
||||||
|
|
||||||
<section class="section reveal">
|
<section id="how" class="section"><div class="container">
|
||||||
<div class="container">
|
<h2 class="reveal">Как это работает</h2>
|
||||||
<h2>Что умеет FinPlan AI</h2>
|
<p class="section-sub reveal d1">Четыре шага от сырых данных до персональных рекомендаций</p>
|
||||||
<p class="subtitle">Всё, что нужно для контроля финансов — в одном месте</p>
|
<div class="how-it-works">
|
||||||
<div class="features">
|
<div class="step reveal d1"><div class="step-num">1</div><h3>Сбор данных</h3><p>ИИ подключается к БД и загружает историю покупок каждого клиента</p><span class="step-arrow">→</span></div>
|
||||||
<div class="feature-card">
|
<div class="step reveal d2"><div class="step-num">2</div><h3>Анализ паттернов</h3><p>Машинное обучение выявляет предпочтения и поведение покупателей</p><span class="step-arrow">→</span></div>
|
||||||
<span class="icon">📊</span>
|
<div class="step reveal d3"><div class="step-num">3</div><h3>Генерация</h3><p>Нейросеть подбирает релевантные товары с оценкой уверенности</p><span class="step-arrow">→</span></div>
|
||||||
<h3>Анализ расходов</h3>
|
<div class="step reveal d4"><div class="step-num">4</div><h3>Результат</h3><p>Персональная подборка готова к показу клиенту или интеграции</p></div>
|
||||||
<p>Загрузи выписку или расскажи голосом — ИИ категоризирует каждый расход и покажет куда уходят деньги.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-card">
|
</div></section>
|
||||||
<span class="icon">🎯</span>
|
|
||||||
<h3>Бюджет на месяц</h3>
|
|
||||||
<p>Автоматически рассчитает лимиты по категориям и предупредит, когда приближаешься к границе.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<span class="icon">📈</span>
|
|
||||||
<h3>План накоплений</h3>
|
|
||||||
<p>Построит персональный план по целям: отпуск, машина, подушка безопасности — с реальными сроками.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<span class="icon">🤖</span>
|
|
||||||
<h3>Умные советы</h3>
|
|
||||||
<p>Персональные рекомендации на основе твоих данных: где сэкономить, как оптимизировать, во что вложить.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="how section reveal">
|
<section id="demo" class="section" style="background:var(--ink2)"><div class="container">
|
||||||
<div class="container">
|
<h2 class="reveal">Демонстрация</h2>
|
||||||
<h2>Как это работает</h2>
|
<p class="section-sub reveal d1">Выберите клиента и посмотрите, какие товары порекомендует ИИ</p>
|
||||||
<p class="subtitle">Три простых шага — и ты контролируешь свои финансы</p>
|
<div class="demo-panel reveal d2">
|
||||||
<div class="steps">
|
<div class="demo-header">
|
||||||
<div class="step">
|
<h3>🧠 Панель рекомендаций</h3>
|
||||||
<div class="step-num">1</div>
|
<div class="demo-tabs">
|
||||||
<h3>Расскажи о себе</h3>
|
<div class="demo-tab active" onclick="switchClient(0)">Клиент #1</div>
|
||||||
<p>Ответь на несколько вопросов о доходах, расходах и финансовых целях — это займёт 2 минуты.</p>
|
<div class="demo-tab" onclick="switchClient(1)">Клиент #2</div>
|
||||||
|
<div class="demo-tab" onclick="switchClient(2)">Клиент #3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="step">
|
|
||||||
<div class="step-num">2</div>
|
|
||||||
<h3>ИИ проанализирует</h3>
|
|
||||||
<p>Агент построит твой финансовый профиль, найдёт точки роста и составит персональный план.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="step">
|
<div class="demo-grid">
|
||||||
<div class="step-num">3</div>
|
<div class="client-card">
|
||||||
<h3>Получай рекомендации</h3>
|
<div class="client-info">
|
||||||
<p>Еженедельные отчёты, советы в чате и уведомления — чтобы ты всегда был в курсе.</p>
|
<div class="client-avatar" id="avatar">👩</div>
|
||||||
|
<div><div class="client-name" id="clientName">Анна Козлова</div><div class="client-id">ID: #4821 · Покупок за месяц: 12</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="purchases-title">📦 Последние покупки</div>
|
||||||
|
<div id="purchaseList"></div>
|
||||||
|
</div>
|
||||||
|
<div class="recommendations-panel">
|
||||||
|
<div class="rec-label"><span>✨</span> Рекомендовано ИИ</div>
|
||||||
|
<div id="recList"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div></section>
|
||||||
|
|
||||||
<section class="section reveal">
|
<section id="features" class="section"><div class="container">
|
||||||
<div class="container">
|
<h2 class="reveal">Возможности системы</h2>
|
||||||
<h2>Частые вопросы</h2>
|
<p class="section-sub reveal d1">Что умеет наш ИИ-агент рекомендаций</p>
|
||||||
<div class="faq">
|
<div class="features-grid">
|
||||||
<details class="faq-item">
|
<div class="feature-card reveal d1"><div class="feature-icon cyan-bg">🔗</div><h3>Интеграция с любой БД</h3><p>Подключается к PostgreSQL, MySQL, MongoDB и другим базам через настроенный коннектор</p></div>
|
||||||
<summary>Безопасны ли мои финансовые данные?</summary>
|
<div class="feature-card reveal d2"><div class="feature-icon purple-bg">⚡</div><h3>Реальное время</h3><p>Обновляет рекомендации мгновенно после каждой новой покупки без задержек</p></div>
|
||||||
<p>Да. Все данные шифруются, хранятся на защищённых серверах и никогда не передаются третьим лицам. Ты можешь удалить все данные одним кликом в любой момент.</p>
|
<div class="feature-card reveal d3"><div class="feature-icon pink-bg">🎯</div><h3>Персонализация</h3><p>Учитывает историю, сезонность, акции и индивидуальные предпочтения каждого</p></div>
|
||||||
</details>
|
<div class="feature-card reveal d1"><div class="feature-icon purple-bg">📊</div><h3>Аналитика</h3><p>Dashboard с метриками CTR, конверсии и среднего чека по рекомендациям</p></div>
|
||||||
<details class="faq-item">
|
<div class="feature-card reveal d2"><div class="feature-icon cyan-bg">🔄</div><h3>Коллаборативная фильтрация</h3><p>«Покупают вместе с вами» — находит похожих пользователей и их выбор</p></div>
|
||||||
<summary>Нужно ли подключать банковские счета?</summary>
|
<div class="feature-card reveal d3"><div class="feature-icon pink-bg">🧪</div><h3>A/B тестирование</h3><p>Сравнивайте алгоритмы и автоматически выбирайте лучший для сегмента</p></div>
|
||||||
<p>Нет. FinPlan AI работает на основе данных, которые ты предоставляешь сам — вручную или через загрузку выписки. Никаких привязок к картам и счетам.</p>
|
|
||||||
</details>
|
|
||||||
<details class="faq-item">
|
|
||||||
<summary>Сколько стоит использование?</summary>
|
|
||||||
<p>Базовый функционал — бесплатный. Расширенный анализ инвестиций и персональная стратегия доступны по подписке. Первые 14 дней — полностью бесплатно для всех функций.</p>
|
|
||||||
</details>
|
|
||||||
<details class="faq-item">
|
|
||||||
<summary>Подходит ли для начинающих?</summary>
|
|
||||||
<p>Именно для вас! FinPlan AI объясняет всё простым языком, без финансового жаргона. Агент адаптируется под твой уровень знаний.</p>
|
|
||||||
</details>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tech-stack">
|
||||||
|
<span class="tech-tag">Python</span>
|
||||||
|
<span class="tech-tag">TensorFlow</span>
|
||||||
|
<span class="tech-tag">PostgreSQL</span>
|
||||||
|
<span class="tech-tag">FastAPI</span>
|
||||||
|
<span class="tech-tag">Redis</span>
|
||||||
|
<span class="tech-tag">Docker</span>
|
||||||
|
<span class="tech-tag">scikit-learn</span>
|
||||||
|
<span class="tech-tag">Pandas</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div></section>
|
||||||
|
|
||||||
<section id="cta" class="cta-section reveal">
|
<section class="cta-section"><div class="cta-content">
|
||||||
<div class="container">
|
<h2 class="reveal">Готов построить<br>свою RecSys?</h2>
|
||||||
<h2>Начни управлять финансами уже сегодня</h2>
|
<p class="reveal d1">Учебный проект демонстрирует полный цикл: от архитектуры до работающего прототипа</p>
|
||||||
<p>Оставь email — пришлём приглашение первым и дадим 14 дней полного доступа бесплатно.</p>
|
<div class="cta-buttons reveal d2">
|
||||||
<form action="https://formsubmit.co/your@email.com" method="POST" class="form-inline">
|
<a href="#demo" class="btn">Попробовать демо 🚀</a>
|
||||||
<input type="email" name="email" placeholder="твой@email.com" required>
|
<a href="#how" class="btn btn-outline">Разобрать архитектуру</a>
|
||||||
<button type="submit" class="btn btn-green">Получить доступ</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div></section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<p>AI RecSys — Учебный проект · 2026</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var io=new IntersectionObserver(function(entries){
|
var clients=[
|
||||||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
{name:'Анна Козлова',id:'#4821',purchases:12,avatar:'👩',
|
||||||
},{threshold:.15});
|
buys:[{name:'Беспроводные наушники Sony',icon:'🎧',date:'12 июл'},{name:'Чехол для телефона',icon:'📱',date:'10 июл'},{name:'USB-C хаб 7-in-1',icon:'🔌',date:'8 июл'},{name:'Зарядка беспроводная',icon:'🔋',date:'5 июл'}],
|
||||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
recs:[{name:'Планшет Samsung Tab S9',icon:'📱',reason:'Купила аксессуары для гаджетов',score:'94%'},{name:'Smart-часы Galaxy Watch',icon:'⌚',reason:'Комplement к электронике',score:'89%'},{name:'Портативная колонка JBL',icon:'🔊',reason:'После наушников — аудио',score:'85%'}]},
|
||||||
|
{name:'Дмитрий Волков',id:'#3156',purchases:8,avatar:'👨',
|
||||||
|
buys:[{name:'Велосипед горный Trek',icon:'🚴',date:'11 июл'},{name:'Шлем защитный',icon:'⛑️',date:'11 июл'},{name:'Велокомпьютер GPS',icon:'📟',date:'9 июл'},{name:'Фонарь передний LED',icon:'💡',date:'7 июл'},{name:'Велоодежда набор',icon:'👕',date:'4 июл'}],
|
||||||
|
recs:[{name:'Тренажёр домашний',icon:'🏋️',reason:'Интерес к спорту и фитнесу',score:'97%'},{name:'Беговые дорожки Xiaomi',icon:'🏃',reason:'Активный образ жизни',score:'91%'},{name:'Гиря наборная 20кг',icon:'🏋️',reason:'Cross-fit интерес',score:'86%'}]},
|
||||||
|
{name:'Елена Миронова',id:'#7203',purchases:23,avatar:'👩🦰',
|
||||||
|
buys:[{name:'Крем увлажняющий La Roche',icon:'🧴',date:'13 июл'},{name:'Патчи под глаза',icon:'👁️',date:'11 июл'},{name:'Сыворотка витамин C',icon:'✨',date:'9 июл'},{name:'Солнцезащитный SPF50',icon:'☀️',date:'6 июл'}],
|
||||||
|
recs:[{name:'Набор масок для лица',icon:'🎭',reason:'Уходовая косметика — фанат',score:'96%'},{name:'Скраб очищающий',icon:'🧽',reason:'Расширение линии ухода',score:'92%'},{name:'Ароматерапия диффузор',icon:'🕯️',reason:'Wellness-сегмент',score:'78%'}]}
|
||||||
|
];
|
||||||
|
|
||||||
|
function renderClient(i){
|
||||||
|
var c=clients[i];
|
||||||
|
document.getElementById('avatar').textContent=c.avatar;
|
||||||
|
document.getElementById('clientName').textContent=c.name;
|
||||||
|
document.querySelectorAll('.client-id')[0].textContent='ID: '+c.id+' · Покупок за месяц: '+c.purchases;
|
||||||
|
document.getElementById('purchaseList').innerHTML=c.buys.map(function(b){return '<div class="purchase-item"><div class="purchase-icon">'+b.icon+'</div><span class="purchase-name">'+b.name+'</span><span class="purchase-date">'+b.date+'</span></div>'}).join('');
|
||||||
|
document.getElementById('recList').innerHTML=c.recs.map(function(r){return '<div class="rec-item"><span class="rec-icon">'+r.icon+'</span><div class="rec-info"><div class="rec-name">'+r.name+'</div><div class="rec-reason">'+r.reason+'</div></div><span class="rec-score">'+r.score+'</span></div>'}).join('');
|
||||||
|
document.querySelectorAll('.demo-tab').forEach(function(t,n){t.classList.toggle('active',n===i)});
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchClient(i){
|
||||||
|
renderClient(i);
|
||||||
|
var panel=document.querySelector('.demo-panel');
|
||||||
|
panel.style.opacity='0';panel.style.transform='translateY(8px)';
|
||||||
|
setTimeout(function(){panel.style.transition='all .3s ease';panel.style.opacity='1';panel.style.transform='none'},100);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderClient(0);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user