2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00
2025-11-30 22:31:37 +03:00

Ravent - Платформа событий и билетов

Ravent - это модульная платформа для агрегации билетов и публикации афиши событий.

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

  • React 18 + TypeScript (strict mode)
  • Vite - сборщик проекта
  • Tailwind CSS - стилизация с кастомными брендовыми цветами
  • React Router v6 - маршрутизация
  • Zustand - управление состоянием UI (тема, язык)
  • TanStack Query + Axios - работа с API
  • GSAP - анимации
  • react-i18next - интернационализация (Ru/En)

Дизайн-система

Цвета бренда

  • Желтый: #F7B075
  • Оранжевый: #E95A59
  • Фиолетовый: #B31872

Градиенты

Используются ТОЛЬКО углы: 30°, 45°, 60°

Шрифты

  • Bebas Neue - ТОЛЬКО для заголовков (H1-H4)
  • NT Somic - ТОЛЬКО для текста (T1-T4)

Размеры текста

  • H1: 72pt
  • H2: 60pt
  • H3: 48pt
  • H4: 36pt
  • T1: 24pt
  • T2: 18pt
  • T3: 14pt
  • T4: 12pt

Установка и запуск

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

# Запуск dev сервера
bun run dev

# Сборка для production
bun run build

# Предпросмотр production сборки
bun run preview

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

src/
├── components/
│   ├── decorative/     # Декоративные элементы (TigerStripes, LeopardSpots, RingElements)
│   ├── features/       # Функциональные компоненты (ThemeSwitcher, LanguageSwitcher)
│   ├── layout/         # Layout компоненты (Header, Container)
│   ├── sections/       # Секции страниц (HeroSection, ContrastSection)
│   └── ui/             # UI компоненты (Button, Card)
├── i18n/               # Конфигурация и переводы
├── lib/                # Конфигурация библиотек (axios, queryClient)
├── pages/              # Страницы приложения
├── store/              # Zustand store
├── styles/             # Глобальные стили и шрифты
├── types/              # TypeScript типы
└── utils/              # Утилиты (GSAP, cn, constants)

Особенности реализации

Contrast Section

Секция с анимированным расширением 50/50 → 2/3 при наведении. Использует GSAP для плавной анимации изменения размеров.

Темная тема

Поддержка автоматического переключения между светлой/темной темой и системной темой устройства.

Интернационализация

Полная поддержка русского и английского языков с динамическим переключением.

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

Скопируйте .env.example в .env и настройте:

VITE_API_URL=http://localhost:3000/api
Description
No description provided
Readme 4.8 MiB
Languages
TypeScript 93.4%
CSS 3.4%
JavaScript 2.5%
HTML 0.7%