diff --git a/index.html b/index.html index e48e5a8..bdf01eb 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,226 @@ - - + + - - - BROJS.RU - Платформа обучения фронтенд-разработке - - + + Tatar Punk - AI-агенты для бизнеса будущего + + + + - -
- + + + +
+
+
+
+
+
+

+ AI-агенты для бизнеса будущего +

+

+ Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности +

+
+ + +
+
+
+
+
+
+ + +
+
+

Новости

+
+
31 октября 2025
+

Практический воркшоп: Запустись с ИИ-помощником

+

+ Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00. +

+
+ 📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал + 💰 3 000 рублей +
+ + Зарегистрироваться → + +
+
+
+ + +
+
+
+
+
$236 млрд
+
Рынок к 2034
+
+
+
45.8%
+
CAGR
+
+
+
85-90%
+
Снижение затрат
+
+
+
74%
+
ROI за год
+
+
+
+
+ + +
+
+

Революция в бизнес-автоматизации

+

+ AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем +

+
+
+
📊
+

Измеримая эффективность

+

ROI в течение первого года, снижение затрат на 85-90%

+
+
+
🚀
+

Масштабируемость

+

Повышение эффективности на 55%, рост без пропорциональных затрат

+
+
+
🧠
+

Непрерывное обучение

+

AI-агенты адаптируются и совершенствуются со временем

+
+
+
+
+ + +
+
+

Преимущества по направлениям

+
+
+
+

Клиентский сервис

+
    +
  • ✓ Автоматизация до 80% обращений
    • +
  • ✓ Сокращение времени ответа на 68%
    • +
  • ✓ Klarna обслуживает 85 млн пользователей
    • +
+
+
+

Продажи и маркетинг

+
    +
  • ✓ Увеличение конверсии на 15-30%
    • +
  • ✓ Повышение выручки на 3-15%
    • +
  • ✓ GitHub Copilot ускоряет разработку на 126%
    • +
+
+
+

Бизнес-аналитика

+
    +
  • ✓ Сокращение времени поиска на 40%
    • +
  • ✓ Улучшение качества данных на 35%
    • +
  • ✓ Детальные отчёты за минуты
    • +
+
+
+
+
+
+ + +
+
+

Обучение разработке AI-агентов

+
+
+

Почему LangChain & LangGraph?

+

+ Специалисты по разработке AI-агентов получают конкурентные зарплаты: +

+
    +
  • Junior: $70,000 - $95,000
    • +
  • Mid-level: $95,000 - $140,000
    • +
  • Senior: $140,000 - $220,000
    • +
  • Principal: $220,000 - $350,000
    • +
+

+ LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем +

+
+
+
LangChain
+
LangGraph
+
700+ интеграций
+
+
+
+
+ + +
+
+

Почему выбирают Tatar Punk

+
+
+
🎯
+

Экспертиза

+

Глубокие знания в области разработки AI-агентов

+
+
+
📈
+

Результаты

+

Измеримая бизнес-ценность и ROI в течение года

+
+
+
🎓
+

Образование

+

Готовим специалистов будущего с зарплатой от $70k

+
+
+
🚀
+

Инновации

+

Cutting-edge технологии от лидеров индустрии

+
+
+
+
+ + +
+
+

Готовы трансформировать ваш бизнес?

+

+ Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph +

+
+ + +
+
+
+ + + diff --git a/landing.html b/landing.html new file mode 100644 index 0000000..bdf01eb --- /dev/null +++ b/landing.html @@ -0,0 +1,226 @@ + + + + + + + Tatar Punk - AI-агенты для бизнеса будущего + + + + + + + + + +
+
+
+
+
+
+

+ AI-агенты для бизнеса будущего +

+

+ Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности +

+
+ + +
+
+
+
+
+
+ + +
+
+

Новости

+
+
31 октября 2025
+

Практический воркшоп: Запустись с ИИ-помощником

+

+ Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00. +

+
+ 📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал + 💰 3 000 рублей +
+ + Зарегистрироваться → + +
+
+
+ + +
+
+
+
+
$236 млрд
+
Рынок к 2034
+
+
+
45.8%
+
CAGR
+
+
+
85-90%
+
Снижение затрат
+
+
+
74%
+
ROI за год
+
+
+
+
+ + +
+
+

