# BROJS.RU Landing

Лендинг платформы для обучения фронтенд-разработке

## 🚀 Особенности v3.0 (Vite)

- ⚡ **Vite** - мгновенный запуск (vs 3+ сек у webpack)
- 📄 **Статический HTML** для идеального SEO
- 🎨 **SCSS + CSS Modules** для гибких стилей
- 📱 **Адаптивный дизайн** с responsive шрифтами
- 🎯 **React** только для главной страницы
- 🔌 **Express stubs** из `./stubs/api` работают как раньше!
- 🗜️ **Легкий bundle** terms.html (13 KB + 1.5 KB CSS, **без JS!**)

## 📦 Установка

```bash
npm install
```

## 🛠️ Разработка

```bash
npm start          # Dev сервер на http://localhost:8099
```

## 🏗️ Сборка

```bash
npm run build      # Production сборка в ./dist
npm run preview    # Просмотр production сборки
```

## 📄 Страницы

### Главная `/`
- **React** приложение с анимацией Lottie
- Динамическая страница "В разработке"
- Dev: `http://localhost:8099/`
- Prod: `brojs.ru/` → загружает JS с `https://static.brojs.ru/landing/main/`

### Terms `/terms`
- `/terms` → автоматический редирект на `/terms.html`
- **Чистый HTML** без JavaScript
- Полный текст пользовательского соглашения
- SEO-оптимизирован
- Адаптивный дизайн
- Dev: `http://localhost:8099/terms`
- Prod: `brojs.ru/terms` → загружает CSS с `https://static.brojs.ru/landing/main/`

## 🔌 API Stubs

Создавай заглушки API в `./stubs/api/`:

```javascript
// stubs/api/test.js → /api/test
module.exports = (req, res) => {
  res.json({ message: 'Hello from stub!' });
};
```

```javascript
// stubs/api/user.js → /api/user
module.exports.default = {
  id: 1,
  name: 'John Doe'
};
```

Примеры:
- `http://localhost:8099/api/test`
- `http://localhost:8099/api/user`

## 🎨 Стилизация

### CSS Modules (для React компонентов)
```typescript
import styles from './styles/main.module.scss';
element.className = styles.app;
```

**Преимущества:**
- Изоляция стилей
- Автоматические уникальные имена классов
- TypeScript поддержка

### Обычный SCSS (для статических страниц)
```scss
// terms.scss
$mobile: 768px;

h1 {
  font-size: 2.5rem;
  @media (max-width: $mobile) {
    font-size: 1.75rem;  // Адаптивный шрифт
  }
}
```

## 📱 Адаптивность

Все размеры шрифтов автоматически уменьшаются на мобильных (< 768px):
- H1: 2.5rem → 1.75rem
- H2: 1.75rem → 1.5rem
- H3: 1.25rem → 1.1rem
- Body: 1rem → 0.95rem

## 🗂️ Структура

```
bro.landing/
├── index.html              # Entry для главной
├── terms.html              # Entry для Terms (статика)
├── vite.config.ts          # Конфигурация Vite
├── src/
│   ├── index.tsx           # React entry
│   ├── app.tsx             # React App
│   ├── dashboard.tsx       # Роутинг
│   ├── pages/
│   │   └── under-construction/
│   └── styles/
│       ├── main.module.scss     # CSS Modules для React
│       └── terms.scss           # SCSS для Terms
├── stubs/
│   └── api/
│       ├── test.js         # Пример: GET /api/test
│       └── user.js         # Пример: GET /api/user
└── dist/                   # Build output
    ├── index.html          # Главная
    ├── main.[hash].js      # React bundle
    ├── terms.html          # Terms статика
    └── terms.[hash].css    # Terms стили
```

## 🌐 Деплой

### Production URLs
После `npm run build` и деплоя:
- **Главная**: `brojs.ru/` → `dist/index.html`
  - JS: `https://static.brojs.ru/landing/main/main.[hash].js`
- **Terms**: `brojs.ru/terms` → `dist/terms.html`
  - CSS: `https://static.brojs.ru/landing/main/terms.[hash].css`

### Vite автоматически подставляет CDN пути
В `vite.config.ts`:
```typescript
base: isProd 
  ? 'https://static.brojs.ru/landing/main/'  // Production
  : '/'                                       // Dev
```

Vite **автоматически** заменит все пути к ассетам на CDN URL в production!

## 🔧 Технологии

### Core
- **Vite 7** - молниеносная сборка
- **React 18** - только для динамических частей
- **TypeScript** - типизация
- **SCSS** - препроцессор
- **CSS Modules** - изоляция стилей

### Библиотеки
- **React Router DOM** - клиентский роутинг
- **Lottie React** - анимации

### Dev зависимости
- **@vitejs/plugin-react** - React Fast Refresh
- **sass** - компиляция SCSS

## ⚡ Почему Vite?

- 🚀 **Мгновенный запуск** (HMR из коробки)
- ⚡ **Быстрая сборка** (esbuild + Rollup)
- 🎯 **Простая конфигурация** (70 строк vs 500+)
- 📦 **Меньше зависимостей**
- 🔥 **Современный стандарт**

## 📚 Документация

Полная документация в [cloud.md](./cloud.md)

---

**Простота + Скорость + Мощь!** 🎉