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.
This commit is contained in:
Primakov Alexandr Alexandrovich
parent
7907238c1a
commit
aa8afef7c3
235
index.html
235
index.html
@ -1,25 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet" />
|
||||
<title>BROJS.RU - Платформа обучения фронтенд-разработке</title>
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Tatar Punk - AI-агенты для бизнеса будущего</title>
|
||||
<meta name="description" content="Tatar Punk - инновационная компания, специализирующаяся на разработке интеллектуальных решений на основе AI-агентов. Автоматизация бизнес-процессов, обучение разработке AI-агентов на LangChain и LangGraph.">
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/src/styles/landing.scss">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt="" /></div>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt=""></div></noscript>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-background">
|
||||
<div class="grid"></div>
|
||||
<div class="glowing-orb"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
<span class="highlight">AI-агенты</span> для бизнеса будущего
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Начать внедрение</button>
|
||||
<button class="btn-secondary">Узнать больше</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<div class="mouse"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- News Section (вынесено вверх) -->
|
||||
<section class="news">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Новости</h2>
|
||||
<div class="news-card">
|
||||
<div class="news-date">31 октября 2025</div>
|
||||
<h3 class="news-title">Практический воркшоп: Запустись с ИИ-помощником</h3>
|
||||
<p class="news-description">
|
||||
Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00.
|
||||
</p>
|
||||
<div class="news-details">
|
||||
<span>📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал</span>
|
||||
<span>💰 3 000 рублей</span>
|
||||
</div>
|
||||
<a href="https://tatarpunk.itpark.tech/" target="_blank" rel="noopener noreferrer" class="news-link">
|
||||
Зарегистрироваться →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="stats">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">$236 млрд</div>
|
||||
<div class="stat-label">Рынок к 2034</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">45.8%</div>
|
||||
<div class="stat-label">CAGR</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">85-90%</div>
|
||||
<div class="stat-label">Снижение затрат</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">74%</div>
|
||||
<div class="stat-label">ROI за год</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="benefits">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Революция в бизнес-автоматизации</h2>
|
||||
<p class="section-subtitle">
|
||||
AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем
|
||||
</p>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">📊</div>
|
||||
<h3 class="benefit-title">Измеримая эффективность</h3>
|
||||
<p class="benefit-description">ROI в течение первого года, снижение затрат на 85-90%</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🚀</div>
|
||||
<h3 class="benefit-title">Масштабируемость</h3>
|
||||
<p class="benefit-description">Повышение эффективности на 55%, рост без пропорциональных затрат</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🧠</div>
|
||||
<h3 class="benefit-title">Непрерывное обучение</h3>
|
||||
<p class="benefit-description">AI-агенты адаптируются и совершенствуются со временем</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solutions Section -->
|
||||
<section class="solutions">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Преимущества по направлениям</h2>
|
||||
<div class="solutions-tabs">
|
||||
<div class="tab-content">
|
||||
<div class="solution-item">
|
||||
<h3>Клиентский сервис</h3>
|
||||
<ul>
|
||||
<li>✓ Автоматизация до 80% обращений</li>
|
||||
<li>✓ Сокращение времени ответа на 68%</li>
|
||||
<li>✓ Klarna обслуживает 85 млн пользователей</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Продажи и маркетинг</h3>
|
||||
<ul>
|
||||
<li>✓ Увеличение конверсии на 15-30%</li>
|
||||
<li>✓ Повышение выручки на 3-15%</li>
|
||||
<li>✓ GitHub Copilot ускоряет разработку на 126%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Бизнес-аналитика</h3>
|
||||
<ul>
|
||||
<li>✓ Сокращение времени поиска на 40%</li>
|
||||
<li>✓ Улучшение качества данных на 35%</li>
|
||||
<li>✓ Детальные отчёты за минуты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Education Section -->
|
||||
<section class="education">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Обучение разработке AI-агентов</h2>
|
||||
<div class="education-content">
|
||||
<div class="education-text">
|
||||
<h3>Почему LangChain & LangGraph?</h3>
|
||||
<p>
|
||||
Специалисты по разработке AI-агентов получают конкурентные зарплаты:
|
||||
</p>
|
||||
<ul class="salary-list">
|
||||
<li>Junior: $70,000 - $95,000</li>
|
||||
<li>Mid-level: $95,000 - $140,000</li>
|
||||
<li>Senior: $140,000 - $220,000</li>
|
||||
<li>Principal: $220,000 - $350,000</li>
|
||||
</ul>
|
||||
<p>
|
||||
LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем
|
||||
</p>
|
||||
</div>
|
||||
<div class="education-tech">
|
||||
<div class="tech-badge">LangChain</div>
|
||||
<div class="tech-badge">LangGraph</div>
|
||||
<div class="tech-badge">700+ интеграций</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Us Section -->
|
||||
<section class="why-us">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Почему выбирают Tatar Punk</h2>
|
||||
<div class="why-us-grid">
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎯</div>
|
||||
<h3>Экспертиза</h3>
|
||||
<p>Глубокие знания в области разработки AI-агентов</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">📈</div>
|
||||
<h3>Результаты</h3>
|
||||
<p>Измеримая бизнес-ценность и ROI в течение года</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎓</div>
|
||||
<h3>Образование</h3>
|
||||
<p>Готовим специалистов будущего с зарплатой от $70k</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🚀</div>
|
||||
<h3>Инновации</h3>
|
||||
<p>Cutting-edge технологии от лидеров индустрии</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="cta-title">Готовы трансформировать ваш бизнес?</h2>
|
||||
<p class="cta-subtitle">
|
||||
Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<button class="btn-primary">Консультация по внедрению</button>
|
||||
<button class="btn-secondary">Записаться на курс</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
226
landing.html
Normal file
226
landing.html
Normal file
@ -0,0 +1,226 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Tatar Punk - AI-агенты для бизнеса будущего</title>
|
||||
<meta name="description" content="Tatar Punk - инновационная компания, специализирующаяся на разработке интеллектуальных решений на основе AI-агентов. Автоматизация бизнес-процессов, обучение разработке AI-агентов на LangChain и LangGraph.">
|
||||
<meta name="yandex-verification" content="98f7e15d1ad66018">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900&subset=cyrillic,cyrillic-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/src/styles/landing.scss">
|
||||
</head>
|
||||
<body>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/87860751" style="position:absolute; left:-9999px;" alt=""></div></noscript>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-background">
|
||||
<div class="grid"></div>
|
||||
<div class="glowing-orb"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
<span class="highlight">AI-агенты</span> для бизнеса будущего
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Автоматизируйте процессы, масштабируйте операции и достигайте новых высот эффективности
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Начать внедрение</button>
|
||||
<button class="btn-secondary">Узнать больше</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<div class="mouse"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- News Section (вынесено вверх) -->
|
||||
<section class="news">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Новости</h2>
|
||||
<div class="news-card">
|
||||
<div class="news-date">31 октября 2025</div>
|
||||
<h3 class="news-title">Практический воркшоп: Запустись с ИИ-помощником</h3>
|
||||
<p class="news-description">
|
||||
Приглашаем на мероприятие от экспертов IT-парка в Казани. Практический воркшоп с 18:00 до 21:00.
|
||||
</p>
|
||||
<div class="news-details">
|
||||
<span>📍 Казань, ИТ-парк, ул. Петербургская, 52, конференц-зал</span>
|
||||
<span>💰 3 000 рублей</span>
|
||||
</div>
|
||||
<a href="https://tatarpunk.itpark.tech/" target="_blank" rel="noopener noreferrer" class="news-link">
|
||||
Зарегистрироваться →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="stats">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">$236 млрд</div>
|
||||
<div class="stat-label">Рынок к 2034</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">45.8%</div>
|
||||
<div class="stat-label">CAGR</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">85-90%</div>
|
||||
<div class="stat-label">Снижение затрат</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">74%</div>
|
||||
<div class="stat-label">ROI за год</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="benefits">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Революция в бизнес-автоматизации</h2>
|
||||
<p class="section-subtitle">
|
||||
AI-агенты представляют новое поколение автоматизации, выходящее далеко за рамки традиционных систем
|
||||
</p>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">📊</div>
|
||||
<h3 class="benefit-title">Измеримая эффективность</h3>
|
||||
<p class="benefit-description">ROI в течение первого года, снижение затрат на 85-90%</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🚀</div>
|
||||
<h3 class="benefit-title">Масштабируемость</h3>
|
||||
<p class="benefit-description">Повышение эффективности на 55%, рост без пропорциональных затрат</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🧠</div>
|
||||
<h3 class="benefit-title">Непрерывное обучение</h3>
|
||||
<p class="benefit-description">AI-агенты адаптируются и совершенствуются со временем</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solutions Section -->
|
||||
<section class="solutions">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Преимущества по направлениям</h2>
|
||||
<div class="solutions-tabs">
|
||||
<div class="tab-content">
|
||||
<div class="solution-item">
|
||||
<h3>Клиентский сервис</h3>
|
||||
<ul>
|
||||
<li>✓ Автоматизация до 80% обращений</li>
|
||||
<li>✓ Сокращение времени ответа на 68%</li>
|
||||
<li>✓ Klarna обслуживает 85 млн пользователей</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Продажи и маркетинг</h3>
|
||||
<ul>
|
||||
<li>✓ Увеличение конверсии на 15-30%</li>
|
||||
<li>✓ Повышение выручки на 3-15%</li>
|
||||
<li>✓ GitHub Copilot ускоряет разработку на 126%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<h3>Бизнес-аналитика</h3>
|
||||
<ul>
|
||||
<li>✓ Сокращение времени поиска на 40%</li>
|
||||
<li>✓ Улучшение качества данных на 35%</li>
|
||||
<li>✓ Детальные отчёты за минуты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Education Section -->
|
||||
<section class="education">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Обучение разработке AI-агентов</h2>
|
||||
<div class="education-content">
|
||||
<div class="education-text">
|
||||
<h3>Почему LangChain & LangGraph?</h3>
|
||||
<p>
|
||||
Специалисты по разработке AI-агентов получают конкурентные зарплаты:
|
||||
</p>
|
||||
<ul class="salary-list">
|
||||
<li>Junior: $70,000 - $95,000</li>
|
||||
<li>Mid-level: $95,000 - $140,000</li>
|
||||
<li>Senior: $140,000 - $220,000</li>
|
||||
<li>Principal: $220,000 - $350,000</li>
|
||||
</ul>
|
||||
<p>
|
||||
LangGraph поддерживается компаниями из Fortune 500 и используется для критически важных систем
|
||||
</p>
|
||||
</div>
|
||||
<div class="education-tech">
|
||||
<div class="tech-badge">LangChain</div>
|
||||
<div class="tech-badge">LangGraph</div>
|
||||
<div class="tech-badge">700+ интеграций</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Us Section -->
|
||||
<section class="why-us">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Почему выбирают Tatar Punk</h2>
|
||||
<div class="why-us-grid">
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎯</div>
|
||||
<h3>Экспертиза</h3>
|
||||
<p>Глубокие знания в области разработки AI-агентов</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">📈</div>
|
||||
<h3>Результаты</h3>
|
||||
<p>Измеримая бизнес-ценность и ROI в течение года</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🎓</div>
|
||||
<h3>Образование</h3>
|
||||
<p>Готовим специалистов будущего с зарплатой от $70k</p>
|
||||
</div>
|
||||
<div class="why-us-card">
|
||||
<div class="why-us-icon">🚀</div>
|
||||
<h3>Инновации</h3>
|
||||
<p>Cutting-edge технологии от лидеров индустрии</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="cta-title">Готовы трансформировать ваш бизнес?</h2>
|
||||
<p class="cta-subtitle">
|
||||
Свяжитесь с нами для консультации или запишитесь на курс по LangChain и LangGraph
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<button class="btn-primary">Консультация по внедрению</button>
|
||||
<button class="btn-secondary">Записаться на курс</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Tatar Punk — Ваш партнер в мире интеллектуальной автоматизации</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
162
landing.md
Normal file
162
landing.md
Normal file
@ -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
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -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",
|
||||
|
||||
29
package.json
29
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"
|
||||
|
||||
@ -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 <div>Загрузка Terms...</div>;
|
||||
return <div>Загрузка...</div>;
|
||||
};
|
||||
|
||||
export const Dashboard = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<UnderConstructionPage />} />
|
||||
<Route path="/terms" element={<TermsRedirect />} />
|
||||
<Route path="*" element={<UnderConstructionPage />} />
|
||||
<Route path="/terms" element={<Redirect href="/terms.html" />} />
|
||||
<Route path="*" element={<Redirect href="/landing.html" />} />
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export { default as UnderConstructionPage } from './under-construction';
|
||||
export { default as LandingPage } from './landing/Landing';
|
||||
|
||||
577
src/pages/landing/Landing.module.scss
Normal file
577
src/pages/landing/Landing.module.scss
Normal file
@ -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);
|
||||
}
|
||||
|
||||
247
src/pages/landing/Landing.tsx
Normal file
247
src/pages/landing/Landing.tsx
Normal file
@ -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 (
|
||||
<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;
|
||||
|
||||
585
src/styles/landing.scss
Normal file
585
src/styles/landing.scss
Normal file
@ -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);
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user