Революция в бизнес-автоматизации

+

+ AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем +

+
+
+
📊
+

Измеримая эффективность

+

ROI в течение первого года, снижение затрат на 85-90%

+
+
+
🚀
+

Масштабируемость

+

Повышение эффективности на 55%, рост без пропорциональных затрат

+
+
+
🧠
+

Непрерывное обучение

+

AI-агенты адаптируются и совершенствуются со временем

+
+
+
+
+ + +
+
+

Преимущества по направлениям

+
+
+
+

Клиентский сервис

+
    +
  • ✓ Автоматизация до 80% обращений
    • +
  • ✓ Сокращение времени ответа на 68%
    • +
  • ✓ Klarna обслуживает 85 млн пользователей
    • +
+
+
+

Продажи и маркетинг

+
    +
  • ✓ Увеличение конверсии на 15-30%
    • +
  • ✓ Повышение выручки на 3-15%
    • +
  • ✓ GitHub Copilot ускоряет разработку на 126%
    • +
+
+
+

Бизнес-аналитика

+
    +
  • ✓ Сокращение времени поиска на 40%
    • +
  • ✓ Улучшение качества данных на 35%
    • +
  • ✓ Детальные отчёты за минуты
    • +
+
+
+
+
+
+ + +
+
+

Обучение разработке AI-агентов

+
+
+

Почему LangChain & LangGraph?

+

+ Специалисты по разработке AI-агентов получают конкурентные зарплаты: +

+
    +
  • Junior: $70,000 - $95,000
    • +
  • Mid-level: $95,000 - $140,000
    • +
  • Senior: $140,000 - $220,000
    • +
  • Principal: $220,000 - $350,000
    • +
+

+ LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем +

+
+
+
LangChain
+
LangGraph
+
700+ интеграций
+
+
+
+
+ + +
+
+

Почему выбирают Tatar Punk

+
+
+
🎯
+

Экспертиза

+

Глубокие знания в области разработки AI-агентов

+
+
+
📈
+

Результаты

+

Измеримая бизнес-ценность и ROI в течение года

+
+
+
🎓
+

Образование

+

Готовим специалистов будущего с зарплатой от $70k

+
+
+
🚀
+

Инновации

+

Cutting-edge технологии от лидеров индустрии

+
+
+
+
+ + +
+
+

Готовы трансформировать ваш бизнес?

+

+ Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph +

+
+ + +
+
+
+ + + + + + diff --git a/landing.md b/landing.md new file mode 100644 index 0000000..4c1fc8e --- /dev/null +++ b/landing.md @@ -0,0 +1,162 @@ +Материалы для лендинга 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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5d1fb7b..73b389c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "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" @@ -12519,6 +12520,21 @@ } } }, + "node_modules/react-intersection-observer": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-10.0.0.tgz", + "integrity": "sha512-JJRgcnFQoVXmbE5+GXr1OS1NDD1gHk0HyfpLcRf0575IbJz+io8yzs4mWVlfaqOQq1FiVjLvuYAdEEcrrCfveg==", + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index a9577e0..ed83155 100644 --- a/package.json +++ b/package.json @@ -3,20 +3,20 @@ "version": "2.0.1", "description": "", "main": "./src/index.tsx", - "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", - "build": "vite build", - "build:prod": "vite build --mode production", - "preview": "vite preview" - }, + "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", + "build": "vite build", + "build:prod": "vite build --mode production", + "preview": "vite preview" + }, "keywords": [], "author": "", "license": "MIT", @@ -36,6 +36,7 @@ "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" diff --git a/src/dashboard.tsx b/src/dashboard.tsx index e09238a..da09355 100644 --- a/src/dashboard.tsx +++ b/src/dashboard.tsx @@ -1,23 +1,22 @@ import React, { useEffect } from 'react'; import { Routes, Route } from 'react-router-dom'; -import { UnderConstructionPage } from './pages'; +import { UnderConstructionPage, LandingPage } from './pages'; -// Компонент для редиректа на terms.html -const TermsRedirect = () => { +const Redirect = ({ href }: { href: string }) => { useEffect(() => { - window.location.href = '/terms.html'; + window.location.href = href; }, []); - return
Загрузка Terms...
; + return
Загрузка...
; }; export const Dashboard = () => { return ( } /> - } /> - } /> + } /> + } /> ); }; diff --git a/src/pages/index.ts b/src/pages/index.ts index f6db55b..8608e4f 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1 +1,2 @@ export { default as UnderConstructionPage } from './under-construction'; +export { default as LandingPage } from './landing/Landing'; diff --git a/src/pages/landing/Landing.module.scss b/src/pages/landing/Landing.module.scss new file mode 100644 index 0000000..c5e2f46 --- /dev/null +++ b/src/pages/landing/Landing.module.scss @@ -0,0 +1,577 @@ +// 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); +} + diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx new file mode 100644 index 0000000..846e5e5 --- /dev/null +++ b/src/pages/landing/Landing.tsx @@ -0,0 +1,247 @@ +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 ( +
+ {/* Hero Section */} +
+
+
+
+
+
+

