BROJS.RU Landing

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

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

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

📦 Установка

npm install

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

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

🏗️ Сборка

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 компонентов)

import * as styles from './styles/main.module.scss';
element.className = styles.app;

Преимущества:

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

Обычный 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

🤝 Участие

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