ELITE FITNESS CLUB — premium fitness landing & member dashboard

Премиальный маркетинговый сайт фитнес-клуба с интерактивным демо-кабинетом участника: расписание, бронирования, питание, прогресс и профиль — без отдельного бэкенда. Portfolio piece.

React 19 · Vite 8 · TypeScript · Tailwind CSS 4 · Framer Motion · Lenis · React Router 7

License

---

About this project

ELITE FITNESS CLUB — портфолио-проект уровня «полноценный продуктовый фронтенд»: длинный лендинг с реальными фото, плавным скроллом, RU/EN локализацией и рабочим личным кабинетом на localStorage. Визуальный язык — тёмная премиальная эстетика, акцент #FF5500, типографика Bebas Neue (EN) и Oswald + Inter (RU).

Код, тексты, структура секций и UX-потоки собраны вручную под кейс «элитный фитнес-клуб», а не как шаблон «скопировал лендинг за вечер». Бэкенда нет намеренно: auth, бронирования и контактная форма симулируются на клиенте — это честно обозначено в дисклеймере ниже.

Disclaimer. ELITE FITNESS CLUB — вымышленный бренд для портфолио. Телефоны, email, отзывы, статистика на главной и имена тренеров — демо-контент. Фотографии подтягиваются из локальной папки через sync-photos.mjs (см. быстрый старт). Не используйте проект как готовый коммерческий продукт «под ключ» без доработки backend и юридических страниц под ваш бизнес.

Copyright. Распространение исходного кода — по MIT с сохранением copyright и текста лицензии. Копирование дизайна, текстов и фото «как есть» под своим брендом без разрешения автора не приветствуется.

---

Что внутри

Лендинг

• Hero с Ken Burns, статистикой и CTA
• Секции: модули, результаты, отзывы, тарифы, тренировки (горизонтальный скролл), HIIT, йога, расписание, питание, прогресс, тренеры, инфраструктура, FAQ, контакты
• Плавный скролл (Lenis), scroll-driven анимации (Framer Motion + Reveal)
• Кастомные тёмные скроллбары под UI
• SEO meta, cookie banner, preloader (один раз за сессию)

Личный кабинет (демо)

• Регистрация / вход (SHA-256 + localStorage)
• Бронирование групповых занятий с лимитами по тарифу
• Check-in, лог тренировок и приёмов пищи, обновление метрик
• Экспорт данных профиля в JSON
• Апгрейд тарифа (демо, без оплаты)

i18n и доступность

• Переключатель EN / RU (html[lang], отдельная типографика для кириллицы)
• Skip-links, aria-labels, reduced motion для переходов страниц
• Страницы Terms, Privacy, Forgot password, 404 с общим layout

---

Маршруты

Путь	Описание
/	Лендинг
/login	Вход
/register	Регистрация + выбор тарифа
/forgot-password	Запрос сброса (демо, localStorage)
/dashboard	Личный кабинет (protected)
/terms	Условия использования
/privacy	Политика конфиденциальности

---

Архитектура

┌─────────────────────────────────────────────────────────────┐
│                     Browser (SPA)                            │
├─────────────────────────────────────────────────────────────┤
│  React Router 7  →  Landing · Auth · Dashboard · Legal · 404 │
│  I18nProvider    →  translations (en / ru)                     │
│  AuthProvider    →  users + profile in localStorage            │
│  LenisProvider   →  smooth scroll (respects reduced motion)  │
├─────────────────────────────────────────────────────────────┤
│  LandingPage     →  sections + horizontal workout/coach tracks │
│  DashboardPage   →  bookings, nutrition, activity, profile   │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
                    localStorage (demo persistence)
              elite_users · elite_remember_email · elite_contact_messages

---

Стек

Слой	Инструмент
UI	React 19
Сборка	Vite 8
Язык	TypeScript (strict)
Стили	Tailwind CSS 4 (@tailwindcss/vite)
Анимации	Framer Motion 12
Скролл	Lenis 1
Роутинг	React Router 7
Шрифты	@fontsource — Bebas Neue, Inter, Oswald
Изображения	sharp — sync + WebP в scripts/
Lint	ESLint 10

---

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

Требования

• Node.js 20+ (рекомендуется LTS)
• npm 10+

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

git clone <your-repo-url>
cd Fitnes/app
npm install
npm run dev

Откройте URL из терминала (обычно http://localhost:5173).

Фотографии

Положите исходные PNG в корень репозитория (Fitnes/*.png) или обновите пути в app/scripts/sync-photos.mjs, затем:

cd app
npm run sync-photos    # принудительная пересборка public/assets/
npm run generate-assets

Production build

cd app
npm run build
npm run preview

---

Скрипты (app/)

Команда	Назначение
npm run dev	Dev-сервер + генерация ассетов
npm run build	Typecheck + production build
npm run preview	Просмотр production-сборки
npm run lint	ESLint
npm run generate-assets	Синхронизация фото → public/assets/
npm run sync-photos	То же с флагом --force
npm run optimize-images	Оптимизация изображений (sharp)

---

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

Fitnes/
├── LICENSE
├── README.md
└── app/
    ├── public/assets/          # PNG + WebP после sync
    ├── scripts/
    │   ├── sync-photos.mjs     # маппинг исходников → ассеты
    │   ├── generate-placeholders.mjs
    │   └── optimize-images.mjs
    └── src/
        ├── pages/              # Landing, Dashboard, Auth, Legal, 404
        ├── components/         # UI, секции, анимации
        ├── context/            # Auth, Lenis, Toast
        ├── i18n/               # translations.ts
        ├── data/               # siteContent, userDefaults
        ├── hooks/
        ├── layouts/
        ├── utils/
        ├── App.tsx
        ├── main.tsx
        └── index.css           # design tokens + RU typography

---

Палитра и типографика

Токен	Значение
Background	#080808
Accent	#FF5500
Card	#111111
Border	#1F1F1F
Display (EN)	Bebas Neue
Display (RU)	Oswald
Body	Inter (latin + cyrillic)

---

Ограничения (честно)

• Нет серверного API: данные пользователя только в браузере
• Нет реальной оплаты, email-рассылки и SMS
• Lighthouse Performance зависит от объёма анимаций и размера изображений
• Для продакшена клуба нужны: backend, CMS/админка, реальные юр. документы и аналитика

---

Лицензия

Исходный код — MIT.
Шрифты — SIL Open Font License 1.1 (см. LICENSE).
Демо-фото — только в составе репозитория; права на исходники проверяйте самостоятельно.

---

Designed and built as a portfolio frontend project (2026).