+ AI-агенты для бизнеса будущего +

+

+ Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности +

+
+ + +
+
+
+
+
+
+ + {/* Stats Section */} +
+
+
+ {stats.map((stat, index) => ( +
+
{stat.value}
+
{stat.label}
+
+ ))} +
+
+
+ + {/* Benefits Section */} +
+
+

Революция в бизнес-автоматизации

+

+ AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем +

+
+ {benefits.map((benefit, index) => ( +
+
{benefit.icon}
+

{benefit.title}

+

{benefit.description}

+
+ ))} +
+
+
+ + {/* Solutions Section */} +
+
+

Преимущества по направлениям

+
+
+
+

Клиентский сервис

+
    +
  • Автоматизация до 80% обращений
    • +
  • Сокращение времени ответа на 68%
    • +
  • Klarna обслуживает 85 млн пользователей
    • +
+
+
+

Продажи и маркетинг

+
    +
  • Увеличение конверсии на 15-30%
    • +
  • Повышение выручки на 3-15%
    • +
  • GitHub Copilot ускоряет разработку на 126%
    • +
+
+
+

Бизнес-аналитика

+
    +
  • Сокращение времени поиска на 40%
    • +
  • Улучшение качества данных на 35%
    • +
  • Детальные отчёты за минуты
    • +
+
+
+
+
+
+ + {/* Education Section */} +
+
+

Обучение разработке AI-агентов

+
+
+

Почему LangChain & LangGraph?

+

+ Специалисты по разработке AI-агентов получают конкурентные зарплаты: +

+
    +
  • Junior: $70,000 - $95,000
    • +
  • Mid-level: $95,000 - $140,000
    • +
  • Senior: $140,000 - $220,000
    • +
  • Principal: $220,000 - $350,000
    • +
+

+ LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем +

+
+
+
LangChain
+
LangGraph
+
700+ интеграций
+
+
+
+
+ + {/* News Section */} +
+
+

Новости

+
+
31 октября 2025
+

Практический воркшоп: Запустись с ИИ-помощником

+

+ Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00. +

+
+ 📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал + 💰 3 000 рублей +
+ + Зарегистрироваться → + +
+
+
+ + {/* Why Us Section */} +
+
+

Почему выбирают Tatar Punk

+
+
+
🎯
+

Экспертиза

+

Глубокие знания в области разработки AI-агентов

+
+
+
📈
+

Результаты

+

Измеримая бизнес-ценность и ROI в течение года

+
+
+
🎓
+

Образование

+

Готовим специалистов будущего с зарплатой от $70k

+
+
+
🚀
+

Инновации

+

Cutting-edge технологии от лидеров индустрии

+
+
+
+
+ + {/* CTA Section */} +
+
+

Готовы трансформировать ваш бизнес?

+

+ Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph +

