feat: registration + public landing page

/register: полноценная страница регистрации с валидацией
  email, пароль (6+ символов), подтверждение, имя (optional)
  После регистрации → /onboarding (создать первый канал)
  50 кредитов при регистрации
/landing: публичный лендинг для незалогиненных
  Hero, Features (6), How it works (3 шага), Pricing (4 тарифа), CTA, Footer
page.js: незалогиненный → redirect /landing (не /login)
Header: Settings2 в импорт, PublicHeader экспорт для лендинга
This commit is contained in:
Ник (Claude)
2026-06-13 15:05:46 +03:00
parent 789cfe10db
commit a3c1fa0c65
4 changed files with 340 additions and 31 deletions
+173
View File
@@ -0,0 +1,173 @@
import Link from 'next/link';
import { Sparkles, Zap, Calendar, BarChart3, MessageCircle, Globe, ArrowRight, Check } from 'lucide-react';
const FEATURES = [
{ icon: Zap, title: 'AI генерация постов', desc: 'Claude пишет посты под твою нишу и стиль. Тексты, которые хочется читать.' },
{ icon: Calendar, title: 'Отложенная публикация', desc: 'Планируй контент на неделю вперёд. Автопостинг в нужное время.' },
{ icon: Globe, title: 'Telegram, VK, MAX', desc: 'Один интерфейс для всех платформ. Публикуй везде одновременно.' },
{ icon: Sparkles, title: 'Авто-черновики', desc: 'Каждое утро 3 новых поста на проверку. Ты только одобряешь лучшее.' },
{ icon: BarChart3, title: 'Аналитика канала', desc: 'Видишь что работает. Охват, реакции, лучшее время для публикации.' },
{ icon: MessageCircle, title: 'Inbox и AI-ответы', desc: 'Комментарии приходят в одно место. AI предлагает ответы за тебя.' },
];
const PLANS = [
{
name: 'Free', price: 0, credits: 50, channels: 1,
features: ['1 канал', '50 кредитов/мес', 'AI генерация постов', 'Планировщик'],
cta: 'Начать бесплатно', ctaHref: '/register', accent: false,
},
{
name: 'Starter', price: 490, credits: 500, channels: 2,
features: ['2 канала', '500 кредитов/мес', 'Авто-черновики', 'Аналитика', 'Inbox'],
cta: 'Попробовать', ctaHref: '/register', accent: true,
},
{
name: 'Pro', price: 1490, credits: 2000, channels: 5,
features: ['5 каналов', '2000 кредитов/мес', 'Все платформы', 'Хештеги AI', 'Опросы TG'],
cta: 'Выбрать Pro', ctaHref: '/register', accent: false,
},
{
name: 'Business', price: 3990, credits: -1, channels: -1,
features: ['Безлимит каналов', 'Безлимит кредитов', 'Приоритетная поддержка', 'API доступ'],
cta: 'Связаться', ctaHref: 'mailto:hello@zeropost.ru', accent: false,
},
];
export default function LandingPage() {
return (
<div className="min-h-screen bg-background text-text">
{/* Nav */}
<nav className="border-b border-border sticky top-0 bg-background/90 backdrop-blur z-50">
<div className="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 font-bold text-lg">
<Sparkles className="w-5 h-5 text-accent" /> ZeroPost
</Link>
<div className="flex items-center gap-3">
<Link href="/login" className="btn-ghost text-sm px-4 py-2">Войти</Link>
<Link href="/register" className="btn-primary text-sm px-4 py-2">Попробовать бесплатно</Link>
</div>
</div>
</nav>
{/* Hero */}
<section className="max-w-4xl mx-auto px-4 sm:px-6 pt-20 pb-16 text-center">
<div className="inline-flex items-center gap-2 text-xs text-accent bg-accent/10 px-3 py-1.5 rounded-full mb-6">
<Sparkles className="w-3.5 h-3.5" /> AI-контент для Telegram и VK
</div>
<h1 className="text-4xl sm:text-5xl font-bold leading-tight mb-5">
Ведите канал на автопилоте.<br />
<span className="text-accent">AI пишет, ты одобряешь.</span>
</h1>
<p className="text-gray-400 text-lg max-w-2xl mx-auto mb-8">
ZeroPost генерирует посты для Telegram и VK, планирует публикации и отвечает на комментарии.
Тратьте 10 минут в день вместо 2 часов.
</p>
<div className="flex flex-wrap items-center justify-center gap-3">
<Link href="/register"
className="btn-primary px-6 py-3 text-base flex items-center gap-2">
Начать бесплатно <ArrowRight className="w-4 h-4" />
</Link>
<Link href="/login" className="btn-ghost px-6 py-3 text-base">
Уже есть аккаунт
</Link>
</div>
<p className="text-xs text-gray-500 mt-4">50 кредитов бесплатно · Без карты</p>
</section>
{/* Features */}
<section className="max-w-6xl mx-auto px-4 sm:px-6 pb-20">
<h2 className="text-2xl font-bold text-center mb-10">Что умеет ZeroPost</h2>
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
{FEATURES.map(f => (
<div key={f.title} className="card p-5">
<f.icon className="w-8 h-8 text-accent mb-3" />
<h3 className="font-semibold mb-2">{f.title}</h3>
<p className="text-sm text-gray-400 leading-relaxed">{f.desc}</p>
</div>
))}
</div>
</section>
{/* How it works */}
<section className="max-w-4xl mx-auto px-4 sm:px-6 pb-20">
<h2 className="text-2xl font-bold text-center mb-10">Как это работает</h2>
<div className="grid gap-6 sm:grid-cols-3">
{[
{ step: '1', title: 'Добавь канал', desc: 'Подключи Telegram, VK или MAX. Укажи нишу и стиль.' },
{ step: '2', title: 'AI генерирует', desc: 'Каждое утро — свежие черновики. Редактируй, одобряй.' },
{ step: '3', title: 'Публикуй в один клик', desc: 'Запланируй или публикуй сейчас. Всё само.' },
].map(s => (
<div key={s.step} className="text-center">
<div className="w-10 h-10 rounded-full bg-accent/10 text-accent font-bold text-lg flex items-center justify-center mx-auto mb-3">
{s.step}
</div>
<h3 className="font-semibold mb-2">{s.title}</h3>
<p className="text-sm text-gray-400">{s.desc}</p>
</div>
))}
</div>
</section>
{/* Pricing */}
<section className="max-w-6xl mx-auto px-4 sm:px-6 pb-20">
<h2 className="text-2xl font-bold text-center mb-2">Тарифы</h2>
<p className="text-gray-400 text-center text-sm mb-10">Начни бесплатно, масштабируй по мере роста</p>
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{PLANS.map(plan => (
<div key={plan.name} className={`card p-5 flex flex-col ${plan.accent ? 'border-accent bg-accent/5' : ''}`}>
{plan.accent && (
<div className="text-xs text-accent font-medium mb-2"> Популярный</div>
)}
<div className="font-bold text-lg">{plan.name}</div>
<div className="text-3xl font-bold mt-1 mb-1">
{plan.price === 0 ? <span className="text-accent">0</span> : `${plan.price}`}
{plan.price > 0 && <span className="text-sm font-normal text-gray-500">/мес</span>}
</div>
<div className="text-xs text-gray-500 mb-4">
{plan.credits === -1 ? '∞ кредитов' : `${plan.credits} кредитов/мес`}
</div>
<ul className="space-y-2 flex-1 mb-5">
{plan.features.map(f => (
<li key={f} className="text-sm text-gray-300 flex items-center gap-2">
<Check className="w-3.5 h-3.5 text-green-400 shrink-0" /> {f}
</li>
))}
</ul>
<Link href={plan.ctaHref}
className={`py-2.5 px-4 rounded-lg text-sm font-medium text-center transition-colors ${
plan.accent ? 'btn-primary' : 'btn-ghost border border-border'
}`}>
{plan.cta}
</Link>
</div>
))}
</div>
</section>
{/* CTA */}
<section className="max-w-2xl mx-auto px-4 sm:px-6 pb-20 text-center">
<h2 className="text-3xl font-bold mb-4">Готовы попробовать?</h2>
<p className="text-gray-400 mb-6">50 бесплатных кредитов. Без карты. Настройка за 5 минут.</p>
<Link href="/register" className="btn-primary px-8 py-3 text-base inline-flex items-center gap-2">
Создать аккаунт <ArrowRight className="w-4 h-4" />
</Link>
</section>
{/* Footer */}
<footer className="border-t border-border py-8">
<div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-wrap items-center justify-between gap-4 text-sm text-gray-500">
<div className="flex items-center gap-2">
<Sparkles className="w-4 h-4 text-accent" />
<span className="font-medium text-gray-300">ZeroPost</span>
<span>· AI-автоматизация контента</span>
</div>
<div className="flex gap-4">
<Link href="/login" className="hover:text-gray-300">Войти</Link>
<Link href="/register" className="hover:text-gray-300">Регистрация</Link>
<a href="mailto:hello@zeropost.ru" className="hover:text-gray-300">Контакты</a>
</div>
</div>
</footer>
</div>
);
}
+27 -30
View File
@@ -15,7 +15,7 @@ const GOAL_LABELS = {
export default async function HomePage() {
const user = await requireUser();
if (!user) redirect('/login');
if (!user) redirect('/landing');
let channels = [];
try {
@@ -43,50 +43,47 @@ export default async function HomePage() {
{channels.length === 0 ? (
<div className="card p-12 text-center">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-surface2 mb-4">
<MessageSquare className="w-7 h-7 text-gray-500" />
</div>
<h2 className="text-lg font-semibold mb-1">Пока пусто</h2>
<p className="text-sm text-gray-500 mb-6">
Создай первый канал, чтобы начать генерировать посты
</p>
<MessageSquare className="w-12 h-12 mx-auto mb-4 text-accent opacity-50" />
<h2 className="text-xl font-semibold mb-2">Нет каналов</h2>
<p className="text-gray-500 mb-6">Добавь первый канал чтобы начать генерировать контент</p>
<Link href="/channels/new" className="btn-primary">
<Plus className="w-4 h-4" />
Создать канал
Создать первый канал
</Link>
</div>
) : (
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{channels.map(ch => (
<Link
key={ch.id}
href={`/channels/${ch.id}`}
className="card p-5 hover:border-accent/40 transition-colors group"
>
<Link key={ch.id} href={`/channels/${ch.id}`} className="card p-5 hover:border-accent/40 transition-colors group">
<div className="flex items-start justify-between mb-3">
<h3 className="font-semibold group-hover:text-accent transition-colors">
{ch.name}
</h3>
<span className="text-xs px-2 py-0.5 rounded-full bg-surface2 text-gray-400">
{(ch.goal || '').split(',').map(g => GOAL_LABELS[g.trim()] || g.trim()).join(' · ')}
<div>
<h3 className="font-semibold group-hover:text-accent transition-colors">{ch.name}</h3>
{ch.tg_username && (
<span className="text-xs text-gray-500">@{ch.tg_username}</span>
)}
</div>
<span className={`text-xs px-2 py-0.5 rounded-full ${
ch.platform === 'telegram' ? 'bg-blue-500/20 text-blue-400' :
ch.platform === 'vk' ? 'bg-blue-600/20 text-blue-500' :
'bg-purple-500/20 text-purple-400'
}`}>
{ch.platform || 'telegram'}
</span>
</div>
{ch.niche && (
<p className="text-xs text-gray-500 line-clamp-2 mb-3">
{ch.niche}
</p>
<p className="text-sm text-gray-400 mb-3 line-clamp-2">{ch.niche}</p>
)}
<div className="flex items-center gap-4 text-xs text-gray-500">
{ch.audience && (
<div className="flex items-center gap-3 text-xs text-gray-500">
{ch.goal && (
<span className="flex items-center gap-1">
<Users className="w-3 h-3" />
Есть ЦА
<Target className="w-3 h-3" />
{GOAL_LABELS[ch.goal] || ch.goal}
</span>
)}
{ch.style?.example_posts?.length > 0 && (
{ch.language && (
<span className="flex items-center gap-1">
<Target className="w-3 h-3 text-accent" />
{ch.style.example_posts.length} пример{ch.style.example_posts.length === 1 ? '' : 'а'}
<Users className="w-3 h-3" />
{ch.language.toUpperCase()}
</span>
)}
</div>
+121
View File
@@ -0,0 +1,121 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Loader2, Eye, EyeOff, Sparkles } from 'lucide-react';
export default function RegisterPage() {
const router = useRouter();
const [email, setEmail] = useState('');
const [pass, setPass] = useState('');
const [pass2, setPass2] = useState('');
const [name, setName] = useState('');
const [show, setShow] = useState(false);
const [busy, setBusy] = useState(false);
const [error, setError] = useState('');
async function submit() {
if (!email.trim() || !pass) { setError('Заполните email и пароль'); return; }
if (pass.length < 6) { setError('Пароль минимум 6 символов'); return; }
if (pass !== pass2) { setError('Пароли не совпадают'); return; }
setBusy(true); setError('');
try {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: email.trim(), password: pass, name: name.trim() || undefined, mode: 'register' }),
}).then(r => r.json());
if (!res.ok) { setError(res.error || 'Ошибка'); setBusy(false); return; }
router.push(res.isNew ? '/onboarding' : '/');
} catch { setError('Ошибка соединения'); setBusy(false); }
}
return (
<main className="min-h-screen flex items-center justify-center p-4 bg-background">
{/* Background glow */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-accent/5 blur-3xl" />
</div>
<div className="w-full max-w-md relative">
{/* Logo */}
<div className="text-center mb-8">
<Link href="/" className="inline-flex items-center gap-2 text-2xl font-bold">
<Sparkles className="w-7 h-7 text-accent" />
ZeroPost
</Link>
<p className="text-gray-400 text-sm mt-2">Создайте аккаунт это бесплатно</p>
</div>
<div className="card p-6 sm:p-8 space-y-4">
<h1 className="font-bold text-xl text-center">Регистрация</h1>
<div>
<label className="label mb-1.5">Имя <span className="text-gray-500 text-xs">(необязательно)</span></label>
<input value={name} onChange={e => setName(e.target.value)}
placeholder="Алексей"
className="input w-full" autoFocus />
</div>
<div>
<label className="label mb-1.5">Email</label>
<input type="email" value={email} onChange={e => setEmail(e.target.value)}
onKeyDown={e => e.key === 'Enter' && submit()}
placeholder="you@example.com"
className="input w-full" />
</div>
<div>
<label className="label mb-1.5">Пароль</label>
<div className="relative">
<input type={show ? 'text' : 'password'}
value={pass} onChange={e => setPass(e.target.value)}
placeholder="Минимум 6 символов"
className="input w-full pr-10" />
<button onClick={() => setShow(s => !s)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
{show ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</div>
</div>
<div>
<label className="label mb-1.5">Повторите пароль</label>
<input type="password" value={pass2}
onChange={e => setPass2(e.target.value)}
onKeyDown={e => e.key === 'Enter' && submit()}
placeholder="Ещё раз"
className="input w-full" />
</div>
{error && <p className="text-red-400 text-sm">{error}</p>}
<button onClick={submit} disabled={busy}
className="btn-primary w-full py-3 text-base font-medium flex items-center justify-center gap-2">
{busy ? <Loader2 className="w-5 h-5 animate-spin" /> : <><Sparkles className="w-4 h-4" />Зарегистрироваться</>}
</button>
<div className="flex items-center gap-3">
<div className="flex-1 h-px bg-border" />
<span className="text-xs text-gray-500">или</span>
<div className="flex-1 h-px bg-border" />
</div>
<Link href="/login" className="btn-ghost w-full py-2.5 text-center text-sm">
Уже есть аккаунт? Войти
</Link>
</div>
{/* Бонус */}
<div className="mt-4 text-center text-xs text-gray-500">
🎁 При регистрации <span className="text-accent">50 бесплатных кредитов</span>
</div>
<p className="text-center text-xs text-gray-600 mt-3">
Регистрируясь, вы принимаете{' '}
<Link href="/terms" className="hover:text-gray-400">условия использования</Link>
</p>
</div>
</main>
);
}