forked from admin/zeropost-tool
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)
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user