Розробка лендинга крипто-проекту
Лендинг крипто-проекту — це не звичайний корпоративний сайт з анімаціями. Аудиторія технічно грамотна, читає код на GitHub до того як нажати Connect Wallet. Довіра тут будується через прозорість: посилання на аудити, адреси контрактів, tokenomics з реальними цифрами — не «revolutionary tokenomics», а конкретна таблиця supply/vesting. Скам-проекти навчили ринок ігнорувати красиві візуали без substance.
Технічний стек
Next.js 14 App Router — статична генерація для швидкості, SEO для пошукових систем. Крипто-проекти часто ігнорують SEO та потім дивуються, чому органіка не росте.
Tailwind CSS + Framer Motion — стандарт для крипто UI. Framer Motion для scroll-triggered анімацій, які очікує аудиторія.
wagmi + viem — якщо на лендингу є інтерактив (mint, connect wallet, claim airdrop).
Для чисто інформаційного лендинга без Web3 функціональності: Next.js + Tailwind + shadcn/ui, статичний експорт, деплой на Vercel або Cloudflare Pages.
Структура та контент
Стандартна структура, яка працює:
- Hero — одне речення що це, CTA (Join Waitlist / Launch App), ключові метрики (TVL, users, chains)
- Problem/Solution — конкретна технічна проблема, яку вирішує протокол
- How it works — 3-4 кроки, діаграма архітектури, не маркетинг а механіка
- Tokenomics — таблиця distribution, vesting schedule, utility токена
- Security — посилання на audit reports (PDF), bug bounty програма
- Team/Backers — реальні імена або відомі псевдоніми з історією, VC логотипи
- Roadmap — чесний timeline, не «Q3 2025 - World Domination»
- Community — Discord, Twitter/X, Telegram
Продуктивність та Core Web Vitals
Крипто лендинги часто грузяться 5+ секунд через неоптимізовані 3D анімації та важкі бібліотеки. Google PageSpeed < 50 — реальна втрата трафіку.
Критичні оптимізації:
- Зображення у WebP/AVIF через
next/image - Three.js або Spline 3D сцени — lazy load, тільки після основного контенту
- Web3 бібліотеки (wagmi, viem) — dynamic import тільки якщо потрібен wallet connect
- Шрифти —
font-display: swap, preload критичних начертань
// Ленива загрузка важкого 3D компонента
const HeroScene = dynamic(() => import('./HeroScene'), {
ssr: false,
loading: () => <div className="h-[600px] bg-gradient-to-b from-black to-purple-950" />
})
Tokenomics візуалізація
Pie chart з recharts або d3 для distribution. Важливіше за chart — таблиця з числами:
const tokenomics = [
{ category: 'Community & Ecosystem', percent: 40, vesting: '4y linear, 6m cliff' },
{ category: 'Team & Advisors', percent: 20, vesting: '4y linear, 1y cliff' },
{ category: 'Investors', percent: 15, vesting: '2y linear, 6m cliff' },
{ category: 'Treasury', percent: 15, vesting: 'Governance controlled' },
{ category: 'Public Sale', percent: 10, vesting: '25% TGE, 9m linear' },
]
Інвесторів цікавить vesting schedule в першу чергу — великий team allocation без cliff це червоний прапорець.
On-chain дані в реальному часі
Для відображення TVL, total users, transactions — The Graph subgraph або DeFiLlama API:
async function getTVL(protocol: string) {
const res = await fetch(`https://api.llama.fi/tvl/${protocol}`)
return res.json()
}
Next.js Incremental Static Regeneration: дані оновлюються кожні 5 хвилин без повного rerender:
export async function generateMetadata() { ... }
export const revalidate = 300 // 5 хвилин
SEO для крипто-проекту
Meta tags для OpenGraph (Twitter Card, Discord embed):
export const metadata: Metadata = {
title: 'Protocol Name — Опис у 60 символів',
description: 'Конкретне опис протоколу, 150-160 символів',
openGraph: {
images: [{ url: '/og-image.png', width: 1200, height: 630 }],
},
twitter: { card: 'summary_large_image' },
}
Динамічно генеруйте OG зображення через next/og для сторінок токенів, vault'ів — це підвищує CTR при шарингу в соцмережах.