TOS — TwoOneSeven | Underground Electronic Events

Сайт для промо-команды TOS (TwoOneSeven), занимающейся организацией электронных музыкальных ивентов и продажей эксклюзивного мерча.

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

# Установка зависимостей
npm install

# Запуск сервера разработки
npm run dev

# Сборка для продакшена
npm run build

# Запуск продакшен сервера
npm start

Сайт будет доступен по адресу: http://localhost:3000

📦 Технологический стек

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Fonts: Google Fonts (Space Grotesk, Russo One, Manrope, Syne)
• Icons: Lucide React, Custom SVG

🎨 Что реализовано

Основные страницы

• Главная — Hero секция с анимациями, превью ивентов, товаров и медиа
• Афиша — Список всех ивентов с фильтрами и детальными страницами
• Магазин — Каталог товаров с корзиной, добавлением/удалением товаров
• Медиа — Блог/медиа контент с постами
• О нас — Информация о команде
• Checkout — Страница оформления заказа с интеграцией Telegram

Функциональность

• ✅ Корзина с сохранением в localStorage
• ✅ Добавление/удаление товаров
• ✅ Изменение количества товаров (+/-)
• ✅ Оформление заказа через Telegram
• ✅ Двухязычный интерфейс (RU/EN)
• ✅ Анимированные переходы между страницами
• ✅ Плавный скролл
• ✅ Кастомный курсор с эффектами
• ✅ Адаптивный дизайн (Mobile/Desktop)
• ✅ Toast уведомления
• ✅ Loading Screen

UI Компоненты

• ✅ NeonButton (светящиеся кнопки)
• ✅ EventCard, ProductCard, PostCard
• ✅ CartModal (модальное окно корзины)
• ✅ BilingualText (переключение RU/EN при hover)
• ✅ Reveal (анимация появления)
• ✅ LiquidGlassObject (стеклянный объект с эффектом)

📝 Как добавлять контент

Добавление ивентов в афишу

Все данные хранятся в файле lib/data.ts. Ивенты добавляются в массив events:

{
  id: 'unique-id',
  slug: 'event-slug', // URL-friendly, используется для страницы ивента
  title: 'Название ивента',
  date: '2026-02-15', // ISO формат (YYYY-MM-DD)
  city: 'Москва',
  venue: 'Клуб «Станция»',
  poster: '/images/events/event-poster.jpg', // Путь из /public/images/events/
  description: 'Описание ивента...',
  lineup: ['DJ 1', 'DJ 2', 'DJ 3'], // Список диджеев
  price: 1500, // Цена билета (число)
  currency: '₽',
  ticketUrl: 'https://...', // Опционально: ссылка на покупку билета
  featured: true, // Показать на главной странице
  category: 'house' // Опционально: категория для фильтрации
}

Важно:

• slug должен быть уникальным и без пробелов (kebab-case)
• Постер ивента положить в public/images/events/
• Размер постера: минимум 800x1000px, оптимально 1200x1500px

Добавление товаров в магазин

Товары добавляются в массив products в lib/data.ts:

{
  id: 'unique-id',
  slug: 'product-slug', // URL-friendly
  name: 'Название товара',
  price: 2990, // Цена (число)
  currency: '₽',
  description: 'Описание товара...',
  category: 'Футболки',
  images: [
    '/images/products/product-front.jpg',
    '/images/products/product-back.jpg'
  ], // Первое изображение — главное
  colors: ['Черный', 'Белый'], // Доступные цвета
  sizes: ['S', 'M', 'L', 'XL'], // Доступные размеры
  featured: true // Показать на главной странице
}

Важно:

• Изображения товаров положить в public/images/products/
• Минимум 1 изображение, максимум 4
• Размер: минимум 800x800px, оптимально 1000x1000px
• Цвета и размеры — массивы строк

Добавление медиа/постов

Посты добавляются в массив posts в lib/data.ts:

{
  id: 'unique-id',
  slug: 'post-slug',
  title: 'Название поста',
  excerpt: 'Краткое описание...',
  content: 'Полный текст поста...',
  image: '/images/media/post-cover.jpg',
  date: '2026-02-05',
  author: 'TOS Team',
  category: 'Отчеты' // Опционально: категория
}

Важно:

• Изображения постов положить в public/images/media/
• Размер: минимум 1200x630px (для Open Graph)

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

