C:\Users\MSI\Desktop\frontend\coresync-react
This commit is contained in:
yarik committed
commit
d8dad2312a
8617 files changed
+1017114
No files matched your search
@@ -0,0 +1,296 @@
|
||||
.about {
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 30%, rgba(99, 101, 241, 0.08) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.about .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.about .section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.about .section-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about .section-subtitle {
|
||||
font-size: clamp(1.1rem, 2vw, 1.3rem);
|
||||
color: #94a3b8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 25px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
color: #94a3b8;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.about-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.feature i {
|
||||
color: #3b82f6;
|
||||
font-size: 1.1rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.team-section {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.team-section h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.member-avatar i {
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.member-info h4 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.member-role {
|
||||
color: #3b82f6;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.member-experience {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-features {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.member-avatar i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.about .section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.about .section-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about-text h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.team-section h3 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './About.css';
|
||||
|
||||
const About = () => {
|
||||
const stats = [
|
||||
{ number: 50, label: 'Проектов', suffix: '+' },
|
||||
{ number: 5, label: 'Лет опыта', suffix: '+' },
|
||||
{ number: 100, label: 'Довольных клиентов', suffix: '%' },
|
||||
{ number: 24, label: 'Часа поддержки', suffix: '/7' }
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{ name: 'Алексей', role: 'Tech Lead', experience: '8 лет' },
|
||||
{ name: 'Мария', role: 'DevOps Engineer', experience: '6 лет' },
|
||||
{ name: 'Дмитрий', role: 'Full Stack Developer', experience: '7 лет' },
|
||||
{ name: 'Елена', role: 'SMM Manager', experience: '5 лет' }
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="about" className="about">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
className="section-header"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="section-title">О компании</h2>
|
||||
<p className="section-subtitle">Мы создаем инновационные решения для цифровой трансформации бизнеса</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="about-content">
|
||||
<motion.div
|
||||
className="about-text"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3>Ваш надежный партнер в цифровом мире</h3>
|
||||
<p>
|
||||
CoreSync специализируется на разработке серверных приложений, интеграции с 1C/ERP/CRM системами,
|
||||
автоматизации бизнес-процессов и комплексном SMM-продвижении. Мы помогаем компаниям
|
||||
трансформировать их бизнес-процессы с помощью современных технологических решений.
|
||||
</p>
|
||||
<p>
|
||||
Наша команда экспертов имеет многолетний опыт в области DevOps, CI/CD, архитектуры систем
|
||||
и управления проектами. Мы не просто разрабатываем решения - мы создаем экосистемы,
|
||||
которые масштабируются вместе с вашим бизнесом.
|
||||
</p>
|
||||
|
||||
<div className="about-features">
|
||||
<div className="feature">
|
||||
<i className="fas fa-rocket"></i>
|
||||
<span>Быстрая разработка</span>
|
||||
</div>
|
||||
<div className="feature">
|
||||
<i className="fas fa-shield-alt"></i>
|
||||
<span>Надежность и безопасность</span>
|
||||
</div>
|
||||
<div className="feature">
|
||||
<i className="fas fa-users"></i>
|
||||
<span>Поддержка 24/7</span>
|
||||
</div>
|
||||
<div className="feature">
|
||||
<i className="fas fa-chart-line"></i>
|
||||
<span>Измеримые результаты</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="about-stats"
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="stats-grid">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="stat-item"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="stat-number">
|
||||
<motion.span
|
||||
initial={{ number: 0 }}
|
||||
whileInView={{ number: stat.number }}
|
||||
transition={{ duration: 2, delay: 0.8 + index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
{Math.round(stat.number)}
|
||||
</motion.span>
|
||||
{stat.suffix}
|
||||
</div>
|
||||
<div className="stat-label">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="team-section"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3>Наша команда</h3>
|
||||
<div className="team-grid">
|
||||
{teamMembers.map((member, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="team-member"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 + index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="member-avatar">
|
||||
<i className="fas fa-user"></i>
|
||||
</div>
|
||||
<div className="member-info">
|
||||
<h4>{member.name}</h4>
|
||||
<p className="member-role">{member.role}</p>
|
||||
<p className="member-experience">{member.experience}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,311 @@
|
||||
.achievements {
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.achievements::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 75% 25%, rgba(99, 101, 241, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.achievements .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.achievements .section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.achievements .section-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.achievements .section-subtitle {
|
||||
font-size: clamp(1.1rem, 2vw, 1.3rem);
|
||||
color: #94a3b8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.achievements-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover .stat-icon::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.stat-icon i {
|
||||
font-size: 1.5rem;
|
||||
color: #ffffff;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.awards-section {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.awards-section h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.awards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.award-card {
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.award-card:hover {
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.award-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.award-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.award-card:hover .award-icon::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.award-icon i {
|
||||
font-size: 1.8rem;
|
||||
color: #ffffff;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.award-card h4 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.award-card p {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.achievements-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.awards-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.achievements {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.stats-section,
|
||||
.awards-section {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.awards-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.awards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.award-card {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.award-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.award-icon i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.award-card h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.achievements .section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.achievements .section-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.awards-section h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './Achievements.css';
|
||||
|
||||
const Achievements = () => {
|
||||
const [counters, setCounters] = useState({
|
||||
projects: 0,
|
||||
clients: 0,
|
||||
experience: 0,
|
||||
satisfaction: 0
|
||||
});
|
||||
|
||||
const achievements = [
|
||||
{
|
||||
icon: 'fas fa-trophy',
|
||||
title: 'Лучший проект года',
|
||||
description: 'Награда за инновационное решение в области автоматизации бизнес-процессов'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-award',
|
||||
title: 'Сертификация ISO',
|
||||
description: 'Получение международного сертификата качества разработки программного обеспечения'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-star',
|
||||
title: 'Высокий рейтинг',
|
||||
description: 'Средняя оценка клиентов 4.9/5.0 на протяжении 3 лет'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-medal',
|
||||
title: 'Эксперт DevOps',
|
||||
description: 'Признание как ведущая компания в области DevOps и CI/CD практик'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-crown',
|
||||
title: 'Лидер рынка',
|
||||
description: 'Входит в топ-10 компаний по разработке серверных приложений'
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-gem',
|
||||
title: 'Премиум партнер',
|
||||
description: 'Статус премиум-партнера ведущих технологических компаний'
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const targetCounts = {
|
||||
projects: 150,
|
||||
clients: 80,
|
||||
experience: 8,
|
||||
satisfaction: 98
|
||||
};
|
||||
|
||||
const duration = 2000; // 2 seconds
|
||||
const interval = 50; // Update every 50ms
|
||||
const steps = duration / interval;
|
||||
const increments = {
|
||||
projects: targetCounts.projects / steps,
|
||||
clients: targetCounts.clients / steps,
|
||||
experience: targetCounts.experience / steps,
|
||||
satisfaction: targetCounts.satisfaction / steps
|
||||
};
|
||||
|
||||
let currentStep = 0;
|
||||
const timer = setInterval(() => {
|
||||
currentStep++;
|
||||
|
||||
setCounters(prev => ({
|
||||
projects: Math.min(prev.projects + increments.projects, targetCounts.projects),
|
||||
clients: Math.min(prev.clients + increments.clients, targetCounts.clients),
|
||||
experience: Math.min(prev.experience + increments.experience, targetCounts.experience),
|
||||
satisfaction: Math.min(prev.satisfaction + increments.satisfaction, targetCounts.satisfaction)
|
||||
}));
|
||||
|
||||
if (currentStep >= steps) {
|
||||
clearInterval(timer);
|
||||
setCounters(targetCounts);
|
||||
}
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section id="achievements" className="achievements">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
className="section-header"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="section-title">Наши достижения</h2>
|
||||
<p className="section-subtitle">Результаты, которыми мы гордимся</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="achievements-content">
|
||||
<motion.div
|
||||
className="stats-section"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="stats-grid">
|
||||
<motion.div
|
||||
className="stat-card"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="stat-icon">
|
||||
<i className="fas fa-rocket"></i>
|
||||
</div>
|
||||
<div className="stat-number">{Math.round(counters.projects)}</div>
|
||||
<div className="stat-label">Реализованных проектов</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="stat-card"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="stat-icon">
|
||||
<i className="fas fa-users"></i>
|
||||
</div>
|
||||
<div className="stat-number">{Math.round(counters.clients)}</div>
|
||||
<div className="stat-label">Довольных клиентов</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="stat-card"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="stat-icon">
|
||||
<i className="fas fa-clock"></i>
|
||||
</div>
|
||||
<div className="stat-number">{Math.round(counters.experience)}</div>
|
||||
<div className="stat-label">Лет опыта</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="stat-card"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="stat-icon">
|
||||
<i className="fas fa-heart"></i>
|
||||
</div>
|
||||
<div className="stat-number">{Math.round(counters.satisfaction)}%</div>
|
||||
<div className="stat-label">Удовлетворенность</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="awards-section"
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3>Награды и признания</h3>
|
||||
<div className="awards-grid">
|
||||
{achievements.map((achievement, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="award-card"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="award-icon">
|
||||
<i className={achievement.icon}></i>
|
||||
</div>
|
||||
<h4>{achievement.title}</h4>
|
||||
<p>{achievement.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Achievements;
|
||||
@@ -0,0 +1,193 @@
|
||||
/* Header Styles */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(10, 25, 41, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
animation: slideDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
.header.scrolled {
|
||||
background: rgba(10, 25, 41, 0.98);
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: logoGlow 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: #e8f4fd;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #3b82f6;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.mobile-menu-btn span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #e8f4fd;
|
||||
margin: 3px 0;
|
||||
transition: 0.3s;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(1) {
|
||||
transform: rotate(-45deg) translate(-5px, 6px);
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(3) {
|
||||
transform: rotate(45deg) translate(-5px, -6px);
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 767px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
background-color: rgba(10, 25, 41, 0.98);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
||||
padding-top: 80px;
|
||||
height: 100vh;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav.mobile-open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-list li:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.header-content {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 374px) {
|
||||
.logo-text {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './Header.css';
|
||||
|
||||
const Header = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToSection = (sectionId) => {
|
||||
const element = document.getElementById(sectionId);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
setIsMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
className={`header ${isScrolled ? 'scrolled' : ''}`}
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="header-content">
|
||||
<motion.div
|
||||
className="logo"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<span className="logo-text">CoreSync</span>
|
||||
</motion.div>
|
||||
|
||||
<nav className={`nav ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
|
||||
<ul className="nav-list">
|
||||
<li>
|
||||
<motion.a
|
||||
href="#hero"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('hero')}
|
||||
>
|
||||
Главная
|
||||
</motion.a>
|
||||
</li>
|
||||
<li>
|
||||
<motion.a
|
||||
href="#services"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('services')}
|
||||
>
|
||||
Услуги
|
||||
</motion.a>
|
||||
</li>
|
||||
<li>
|
||||
<motion.a
|
||||
href="#about"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('about')}
|
||||
>
|
||||
О нас
|
||||
</motion.a>
|
||||
</li>
|
||||
<li>
|
||||
<motion.a
|
||||
href="#achievements"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('achievements')}
|
||||
>
|
||||
Достижения
|
||||
</motion.a>
|
||||
</li>
|
||||
<li>
|
||||
<motion.a
|
||||
href="#portfolio"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('portfolio')}
|
||||
>
|
||||
Наши проекты
|
||||
</motion.a>
|
||||
</li>
|
||||
<li>
|
||||
<motion.a
|
||||
href="#contact"
|
||||
className="nav-link"
|
||||
whileHover={{ scale: 1.05, color: '#60a5fa' }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => scrollToSection('contact')}
|
||||
>
|
||||
Контакты
|
||||
</motion.a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<motion.button
|
||||
className={`mobile-menu-btn ${isMobileMenuOpen ? 'active' : ''}`}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,419 @@
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||
opacity: 0.3;
|
||||
animation: backgroundFloat 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
animation: slideInLeft 1s ease-out;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #1e40af 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: gradientShift 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: slideInRight 1s ease-out;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.floating-card:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
color: #3b82f6;
|
||||
animation: iconBounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 20%;
|
||||
right: 15%;
|
||||
animation: float 6s ease-in-out infinite 1s;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 30%;
|
||||
left: 5%;
|
||||
animation: float 6s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
.card-4 {
|
||||
bottom: 15%;
|
||||
right: 10%;
|
||||
animation: float 6s ease-in-out infinite 3s;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1199px) and (min-width: 992px) {
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) and (min-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) and (min-width: 576px) {
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) and (min-width: 375px) {
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 374px) {
|
||||
.hero-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.7rem 1.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 319px) {
|
||||
.hero-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.floating-card i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.floating-card span {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './Hero.css';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section id="hero" className="hero">
|
||||
<div className="hero-container">
|
||||
<motion.div
|
||||
className="hero-content"
|
||||
initial={{ opacity: 0, x: -100 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="hero-title"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<span className="gradient-text">CoreSync</span> - Ваш партнер в цифровой трансформации
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="hero-subtitle"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
Специализируемся на MRM, автоматизации бизнес-процессов, разработке программного обеспечения и SMM-продвижении
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="hero-buttons"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<motion.a
|
||||
href="#contact"
|
||||
className="btn btn-primary"
|
||||
whileHover={{ scale: 1.05, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Начать проект
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#services"
|
||||
className="btn btn-secondary"
|
||||
whileHover={{ scale: 1.05, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Узнать больше
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="hero-image"
|
||||
initial={{ opacity: 0, x: 100 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.4 }}
|
||||
>
|
||||
<div className="hero-graphic">
|
||||
<motion.div
|
||||
className="floating-card card-1"
|
||||
animate={{ y: [-10, 10, -10] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
<i className="fas fa-cogs"></i>
|
||||
<span>MRM</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="floating-card card-2"
|
||||
animate={{ y: [10, -10, 10] }}
|
||||
transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
|
||||
whileHover={{ scale: 1.1, rotate: -5 }}
|
||||
>
|
||||
<i className="fas fa-robot"></i>
|
||||
<span>Автоматизация</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="floating-card card-3"
|
||||
animate={{ y: [-5, 15, -5] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 1 }}
|
||||
whileHover={{ scale: 1.1, rotate: 3 }}
|
||||
>
|
||||
<i className="fas fa-code"></i>
|
||||
<span>Разработка</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="floating-card card-4"
|
||||
animate={{ y: [15, -5, 15] }}
|
||||
transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
|
||||
whileHover={{ scale: 1.1, rotate: -3 }}
|
||||
>
|
||||
<i className="fas fa-share-alt"></i>
|
||||
<span>SMM</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './Portfolio.css';
|
||||
|
||||
const Portfolio = () => {
|
||||
const projects = [
|
||||
{
|
||||
title: 'Система управления складом',
|
||||
description: 'Автоматизация складских процессов с интеграцией в 1C',
|
||||
category: 'Автоматизация',
|
||||
icon: 'fas fa-warehouse',
|
||||
technologies: ['1C', 'SQL', 'API', 'DevOps']
|
||||
},
|
||||
{
|
||||
title: 'CRM для логистики',
|
||||
description: 'Комплексная система управления клиентами и маршрутами',
|
||||
category: 'CRM',
|
||||
icon: 'fas fa-truck',
|
||||
technologies: ['React', 'Node.js', 'PostgreSQL', 'Docker']
|
||||
},
|
||||
{
|
||||
title: 'Платформа аналитики',
|
||||
description: 'Система сбора и анализа данных в реальном времени',
|
||||
category: 'Аналитика',
|
||||
icon: 'fas fa-chart-line',
|
||||
technologies: ['Python', 'Grafana', 'Kafka', 'Kubernetes']
|
||||
},
|
||||
{
|
||||
title: 'Мобильное приложение',
|
||||
description: 'Кроссплатформенное приложение для управления проектами',
|
||||
category: 'Мобильная разработка',
|
||||
icon: 'fas fa-mobile-alt',
|
||||
technologies: ['React Native', 'Firebase', 'Redux', 'TypeScript']
|
||||
},
|
||||
{
|
||||
title: 'API Gateway',
|
||||
description: 'Централизованная система управления API и микросервисами',
|
||||
category: 'Архитектура',
|
||||
icon: 'fas fa-network-wired',
|
||||
technologies: ['Kong', 'Docker', 'Kubernetes', 'Prometheus']
|
||||
},
|
||||
{
|
||||
title: 'Система мониторинга',
|
||||
description: 'Комплексный мониторинг инфраструктуры и приложений',
|
||||
category: 'DevOps',
|
||||
icon: 'fas fa-server',
|
||||
technologies: ['Grafana', 'Prometheus', 'ELK Stack', 'Ansible']
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="portfolio" className="portfolio">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
className="section-header"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="section-title">Наши проекты</h2>
|
||||
<p className="section-subtitle">Реализованные решения для различных отраслей</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="portfolio-grid">
|
||||
{projects.map((project, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="portfolio-item"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="portfolio-image">
|
||||
<div className="portfolio-icon">
|
||||
<i className={project.icon}></i>
|
||||
</div>
|
||||
<div className="portfolio-overlay">
|
||||
<div className="portfolio-content">
|
||||
<h3>{project.title}</h3>
|
||||
<p>{project.description}</p>
|
||||
<div className="portfolio-category">{project.category}</div>
|
||||
<div className="portfolio-technologies">
|
||||
{project.technologies.map((tech, techIndex) => (
|
||||
<span key={techIndex} className="tech-tag">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
@@ -0,0 +1,217 @@
|
||||
.services {
|
||||
padding: 120px 0;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.services::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(99, 101, 241, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.services .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.services .section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.services .section-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.services .section-subtitle {
|
||||
font-size: clamp(1.1rem, 2vw, 1.3rem);
|
||||
color: #94a3b8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 40px 30px;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.service-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.service-icon i {
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #f8fafc;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: #94a3b8;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-features li {
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-features li::before {
|
||||
content: '▸';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3b82f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.service-features li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.services {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.service-icon i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.services .section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.services .section-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.service-features li {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './Services.css';
|
||||
|
||||
const Services = () => {
|
||||
const services = [
|
||||
{
|
||||
icon: 'fas fa-chart-line',
|
||||
title: 'MRM (Marketing Resource Management)',
|
||||
description: 'Управление маркетинговыми ресурсами, планирование кампаний, аналитика и оптимизация маркетинговых процессов.',
|
||||
features: [
|
||||
'Планирование маркетинговых кампаний',
|
||||
'Управление ресурсами и бюджетами',
|
||||
'Аналитика и отчетность',
|
||||
'Автоматизация маркетинговых процессов'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-robot',
|
||||
title: 'Автоматизация бизнес-процессов',
|
||||
description: 'Внедрение современных решений для автоматизации рутинных задач и повышения эффективности работы.',
|
||||
features: [
|
||||
'RPA (Robotic Process Automation)',
|
||||
'NoCode платформы и решения',
|
||||
'Автоматизация скриптами',
|
||||
'Workflow автоматизация',
|
||||
'API интеграции'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-code',
|
||||
title: 'Разработка программного обеспечения',
|
||||
description: 'Создание качественных программных решений под ваши бизнес-потребности.',
|
||||
features: [
|
||||
'Веб-приложения и серверные решения',
|
||||
'Мобильные приложения',
|
||||
'Корпоративные системы',
|
||||
'Облачные решения',
|
||||
'Поддержка и сопровождение'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-server',
|
||||
title: 'Серверные приложения и интеграции',
|
||||
description: 'Разработка и поддержка серверных решений с интеграцией в существующую инфраструктуру.',
|
||||
features: [
|
||||
'Разработка серверных приложений',
|
||||
'Интеграция с 1C, ERP, CRM',
|
||||
'Подключение внешних сервисов',
|
||||
'API разработка и интеграция',
|
||||
'Техническая поддержка'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-cloud',
|
||||
title: 'DevOps и CI/CD',
|
||||
description: 'Внедрение современных практик разработки и развертывания для ускорения delivery.',
|
||||
features: [
|
||||
'Внедрение CI/CD пайплайнов',
|
||||
'DevOps практики и инструменты',
|
||||
'Автоматизация развертывания',
|
||||
'Контейнеризация (Docker, Kubernetes)',
|
||||
'Мониторинг и логирование'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-sitemap',
|
||||
title: 'Архитектура и масштабирование',
|
||||
description: 'Проектирование надежной и масштабируемой архитектуры для ваших систем.',
|
||||
features: [
|
||||
'Проектирование микросервисной архитектуры',
|
||||
'Масштабирование систем',
|
||||
'Оптимизация производительности',
|
||||
'Архитектурные решения',
|
||||
'Техническое консультирование'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-chart-bar',
|
||||
title: 'Мониторинг и оптимизация',
|
||||
description: 'Комплексный мониторинг и оптимизация производительности ваших систем.',
|
||||
features: [
|
||||
'Настройка Grafana и мониторинга',
|
||||
'Оптимизация индексации БД',
|
||||
'Анализ нагрузки и производительности',
|
||||
'Проактивный мониторинг',
|
||||
'Отчеты и аналитика'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-users',
|
||||
title: 'Менторинг и управление командой',
|
||||
description: 'Развитие команды разработчиков и внедрение лучших практик.',
|
||||
features: [
|
||||
'Менторинг разработчиков',
|
||||
'Управление командой проектов',
|
||||
'Код-ревью и лучшие практики',
|
||||
'Обучение и развитие команды',
|
||||
'Внедрение процессов разработки'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'fas fa-share-alt',
|
||||
title: 'SMM продвижение',
|
||||
description: 'Комплексное продвижение в социальных сетях для увеличения узнаваемости бренда.',
|
||||
features: [
|
||||
'Стратегия SMM',
|
||||
'Контент-маркетинг',
|
||||
'Таргетированная реклама',
|
||||
'Аналитика и отчеты',
|
||||
'Управление сообществами'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="services" className="services">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
className="section-header"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="section-title">Наши услуги</h2>
|
||||
<p className="section-subtitle">Комплексные решения для вашего бизнеса</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="services-grid">
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="service-card"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
<div className="service-icon">
|
||||
<i className={service.icon}></i>
|
||||
</div>
|
||||
<h3>{service.title}</h3>
|
||||
<p>{service.description}</p>
|
||||
<ul className="service-features">
|
||||
{service.features.map((feature, featureIndex) => (
|
||||
<li key={featureIndex}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
Reference in new issue
Block a user