Remove legacy landing and documentation files, transitioning to a new structure with Pug templates for index and terms pages. Update Vite configuration for improved build process and streamline project organization. Clean up package dependencies and enhance project clarity.
This commit is contained in:
Primakov Alexandr Alexandrovich
parent
108e895631
commit
7292fa8743
@ -1,82 +0,0 @@
|
||||
# 🚀 Production сборка с Vite
|
||||
|
||||
## ✅ Как работает
|
||||
|
||||
### Встроенные переменные Vite
|
||||
|
||||
Vite автоматически определяет режим сборки:
|
||||
- **Dev**: `mode = 'development'`
|
||||
- **Production**: `mode = 'production'`
|
||||
|
||||
В `vite.config.ts`:
|
||||
```typescript
|
||||
export default defineConfig(({ mode }) => {
|
||||
const isProd = mode === 'production';
|
||||
|
||||
return {
|
||||
base: isProd
|
||||
? 'https://static.brojs.ru/landing/main/' // Production CDN
|
||||
: '/', // Dev локально
|
||||
// ...
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 🌐 Команды
|
||||
|
||||
### Dev режим
|
||||
```bash
|
||||
npm start # mode = 'development'
|
||||
npm run dev # mode = 'development'
|
||||
```
|
||||
- Base: `/`
|
||||
- URL: `http://localhost:8099/`
|
||||
- Ассеты: локальные пути
|
||||
|
||||
### Production сборка
|
||||
```bash
|
||||
npm run build # mode = 'production'
|
||||
```
|
||||
- Base: `https://static.brojs.ru/landing/main/`
|
||||
- Все пути автоматически заменяются на CDN!
|
||||
|
||||
## 📦 Результат production сборки
|
||||
|
||||
### index.html (главная)
|
||||
```html
|
||||
<script src="https://static.brojs.ru/landing/main/main.[hash].js"></script>
|
||||
```
|
||||
|
||||
### terms.html (Terms)
|
||||
```html
|
||||
<link rel="stylesheet" href="https://static.brojs.ru/landing/main/terms.[hash].css">
|
||||
```
|
||||
|
||||
## 🎯 Кроссплатформенность
|
||||
|
||||
✅ **Windows**: работает
|
||||
✅ **Linux**: работает
|
||||
✅ **macOS**: работает
|
||||
|
||||
Vite использует встроенный параметр `mode`, который работает **везде без дополнительных пакетов**!
|
||||
|
||||
## 🔧 Альтернативный способ (если нужен кастомный env)
|
||||
|
||||
Если понадобится установить свои переменные:
|
||||
|
||||
### Установи cross-env
|
||||
```bash
|
||||
npm install --save-dev cross-env
|
||||
```
|
||||
|
||||
### Обнови package.json
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production vite build"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Но это **не нужно** для нашего случая! Vite сам всё делает правильно! ✨
|
||||
|
||||
462
cloud.md
462
cloud.md
@ -1,462 +0,0 @@
|
||||
# ☁️ BROJS.RU Landing - Полная документация
|
||||
|
||||
## 📋 Оглавление
|
||||
|
||||
1. [Обзор проекта](#обзор-проекта)
|
||||
2. [Структура проекта](#структура-проекта)
|
||||
3. [Static Site Generation (SSG)](#static-site-generation-ssg)
|
||||
4. [Страница пользовательского соглашения](#страница-пользовательского-соглашения)
|
||||
5. [Команды и скрипты](#команды-и-скрипты)
|
||||
6. [Технологии](#технологии)
|
||||
7. [Deployment](#deployment)
|
||||
|
||||
---
|
||||
|
||||
## Обзор проекта
|
||||
|
||||
**BROJS.RU Landing** - это статический лендинг платформы обучения фронтенд-разработке на базе React + SSG.
|
||||
|
||||
### Особенности:
|
||||
|
||||
✅ **React 18** с TypeScript
|
||||
✅ **Server-Side Rendering (SSR)** - полноценный рендеринг React компонентов для SEO
|
||||
✅ **Chakra UI** - современный UI framework
|
||||
✅ **i18next** - мультиязычность (ru/en)
|
||||
✅ **React Router** - клиентский роутинг
|
||||
✅ **Hydration** - гидратация SSR контента
|
||||
✅ **happy-dom + canvas** - полноценная DOM эмуляция для SSR
|
||||
|
||||
### Страницы:
|
||||
|
||||
- **`/`** - главная страница "в разработке"
|
||||
- **`/terms`** - пользовательское соглашение (полное, SEO-оптимизировано)
|
||||
|
||||
---
|
||||
|
||||
## Структура файлов
|
||||
|
||||
```
|
||||
bro.landing/
|
||||
├── src/
|
||||
│ ├── styles/
|
||||
│ │ ├── main.module.scss # CSS Modules для React компонентов
|
||||
│ │ ├── main.module.scss.d.ts # TypeScript типы для CSS Modules
|
||||
│ │ └── terms.scss # Обычный SCSS для статической страницы
|
||||
│ ├── pages/
|
||||
│ │ └── under-construction/ # Главная страница (React)
|
||||
│ ├── index.tsx # Entry point для главной страницы
|
||||
│ ├── terms.js # Entry point для стилей Terms
|
||||
│ ├── terms.html # Статический HTML Terms страницы
|
||||
│ ├── index.ejs # HTML шаблон для React страницы
|
||||
│ └── app.tsx # React приложение
|
||||
├── dist/ # Собранные файлы
|
||||
│ ├── index.html # Главная (с React)
|
||||
│ ├── index.js + index.css # Бандлы главной
|
||||
│ ├── terms.html # Terms (чистый HTML + CSS)
|
||||
│ └── terms.css # Стили Terms
|
||||
├── ijl.config.js # Webpack конфигурация
|
||||
└── package.json
|
||||
|
||||
```
|
||||
|
||||
## Структура проекта
|
||||
|
||||
```
|
||||
bro.landing/
|
||||
├── src/
|
||||
│ ├── pages/
|
||||
│ │ ├── under-construction/ # Главная страница
|
||||
│ │ ├── terms/ # Пользовательское соглашение
|
||||
│ │ └── index.ts # Экспорт страниц
|
||||
│ ├── app.tsx # Root компонент
|
||||
│ ├── dashboard.tsx # Роутинг
|
||||
│ ├── index.tsx # Entry point + hydration
|
||||
│ └── index.ejs # HTML шаблон
|
||||
├── scripts/
|
||||
│ └── ssr-render.js # ⭐ SSR скрипт (react-dom/server)
|
||||
├── dist/ # Сборка (генерируется)
|
||||
│ ├── index.html # Главная (SSG)
|
||||
│ ├── terms.html # Соглашение (SSG)
|
||||
│ └── index.js # React bundle
|
||||
├── package.json
|
||||
└── cloud.md # 📚 Эта документация
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Server-Side Rendering (SSR)
|
||||
|
||||
### Как работает?
|
||||
|
||||
1. **Webpack** собирает React → `dist/index.js` + `dist/index.html` (шаблон)
|
||||
2. **Скрипт `ssr-render.js`** автоматически:
|
||||
- Настраивает окружение Node.js (jsdom + canvas)
|
||||
- Импортирует React компоненты из `src/pages/`
|
||||
- Рендерит компоненты через `react-dom/server`
|
||||
- Инжектит HTML в `dist/index.html` и `dist/terms.html`
|
||||
3. **React hydration** при загрузке оживляет SSR HTML
|
||||
|
||||
### Преимущества SSR:
|
||||
|
||||
- 🚀 **Быстрая загрузка** - контент виден до загрузки JS
|
||||
- 🔍 **SEO** - поисковики индексируют полный HTML с Chakra UI
|
||||
- ♿ **Доступность** - работает без JavaScript
|
||||
- 📊 **Метрики** - улучшенные FCP и LCP
|
||||
- ✅ **Никакого хардкода** - рендер реальных компонентов
|
||||
|
||||
### Hydration в index.tsx:
|
||||
|
||||
```typescript
|
||||
const hasPrerenderedContent = MOUNT_NODE.hasChildNodes();
|
||||
|
||||
if (hasPrerenderedContent) {
|
||||
hydrateRoot(MOUNT_NODE, <App />); // Оживляем SSR HTML
|
||||
} else {
|
||||
createRoot(MOUNT_NODE).render(<App />); // Обычный рендер
|
||||
}
|
||||
```
|
||||
|
||||
### Скрипт ssr-render.js:
|
||||
|
||||
**Что делает**:
|
||||
1. Настраивает Babel для транспиляции TSX → JS
|
||||
2. Настраивает jsdom для DOM эмуляции
|
||||
3. Настраивает canvas для Lottie анимаций
|
||||
4. Импортирует компоненты `UnderConstruction` и `Terms`
|
||||
5. Рендерит через `renderToString(React.createElement(Component))`
|
||||
6. Создает `dist/index.html` и `dist/terms.html` с полным HTML
|
||||
|
||||
**Автоматический запуск**:
|
||||
- `npm run build:prod` - после webpack сборки
|
||||
|
||||
---
|
||||
|
||||
## Страница пользовательского соглашения
|
||||
|
||||
### Источник: `Terms.tsx`
|
||||
|
||||
⚠️ **Важно**: `src/pages/terms/Terms.tsx` - единственный источник правды для соглашения!
|
||||
|
||||
Чтобы обновить соглашение:
|
||||
1. Отредактируйте `src/pages/terms/Terms.tsx`
|
||||
2. Запустите `npm run build:prod`
|
||||
3. `dist/terms.html` обновится автоматически через SSR
|
||||
|
||||
### React компонент: Terms.tsx
|
||||
|
||||
- **Путь**: `src/pages/terms/Terms.tsx`
|
||||
- **Дизайн**: Chakra UI, официальный стиль документа
|
||||
- **SEO**: Helmet с meta-тегами
|
||||
- **Роут**: `/terms` в dashboard.tsx
|
||||
- **SSR**: Рендерится через `renderToString()` в `ssr-render.js`
|
||||
|
||||
### Структура компонента:
|
||||
|
||||
```tsx
|
||||
export const Terms = () => {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Пользовательское соглашение - BROJS.RU</title>
|
||||
<meta name="description" content="..." />
|
||||
</Helmet>
|
||||
|
||||
<Box bg="gray.50" minH="100vh" py={8}>
|
||||
<Container maxW="4xl" bg="white" shadow="lg" borderRadius="md" p={{ base: 6, md: 10 }}>
|
||||
<VStack spacing={6} align="stretch">
|
||||
<Heading as="h1">Пользовательское соглашение</Heading>
|
||||
{/* ... полный контент ... */}
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### SEO-версия: terms.html
|
||||
|
||||
Генерируется автоматически через SSR из компонента `Terms.tsx`:
|
||||
|
||||
```html
|
||||
<title>Пользовательское соглашение - BROJS.RU</title>
|
||||
<meta name="description" content="Полное пользовательское соглашение..." />
|
||||
|
||||
<div id="app">
|
||||
<div class="css-15jkess">
|
||||
<div class="chakra-container css-ilwlhp">
|
||||
<h1 class="chakra-heading css-s2s61i">Пользовательское соглашение</h1>
|
||||
<p class="chakra-text css-130t7v7">для BROJS.RU</p>
|
||||
<p class="chakra-text css-1pbebyg">Последнее обновление: 25 мая 2025 г.</p>
|
||||
...
|
||||
</ul>
|
||||
<!-- Все 10 разделов -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Размер**: ~13.6 KB (полный текст + стили)
|
||||
**Содержание**: Все 10 разделов с подразделами
|
||||
**Ссылки**: Рабочие <a> теги на email и сайты
|
||||
|
||||
### Важные детали:
|
||||
|
||||
✅ **Название сайта**: BROJS.RU (не BRO-JS.RU)
|
||||
✅ **Авторизация**: Yandex + Email (Google и VK исключены)
|
||||
✅ **Email**: primakov.pro@yandex.ru
|
||||
|
||||
---
|
||||
|
||||
## Команды и скрипты
|
||||
|
||||
### NPM Scripts:
|
||||
|
||||
```json
|
||||
{
|
||||
"start": "brojs server --port=8099 --with-open-browser",
|
||||
"build": "npm run clean && brojs build --dev",
|
||||
"build:prod": "npm run clean && brojs build && node scripts/ssr-render.js",
|
||||
"clean": "rimraf dist",
|
||||
"eslint": "npx eslint src",
|
||||
"prettier": "prettier --write .",
|
||||
"test": "jest --coverage"
|
||||
}
|
||||
```
|
||||
|
||||
### Использование:
|
||||
|
||||
#### 🔧 Разработка:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
# → Запускает dev сервер на http://localhost:8099/
|
||||
# → Hot reload включен
|
||||
# → Без SSG (быстро)
|
||||
```
|
||||
|
||||
#### 🏗️ Dev сборка:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# → Webpack в dev режиме
|
||||
# → Без минификации
|
||||
# → Без SSG
|
||||
# → Результат: dist/index.html (пустой шаблон)
|
||||
```
|
||||
|
||||
#### 🚀 Production сборка (с SSR):
|
||||
|
||||
```bash
|
||||
npm run build:prod
|
||||
# → Webpack в production режиме
|
||||
# → Минификация
|
||||
# → Автоматический SSR (ssr-render.js)
|
||||
# → Рендер реальных React компонентов через react-dom/server
|
||||
# → Результат:
|
||||
# - dist/index.html (UnderConstruction компонент)
|
||||
# - dist/terms.html (Terms компонент с Chakra UI)
|
||||
```
|
||||
|
||||
Вывод:
|
||||
```
|
||||
✅ Сборка успешно завершена!
|
||||
🚀 Запуск SSR с рендерингом React компонентов...
|
||||
✅ Компоненты загружены
|
||||
✅ Компоненты отрендерены
|
||||
✅ index.html обновлен с SSR контентом
|
||||
✅ terms.html создан с SSR контентом
|
||||
🎉 SSR завершен успешно!
|
||||
📄 Созданы: index.html, terms.html
|
||||
💡 Весь контент отрендерен через React SSR
|
||||
```
|
||||
|
||||
### Другие команды:
|
||||
|
||||
```bash
|
||||
npm run clean # Удалить dist/
|
||||
npm run eslint # Проверить код
|
||||
npm run prettier # Форматировать код
|
||||
npm run test # Запустить тесты
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Технологии
|
||||
|
||||
### Frontend:
|
||||
|
||||
- **React 18.3** - UI библиотека
|
||||
- **TypeScript** - типизация
|
||||
- **Chakra UI 2.8** - компоненты и стили
|
||||
- **Emotion** - CSS-in-JS
|
||||
- **React Router 6** - роутинг
|
||||
- **React Helmet** - управление <head>
|
||||
|
||||
### State & i18n:
|
||||
|
||||
- **Redux Toolkit** - state management
|
||||
- **i18next** - интернационализация
|
||||
- **i18next-browser-languagedetector** - автоопределение языка
|
||||
|
||||
### Build & Dev:
|
||||
|
||||
- **@brojs/cli 1.9.5** - сборщик (обертка над webpack)
|
||||
- **Webpack 5** - бандлер
|
||||
- **@babel/register** - транспиляция TSX в Node.js
|
||||
- **@babel/preset-react** - JSX поддержка
|
||||
- **@babel/preset-typescript** - TypeScript поддержка
|
||||
- **happy-dom 15.x** - DOM эмуляция для SSR (быстрее и легче jsdom)
|
||||
- **canvas 3.x** - Canvas API для Lottie в SSR
|
||||
|
||||
### Дополнительно:
|
||||
|
||||
- **Lottie React** - анимации (работает в SSR!)
|
||||
- **Day.js** - работа с датами
|
||||
- **ESLint** - линтинг
|
||||
- **Prettier** - форматирование
|
||||
- **Jest** - тестирование
|
||||
|
||||
---
|
||||
|
||||
## Deployment
|
||||
|
||||
### Docker + Nginx:
|
||||
|
||||
Проект разворачивается через Docker контейнер с Nginx.
|
||||
|
||||
**Скрипты**:
|
||||
- `d-scripts/up-nginx.sh` - запуск контейнера
|
||||
- `d-scripts/stop.sh` - остановка
|
||||
- `d-scripts/re-run.sh` - перезапуск
|
||||
|
||||
**Процесс**:
|
||||
|
||||
```bash
|
||||
# 1. Сборка
|
||||
npm run build:prod
|
||||
|
||||
# 2. Deploy
|
||||
npm run redeploy
|
||||
# → Устанавливает зависимости
|
||||
# → Собирает проект
|
||||
# → Перезапускает Docker контейнер
|
||||
```
|
||||
|
||||
### Конфигурация Nginx:
|
||||
|
||||
Nginx раздает папку `dist/`:
|
||||
|
||||
```
|
||||
https://brojs.ru/ → dist/index.html
|
||||
https://brojs.ru/terms → React Router → terms.html (fallback)
|
||||
https://brojs.ru/terms.html → dist/terms.html (прямой доступ)
|
||||
https://brojs.ru/index.js → dist/index.js
|
||||
```
|
||||
|
||||
### Важно для SEO:
|
||||
|
||||
1. **index.html** содержит статический контент (SSG)
|
||||
2. **terms.html** содержит полное соглашение (SSG)
|
||||
3. **React Router** работает на клиенте для SPA навигации
|
||||
4. **Fallback** на статические .html файлы для ботов
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Чеклист при обновлениях
|
||||
|
||||
### Обновление пользовательского соглашения:
|
||||
|
||||
- [ ] Отредактировать `terma.md`
|
||||
- [ ] Проверить что нет Google/VK (только Yandex + Email)
|
||||
- [ ] Проверить что название сайта: **BROJS.RU**
|
||||
- [ ] Запустить `npm run build:prod`
|
||||
- [ ] Проверить `dist/terms.html` (должен быть ~13KB)
|
||||
- [ ] Задеплоить: `npm run redeploy`
|
||||
|
||||
### Добавление новой страницы:
|
||||
|
||||
- [ ] Создать компонент в `src/pages/`
|
||||
- [ ] Экспортировать в `src/pages/index.ts`
|
||||
- [ ] Добавить роут в `src/dashboard.tsx`
|
||||
- [ ] Если нужен SSG - обновить `scripts/prerender-multi.js`
|
||||
- [ ] Собрать и проверить
|
||||
|
||||
### Перед деплоем:
|
||||
|
||||
- [ ] `npm run eslint` - проверить код
|
||||
- [ ] `npm run prettier` - форматировать
|
||||
- [ ] `npm run test` - запустить тесты
|
||||
- [ ] `npm run build:prod` - собрать
|
||||
- [ ] Проверить `dist/index.html` и `dist/terms.html`
|
||||
- [ ] `npm run redeploy` - задеплоить
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Проблема: terms.html пустой или куцый
|
||||
|
||||
**Решение**: Проверьте `terma.md` - это единственный источник контента.
|
||||
|
||||
```bash
|
||||
npm run build:prod
|
||||
# Проверьте вывод:
|
||||
# ✅ terms.html создан с полным контентом
|
||||
```
|
||||
|
||||
### Проблема: Hydration warning
|
||||
|
||||
**Причина**: Несоответствие серверного и клиентского HTML.
|
||||
|
||||
**Решение**: Проверьте что контент в `prerender-multi.js` совпадает с React компонентом.
|
||||
|
||||
### Проблема: 404 на /terms
|
||||
|
||||
**Nginx**: Убедитесь что настроен fallback на index.html:
|
||||
|
||||
```nginx
|
||||
try_files $uri $uri/ /index.html;
|
||||
```
|
||||
|
||||
### Проблема: SSG не запускается
|
||||
|
||||
**Проверьте**:
|
||||
1. `scripts/prerender-multi.js` существует
|
||||
2. В `package.json` правильная команда: `build:prod`
|
||||
3. Нет ошибок в webpack сборке
|
||||
|
||||
---
|
||||
|
||||
## 📚 Полезные ссылки
|
||||
|
||||
- **Сайт**: https://brojs.ru
|
||||
- **Email**: primakov.pro@yandex.ru
|
||||
- **Keycloak**: PostgreSQL (auth)
|
||||
- **Gravatar**: https://gravatar.com
|
||||
|
||||
---
|
||||
|
||||
## 📝 История изменений
|
||||
|
||||
### v2.0.2 (2025-10-24)
|
||||
|
||||
- ✨ Добавлена страница `/terms` с пользовательским соглашением
|
||||
- 🎨 Официальный дизайн юридического документа
|
||||
- 📄 Автоматическая генерация `terms.html` из `terma.md`
|
||||
- 🔍 SEO-оптимизация (13.6KB полного контента)
|
||||
- 🔄 Название сайта: BRO-JS.RU → **BROJS.RU**
|
||||
- 🔐 Авторизация: только Yandex + Email
|
||||
- 🧹 Очистка скриптов (удален postbuild, лишние файлы)
|
||||
|
||||
### v2.0.1 (2025-10-24)
|
||||
|
||||
- 🚀 Static Site Generation (SSG)
|
||||
- 💡 React 18 hydration
|
||||
- 📚 Документация по SSG
|
||||
|
||||
---
|
||||
|
||||
**Вопросы?** → primakov.pro@yandex.ru
|
||||
|
||||
**Документация актуальна**: 2025-10-24
|
||||
|
||||
226
index.html
226
index.html
@ -1,226 +1,2 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Tatar Punk - AI-агенты для бизнеса будущего</title>
|
||||
<meta name="description" content="Tatar Punk - инновационная компания, специализирующаяся на разработке интеллектуальных решений на основе AI-агентов. Автоматизация бизнес-процессов, обучение разработке AI-агентов на LangChain и LangGraph.">
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/src/styles/landing.scss">
|
||||
</head>
|
||||
<body>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt=""></div></noscript>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-background">
|
||||
<div class="grid"></div>
|
||||
<div class="glowing-orb"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
<span class="highlight">AI-агенты</span> для бизнеса будущего
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Начать внедрение</button>
|
||||
<button class="btn-secondary">Узнать больше</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<div class="mouse"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- News Section (вынесено вверх) -->
|
||||
<section class="news">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Новости</h2>
|
||||
<div class="news-card">
|
||||
<div class="news-date">31 октября 2025</div>
|
||||
<h3 class="news-title">Практический воркшоп: Запустись с ИИ-помощником</h3>
|
||||
<p class="news-description">
|
||||
Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00.
|
||||
</p>
|
||||
<div class="news-details">
|
||||
<span>📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал</span>
|
||||
<span>💰 3 000 рублей</span>
|
||||
</div>
|
||||
<a href="https://tatarpunk.itpark.tech/" target="_blank" rel="noopener noreferrer" class="news-link">
|
||||
Зарегистрироваться →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="stats">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">$236 млрд</div>
|
||||
<div class="stat-label">Рынок к 2034</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">45.8%</div>
|
||||
<div class="stat-label">CAGR</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">85-90%</div>
|
||||
<div class="stat-label">Снижение затрат</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">74%</div>
|
||||
<div class="stat-label">ROI за год</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="benefits">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Революция в бизнес-автоматизации</h2>
|
||||
<p class="section-subtitle">
|
||||
AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем
|
||||
</p>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">📊</div>
|
||||
<h3 class="benefit-title">Измеримая эффективность</h3>
|
||||
<p class="benefit-description">ROI в течение первого года, снижение затрат на 85-90%</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🚀</div>
|
||||
<h3 class="benefit-title">Масштабируемость</h3>
|
||||
<p class="benefit-description">Повышение эффективности на 55%, рост без пропорциональных затрат</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🧠</div>
|
||||
<h3 class="benefit-title">Непрерывное обучение</h3>
|
||||
<p class="benefit-description">AI-агенты адаптируются и совершенствуются со временем</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solutions Section -->
|
||||
<section class="solutions">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Преимущества по направлениям</h2>
|
||||
<div class="solutions-tabs">
|
||||
<div class="tab-content">
|
||||
<div class="solution-item">
|
||||
<h3>Клиентский сервис</h3>
|
||||
<ul>
|
||||
<li>✓ Автоматизация до 80% обращений</li>
|
||||
<li>✓ Сокращение времени ответа на 68%</li>
|
||||
<li>✓ Klarna обслуживает 85 млн пользователей</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Продажи и маркетинг</h3>
|
||||
<ul>
|
||||
<li>✓ Увеличение конверсии на 15-30%</li>
|
||||
<li>✓ Повышение выручки на 3-15%</li>
|
||||
<li>✓ GitHub Copilot ускоряет разработку на 126%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Бизнес-аналитика</h3>
|
||||
<ul>
|
||||
<li>✓ Сокращение времени поиска на 40%</li>
|
||||
<li>✓ Улучшение качества данных на 35%</li>
|
||||
<li>✓ Детальные отчёты за минуты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Education Section -->
|
||||
<section class="education">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Обучение разработке AI-агентов</h2>
|
||||
<div class="education-content">
|
||||
<div class="education-text">
|
||||
<h3>Почему LangChain & LangGraph?</h3>
|
||||
<p>
|
||||
Специалисты по разработке AI-агентов получают конкурентные зарплаты:
|
||||
</p>
|
||||
<ul class="salary-list">
|
||||
<li>Junior: $70,000 - $95,000</li>
|
||||
<li>Mid-level: $95,000 - $140,000</li>
|
||||
<li>Senior: $140,000 - $220,000</li>
|
||||
<li>Principal: $220,000 - $350,000</li>
|
||||
</ul>
|
||||
<p>
|
||||
LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем
|
||||
</p>
|
||||
</div>
|
||||
<div class="education-tech">
|
||||
<div class="tech-badge">LangChain</div>
|
||||
<div class="tech-badge">LangGraph</div>
|
||||
<div class="tech-badge">700+ интеграций</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Us Section -->
|
||||
<section class="why-us">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Почему выбирают Tatar Punk</h2>
|
||||
<div class="why-us-grid">
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎯</div>
|
||||
<h3>Экспертиза</h3>
|
||||
<p>Глубокие знания в области разработки AI-агентов</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">📈</div>
|
||||
<h3>Результаты</h3>
|
||||
<p>Измеримая бизнес-ценность и ROI в течение года</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎓</div>
|
||||
<h3>Образование</h3>
|
||||
<p>Готовим специалистов будущего с зарплатой от $70k</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🚀</div>
|
||||
<h3>Инновации</h3>
|
||||
<p>Cutting-edge технологии от лидеров индустрии</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="cta-title">Готовы трансформировать ваш бизнес?</h2>
|
||||
<p class="cta-subtitle">
|
||||
Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<button class="btn-primary">Консультация по внедрению</button>
|
||||
<button class="btn-secondary">Записаться на курс</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
<!-- This file is generated from src/html/index.pug -->
|
||||
|
||||
|
||||
162
landing.md
162
landing.md
@ -1,162 +0,0 @@
|
||||
Материалы для лендинга Tatar Punk
|
||||
О компании
|
||||
Tatar Punk — инновационная компания, специализирующаяся на разработке интеллектуальных решений на основе AI-агентов. Мы помогаем бизнесу автоматизировать сложные процессы, масштабировать операции и достигать новых высот эффективности с помощью передовых технологий искусственного интеллекта.
|
||||
|
||||
Futuristic office showcasing AI agents driving the future of business automation
|
||||
Наши решения: AI-агенты для бизнеса
|
||||
Преимущества решений на основе AI-агентов
|
||||
Революция в бизнес-автоматизации
|
||||
|
||||
AI-агенты представляют собой новое поколение автоматизации, выходящее далеко за рамки традиционных систем. В отличие от обычных ботов, они способны к анализу данных, пониманию естественного языка и принятию контекстно-зависимых решений. Рынок AI-агентов оценивается в $5.4 млрд в 2024 году и прогнозируется достичь $236 млрд к 2034 году с ежегодным ростом 45.8%.
|
||||
|
||||
Измеримая экономическая эффективность
|
||||
|
||||
Внедрение AI-агентов приносит впечатляющую окупаемость инвестиций. 74% руководителей отмечают достижение ROI в течение первого года, а организации демонстрируют снижение операционных затрат на 30-50%. Стоимость обработки одного обращения снижается с $3-6 при использовании человеческого труда до $0.25-0.50 при использовании AI-агентов — это сокращение расходов на 85-90%. Период окупаемости составляет всего 4-6 месяцев для большинства внедрений.
|
||||
|
||||
Масштабируемость без пропорционального роста затрат
|
||||
|
||||
AI-агенты позволяют компаниям масштабироваться быстрее, поскольку могут реплицироваться мгновенно, без необходимости найма и обучения новых сотрудников. Организации, использующие AI-агентов, сообщают о повышении эффективности на 55% и снижении затрат на 35%. В сфере производства AI-агенты сокращают простои на 50%, а в здравоохранении могут сэкономить до $150 млрд ежегодно к 2026 году.
|
||||
|
||||
Конкретные преимущества по направлениям
|
||||
|
||||
Клиентский сервис и поддержка:
|
||||
|
||||
Автоматизация до 80% обращений клиентов уровня L1/L2
|
||||
|
||||
Сокращение времени ответа на 68% и уменьшение очередей обращений на 54%
|
||||
|
||||
Повышение показателя разрешения при первом контакте на 22%
|
||||
|
||||
Klarna использует LangGraph для обслуживания 85 млн пользователей, сокращая время разрешения на 80%
|
||||
|
||||
Продажи и маркетинг:
|
||||
|
||||
Увеличение конверсии на 15-30% за счет персонализации
|
||||
|
||||
Повышение выручки на 3-15% согласно данным McKinsey
|
||||
|
||||
GitHub Copilot ускоряет разработку кода на 126%, доказывая мощь AI-агентов в софтверной разработке
|
||||
|
||||
Бизнес-аналитика и исследования:
|
||||
|
||||
Сокращение времени на поиск информации на 40%
|
||||
|
||||
Улучшение качества и релевантности потребляемой информации на 35%
|
||||
|
||||
Анализ обширных массивов данных и генерация детальных отчетов за минуты
|
||||
|
||||
Непрерывное улучшение и адаптация
|
||||
|
||||
В отличие от статичной автоматизации, AI-агенты обучаются и совершенствуются со временем, обеспечивая долгосрочную рентабельность инвестиций. Они способны предсказывать тренды, выявлять возможности для роста и помогать бизнесу быстро адаптироваться к изменениям рынка.
|
||||
|
||||
Реальные кейсы внедрения
|
||||
|
||||
Крупные компании уже получают результаты:
|
||||
|
||||
Uber автоматизирует миграцию кода с помощью сети LangGraph-агентов
|
||||
|
||||
Elastic использует оркестрацию AI-агентов для обнаружения угроз, сокращая ручной труд
|
||||
|
||||
Amazon генерирует 35% онлайн-продаж через AI-движок
|
||||
|
||||
Bank of America обслуживает 42 млн пользователей через виртуального ассистента Erica с более чем 2 млрд взаимодействий
|
||||
|
||||
Enterprise AI Agents enable automation in IT, HR, search, employee management, and creative functions in business
|
||||
Обучение разработке AI-агентов
|
||||
Почему стоит учиться разработке на LangChain & LangGraph
|
||||
Высокий спрос на рынке труда
|
||||
|
||||
Специалисты по разработке AI-агентов входят в число наиболее востребованных и высокооплачиваемых профессионалов технологической отрасли. Спрос на навыки prompt engineering и интеграции LLM вырос на 456% год к году, а специалисты по Natural Language Understanding командуют медианной зарплатой в $188,600.
|
||||
|
||||
Впечатляющие зарплатные перспективы
|
||||
|
||||
Разработчики AI-агентов с опытом в LangChain и LangGraph получают конкурентные зарплаты:
|
||||
|
||||
Junior специалисты (0-2 года): $70,000 - $95,000 в год
|
||||
|
||||
Mid-level разработчики (3-5 лет): $95,000 - $140,000 в год
|
||||
|
||||
Senior специалисты (6+ лет): $140,000 - $220,000 в год
|
||||
|
||||
Principal AI-агенты и Chief AI Strategists: $220,000 - $350,000 в год
|
||||
|
||||
Фрилансеры в этой области зарабатывают от $40 до $96 в час, что значительно выше средних ставок разработчиков ($30-95/час). При 8-часовом рабочем дне это составляет $320-768 в день.
|
||||
|
||||
Быстрый путь к профессионализму
|
||||
|
||||
Опытные разработчики могут начать фриланс в области разработки AI-агентов уже после 3-6 месяцев целенаправленного обучения. Полное мастерство достигается за 1-2 года практического опыта с различными типами агентов и бизнес-приложениями.
|
||||
|
||||
LangGraph и LangChain — технологии будущего
|
||||
|
||||
LangChain предоставляет обширную экосистему из более чем 700 интеграций и идеально подходит для быстрого прототипирования, RAG-систем и документообработки. LangGraph — это следующий уровень, фреймворк для построения stateful приложений с множественными агентами, которые могут обрабатывать сложные циклические рабочие процессы.
|
||||
|
||||
Почему LangGraph критически важен:
|
||||
|
||||
Human-in-the-Loop паттерны: легко добавляйте этапы, где человек может проверить или одобрить действия — критически важно для production-приложений
|
||||
|
||||
Чекпоинтинг и персистентность: сохраняйте состояние на любом этапе, что позволяет восстановление после ошибок и поддержку долгосрочной памяти
|
||||
|
||||
Мульти-агентные системы: координация между специализированными агентами для автоматизированного обслуживания клиентов или комплексных аналитических рабочих процессов
|
||||
|
||||
Потоковая поддержка: получайте обновления в реальном времени о действиях агентов для лучшего пользовательского опыта
|
||||
|
||||
Ведущие компании доверяют LangGraph
|
||||
|
||||
Компании из списка Fortune 500 уже используют эти технологии:
|
||||
|
||||
40% компаний Fortune 500 используют автономных агентов CrewAI
|
||||
|
||||
Ally Bank использует LangGraph для мульти-агентных agentic workflows
|
||||
|
||||
Klarna, Uber, Elastic — все используют LangGraph для критически важных систем
|
||||
|
||||
Универсальность применения
|
||||
|
||||
Навыки разработки AI-агентов применимы в множестве отраслей:
|
||||
|
||||
Финансы: автоматизированная аналитика, управление рисками, fraud detection
|
||||
|
||||
Здравоохранение: диагностическая поддержка, управление пациентами, клинические исследования
|
||||
|
||||
E-commerce: персонализация, рекомендации, автоматизация поддержки
|
||||
|
||||
IT и DevOps: автоматизация разработки, мониторинг систем, code review
|
||||
|
||||
HR: скрининг резюме, автоматизация онбординга, вовлеченность сотрудников
|
||||
|
||||
Конкурентное преимущество
|
||||
|
||||
90% бизнесов рассматривают AI-агентов как конкурентное преимущество, а не просто инструмент. 85% предприятий и 78% малого и среднего бизнеса уже используют AI-агентов. Овладение LangChain и LangGraph дает вам ключ к разработке этих систем и позволяет быть востребованным на рынке, который растет с CAGR 45.8%.
|
||||
|
||||
Экосистема обучения и поддержки
|
||||
|
||||
LangChain предоставляет обширные образовательные ресурсы, включая LangChain Academy с курсами по LangGraph, LangSmith для отладки и мониторинга агентов, и LangGraph Studio — визуальный интерфейс для разработки. Сообщество активно развивается, что обеспечивает постоянную поддержку и обмен опытом.
|
||||
|
||||
Новости
|
||||
Приглашаем на мероприятие 31 октября 2025
|
||||
|
||||
Почему выбирают Tatar Punk
|
||||
Экспертиза — наша команда имеет глубокие знания в области разработки AI-агентов на базе LangChain и LangGraph.
|
||||
|
||||
Результаты — мы создаем решения, которые приносят измеримую бизнес-ценность: снижение затрат на 85-90%, повышение эффективности на 55%, ROI в течение первого года.
|
||||
|
||||
Образование — мы не просто разрабатываем решения, мы обучаем специалистов будущего, готовя их к карьере в одной из самых быстрорастущих и высокооплачиваемых областей технологий.
|
||||
|
||||
Инновации — мы следим за последними трендами и внедряем cutting-edge технологии, которые используют лидеры индустрии: Klarna, Uber, Elastic, Bank of America.
|
||||
|
||||
Призыв к действию
|
||||
Готовы трансформировать ваш бизнес с помощью AI-агентов?
|
||||
|
||||
Свяжитесь с нами для консультации по внедрению intelligent automation в вашу компанию.
|
||||
|
||||
Хотите войти в высокооплачиваемую профессию разработчика AI-агентов?
|
||||
|
||||
Запишитесь на наши курсы по LangChain и LangGraph и начните карьеру с зарплатой от $70,000 в год уже через 3-6 месяцев обучения.
|
||||
|
||||
Не пропустите мероприятие 31 октября 2025!
|
||||
|
||||
Зарегистрируйтесь сейчас и получите доступ к докладам ведущих экспертов, практическим воркшопам и нетворкингу с профессионалами индустрии.
|
||||
|
||||
Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации
|
||||
|
||||
Building the future with AI agents
|
||||
@ -1 +0,0 @@
|
||||
{}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
{}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
|
||||
}
|
||||
12220
package-lock.json
generated
12220
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
53
package.json
53
package.json
@ -1,18 +1,11 @@
|
||||
{
|
||||
"name": "bro.landing",
|
||||
"version": "2.0.1",
|
||||
"description": "",
|
||||
"main": "./src/index.tsx",
|
||||
"description": "Landing page for Tatar Punk",
|
||||
"scripts": {
|
||||
"docker:rerun": "docker stop adminka_nginx2 && sh d-scripts/up-nginx.sh",
|
||||
"predeploy": "npm i && npm run build:prod",
|
||||
"redeploy": "npm run predeploy && npm run docker:rerun || sh d-scripts/up-nginx.sh",
|
||||
"clean": "rimraf dist",
|
||||
"eslint": "npx eslint src",
|
||||
"prettier": "prettier --write .",
|
||||
"test": "jest --coverage",
|
||||
"dev": "vite",
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build:prod": "vite build --mode production",
|
||||
"preview": "vite preview"
|
||||
@ -20,47 +13,17 @@
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/preset-typescript": "7.24.7",
|
||||
"@brojs/cli": "1.9.5",
|
||||
"@chakra-ui/icons": "^2.1.1",
|
||||
"@emotion/css": "^11.13.0",
|
||||
"@reduxjs/toolkit": "^2.2.6",
|
||||
"dayjs": "^1.11.12",
|
||||
"express": "^4.19.2",
|
||||
"i18next": "^23.12.2",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-xhr-backend": "^3.2.2",
|
||||
"lottie-react": "^2.4.0",
|
||||
"prettier": "^3.3.3",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-i18next": "^15.0.0",
|
||||
"react-intersection-observer": "^10.0.0",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"redux": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.0",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@vitejs/plugin-react": "^5.1.0",
|
||||
"babel-jest": "^29.7.0",
|
||||
"css-loader": "^7.1.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.35.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"globals": "^15.9.0",
|
||||
"html-webpack-plugin": "^5.6.0",
|
||||
"jest": "^29.7.0",
|
||||
"html-webpack-plugin": "^5.6.4",
|
||||
"mini-css-extract-plugin": "^2.9.4",
|
||||
"puppeteer": "^24.26.1",
|
||||
"pug": "^3.0.3",
|
||||
"rimraf": "^5.0.5",
|
||||
"sass": "^1.93.2",
|
||||
"sass-loader": "^16.0.6",
|
||||
"style-loader": "^4.0.0",
|
||||
"ts-jest": "^29.2.3",
|
||||
"typescript-eslint": "^8.1.0",
|
||||
"vite": "^7.1.12",
|
||||
"vite-plugin-sass": "^0.1.0"
|
||||
"webpack": "^5.102.1",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-server": "^5.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
214
readme.md
214
readme.md
@ -1,185 +1,63 @@
|
||||
# BROJS.RU Landing
|
||||
# BRO Landings
|
||||
|
||||
Лендинг платформы для обучения фронтенд-разработке
|
||||
Static pages platform for BRO platform - multiple landing pages and documentation.
|
||||
|
||||
## 🚀 Особенности v3.0 (Vite)
|
||||
## Pages
|
||||
|
||||
- ⚡ **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!**)
|
||||
- **Landing** (`/`) - Tatar Punk landing page - AI agents for business automation
|
||||
- **Terms** (`/terms.html`) - User agreement and terms of service
|
||||
|
||||
## 📦 Установка
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
root/
|
||||
src/
|
||||
html/ # Source Pug templates
|
||||
index.pug # Landing template
|
||||
terms.pug # Terms template
|
||||
styles/ # SCSS stylesheets
|
||||
landing.scss # Landing styles
|
||||
terms.scss # Terms styles
|
||||
index.html # Entry point wrapper for landing
|
||||
terms.html # Entry point wrapper for terms
|
||||
vite.config.ts # Vite config with custom Pug plugin
|
||||
dist/ # Production build (auto-generated)
|
||||
index.html # Built landing page
|
||||
terms.html # Built terms page
|
||||
*.css # Compiled stylesheets
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start # Start dev server on http://localhost:8099
|
||||
npm run dev # Same as start
|
||||
```
|
||||
|
||||
## 🛠️ Разработка
|
||||
Open in browser:
|
||||
- http://localhost:8099/ - Landing page
|
||||
- http://localhost:8099/terms.html - Terms page
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
npm start # Dev сервер на http://localhost:8099
|
||||
npm run build:prod # Production build
|
||||
```
|
||||
|
||||
## 🏗️ Сборка
|
||||
Output goes to `dist/` directory with CDN-ready paths.
|
||||
|
||||
```bash
|
||||
npm run build # Production сборка в ./dist
|
||||
npm run preview # Просмотр production сборки
|
||||
```
|
||||
## Technologies
|
||||
|
||||
## 📄 Страницы
|
||||
- **Vite** - Fast build tool with custom Pug plugin
|
||||
- **Pug** - Template engine for HTML
|
||||
- **SCSS** - Styling with modern features
|
||||
- **Static pages** - Pure static HTML output, perfect for SEO
|
||||
- **Multi-page** - Multiple static pages support
|
||||
|
||||
### Главная `/`
|
||||
- **React** приложение с анимацией Lottie
|
||||
- Динамическая страница "В разработке"
|
||||
- Dev: `http://localhost:8099/`
|
||||
- Prod: `brojs.ru/` → загружает JS с `https://static.brojs.ru/landing/main/`
|
||||
## How it works
|
||||
|
||||
### Terms `/terms`
|
||||
- `/terms` → автоматический редирект на `/terms.html`
|
||||
- **Чистый HTML** без JavaScript
|
||||
- Полный текст пользовательского соглашения
|
||||
- SEO-оптимизирован
|
||||
- Адаптивный дизайн
|
||||
- Dev: `http://localhost:8099/terms`
|
||||
- Prod: `brojs.ru/terms` → загружает CSS с `https://static.brojs.ru/landing/main/`
|
||||
1. Edit `.pug` templates in `src/html/`
|
||||
2. Vite's custom plugin compiles Pug to HTML
|
||||
3. SCSS is compiled to CSS
|
||||
4. Production build outputs static HTML + CSS files
|
||||
|
||||
## 🔌 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)
|
||||
|
||||
---
|
||||
|
||||
**Простота + Скорость + Мощь!** 🎉
|
||||
|
||||
File diff suppressed because one or more lines are too long
14
src/app.tsx
14
src/app.tsx
@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { Dashboard } from './dashboard';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Dashboard />
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,22 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
import { UnderConstructionPage, LandingPage } from './pages';
|
||||
|
||||
const Redirect = ({ href }: { href: string }) => {
|
||||
useEffect(() => {
|
||||
window.location.href = href;
|
||||
}, []);
|
||||
|
||||
return <div>Загрузка...</div>;
|
||||
};
|
||||
|
||||
export const Dashboard = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<UnderConstructionPage />} />
|
||||
<Route path="/terms" element={<Redirect href="/terms.html" />} />
|
||||
<Route path="*" element={<Redirect href="/landing.html" />} />
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
172
src/html/index.pug
Normal file
172
src/html/index.pug
Normal file
@ -0,0 +1,172 @@
|
||||
doctype html
|
||||
html(lang="ru")
|
||||
head
|
||||
meta(charset="UTF-8")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0")
|
||||
meta(http-equiv="X-UA-Compatible" content="ie=edge")
|
||||
title Tatar Punk - AI-агенты для бизнеса будущего
|
||||
meta(name="description" content="Tatar Punk - инновационная компания, специализирующаяся на разработке интеллектуальных решений на основе AI-агентов. Автоматизация бизнес-процессов, обучение разработке AI-агентов на LangChain и LangGraph.")
|
||||
meta(name="yandex-verification" content="98f7e15d1ad66018")
|
||||
link(href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet")
|
||||
link(rel="stylesheet" href="/src/styles/landing.scss")
|
||||
|
||||
body
|
||||
//- Yandex.Metrika counter
|
||||
script(type="text/javascript").
|
||||
(function(m,e,t,r,i,k,a){
|
||||
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
|
||||
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=104934454', 'ym');
|
||||
|
||||
ym(104934454, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
|
||||
noscript
|
||||
div
|
||||
img(src="https://mc.yandex.ru/watch/104934454" style="position:absolute; left:-9999px;" alt="")
|
||||
//- /Yandex.Metrika counter
|
||||
|
||||
//- Hero Section
|
||||
section.hero
|
||||
.hero-background
|
||||
.grid
|
||||
.glowing-orb
|
||||
.hero-content
|
||||
h1.hero-title
|
||||
span.highlight AI-агенты
|
||||
| для бизнеса будущего
|
||||
p.hero-subtitle Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности
|
||||
.hero-buttons
|
||||
button.btn-primary Начать внедрение
|
||||
button.btn-secondary Узнать больше
|
||||
.scroll-indicator
|
||||
.mouse
|
||||
|
||||
//- News Section
|
||||
section.news
|
||||
.container
|
||||
h2.section-title Новости
|
||||
.news-card
|
||||
.news-date 31 октября 2025
|
||||
h3.news-title Практический воркшоп: Запустись с ИИ-помощником
|
||||
p.news-description Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00.
|
||||
.news-details
|
||||
span 📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал
|
||||
span 💰 3 000 рублей
|
||||
a.news-link(href="https://tatarpunk.itpark.tech/" target="_blank" rel="noopener noreferrer") Зарегистрироваться →
|
||||
|
||||
//- Stats Section
|
||||
section.stats
|
||||
.container
|
||||
.stats-grid
|
||||
.stat-card
|
||||
.stat-value $236 млрд
|
||||
.stat-label Рынок к 2034
|
||||
.stat-card
|
||||
.stat-value 45.8%
|
||||
.stat-label CAGR
|
||||
.stat-card
|
||||
.stat-value 85-90%
|
||||
.stat-label Снижение затрат
|
||||
.stat-card
|
||||
.stat-value 74%
|
||||
.stat-label ROI за год
|
||||
|
||||
//- Benefits Section
|
||||
section.benefits
|
||||
.container
|
||||
h2.section-title Революция в бизнес-автоматизации
|
||||
p.section-subtitle AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем
|
||||
.benefits-grid
|
||||
.benefit-card
|
||||
.benefit-icon 📊
|
||||
h3.benefit-title Измеримая эффективность
|
||||
p.benefit-description ROI в течение первого года, снижение затрат на 85-90%
|
||||
.benefit-card
|
||||
.benefit-icon 🚀
|
||||
h3.benefit-title Масштабируемость
|
||||
p.benefit-description Повышение эффективности на 55%, рост без пропорциональных затрат
|
||||
.benefit-card
|
||||
.benefit-icon 🧠
|
||||
h3.benefit-title Непрерывное обучение
|
||||
p.benefit-description AI-агенты адаптируются и совершенствуются со временем
|
||||
|
||||
//- Solutions Section
|
||||
section.solutions
|
||||
.container
|
||||
h2.section-title Преимущества по направлениям
|
||||
.solutions-tabs
|
||||
.tab-content
|
||||
.solution-item
|
||||
h3 Клиентский сервис
|
||||
ul
|
||||
li ✓ Автоматизация до 80% обращений
|
||||
li ✓ Сокращение времени ответа на 68%
|
||||
li ✓ Klarna обслуживает 85 млн пользователей
|
||||
.solution-item
|
||||
h3 Продажи и маркетинг
|
||||
ul
|
||||
li ✓ Увеличение конверсии на 15-30%
|
||||
li ✓ Повышение выручки на 3-15%
|
||||
li ✓ GitHub Copilot ускоряет разработку на 126%
|
||||
.solution-item
|
||||
h3 Бизнес-аналитика
|
||||
ul
|
||||
li ✓ Сокращение времени поиска на 40%
|
||||
li ✓ Улучшение качества данных на 35%
|
||||
li ✓ Детальные отчёты за минуты
|
||||
|
||||
//- Education Section
|
||||
section.education
|
||||
.container
|
||||
h2.section-title Обучение разработке AI-агентов
|
||||
.education-content
|
||||
.education-text
|
||||
h3 Почему LangChain & LangGraph?
|
||||
p Специалисты по разработке AI-агентов получают конкурентные зарплаты:
|
||||
ul.salary-list
|
||||
li Junior: $70,000 - $95,000
|
||||
li Mid-level: $95,000 - $140,000
|
||||
li Senior: $140,000 - $220,000
|
||||
li Principal: $220,000 - $350,000
|
||||
p LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем
|
||||
.education-tech
|
||||
.tech-badge LangChain
|
||||
.tech-badge LangGraph
|
||||
.tech-badge 700+ интеграций
|
||||
|
||||
//- Why Us Section
|
||||
section.why-us
|
||||
.container
|
||||
h2.section-title Почему выбирают Tatar Punk
|
||||
.why-us-grid
|
||||
.why-us-card
|
||||
.why-us-icon 🎯
|
||||
h3 Экспертиза
|
||||
p Глубокие знания в области разработки AI-агентов
|
||||
.why-us-card
|
||||
.why-us-icon 📈
|
||||
h3 Результаты
|
||||
p Измеримая бизнес-ценность и ROI в течение года
|
||||
.why-us-card
|
||||
.why-us-icon 🎓
|
||||
h3 Образование
|
||||
p Готовим специалистов будущего с зарплатой от $70k
|
||||
.why-us-card
|
||||
.why-us-icon 🚀
|
||||
h3 Инновации
|
||||
p Cutting-edge технологии от лидеров индустрии
|
||||
|
||||
//- CTA Section
|
||||
section.cta
|
||||
.container
|
||||
h2.cta-title Готовы трансформировать ваш бизнес?
|
||||
p.cta-subtitle Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph
|
||||
.cta-buttons
|
||||
button.btn-primary Консультация по внедрению
|
||||
button.btn-secondary Записаться на курс
|
||||
|
||||
//- Footer
|
||||
footer.footer
|
||||
.container
|
||||
p © 2025 Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации
|
||||
151
src/html/terms.pug
Normal file
151
src/html/terms.pug
Normal file
@ -0,0 +1,151 @@
|
||||
doctype html
|
||||
html(lang="ru")
|
||||
head
|
||||
meta(charset="UTF-8")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0")
|
||||
meta(http-equiv="X-UA-Compatible" content="ie=edge")
|
||||
title Пользовательское соглашение - BROJS.RU
|
||||
meta(name="description" content="Пользовательское соглашение для платформы обучения фронтенд-разработке BROJS.RU. Условия использования, обработка персональных данных, права и обязанности сторон.")
|
||||
meta(name="yandex-verification" content="98f7e15d1ad66018")
|
||||
link(href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet")
|
||||
link(rel="stylesheet" href="/src/styles/terms.scss")
|
||||
|
||||
body
|
||||
//- Yandex.Metrika counter
|
||||
script(type="text/javascript").
|
||||
(function(m,e,t,r,i,k,a){
|
||||
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
|
||||
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=104934454', 'ym');
|
||||
|
||||
ym(104934454, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
|
||||
noscript
|
||||
div
|
||||
img(src="https://mc.yandex.ru/watch/104934454" style="position:absolute; left:-9999px;" alt="")
|
||||
//- /Yandex.Metrika counter
|
||||
|
||||
.container
|
||||
.terms-doc
|
||||
h1 Пользовательское соглашение
|
||||
p.subtitle для BROJS.RU
|
||||
p.date Последнее обновление: 25 мая 2025 г.
|
||||
|
||||
hr
|
||||
|
||||
h2 1. Термины
|
||||
p
|
||||
strong Платформа
|
||||
| — сайт
|
||||
a(href="https://brojs.ru" target="_blank") https://brojs.ru
|
||||
| , предоставляющий услуги обучения фронтенд-разработке.
|
||||
p
|
||||
strong Пользователь
|
||||
| — лицо, зарегистрированное на Платформе.
|
||||
p
|
||||
strong Микрофронтенд-проект
|
||||
| — код, конфигурации и иные материалы, созданные Пользователем.
|
||||
p
|
||||
strong Gravatar
|
||||
| — сторонний сервис (
|
||||
a(href="https://gravatar.com" target="_blank") https://gravatar.com
|
||||
| ), предоставляющий аватары на основе email-адресов пользователей.
|
||||
p
|
||||
strong Интеллектуальная собственность
|
||||
| — результаты интеллектуальной деятельности, включая, но не ограничиваясь, программные коды, дизайны, тексты, графику и другие объекты, защищенные законом.
|
||||
|
||||
h2 2. Условия использования
|
||||
|
||||
h3 2.1. Регистрация
|
||||
p Регистрация осуществляется через:
|
||||
ul
|
||||
li Аккаунт Yandex;
|
||||
li Email (с подтверждением через ссылку).
|
||||
|
||||
h3 2.2. Обязанности Пользователя
|
||||
p Пользователь обязуется:
|
||||
ul
|
||||
li Не передавать учетные данные третьим лицам;
|
||||
li Не использовать Платформу для распространения незаконного контента или совершения мошеннических действий;
|
||||
li Соблюдать конфиденциальность личных данных других участников Платформы.
|
||||
|
||||
h2 3. Персональные данные
|
||||
|
||||
h3 3.1. Собираемые данные
|
||||
p Платформа собирает:
|
||||
ul
|
||||
li Email (обязательно для регистрации);
|
||||
li Имя и фамилию (если указаны пользователем);
|
||||
li Аватар через Gravatar (автоматически, на основе email);
|
||||
li Информацию об активности (просмотренные курсы, выполненные задания).
|
||||
|
||||
h3 3.2. Цели обработки
|
||||
p Данные используются для:
|
||||
ul
|
||||
li Идентификации пользователя и авторизации;
|
||||
li Персонализации контента и отображения аватара через Gravatar;
|
||||
li Анализа активности для улучшения Платформы.
|
||||
|
||||
h3 3.3. Gravatar
|
||||
p
|
||||
| Платформа использует
|
||||
a(href="https://gravatar.com" target="_blank") Gravatar
|
||||
| для отображения аватаров пользователей на основе их email. При регистрации ваш email хешируется и отправляется на сервера Gravatar для получения изображения профиля. Если у вас нет учётной записи Gravatar, отображается аватар по умолчанию.
|
||||
p.note
|
||||
strong Важно:
|
||||
| Gravatar является сторонним сервисом, управляемым Automattic Inc. Мы не контролируем политику конфиденциальности Gravatar. Подробнее:
|
||||
a(href="https://automattic.com/privacy/" target="_blank") https://automattic.com/privacy/
|
||||
|
||||
h3 3.4. Хранение данных
|
||||
p Данные хранятся на защищённых серверах. Срок хранения — до момента удаления учётной записи пользователем или по требованию законодательства.
|
||||
|
||||
h3 3.5. Права пользователя
|
||||
p Вы имеете право:
|
||||
ul
|
||||
li Запросить доступ к своим данным;
|
||||
li Исправить неточности;
|
||||
li Удалить учётную запись и все связанные данные.
|
||||
|
||||
h2 4. Интеллектуальная собственность
|
||||
|
||||
h3 4.1. Права на микрофронтенд-проекты
|
||||
p Все микрофронтенд-проекты, созданные пользователем, остаются его интеллектуальной собственностью. Платформа не претендует на права на эти проекты.
|
||||
|
||||
h3 4.2. Лицензия на использование Платформы
|
||||
p Предоставляя доступ к своим проектам через Платформу, пользователь даёт ограниченную, неэксклюзивную лицензию для:
|
||||
ul
|
||||
li Хранения проектов на серверах Платформы;
|
||||
li Отображения проектов в рамках интерфейса Платформы.
|
||||
|
||||
h3 4.3. Контент Платформы
|
||||
p Все материалы, размещённые на Платформе (курсы, статьи, дизайн), защищены авторским правом и не могут быть использованы без разрешения администрации.
|
||||
|
||||
h2 5. Ответственность
|
||||
|
||||
h3 5.1. Ограничение ответственности Платформы
|
||||
p Платформа не несёт ответственности за:
|
||||
ul
|
||||
li Потерю данных в результате технических сбоев;
|
||||
li Действия третьих лиц, получивших доступ к учётной записи пользователя;
|
||||
li Содержание микрофронтенд-проектов, созданных пользователями.
|
||||
|
||||
h3 5.2. Ответственность пользователя
|
||||
p Пользователь несёт полную ответственность за:
|
||||
ul
|
||||
li Соблюдение условий настоящего Соглашения;
|
||||
li Контент, размещённый на Платформе;
|
||||
li Безопасность своих учётных данных.
|
||||
|
||||
h2 6. Изменение условий
|
||||
p Платформа оставляет за собой право изменять условия настоящего Соглашения. Пользователи уведомляются об изменениях через email или уведомления на сайте.
|
||||
|
||||
h2 7. Контакты
|
||||
p
|
||||
| По вопросам, связанным с настоящим Соглашением, вы можете обратиться по адресу:
|
||||
a(href="mailto:support@brojs.ru") support@brojs.ru
|
||||
|
||||
hr
|
||||
|
||||
p.footer-note Регистрируясь на Платформе, вы подтверждаете, что прочитали и согласны с условиями настоящего Пользовательского соглашения.
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './app';
|
||||
import './styles/main.module.scss';
|
||||
|
||||
const MOUNT_NODE = document.getElementById('app');
|
||||
|
||||
if (MOUNT_NODE) {
|
||||
const root = createRoot(MOUNT_NODE);
|
||||
root.render(<App />);
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as UnderConstructionPage } from './under-construction';
|
||||
export { default as LandingPage } from './landing/Landing';
|
||||
@ -1,577 +0,0 @@
|
||||
// Variables
|
||||
$dark-bg: #0a0a0f;
|
||||
$dark-surface: #141420;
|
||||
$dark-card: #1a1a2e;
|
||||
$accent-primary: #00d4ff;
|
||||
$accent-secondary: #7c3aed;
|
||||
$text-primary: #ffffff;
|
||||
$text-secondary: #b4b4c7;
|
||||
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
$gradient-accent: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
|
||||
|
||||
// Animations
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
// Base styles
|
||||
.landing {
|
||||
background: $dark-bg;
|
||||
color: $text-primary;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
// Hero Section
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroBackground {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(124, 58, 237, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(124, 58, 237, 0.1) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.glowingOrb {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
left: 20%;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
animation: slideInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: $gradient-accent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.5rem;
|
||||
color: $text-secondary;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.heroButtons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
background: $gradient-accent;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.btnSecondary {
|
||||
background: transparent;
|
||||
color: $accent-primary;
|
||||
border: 2px solid $accent-primary;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.scrollIndicator {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mouse {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid $accent-primary;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
background: $accent-primary;
|
||||
border-radius: 2px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Stats Section
|
||||
.stats {
|
||||
padding: 80px 0;
|
||||
background: $dark-surface;
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
background: $dark-card;
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: $accent-primary;
|
||||
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
background: $gradient-accent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
color: $text-secondary;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// Benefits Section
|
||||
.benefits {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
text-align: center;
|
||||
color: $text-secondary;
|
||||
font-size: 1.2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 4rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.benefitsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.benefitCard {
|
||||
background: $dark-card;
|
||||
padding: 2.5rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
border-color: $accent-primary;
|
||||
box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.benefitIcon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.benefitTitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.benefitDescription {
|
||||
color: $text-secondary;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Solutions Section
|
||||
.solutions {
|
||||
padding: 100px 0;
|
||||
background: $dark-surface;
|
||||
}
|
||||
|
||||
.solutionsTabs {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.solutionItem {
|
||||
background: $dark-card;
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
border-left: 4px solid $accent-primary;
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: $accent-primary;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 0.5rem 0;
|
||||
color: $text-secondary;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
&::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: $accent-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Education Section
|
||||
.education {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.educationContent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-top: 3rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.educationText {
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text-secondary;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.salaryList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
li {
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(124, 58, 237, 0.2);
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.educationTech {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.techBadge {
|
||||
background: $gradient-accent;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
|
||||
// News Section
|
||||
.news {
|
||||
padding: 100px 0;
|
||||
background: $dark-surface;
|
||||
}
|
||||
|
||||
.newsCard {
|
||||
background: $dark-card;
|
||||
padding: 3rem;
|
||||
border-radius: 24px;
|
||||
border: 2px solid $accent-primary;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: $gradient-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.newsDate {
|
||||
color: $accent-primary;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.newsTitle {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.newsDescription {
|
||||
color: $text-secondary;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.newsDetails {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.newsLink {
|
||||
display: inline-block;
|
||||
color: $accent-primary;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
// Why Us Section
|
||||
.whyUs {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.whyUsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.whyUsCard {
|
||||
background: $dark-card;
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: $accent-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.whyUsIcon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.whyUsCard h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.whyUsCard p {
|
||||
color: $text-secondary;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
// CTA Section
|
||||
.cta {
|
||||
padding: 100px 0;
|
||||
background: $dark-surface;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
color: $text-secondary;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ctaButtons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: $text-secondary;
|
||||
border-top: 1px solid rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
|
||||
@ -1,247 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styles from './Landing.module.scss';
|
||||
|
||||
interface BenefitData {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface StatsData {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const Landing: React.FC = () => {
|
||||
const [scrollY, setScrollY] = useState(0);
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrollY(window.scrollY);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const benefits: BenefitData[] = [
|
||||
{
|
||||
title: 'Измеримая эффективность',
|
||||
description: 'ROI в течение первого года, снижение затрат на 85-90%',
|
||||
icon: '📊'
|
||||
},
|
||||
{
|
||||
title: 'Масштабируемость',
|
||||
description: 'Повышение эффективности на 55%, рост без пропорциональных затрат',
|
||||
icon: '🚀'
|
||||
},
|
||||
{
|
||||
title: 'Непрерывное обучение',
|
||||
description: 'AI-агенты адаптируются и совершенствуются со временем',
|
||||
icon: '🧠'
|
||||
}
|
||||
];
|
||||
|
||||
const stats: StatsData[] = [
|
||||
{ value: '$236 млрд', label: 'Рынок к 2034' },
|
||||
{ value: '45.8%', label: 'CAGR' },
|
||||
{ value: '85-90%', label: 'Снижение затрат' },
|
||||
{ value: '74%', label: 'ROI за год' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.landing}>
|
||||
{/* Hero Section */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.heroBackground}>
|
||||
<div className={styles.grid}></div>
|
||||
<div className={styles.glowingOrb} style={{ transform: `translate(${scrollY * 0.5}px, ${scrollY * 0.3}px)` }}></div>
|
||||
</div>
|
||||
<div className={styles.heroContent}>
|
||||
<h1 className={styles.heroTitle}>
|
||||
<span className={styles.highlight}>AI-агенты</span> для бизнеса будущего
|
||||
</h1>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности
|
||||
</p>
|
||||
<div className={styles.heroButtons}>
|
||||
<button className={styles.btnPrimary}>Начать внедрение</button>
|
||||
<button className={styles.btnSecondary}>Узнать больше</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.scrollIndicator}>
|
||||
<div className={styles.mouse}></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className={styles.stats}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.statsGrid}>
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className={styles.statCard}>
|
||||
<div className={styles.statValue}>{stat.value}</div>
|
||||
<div className={styles.statLabel}>{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className={styles.benefits}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.sectionTitle}>Революция в бизнес-автоматизации</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем
|
||||
</p>
|
||||
<div className={styles.benefitsGrid}>
|
||||
{benefits.map((benefit, index) => (
|
||||
<div key={index} className={styles.benefitCard}>
|
||||
<div className={styles.benefitIcon}>{benefit.icon}</div>
|
||||
<h3 className={styles.benefitTitle}>{benefit.title}</h3>
|
||||
<p className={styles.benefitDescription}>{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Solutions Section */}
|
||||
<section className={styles.solutions}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.sectionTitle}>Преимущества по направлениям</h2>
|
||||
<div className={styles.solutionsTabs}>
|
||||
<div className={styles.tabContent}>
|
||||
<div className={styles.solutionItem}>
|
||||
<h3>Клиентский сервис</h3>
|
||||
<ul>
|
||||
<li>Автоматизация до 80% обращений</li>
|
||||
<li>Сокращение времени ответа на 68%</li>
|
||||
<li>Klarna обслуживает 85 млн пользователей</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.solutionItem}>
|
||||
<h3>Продажи и маркетинг</h3>
|
||||
<ul>
|
||||
<li>Увеличение конверсии на 15-30%</li>
|
||||
<li>Повышение выручки на 3-15%</li>
|
||||
<li>GitHub Copilot ускоряет разработку на 126%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.solutionItem}>
|
||||
<h3>Бизнес-аналитика</h3>
|
||||
<ul>
|
||||
<li>Сокращение времени поиска на 40%</li>
|
||||
<li>Улучшение качества данных на 35%</li>
|
||||
<li>Детальные отчёты за минуты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Education Section */}
|
||||
<section className={styles.education}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.sectionTitle}>Обучение разработке AI-агентов</h2>
|
||||
<div className={styles.educationContent}>
|
||||
<div className={styles.educationText}>
|
||||
<h3>Почему LangChain & LangGraph?</h3>
|
||||
<p>
|
||||
Специалисты по разработке AI-агентов получают конкурентные зарплаты:
|
||||
</p>
|
||||
<ul className={styles.salaryList}>
|
||||
<li>Junior: $70,000 - $95,000</li>
|
||||
<li>Mid-level: $95,000 - $140,000</li>
|
||||
<li>Senior: $140,000 - $220,000</li>
|
||||
<li>Principal: $220,000 - $350,000</li>
|
||||
</ul>
|
||||
<p>
|
||||
LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.educationTech}>
|
||||
<div className={styles.techBadge}>LangChain</div>
|
||||
<div className={styles.techBadge}>LangGraph</div>
|
||||
<div className={styles.techBadge}>700+ интеграций</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* News Section */}
|
||||
<section className={styles.news}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.sectionTitle}>Новости</h2>
|
||||
<div className={styles.newsCard}>
|
||||
<div className={styles.newsDate}>31 октября 2025</div>
|
||||
<h3 className={styles.newsTitle}>Практический воркшоп: Запустись с ИИ-помощником</h3>
|
||||
<p className={styles.newsDescription}>
|
||||
Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00.
|
||||
</p>
|
||||
<div className={styles.newsDetails}>
|
||||
<span>📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал</span>
|
||||
<span>💰 3 000 рублей</span>
|
||||
</div>
|
||||
<a href="https://tatarpunk.itpark.tech/" target="_blank" rel="noopener noreferrer" className={styles.newsLink}>
|
||||
Зарегистрироваться →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Us Section */}
|
||||
<section className={styles.whyUs}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.sectionTitle}>Почему выбирают Tatar Punk</h2>
|
||||
<div className={styles.whyUsGrid}>
|
||||
<div className={styles.whyUsCard}>
|
||||
<div className={styles.whyUsIcon}>🎯</div>
|
||||
<h3>Экспертиза</h3>
|
||||
<p>Глубокие знания в области разработки AI-агентов</p>
|
||||
</div>
|
||||
<div className={styles.whyUsCard}>
|
||||
<div className={styles.whyUsIcon}>📈</div>
|
||||
<h3>Результаты</h3>
|
||||
<p>Измеримая бизнес-ценность и ROI в течение года</p>
|
||||
</div>
|
||||
<div className={styles.whyUsCard}>
|
||||
<div className={styles.whyUsIcon}>🎓</div>
|
||||
<h3>Образование</h3>
|
||||
<p>Готовим специалистов будущего с зарплатой от $70k</p>
|
||||
</div>
|
||||
<div className={styles.whyUsCard}>
|
||||
<div className={styles.whyUsIcon}>🚀</div>
|
||||
<h3>Инновации</h3>
|
||||
<p>Cutting-edge технологии от лидеров индустрии</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className={styles.cta}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.ctaTitle}>Готовы трансформировать ваш бизнес?</h2>
|
||||
<p className={styles.ctaSubtitle}>
|
||||
Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph
|
||||
</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<button className={styles.btnPrimary}>Консультация по внедрению</button>
|
||||
<button className={styles.btnSecondary}>Записаться на курс</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className={styles.footer}>
|
||||
<div className={styles.container}>
|
||||
<p>© 2025 Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import { UnderConstruction } from './underConstruction';
|
||||
|
||||
export default UnderConstruction;
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import Lottie from "lottie-react";
|
||||
import animation from '../../__data__/assets/lottie/under-construction.json';
|
||||
|
||||
export const UnderConstruction = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Lottie style ={{ maxHeight: 250 }} animationData={animation} />
|
||||
|
||||
<h3><center>Сайт в разработке</center></h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// Main styles for the landing page
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
2
src/styles/main.module.scss.d.ts
vendored
2
src/styles/main.module.scss.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
export const app: string;
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
const router = require('express').Router();
|
||||
|
||||
const timer = (time = 300) => (req, res, next) => setTimeout(next, time);
|
||||
|
||||
router.use(timer());
|
||||
|
||||
|
||||
module.exports = router;
|
||||
@ -1,11 +0,0 @@
|
||||
// Пример stub файла для /api/test
|
||||
module.exports = (req, res) => {
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.end(JSON.stringify({
|
||||
message: 'Hello from stub!',
|
||||
timestamp: new Date().toISOString(),
|
||||
method: req.method,
|
||||
url: req.url,
|
||||
}));
|
||||
};
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
// Пример stub для /api/user
|
||||
module.exports.default = {
|
||||
id: 1,
|
||||
name: 'Test User',
|
||||
email: 'user@brojs.ru',
|
||||
role: 'student'
|
||||
};
|
||||
|
||||
185
terms.html
185
terms.html
@ -1,185 +1,2 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Пользовательское соглашение - BROJS.RU</title>
|
||||
<meta name="description" content="Пользовательское соглашение для платформы обучения фронтенд-разработке BROJS.RU. Условия использования, обработка персональных данных, права и обязанности сторон.">
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/src/styles/terms.scss">
|
||||
</head>
|
||||
<body>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt=""></div></noscript>
|
||||
|
||||
<div class="container">
|
||||
<div class="terms-doc">
|
||||
<h1>Пользовательское соглашение</h1>
|
||||
<p class="subtitle">для BROJS.RU</p>
|
||||
<p class="date">Последнее обновление: 25 мая 2025 г.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>1. Термины</h2>
|
||||
<p><strong>Платформа</strong> — сайт <a href="https://brojs.ru" target="_blank">https://brojs.ru</a>, предоставляющий услуги обучения фронтенд-разработке.</p>
|
||||
<p><strong>Пользователь</strong> — лицо, зарегистрированное на Платформе.</p>
|
||||
<p><strong>Микрофронтенд-проект</strong> — код, конфигурации и иные материалы, созданные Пользователем.</p>
|
||||
<p><strong>Gravatar</strong> — сторонний сервис (<a href="https://gravatar.com" target="_blank">https://gravatar.com</a>), предоставляющий аватары на основе email-адресов пользователей.</p>
|
||||
<p><strong>Интеллектуальная собственность</strong> — результаты интеллектуальной деятельности, включая, но не ограничиваясь, программные коды, дизайны, тексты, графику и другие объекты, защищенные законом.</p>
|
||||
|
||||
<h2>2. Условия использования</h2>
|
||||
|
||||
<h3>2.1. Регистрация</h3>
|
||||
<p>Регистрация осуществляется через:</p>
|
||||
<ul>
|
||||
<li>Аккаунт Yandex;</li>
|
||||
<li>Email (с подтверждением через ссылку).</li>
|
||||
</ul>
|
||||
|
||||
<h3>2.2. Обязанности Пользователя</h3>
|
||||
<p>Пользователь обязуется:</p>
|
||||
<ul>
|
||||
<li>Не передавать учетные данные третьим лицам;</li>
|
||||
<li>Не использовать Платформу для распространения незаконного контента или совершения мошеннических действий;</li>
|
||||
<li>Соблюдать конфиденциальность личных данных других участников Платформы.</li>
|
||||
</ul>
|
||||
|
||||
<h2>3. Персональные данные</h2>
|
||||
|
||||
<h3>3.1. Собираемые данные</h3>
|
||||
<p>Платформа собирает:</p>
|
||||
<ul>
|
||||
<li>Никнейм;</li>
|
||||
<li>Email;</li>
|
||||
<li>ФИО (при наличии договора с учебным заведением);</li>
|
||||
<li>Данные о посещении занятий (через QR-код).</li>
|
||||
</ul>
|
||||
|
||||
<h3>3.2. Аватар через Gravatar</h3>
|
||||
<ul>
|
||||
<li>Платформа не хранит аватары на своих серверах. Для отображения используется Gravatar.</li>
|
||||
<li>Ссылка на аватар формируется на основе хэша email пользователя.</li>
|
||||
<li>Пользователь может активировать/отозвать согласие на использование Gravatar в настройках профиля.</li>
|
||||
<li>Отказ от Gravatar приведет к отображению стандартного изображения.</li>
|
||||
</ul>
|
||||
|
||||
<h3>3.3. Цели обработки данных</h3>
|
||||
<ul>
|
||||
<li>Предоставление доступа к Платформе;</li>
|
||||
<li>Передача данных о посещении учебным заведениям (ФИО, email, дата и время) в формате Excel.</li>
|
||||
</ul>
|
||||
|
||||
<h3>3.4. Хранение и передача данных</h3>
|
||||
<ul>
|
||||
<li>Персональные данные хранятся в СУБД PostgreSQL через Keycloak.</li>
|
||||
<li>Данные о посещении передаются учебным заведениям на основании договоров с преподавателями.</li>
|
||||
<li>Передача данных осуществляется с применением шифрования и протоколов безопасности.</li>
|
||||
</ul>
|
||||
|
||||
<h3>3.5. Срок хранения</h3>
|
||||
<ul>
|
||||
<li>Персональные данные удаляются в течение 30 дней после удаления аккаунта.</li>
|
||||
<li>Микрофронтенд-проекты хранятся 6 месяцев после завершения обучения.</li>
|
||||
</ul>
|
||||
|
||||
<h3>3.6. Отзыв согласия</h3>
|
||||
<ul>
|
||||
<li>Для отзыва согласия на обработку персональных данных необходимо направить письмо на <a href="mailto:primakov.pro@yandex.ru">primakov.pro@yandex.ru</a>.</li>
|
||||
<li>Отзыв приведет к удалению всех данных пользователя вручную.</li>
|
||||
<li>Частичное удаление отдельных категорий данных возможно по заявлению пользователя.</li>
|
||||
</ul>
|
||||
|
||||
<h2>4. Интеллектуальная собственность</h2>
|
||||
|
||||
<h3>4.1. Права Пользователя</h3>
|
||||
<ul>
|
||||
<li>Пользователь сохраняет авторские права на созданные проекты.</li>
|
||||
<li>Платформа не имеет прав на использование материалов Пользователя без явного согласия.</li>
|
||||
</ul>
|
||||
|
||||
<h3>4.2. Права Администрации</h3>
|
||||
<ul>
|
||||
<li>Администрация вправе удалить контент при нарушении условий соглашения или через 6 месяцев после завершения обучения.</li>
|
||||
<li>Проверка подлинности загружаемого материала осуществляется преподавателем, отвечающим за группу.</li>
|
||||
</ul>
|
||||
|
||||
<h2>5. Ответственность</h2>
|
||||
|
||||
<h3>5.1. Ограничение ответственности</h3>
|
||||
<p>Администрация не несет ответственности за:</p>
|
||||
<ul>
|
||||
<li>Утрату данных из-за действий Пользователя;</li>
|
||||
<li>Использование данных учебными заведениями после их передачи;</li>
|
||||
<li>Некорректное отображение аватаров через Gravatar.</li>
|
||||
</ul>
|
||||
|
||||
<h3>5.2. Основания для блокировки аккаунта</h3>
|
||||
<ul>
|
||||
<li>Нарушение авторских прав;</li>
|
||||
<li>Распространение спама/вирусов;</li>
|
||||
<li>Предоставление недостоверных данных (включая ФИО).</li>
|
||||
</ul>
|
||||
|
||||
<h3>5.3. Компенсация ущерба</h3>
|
||||
<ul>
|
||||
<li>В случае нарушения правил или утечки данных, Администрация обязана принять меры для минимизации последствий.</li>
|
||||
</ul>
|
||||
|
||||
<h2>6. Уведомления</h2>
|
||||
|
||||
<h3>6.1. Информационные сообщения</h3>
|
||||
<p>Платформа вправе отправлять Пользователю:</p>
|
||||
<ul>
|
||||
<li>Уведомления о технических работах, изменениях функционала;</li>
|
||||
<li>Сообщения о нарушениях или блокировке аккаунта;</li>
|
||||
<li>Рекламу собственных услуг или услуг третьих лиц.</li>
|
||||
</ul>
|
||||
|
||||
<h3>6.2. Отказ от уведомлений</h3>
|
||||
<ul>
|
||||
<li>Отказ от рекламных сообщений возможен через настройки Личного кабинета.</li>
|
||||
<li>Отказ от информационных уведомлений может ограничить доступ к функциям Платформы.</li>
|
||||
</ul>
|
||||
|
||||
<h2>7. Безопасность данных</h2>
|
||||
|
||||
<h3>7.1. Технические меры</h3>
|
||||
<ul>
|
||||
<li>Данные хранятся в СУБД PostgreSQL через Keycloak.</li>
|
||||
<li>Шифрование данных при передаче (HTTPS).</li>
|
||||
<li>Периодические тестирования системы на уязвимости.</li>
|
||||
</ul>
|
||||
|
||||
<h3>7.2. Двухфакторная аутентификация</h3>
|
||||
<ul>
|
||||
<li>Пользователи могут добровольно активировать двухфакторную аутентификацию (OTP) через Личный кабинет.</li>
|
||||
</ul>
|
||||
|
||||
<h2>8. Применимое право и разрешение споров</h2>
|
||||
|
||||
<h3>8.1. Применимое право</h3>
|
||||
<ul>
|
||||
<li>Соглашение регулируется законодательством РФ. Для пользователей из стран СНГ применяются нормы ЕАЭС.</li>
|
||||
<li>При расширении географии услуг Платформа будет соблюдать законодательство стран ЕСВР и ЕС.</li>
|
||||
</ul>
|
||||
|
||||
<h3>8.2. Разрешение споров</h3>
|
||||
<ul>
|
||||
<li>Споры разрешаются в суде по месту нахождения администрации Платформы.</li>
|
||||
</ul>
|
||||
|
||||
<h2>9. Изменения соглашения</h2>
|
||||
<p>Изменения вступают в силу после публикации на сайте.</p>
|
||||
|
||||
<h2>10. Контакты</h2>
|
||||
<p>Для обращений: <a href="mailto:primakov.pro@yandex.ru">primakov.pro@yandex.ru</a></p>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2025 BROJS.RU. Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!-- This file is generated from src/html/terms.pug -->
|
||||
|
||||
|
||||
140
vite.config.ts
140
vite.config.ts
@ -1,85 +1,81 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig, Plugin } from 'vite';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import pug from 'pug';
|
||||
|
||||
// Express middleware для stubs
|
||||
const stubsMiddleware = () => ({
|
||||
name: 'stubs-middleware',
|
||||
configureServer(server: any) {
|
||||
const stubsPath = path.resolve(__dirname, 'stubs/api');
|
||||
// Плагин для обработки Pug файлов
|
||||
function pugPlugin(): Plugin {
|
||||
return {
|
||||
name: 'vite-plugin-pug',
|
||||
|
||||
server.middlewares.use('/api', (req: any, res: any, next: any) => {
|
||||
// Получаем путь запроса без /api
|
||||
const apiPath = req.url.replace(/\?.*$/, ''); // убираем query params
|
||||
const stubFile = path.join(stubsPath, `${apiPath}.js`);
|
||||
|
||||
// Проверяем существует ли stub файл
|
||||
if (fs.existsSync(stubFile)) {
|
||||
try {
|
||||
// Очищаем кеш модуля для hot reload
|
||||
delete require.cache[require.resolve(stubFile)];
|
||||
const stub = require(stubFile);
|
||||
|
||||
// Если это функция, вызываем её
|
||||
if (typeof stub === 'function') {
|
||||
stub(req, res, next);
|
||||
} else if (stub.default && typeof stub.default === 'function') {
|
||||
stub.default(req, res, next);
|
||||
} else {
|
||||
// Если это просто объект, отдаём как JSON
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.end(JSON.stringify(stub.default || stub));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error loading stub ${stubFile}:`, error);
|
||||
res.statusCode = 500;
|
||||
res.end(JSON.stringify({ error: 'Internal Server Error' }));
|
||||
// Трансформация HTML из Pug во время сборки и dev
|
||||
transformIndexHtml: {
|
||||
order: 'pre',
|
||||
handler(html, ctx) {
|
||||
// Определяем путь к соответствующему .pug файлу
|
||||
const filename = ctx.filename;
|
||||
let pugPath: string | null = null;
|
||||
|
||||
if (filename.endsWith('index.html')) {
|
||||
pugPath = path.resolve(__dirname, 'src/html/index.pug');
|
||||
} else if (filename.endsWith('terms.html')) {
|
||||
pugPath = path.resolve(__dirname, 'src/html/terms.pug');
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
|
||||
if (pugPath && fs.existsSync(pugPath)) {
|
||||
console.log(`[pug-plugin] Compiling ${pugPath}`);
|
||||
const pugContent = fs.readFileSync(pugPath, 'utf-8');
|
||||
const compiled = pug.render(pugContent, {
|
||||
filename: pugPath,
|
||||
basedir: path.dirname(pugPath),
|
||||
pretty: process.env.NODE_ENV !== 'production'
|
||||
});
|
||||
console.log(`[pug-plugin] Compiled HTML length: ${compiled.length}`);
|
||||
return compiled;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Hot reload для .pug файлов
|
||||
handleHotUpdate({ file, server }) {
|
||||
if (file.endsWith('.pug')) {
|
||||
console.log(`[pug-plugin] Hot reload triggered for ${file}`);
|
||||
server.ws.send({
|
||||
type: 'full-reload',
|
||||
path: '*'
|
||||
});
|
||||
return [];
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const isProd = mode === 'production';
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
react(),
|
||||
stubsMiddleware()
|
||||
],
|
||||
base: isProd ? 'https://static.brojs.ru/landing/main/' : '/',
|
||||
server: {
|
||||
port: 8099,
|
||||
open: '/',
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
assetsDir: '.', // Все ассеты в корень dist
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'index.html'),
|
||||
terms: path.resolve(__dirname, 'terms.html'),
|
||||
plugins: [pugPlugin()],
|
||||
base: isProd ? 'https://static.brojs.ru/landing/main/' : '/',
|
||||
server: {
|
||||
port: 8099,
|
||||
open: '/',
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
assetsDir: '.',
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'index.html'),
|
||||
terms: path.resolve(__dirname, 'terms.html'),
|
||||
},
|
||||
output: {
|
||||
entryFileNames: '[name].[hash].js',
|
||||
chunkFileNames: '[name].[hash].js',
|
||||
assetFileNames: '[name].[hash].[ext]',
|
||||
}
|
||||
},
|
||||
output: {
|
||||
entryFileNames: '[name].[hash].js',
|
||||
chunkFileNames: '[name].[hash].js',
|
||||
assetFileNames: '[name].[hash].[ext]'
|
||||
}
|
||||
},
|
||||
},
|
||||
css: {
|
||||
modules: {
|
||||
localsConvention: 'camelCase',
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
}}); // Двойная скобка для закрытия return и defineConfig
|
||||
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user