🎤🍸 #ГРОМКО — Dark Neon Nightlife & Karaoke Experience

Официальный веб-сайт премиального караоке-бара и ночного клуба #ГРОМКО (г. Иваново, ул. 10 Августа, 43).
Интерфейс спроектирован в эстетике Dark Neon и следует концептуальному манифесту:

«Музыка → свет → люди → алкоголь → еда → пение → ночь»

📸 Галерея интерфейса (UI Showcase)

Главный экран (Hero) и Live-статус работы	Недельное расписание и акции

Меню кухни и хиты заведения	Барная карта и авторские коктейли

Асимметричная галерея и Lightbox	Интерактивная бронь столов (Desktop)

Полноэкранный каталог кухни	Барное меню и коктейльная карта

Тёмная интерактивная карта и контакты	Мобильная навигация (Drawer)

⚡ 100% PageSpeed Performance

✨ Ключевые возможности и функциональность

🎨 Дизайн и UI/UX

Dark Neon палитра: 80% глубокий графит (#050507, #09090D, #101017) + 20% неоновые акценты (#FF00AC Pink, #08CEFD Cyan, #7C3CFF Violet) с динамическими радиальными свечениями (glow), стеклянными карточками (glassmorphism) и неоновыми градиентами.
Премиальная типографика: @fontsource-variable/unbounded для выразительных клубных заголовков и @fontsource-variable/manrope для идеальной читаемости текстов.
Адаптивность (Mobile First): Отдельно проработанный UX для мобильных устройств (свайп-карусели, 4-шаговый визард бронирования, плавающая sticky-кнопка CTA, выдвижное меню).

🚀 Разделы и страницы

Hero-секция: Полноэкранный визуальный блок с живым расчетом рабочего статуса (● ОТКРЫТО СЕЙЧАС / ○ ЗАКРЫТО) в зависимости от текущего дня недели и времени.
Neon Marquee: Плавная бегущая неоновая строка между ключевыми блоками.
«Этой неделей в #ГРОМКО» (Акции и расписание):
- Desktop: 7-колоночный календарь недели (ПН—ВС) с раскрытием программы дня и кнопкой мгновенной брони.
- Mobile: Горизонтальный свайп недели с крупной активной карточкой дня.
Атмосфера: Манифест-блок с клубными акцентами и ценностями заведения.
Фотогалерея:
- Desktop: Асимметричный masonry-layout с ритмическими словами SING, DANCE, DRINK, REPEAT.
- Mobile: Touch-карусель со счетчиком слайдов 01 / 08.
- Полноэкранный Lightbox: Просмотр фотографий в высоком качестве с клавиатурной навигацией (Esc, ←, →).
Меню кухни и Барная карта:
- Превью хитов кухни и авторских коктейлей на главной странице.
- Отдельная страница меню (/menu) с переключением табов [ Кухня ] / [ Бар ].
- Фильтрация по категориям (Закуски, Бургеры, Гриль, Сеты, Салаты, Десерты, Коктейли, Вино, Крепкое и др.) и живой поиск по названию/описанию.
Верификация возраста (18+): Модальное окно подтверждения возраста при входе в раздел барного меню с сохранением выбора в localStorage.
Двухрежимная система бронирования:
- Desktop: Интерактивная матрица слотов времени (Свободно / Занято / Выбрано), выбор даты, селектор количества гостей и мгновенная валидация.
- Mobile: 4-шаговый визард (1. Дата → 2. Время → 3. Гости → 4. Контакты) с индикатором прогресса и кнопкой шага назад.
- Модальное окно подтверждения с генерацией уникального номера брони (GROMKO-XXXXXX).
Контакты и Тёмная карта:
- Кастомная темная карта с неоновым маркером локации.
- Быстрые действия: звонок по клику, построение маршрута в Яндекс.Картах, ссылки на Telegram / VK / WhatsApp.
Политика конфиденциальности (/privacy): Юридически выверенный документ в соответствии с 152-ФЗ.

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

Область	Технологии
Frontend	React 19, TypeScript 5.7, Vite 6
Стилизация	Tailwind CSS 3.4, PostCSS, Autoprefixer, `clsx`, `tailwind-merge`
Иконки и Шрифты	Lucide React, `@fontsource-variable/unbounded`, `@fontsource-variable/manrope`
Backend API	Node.js (native TypeScript strip-types), Express 4.21, CORS
Оптимизация	Modern WebP Images, Zero-dependency lightweight SPA Router

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

gromko/
├── public/                      # Статические ресурсы и иконки
├── screenshots/                 # Скриншоты интерфейса для документации
├── server/
│   └── index.ts                 # Express REST API сервер
├── src/
│   ├── components/
│   │   ├── atmosphere/          # Манифест-блок атмосферы
│   │   ├── booking/             # Формы бронирования (Desktop + Mobile визард)
│   │   ├── common/              # NeonBadge, NeonButton, Marquee, Modal, AgeVerification
│   │   ├── contacts/            # Контакты и темная карта
│   │   ├── gallery/             # Галерея (Masonry, Carousel, Lightbox)
│   │   ├── hero/                # Главный экран со статусом работы
│   │   ├── layout/              # Header, Footer, StickyMobileCTA
│   │   ├── menu/                # Превью меню кухни и барной карты
│   │   └── schedule/            # Недельное расписание и акции
│   ├── context/
│   │   └── RouterContext.tsx    # Клиентский SPA-роутер (главная, меню, политика)
│   ├── data/
│   │   └── mockData.ts          # База данных: блюда, бар, расписание, контакты, галерея
│   ├── pages/
│   │   ├── HomePage.tsx         # Главная страница
│   │   ├── MenuPage.tsx         # Страница полного меню кухни и бара (с фильтрами и 18+)
│   │   └── PrivacyPage.tsx      # Страница политики конфиденциальности
│   ├── types/
│   │   └── index.ts             # TypeScript типы и интерфейсы
│   ├── App.tsx                  # Главный компонент приложения и макет
│   ├── index.css                # Неоновые стили, кастомные утилиты и анимации
│   └── main.tsx                 # Точка входа React
├── index.html                   # HTML-каркас с мета-тегами
├── package.json                 # Скрипты и зависимости проекта
├── tailwind.config.js           # Цветовая палитра и настройки Tailwind
├── tsconfig.json                # Конфигурация TypeScript
└── vite.config.ts               # Конфигурация Vite и прокси для /api

⚡ Быстрый старт

Требования

Node.js >= 20.0.0 (или Bun)

1. Клонирование и установка зависимостей

git clone https://github.com/MistakeTZ/gromko.git
cd gromko
npm install
# или
bun install

2. Запуск в режиме разработки

В режиме разработки рекомендуется запустить фронтенд и бэкенд параллельно:

# Запуск фронтенда (Vite Dev Server на http://localhost:3000)
npm run dev

# В отдельном терминале: запуск API сервера (Express на http://localhost:3001)
npm run server

Примечание: Vite настроен с автоматическим проксированием запросов /api/* на порт 3001.

3. Сборка для продакшена

# Проверка типов TypeScript и компиляция бандла
npm run build

# Предпросмотр продакшен-сборки
npm run preview

🔌 API Спецификация (Express Backend)

Бэкенд предоставляет REST API для получения данных и отправки бронирований:

Метод	Эндпоинт	Описание
`GET`	`/api/info`	Информация о заведении (адрес, телефон, график, соцсети)
`GET`	`/api/promotions`	Расписание акций и событий по дням недели
`GET`	`/api/menu`	Полный список блюд кухни с категориями и тегами
`GET`	`/api/bar`	Барная карта и коктейли
`GET`	`/api/gallery`	Список фотографий и тегов галереи
`GET`	`/api/slots?date=YYYY-MM-DD`	Доступность временных слотов для указанной даты
`POST`	`/api/booking`	Создание новой брони столика

Пример тела запроса для `POST /api/booking`:

{
  "date": "2026-09-05",
  "time": "21:00",
  "guests": 4,
  "name": "Александр",
  "phone": "+7 (999) 123-45-67",
  "comment": "Столик ближе к сцене, день рождения"
}

Пример ответа сервера:

{
  "success": true,
  "message": "Бронирование успешно подтверждено!",
  "data": {
    "id": "GROMKO-A9F3K2",
    "createdAt": "2026-09-01T18:30:00.000Z",
    "date": "2026-09-05",
    "time": "21:00",
    "guests": 4,
    "name": "Александр",
    "phone": "+7 (999) 123-45-67",
    "comment": "Столик ближе к сцене, день рождения",
    "status": "confirmed"
  }
}

⚙️ Управление контентом и кастомизация

Все ключевые данные, меню, акции и тексты централизованы в одном файле:
👉 src/data/mockData.ts

Изменение позиций меню: отредактируйте массив MENU_ITEMS.
Изменение коктейлей и бара: отредактируйте массив BAR_ITEMS.
Изменение расписания недели и акций: отредактируйте массив WEEK_SCHEDULE.
Добавление фото в галерею: отредактируйте массив GALLERY_PHOTOS.
Контакты, режим работы и ссылки на соцсети: отредактируйте объект VENUE_INFO.
Цветовая палитра и неоновые стили: отредактируйте tailwind.config.js и src/index.css.

Navigation Menu

Repository files navigation

🎤🍸 #ГРОМКО — Dark Neon Nightlife & Karaoke Experience

📸 Галерея интерфейса (UI Showcase)

⚡ 100% PageSpeed Performance

✨ Ключевые возможности и функциональность

🎨 Дизайн и UI/UX

🚀 Разделы и страницы

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

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

⚡ Быстрый старт

Требования

1. Клонирование и установка зависимостей

2. Запуск в режиме разработки

3. Сборка для продакшена

🔌 API Спецификация (Express Backend)

Пример тела запроса для `POST /api/booking`:

Пример ответа сервера:

⚙️ Управление контентом и кастомизация

📄 Лицензия

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
public		public
server		server
src		src
.gitignore		.gitignore
README.md		README.md
bun.lock		bun.lock
index.html		index.html
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

🎤🍸 #ГРОМКО — Dark Neon Nightlife & Karaoke Experience

📸 Галерея интерфейса (UI Showcase)

⚡ 100% PageSpeed Performance

✨ Ключевые возможности и функциональность

🎨 Дизайн и UI/UX

🚀 Разделы и страницы

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

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

⚡ Быстрый старт

Требования

1. Клонирование и установка зависимостей

2. Запуск в режиме разработки

3. Сборка для продакшена

🔌 API Спецификация (Express Backend)

Пример тела запроса для POST /api/booking:

Пример ответа сервера:

⚙️ Управление контентом и кастомизация

📄 Лицензия

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Пример тела запроса для `POST /api/booking`: