Разработка лендинга крипто-проекта

Разработка лендинга крипто-проекта

Лендинг крипто-проекта — это не обычный корпоративный сайт с анимациями. Аудитория технически грамотная, читает код в 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.

Структура и контент

Стандартная структура, которая работает:

1. Hero — одно предложение что это, CTA (Join Waitlist / Launch App), ключевые метрики (TVL, users, chains)
2. Problem/Solution — конкретная техническая проблема которую решает протокол
3. How it works — 3-4 шага, диаграмма архитектуры, не маркетинг а механика
4. Tokenomics — таблица distribution, vesting schedule, utility токена
5. Security — ссылки на audit reports (PDF), bug bounty программа
6. Team/Backers — реальные имена или псевдонимы с историей, VC логотипы
7. Roadmap — честный timeline, не «Q3 2025 - World Domination»
8. 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 при шаринге в соцсетях.