Avoita - Artificial VOIce Task Assistant

Лендинг для продукта Avoita — голосового AI-ассистента, который выполняет телефонные звонки от имени пользователя для решения рутинных задач.

🚀 Быстрый старт

1. Установите зависимости:

   npm install

2. Настройте переменные окружения:

   cp .env.example .env.local

   Заполните .env.local реальными значениями Telegram Bot API.

3. Запустите сервер разработки:

   npm run dev

4. Откройте http://localhost:3000

🛠 Настройка Telegram Bot для уведомлений

1. Создание бота через @BotFather

• Перейдите к @BotFather в Telegram
• Отправьте команду /newbot
• Следуйте инструкциям для создания бота
• Сохраните полученный токен (начинается с 123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11)

2. Получение Chat ID

• Создайте приватный канал или группу в Telegram
• Добавьте созданного бота как администратора
• Отправьте любое сообщение в канал/группу
• Получите Chat ID через API:

  https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
  

• Найдите "chat":{"id":123456789} в ответе

3. Настройка переменных

В файле .env.local:

TELEGRAM_BOT_TOKEN=ваш_токен_здесь
TELEGRAM_CHAT_IDS=123456789,987654321,111111111

📦 Структура проекта

src/
├── app/
│   ├── api/submit-lead/route.ts  # API для отправки лидов в Telegram
│   ├── layout.tsx                # Главный layout
│   └── page.tsx                  # Главная страница лендинга
└── components/
    ├── Hero.tsx                  # Hero-секция
    ├── Features.tsx              # Особенности продукта
    ├── HowItWorks.tsx            # Как это работает
    ├── SubscriptionForm.tsx      # Форма подписки
    └── Footer.tsx                # Футер

🎨 Технологии

• Next.js 14+ (App Router)
• React 19
• TypeScript
• Tailwind CSS (v4)
• Framer Motion (анимации)
• React Hook Form + Zod (валидация форм)
• node-telegram-bot-api (уведомления о лидах)

🚀 Деплой на Vercel

Добавление кода в существующий Vercel-проект

1. Подключите репозиторий к Vercel:

   • В Vercel Dashboard нажмите "New Project"
   • Выберите ваш Git-репозиторий
   • Настройте параметры сборки (обычно авто-детект)

2. Настройте переменные окружения в Vercel:

   • В настройках проекта перейдите в "Environment Variables"
   • Добавьте переменные из .env.example:
     • TELEGRAM_BOT_TOKEN
     • TELEGRAM_CHAT_IDS

3. Деплой:

   • Vercel автоматически соберет и задеплоит проект
   • Проверьте форму подписки после деплоя

Тестирование формы

1. Заполните форму на лендинге
2. Проверьте получение уведомления в Telegram
3. Убедитесь, что success-сообщение отображается корректно

📝 Особенности

• Responsive дизайн с поддержкой темной/светлой темы
• Smooth scroll навигация
• Анимации с Framer Motion
• Валидация форм на клиенте и сервере
• Отправка уведомлений в Telegram
• SEO-friendly структура

🔧 Разработка

• npm run dev - запуск dev-сервера
• npm run build - сборка для продакшена
• npm run start - запуск продакшен-сервера
• npm run lint - проверка кода ESLint

📄 Лицензия

Все права защищены © 2026 Avoita