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