/
├── app/                    # Next.js App Router страницы
│   ├── afisha/            # Страницы афиши
│   ├── shop/              # Страницы магазина
│   ├── media/             # Страницы медиа
│   ├── checkout/          # Оформление заказа
│   └── layout.tsx         # Главный layout
├── components/            # React компоненты
│   ├── cards/             # Карточки (Event, Product, Post)
│   ├── layout/            # Layout компоненты (Header, Footer)
│   ├── skeletons/         # Skeletons для загрузки
│   └── ui/                # UI компоненты (кнопки, модалки и т.д.)
├── contexts/              # React Contexts
│   └── CartContext.tsx    # Контекст корзины
├── lib/                   # Утилиты и данные
│   ├── data.ts            # ВСЕ контент (ивенты, товары, посты)
│   ├── content.ts         # Функции получения контента
│   ├── cart.ts            # Логика корзины
│   └── types.ts           # TypeScript типы
├── public/                # Статические файлы
│   └── images/            # Изображения
│       ├── events/         # Постеры ивентов
│       ├── products/       # Фото товаров
│       └── media/          # Обложки постов
└── scripts/               # Скрипты генерации ресурсов

🎯 Приоритетные задачи (что нужно сделать)

Критично (High Priority)

1. Интеграция Google Analytics — добавить отслеживание событий (GA4)
2. Метрики — Яндекс.Метрика для русскоязычной аудитории
3. SEO оптимизация — мета-теги для каждой страницы, Open Graph, Twitter Cards
4. Обработка ошибок — улучшить UX при ошибках загрузки (404, 500)
5. PWA — Progressive Web App для установки на телефон

Важно (Medium Priority)

6. Email уведомления — отправка email при оформлении заказа
7. Система оплаты — интеграция платежной системы (ЮKassa, Stripe)
8. Фильтры — фильтрация товаров по цене, размеру, цвету
9. Поиск — поиск по товарам и ивентам
10. Загрузка изображений — админка для загрузки через браузер

Желательно (Low Priority)

11. Комментарии/отзывы — система отзывов о товарах
12. Видео контент — добавление видео в медиа раздел
13. Тикеты — QR-коды для билетов
14. Push уведомления — о новых ивентах/товарах
15. Аналитика — подробная аналитика продаж и посещений

🔧 Настройка окружения

Переменные окружения

Создай файл .env.local в корне проекта:

# API ключи (для будущей интеграции)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_YANDEX_METRIKA_ID=XXXXXXXXX

# Telegram (для оформления заказа)
TELEGRAM_BOT_TOKEN=your_bot_token
TELEGRAM_CHAT_ID=your_chat_id

Изменение логотипа и брендинга

Все настройки бренда в файле lib/config.ts:

export const siteConfig = {
  name: 'TOS',
  title: 'TOS — TwoOneSeven | Underground Electronic Events',
  description: '...',
  url: 'https://your-domain.com',
  // ... другие настройки
}

Логотип: замените public/images/tos-logo.png на свой

🎨 Кастомизация дизайна

Цветовая палитра

Цвета заданы в tailwind.config.ts:

colors: {
  'brand-red': '#8B0000',
  'brand-crimson': '#DC143C',
  'brand-dark': '#0a0a0a',
  'brand-darker': '#050505',
  // ...
}

Шрифты

Шрифты импортируются в app/layout.tsx:

• Space Grotesk — основной текст
• Russo One — заголовки (кириллица)
• Manrope — метаданные
• Syne — акценты

📱 Доступные скрипты

npm run dev          # Запуск сервера разработки
npm run build        # Сборка для продакшена
npm start            # Запуск продакшен сервера
npm run lint         # Проверка кода линтером
npx tsc --noEmit     # Проверка типов TypeScript
npm run generate-icons  # Генерация иконок (если нужно)

🐛 Решение проблем

Белый экран при загрузке

• Проверьте консоль браузера (F12) на наличие ошибок
• Очистите кеш: rm -rf .next && npm run dev
• Проверьте, что все изображения существуют по указанным путям

Корзина не работает

• Убедитесь, что localStorage включен в браузере
• Проверьте консоль на ошибки JavaScript

Сборка падает с ошибками

• Запустите npx tsc --noEmit для проверки типов
• Запустите npm run lint для проверки кода

📞 Контакты

Для вопросов и поддержки:

• GitHub: https://github.com/saggda/TOS-2
• Telegram: @num217

📄 Лицензия

© 2024 TOS. All Rights Reserved.