453 lines
21 KiB
HTML
453 lines
21 KiB
HTML
{% extends 'web/base_modern.html' %}
|
||
{% load static %}
|
||
{% block title %}О нас - SmartSolTech{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Hero Section -->
|
||
<section class="hero-modern">
|
||
<div class="container-modern">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||
{{ about.hero_badge|default:"🚀 О нас" }}
|
||
</span>
|
||
<h1 class="display-4 fw-bold mb-4">
|
||
{{ about.hero_title|default:"Мы создаем цифровое будущее"|safe }}
|
||
</h1>
|
||
<p class="lead text-muted mb-4">
|
||
{{ about.hero_description|default:"SmartSolTech - это команда профессионалов..." }}
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<a href="#team" class="btn btn-primary-modern">
|
||
<i class="fas fa-users me-2"></i>
|
||
Наша команда
|
||
</a>
|
||
<a href="#contact" class="btn btn-secondary-modern">
|
||
<i class="fas fa-envelope me-2"></i>
|
||
Связаться с нами
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="text-center">
|
||
<div class="position-relative">
|
||
<!-- Company illustration -->
|
||
<div class="about-graphic">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float">
|
||
<div class="stat-icon bg-primary rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-code text-white fa-2x"></i>
|
||
</div>
|
||
<h3 class="text-gradient fw-bold">{{ about.stat_projects|default:"50" }}+</h3>
|
||
<p class="mb-0 text-muted">Проектов</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 0.5s;">
|
||
<div class="stat-icon bg-success rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-users text-white fa-2x"></i>
|
||
</div>
|
||
<h3 class="text-gradient fw-bold">{{ about.stat_clients|default:"30" }}+</h3>
|
||
<p class="mb-0 text-muted">Клиентов</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 1s;">
|
||
<div class="stat-icon bg-warning rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-award text-white fa-2x"></i>
|
||
</div>
|
||
<h3 class="text-gradient fw-bold">{{ about.stat_years|default:"3" }}+</h3>
|
||
<p class="mb-0 text-muted">Лет опыта</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="stat-card bg-white rounded-4 p-4 shadow animate-float" style="animation-delay: 1.5s;">
|
||
<div class="stat-icon bg-info rounded-3 mb-3 mx-auto" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-rocket text-white fa-2x"></i>
|
||
</div>
|
||
<h3 class="text-gradient fw-bold">{{ about.stat_support|default:"24/7" }}</h3>
|
||
<p class="mb-0 text-muted">Поддержка</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mission & Vision -->
|
||
<section class="section-padding bg-light">
|
||
<div class="container-modern">
|
||
<div class="row g-5">
|
||
<div class="col-lg-6">
|
||
<div class="pe-lg-4">
|
||
<span class="badge bg-primary text-white mb-3 px-3 py-2 rounded-pill">
|
||
{{ about.mission_badge|default:"🎯 Наша миссия" }}
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-4">
|
||
{{ about.mission_title|default:"Делаем технологии доступными"|safe }}
|
||
</h2>
|
||
<p class="text-muted mb-4">
|
||
{{ about.mission_description|default:"Мы верим, что каждый бизнес заслуживает..." }}
|
||
</p>
|
||
<div class="mission-points">
|
||
<div class="d-flex align-items-start mb-3">
|
||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||
<div>
|
||
<h6>Инновационные решения</h6>
|
||
<p class="text-muted mb-0 small">Используем передовые технологии для создания уникальных продуктов</p>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-start mb-3">
|
||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||
<div>
|
||
<h6>Клиентоориентированность</h6>
|
||
<p class="text-muted mb-0 small">Фокусируемся на потребностях и целях каждого клиента</p>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex align-items-start">
|
||
<i class="fas fa-check-circle text-success me-3 mt-1"></i>
|
||
<div>
|
||
<h6>Непрерывное развитие</h6>
|
||
<p class="text-muted mb-0 small">Постоянно совершенствуем наши навыки и знания</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ps-lg-4">
|
||
<span class="badge bg-secondary text-white mb-3 px-3 py-2 rounded-pill">
|
||
🔮 Наше видение
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-4">
|
||
Будущее начинается <span class="text-gradient">сегодня</span>
|
||
</h2>
|
||
<p class="text-muted mb-4">
|
||
Мы стремимся стать ведущей IT-компанией в Корее, известной своими инновационными решениями,
|
||
высоким качеством сервиса и способностью трансформировать бизнес-идеи в успешные цифровые продукты.
|
||
</p>
|
||
|
||
<!-- Progress bars -->
|
||
<div class="skills-progress">
|
||
<div class="skill-item mb-3">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span class="fw-semibold">Веб-разработка</span>
|
||
<span class="text-muted">95%</span>
|
||
</div>
|
||
<div class="progress" style="height: 8px;">
|
||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 95%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-item mb-3">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span class="fw-semibold">Мобильная разработка</span>
|
||
<span class="text-muted">90%</span>
|
||
</div>
|
||
<div class="progress" style="height: 8px;">
|
||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 90%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-item mb-3">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span class="fw-semibold">UI/UX Дизайн</span>
|
||
<span class="text-muted">85%</span>
|
||
</div>
|
||
<div class="progress" style="height: 8px;">
|
||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="skill-item">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span class="fw-semibold">DevOps</span>
|
||
<span class="text-muted">80%</span>
|
||
</div>
|
||
<div class="progress" style="height: 8px;">
|
||
<div class="progress-bar bg-gradient" role="progressbar" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Section - Dynamic from Database -->
|
||
{% include 'web/team_section.html' %}
|
||
|
||
<!-- Technologies Section -->
|
||
<section class="section-padding bg-light">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<span class="badge bg-gradient text-white mb-3 px-3 py-2 rounded-pill">
|
||
⚡ Технологии
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-3">
|
||
Современный <span class="text-gradient">технологический стек</span>
|
||
</h2>
|
||
<p class="lead text-muted">
|
||
Мы используем проверенные и инновационные технологии для создания качественных решений
|
||
</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<!-- Frontend -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="text-center">
|
||
<h5 class="mb-3">Frontend</h5>
|
||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||
<div class="tech-icon">
|
||
<i class="fab fa-react text-info fa-2x"></i>
|
||
<small class="d-block mt-1">React</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-vue text-success fa-2x"></i>
|
||
<small class="d-block mt-1">Vue.js</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-html5 text-danger fa-2x"></i>
|
||
<small class="d-block mt-1">HTML5</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-css3-alt text-primary fa-2x"></i>
|
||
<small class="d-block mt-1">CSS3</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Backend -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="text-center">
|
||
<h5 class="mb-3">Backend</h5>
|
||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||
<div class="tech-icon">
|
||
<i class="fab fa-python text-warning fa-2x"></i>
|
||
<small class="d-block mt-1">Python</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fas fa-server text-success fa-2x"></i>
|
||
<small class="d-block mt-1">Django</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-node-js text-success fa-2x"></i>
|
||
<small class="d-block mt-1">Node.js</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fas fa-database text-info fa-2x"></i>
|
||
<small class="d-block mt-1">PostgreSQL</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="text-center">
|
||
<h5 class="mb-3">Mobile</h5>
|
||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||
<div class="tech-icon">
|
||
<i class="fab fa-react text-info fa-2x"></i>
|
||
<small class="d-block mt-1">React Native</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-android text-success fa-2x"></i>
|
||
<small class="d-block mt-1">Android</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-apple text-dark fa-2x"></i>
|
||
<small class="d-block mt-1">iOS</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fas fa-mobile-alt text-primary fa-2x"></i>
|
||
<small class="d-block mt-1">Flutter</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DevOps -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="text-center">
|
||
<h5 class="mb-3">DevOps</h5>
|
||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||
<div class="tech-icon">
|
||
<i class="fab fa-docker text-primary fa-2x"></i>
|
||
<small class="d-block mt-1">Docker</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-aws text-warning fa-2x"></i>
|
||
<small class="d-block mt-1">AWS</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fab fa-github text-dark fa-2x"></i>
|
||
<small class="d-block mt-1">GitHub</small>
|
||
</div>
|
||
<div class="tech-icon">
|
||
<i class="fas fa-cogs text-secondary fa-2x"></i>
|
||
<small class="d-block mt-1">CI/CD</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section class="section-padding bg-gradient text-white" id="contact">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 fw-bold mb-4">
|
||
Начнем сотрудничество?
|
||
</h2>
|
||
<p class="lead opacity-90 mb-5">
|
||
Свяжитесь с нами для обсуждения вашего проекта
|
||
</p>
|
||
</div>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="row g-4">
|
||
<div class="col-md-4 text-center">
|
||
<div class="contact-item">
|
||
<i class="fas fa-envelope fa-2x mb-3 opacity-75"></i>
|
||
<h5>Email</h5>
|
||
<a href="mailto:info@smartsoltech.kr" class="text-white text-decoration-none opacity-75">
|
||
info@smartsoltech.kr
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<div class="contact-item">
|
||
<i class="fas fa-phone fa-2x mb-3 opacity-75"></i>
|
||
<h5>Телефон</h5>
|
||
<a href="tel:+82-10-XXXX-XXXX" class="text-white text-decoration-none opacity-75">
|
||
+82-10-XXXX-XXXX
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<div class="contact-item">
|
||
<i class="fab fa-telegram-plane fa-2x mb-3 opacity-75"></i>
|
||
<h5>Telegram</h5>
|
||
<a href="https://t.me/smartsoltech" class="text-white text-decoration-none opacity-75">
|
||
@smartsoltech
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-5">
|
||
<a href="{% url 'services' %}" class="btn btn-light btn-lg text-primary">
|
||
<i class="fas fa-rocket me-2"></i>
|
||
Начать проект
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Animate progress bars when they come into view
|
||
const observerOptions = {
|
||
threshold: 0.5
|
||
};
|
||
|
||
const progressObserver = new IntersectionObserver(function(entries) {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const progressBars = entry.target.querySelectorAll('.progress-bar');
|
||
progressBars.forEach(bar => {
|
||
const width = bar.style.width;
|
||
bar.style.width = '0%';
|
||
setTimeout(() => {
|
||
bar.style.width = width;
|
||
}, 200);
|
||
});
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
const skillsSection = document.querySelector('.skills-progress');
|
||
if (skillsSection) {
|
||
progressObserver.observe(skillsSection);
|
||
}
|
||
|
||
// Animate stat cards
|
||
const statCards = document.querySelectorAll('.stat-card');
|
||
statCards.forEach((card, index) => {
|
||
setTimeout(() => {
|
||
card.classList.add('animate-fade-in-up');
|
||
}, index * 200);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.max-width-600 {
|
||
max-width: 600px;
|
||
}
|
||
|
||
.tech-icon {
|
||
padding: 1rem;
|
||
border-radius: 12px;
|
||
background: var(--bg-light);
|
||
box-shadow: var(--shadow);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tech-icon:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.progress-bar {
|
||
transition: width 1.5s ease-in-out;
|
||
}
|
||
|
||
.contact-item {
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.contact-item:hover i {
|
||
transform: scale(1.1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.team-avatar {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.card-modern:hover .team-avatar {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.about-graphic .row {
|
||
justify-content: center;
|
||
}
|
||
|
||
.stat-card {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.tech-icon {
|
||
margin: 0.25rem;
|
||
padding: 0.75rem;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %} |