From aa8afef7c3fbd54790a8fd12a467e31bb1451c93 Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Wed, 29 Oct 2025 11:16:52 +0300 Subject: [PATCH] Revamp landing page with new design and content. Introduce landing.html and landing.md files, enhancing user engagement with sections on AI agents, benefits, solutions, and educational opportunities. Update styles with SCSS for improved aesthetics and responsiveness. Modify routing in dashboard.tsx to include landing page. Add new dependencies for styling and functionality in package.json and package-lock.json. --- index.html | 235 ++++++++++- landing.html | 226 ++++++++++ landing.md | 162 +++++++ package-lock.json | 16 + package.json | 29 +- src/dashboard.tsx | 13 +- src/pages/index.ts | 1 + src/pages/landing/Landing.module.scss | 577 +++++++++++++++++++++++++ src/pages/landing/Landing.tsx | 247 +++++++++++ src/styles/landing.scss | 585 ++++++++++++++++++++++++++ vite.config.ts | 1 + 11 files changed, 2054 insertions(+), 38 deletions(-) create mode 100644 landing.html create mode 100644 landing.md create mode 100644 src/pages/landing/Landing.module.scss create mode 100644 src/pages/landing/Landing.tsx create mode 100644 src/styles/landing.scss 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: {