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
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;
|
||||
|
||||
Reference in New Issue
Block a user