+
+ + +
+
+
+ + {/* Footer */} + +
+ ); +}; + +export default Landing; + diff --git a/src/styles/landing.scss b/src/styles/landing.scss new file mode 100644 index 0000000..009bf06 --- /dev/null +++ b/src/styles/landing.scss @@ -0,0 +1,585 @@ +// 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); } +} + +// Reset +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: $dark-bg; + color: $text-primary; + font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + line-height: 1.6; + 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; +} + +.hero-background { + 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; +} + +.glowing-orb { + 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%; +} + +.hero-content { + position: relative; + z-index: 1; + text-align: center; + padding: 40px 20px; + animation: slideInUp 1s ease-out; +} + +.hero-title { + 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; +} + +.hero-subtitle { + 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; + } +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.btn-primary { + 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; + font-family: 'Montserrat', sans-serif; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4); + } +} + +.btn-secondary { + 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; + font-family: 'Montserrat', sans-serif; + + &:hover { + background: rgba(0, 212, 255, 0.1); + transform: translateY(-2px); + } +} + +.scroll-indicator { + 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; + } +} + +// News Section (вынесено вверх) +.news { + padding: 100px 0; + background: $dark-surface; +} + +.section-title { + font-size: 3rem; + font-weight: 900; + text-align: center; + margin-bottom: 1rem; + + @media (max-width: 768px) { + font-size: 2rem; + } +} + +.section-subtitle { + text-align: center; + color: $text-secondary; + font-size: 1.2rem; + max-width: 800px; + margin: 0 auto 4rem; + + @media (max-width: 768px) { + font-size: 1rem; + } +} + +.news-card { + 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; + } +} + +.news-date { + color: $accent-primary; + font-weight: 600; + margin-bottom: 1rem; +} + +.news-title { + font-size: 2rem; + margin-bottom: 1rem; + + @media (max-width: 768px) { + font-size: 1.5rem; + } +} + +.news-description { + color: $text-secondary; + line-height: 1.8; + margin-bottom: 1.5rem; +} + +.news-details { + display: flex; + gap: 2rem; + margin-bottom: 2rem; + flex-wrap: wrap; + + span { + color: $text-secondary; + } +} + +.news-link { + 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); + } +} + +// Stats Section +.stats { + padding: 80px 0; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.stat-card { + 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); + } +} + +.stat-value { + 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; +} + +.stat-label { + color: $text-secondary; + font-size: 1rem; +} + +// Benefits Section +.benefits { + padding: 100px 0; +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.benefit-card { + 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); + } +} + +.benefit-icon { + font-size: 4rem; + margin-bottom: 1.5rem; +} + +.benefit-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.benefit-description { + color: $text-secondary; + line-height: 1.6; +} + +// Solutions Section +.solutions { + padding: 100px 0; + background: $dark-surface; +} + +.solutions-tabs { + margin-top: 3rem; +} + +.tab-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.solution-item { + 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; +} + +.education-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + margin-top: 3rem; + + @media (max-width: 768px) { + grid-template-columns: 1fr; + } +} + +.education-text { + h3 { + font-size: 2rem; + margin-bottom: 1rem; + } + + p { + color: $text-secondary; + line-height: 1.8; + margin-bottom: 1rem; + } +} + +.salary-list { + 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; + } +} + +.education-tech { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.tech-badge { + 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; + } +} + +// Why Us Section +.why-us { + padding: 100px 0; + background: $dark-surface; +} + +.why-us-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.why-us-card { + 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; + } +} + +.why-us-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.why-us-card h3 { + font-size: 1.3rem; + margin-bottom: 0.5rem; +} + +.why-us-card p { + color: $text-secondary; + font-size: 0.95rem; +} + +// CTA Section +.cta { + padding: 100px 0; + text-align: center; +} + +.cta-title { + font-size: 3rem; + font-weight: 900; + margin-bottom: 1rem; + + @media (max-width: 768px) { + font-size: 2rem; + } +} + +.cta-subtitle { + color: $text-secondary; + font-size: 1.2rem; + margin-bottom: 2rem; + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + +.cta-buttons { + 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); +} + diff --git a/vite.config.ts b/vite.config.ts index 8339ecc..8764c13 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -62,6 +62,7 @@ export default defineConfig(({ mode }) => { rollupOptions: { input: { main: path.resolve(__dirname, 'index.html'), + landing: path.resolve(__dirname, 'landing.html'), terms: path.resolve(__dirname, 'terms.html'), }, output: {