Enhance project structure and styling for landing page. Add detailed file structure documentation in cloud.md. Update webpack configuration to support CSS Modules and SCSS. Introduce new styles for terms page and integrate them into the build process. Update package.json and package-lock.json with new dependencies for improved styling capabilities.

readme.md

@@ -1,45 +1,129 @@
-# BROJS.RU Landing Page
+# 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
+```
 
-# Разработка
-npm start
-# → http://localhost:8099/
+## 🛠️ Разработка
 
-# Сборка
-npm run build:prod
+```bash
+npm start  # Dev сервер на http://localhost:8099
+```
+
+## 🏗️ Сборка
+
+```bash
+npm run build:prod  # Production сборка в ./dist
 ```
 
 ## 📄 Страницы
 
-- `/` - главная (в разработке)
-- `/terms` - пользовательское соглашение
+### Главная `/`
+- **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)
 
-| Команда | Описание |
-|---------|----------|
-| `npm start` | Dev сервер |
-| `npm run build` | Dev сборка |
-| `npm run build:prod` | Production + SSG |
-| `npm run build:prod:ssr` | Production + SSR |
+## 🎨 Стилизация
 
-## 📦 Результат сборки
-
-```
-dist/
-├── index.html          # Главная страница (SSG)
-├── terms.html          # Пользовательское соглашение (SEO)
-├── index.js            # React bundle
-└── locales/            # i18n файлы
+### CSS Modules (для React компонентов)
+```typescript
+import * as styles from './styles/main.module.scss';
+element.className = styles.app;
 ```
 
----
+**Преимущества:**
+- Изоляция стилей
+- Автоматические уникальные имена классов
+- TypeScript поддержка
 
-📚 Полная документация: **cloud.md**
+### Обычный 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)
+
+## 🤝 Участие
+
+Проект использует минималистичный подход - добавляем зависимости только по мере необходимости!