# BROJS.RU Landing

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

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

- ⚡ **Минимальные зависимости** - только необходимое
- 📄 **Статический HTML** для идеального SEO
- 🎨 **SCSS + CSS Modules** для гибких стилей
- 📱 **Адаптивный дизайн** с responsive шрифтами
- 🎯 **React** только там, где нужна динамика
- 🔥 **Легкий bundle** terms.html (10 KB + 1.5 KB CSS, **без JS!**)

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

```bash
npm install
```

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

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

## 🏗️ Сборка

```bash
npm run build:prod  # Production сборка в ./dist
```

## 📄 Страницы

### Главная `/`
- **React** приложение с анимацией Lottie
- Динамическая страница "В разработке"
- Файлы: `index.html` + `index.js` (916 KB) + `index.css` (190 B)

### Terms `/terms`
- **Чистый HTML** без JavaScript
- Полный текст пользовательского соглашения
- SEO-оптимизирован
- Адаптивный дизайн
- Файлы: `terms.html` (10.5 KB) + `terms.css` (1.5 KB)

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

### CSS Modules (для React компонентов)
```typescript
import * as 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

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

```
src/
├── styles/
│   ├── main.module.scss      # CSS Modules для React
│   ├── main.module.scss.d.ts # TypeScript типы
│   └── terms.scss             # SCSS для статики
├── pages/
│   └── under-construction/    # Главная страница
├── index.tsx                  # Entry для React
├── terms.js                   # Entry для CSS
├── terms.html                 # Статический HTML
└── index.ejs                  # Шаблон для React
```

## 🌐 Деплой

После `npm run build:prod`:
- `index.html` → `brojs.ru/`
- `terms.html` → `brojs.ru/terms`
- Статика → `static.brojs.ru/landing/main/`

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

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

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

### Dev зависимости
- **sass** + **sass-loader** - компиляция SCSS
- **css-loader** - обработка CSS (с поддержкой CSS Modules)
- **style-loader** - инжект CSS в dev режиме
- **mini-css-extract-plugin** - извлечение CSS в production

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

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

## 🤝 Участие

Проект использует минималистичный подход - добавляем зависимости только по мере необходимости!