Andrey K. Choi
6f43fa4c3b
Some checks failed
continuous-integration/drone/push Build is failing
✨ НОВЫЕ ФУНКЦИИ: - 🎬 Поддержка видео в Hero баннерах и услугах - 💊 Водная анимация пилюль маркеров банеров - 📱 Полная главная страница с портфолио, блогом, новостями - 🎯 HeroBanner модель с видео/изображениями - 🎨 Современные hover-эффекты и анимации 📊 УЛУЧШЕНИЯ СТРУКТУРЫ: - Расширенная home_modern.html с полным контентом - Новые URL маршруты для всех секций - Обновленные views с передачей всех данных - CSS стили для всех новых секций - Миграции для видео полей 🎪 HERO БАНЕР СИСТЕМА: - Динамические банеры с видео/фото фонами - Пилюли маркеры с водной анимацией - Растягивание маркеров от центра - Адаптивный дизайн для мобильных - Glassmorphism эффекты 🎨 СОВРЕМЕННЫЙ ДИЗАЙН: - Hover анимации для карточек - Плавные переходы везде - Современная типографика - Градиенты и тени - Отзывчивая сетка Готов к продакшену! 🚀
361 lines
17 KiB
HTML
361 lines
17 KiB
HTML
{% extends 'web/base_modern.html' %}
|
||
{% load static %}
|
||
{% block title %}SmartSolTech - Современные IT-решения для вашего бизнеса{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Hero Section -->
|
||
<section class="hero-modern" id="home">
|
||
<div class="container-modern">
|
||
<div class="row align-items-center min-vh-100">
|
||
<div class="col-lg-6">
|
||
<div class="animate-fade-in-up">
|
||
<h1 class="display-3 fw-bold mb-4">
|
||
Создаем <span class="text-gradient">будущее</span> вашего бизнеса
|
||
</h1>
|
||
<p class="lead mb-4 text-muted">
|
||
Мы разрабатываем современные веб-приложения, мобильные решения и системы автоматизации,
|
||
которые помогают компаниям расти и быть конкурентоспособными.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3 mb-5">
|
||
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
|
||
<i class="fas fa-rocket me-2"></i>
|
||
Начать проект
|
||
</a>
|
||
<a href="{% url 'about' %}" class="btn btn-secondary-modern btn-lg">
|
||
<i class="fas fa-play-circle me-2"></i>
|
||
Узнать больше
|
||
</a>
|
||
</div>
|
||
<div class="row text-center">
|
||
<div class="col-4">
|
||
<div class="stat-item">
|
||
<h3 class="text-gradient fw-bold mb-1">50+</h3>
|
||
<p class="small text-muted mb-0">Проектов</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="stat-item">
|
||
<h3 class="text-gradient fw-bold mb-1">3+</h3>
|
||
<p class="small text-muted mb-0">Лет опыта</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="stat-item">
|
||
<h3 class="text-gradient fw-bold mb-1">24/7</h3>
|
||
<p class="small text-muted mb-0">Поддержка</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="text-center animate-float">
|
||
<div class="position-relative">
|
||
<!-- 3D Graphic Placeholder -->
|
||
<div class="hero-graphic p-5">
|
||
<div class="position-relative">
|
||
<!-- Code Window -->
|
||
<div class="code-window bg-dark rounded-4 p-4 mb-4 shadow-lg"
|
||
style="transform: rotate(-5deg); max-width: 400px;">
|
||
<div class="d-flex gap-2 mb-3">
|
||
<div class="rounded-circle bg-danger" style="width: 12px; height: 12px;"></div>
|
||
<div class="rounded-circle bg-warning" style="width: 12px; height: 12px;"></div>
|
||
<div class="rounded-circle bg-success" style="width: 12px; height: 12px;"></div>
|
||
</div>
|
||
<div class="text-light font-monospace small">
|
||
<div class="text-info">def create_future():</div>
|
||
<div class="ms-3 text-success">return innovation + passion</div>
|
||
<div class="text-warning">// SmartSolTech</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile App Preview -->
|
||
<div class="mobile-preview bg-light rounded-4 p-3 shadow-lg position-absolute"
|
||
style="transform: rotate(10deg); top: 50px; right: 50px; width: 200px;">
|
||
<div class="bg-gradient rounded-3 p-3 text-white text-center">
|
||
<i class="fas fa-mobile-alt fa-3x mb-2"></i>
|
||
<h6 class="mb-1">Мобильные</h6>
|
||
<p class="small mb-0 opacity-75">приложения</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Icons -->
|
||
<div class="floating-icon position-absolute"
|
||
style="top: 20px; left: 20px; animation: float 2s ease-in-out infinite;">
|
||
<div class="bg-primary rounded-3 p-3 text-white shadow">
|
||
<i class="fab fa-react fa-2x"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="floating-icon position-absolute"
|
||
style="bottom: 100px; left: 100px; animation: float 3s ease-in-out infinite reverse;">
|
||
<div class="bg-success rounded-3 p-3 text-white shadow">
|
||
<i class="fab fa-python fa-2x"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Preview Section -->
|
||
<section class="section-padding bg-light">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-5 fw-bold mb-3">
|
||
Полный спектр <span class="text-gradient">IT-услуг</span>
|
||
</h2>
|
||
<p class="lead text-muted max-width-600 mx-auto">
|
||
От идеи до реализации - мы предоставляем комплексные решения для вашего цифрового успеха
|
||
</p>
|
||
</div>
|
||
|
||
<div class="services-grid">
|
||
{% for service in services %}
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-{% cycle 'code' 'mobile-alt' 'paint-brush' 'server' 'chart-line' 'shield-alt' %}"></i>
|
||
</div>
|
||
<h4 class="mb-3">{{ service.name }}</h4>
|
||
<p class="text-muted mb-4">{{ service.description|truncatewords:20 }}</p>
|
||
<a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary">
|
||
Подробнее <i class="fas fa-arrow-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="text-center mt-5">
|
||
<a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
|
||
<i class="fas fa-th-large me-2"></i>
|
||
Все услуги
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Choose Us Section -->
|
||
<section class="section-padding">
|
||
<div class="container-modern">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<div class="pe-lg-5">
|
||
<h2 class="display-6 fw-bold mb-4">
|
||
Ваш надежный <span class="text-gradient">IT-партнер</span>
|
||
</h2>
|
||
<p class="text-muted mb-4">
|
||
Мы не просто выполняем проекты - мы создаем долгосрочные партнерские отношения
|
||
и помогаем бизнесу расти с помощью технологий.
|
||
</p>
|
||
|
||
<div class="feature-list">
|
||
<div class="d-flex align-items-start mb-4">
|
||
<div class="feature-icon bg-primary rounded-3 p-2 me-3 text-white">
|
||
<i class="fas fa-rocket"></i>
|
||
</div>
|
||
<div>
|
||
<h5 class="mb-2">Быстрая разработка</h5>
|
||
<p class="text-muted mb-0">Agile-методология и современные инструменты для быстрой доставки результата</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-start mb-4">
|
||
<div class="feature-icon bg-success rounded-3 p-2 me-3 text-white">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h5 class="mb-2">Высокое качество</h5>
|
||
<p class="text-muted mb-0">Тщательное тестирование и code review обеспечивают надежность решений</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-start mb-4">
|
||
<div class="feature-icon bg-warning rounded-3 p-2 me-3 text-white">
|
||
<i class="fas fa-headset"></i>
|
||
</div>
|
||
<div>
|
||
<h5 class="mb-2">24/7 Поддержка</h5>
|
||
<p class="text-muted mb-0">Постоянная техническая поддержка и сопровождение проектов</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="position-relative">
|
||
<!-- Process Steps -->
|
||
<div class="process-steps">
|
||
<div class="step-card active bg-white rounded-4 p-4 shadow mb-4">
|
||
<div class="d-flex align-items-center">
|
||
<div class="step-number bg-primary text-white rounded-circle me-3"
|
||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||
1
|
||
</div>
|
||
<div>
|
||
<h6 class="mb-1">Анализ требований</h6>
|
||
<p class="small text-muted mb-0">Детальное изучение ваших потребностей</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card bg-white rounded-4 p-4 shadow mb-4">
|
||
<div class="d-flex align-items-center">
|
||
<div class="step-number bg-secondary text-white rounded-circle me-3"
|
||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||
2
|
||
</div>
|
||
<div>
|
||
<h6 class="mb-1">Проектирование</h6>
|
||
<p class="small text-muted mb-0">Создание архитектуры и дизайна</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card bg-white rounded-4 p-4 shadow mb-4">
|
||
<div class="d-flex align-items-center">
|
||
<div class="step-number bg-success text-white rounded-circle me-3"
|
||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||
3
|
||
</div>
|
||
<div>
|
||
<h6 class="mb-1">Разработка</h6>
|
||
<p class="small text-muted mb-0">Программирование и тестирование</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card bg-white rounded-4 p-4 shadow">
|
||
<div class="d-flex align-items-center">
|
||
<div class="step-number bg-warning text-white rounded-circle me-3"
|
||
style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||
4
|
||
</div>
|
||
<div>
|
||
<h6 class="mb-1">Запуск и поддержка</h6>
|
||
<p class="small text-muted mb-0">Деплой и техническая поддержка</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="section-padding bg-gradient text-white">
|
||
<div class="container-modern text-center">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<h2 class="display-6 fw-bold mb-4">
|
||
Готовы начать свой проект?
|
||
</h2>
|
||
<p class="lead mb-5 opacity-90">
|
||
Свяжитесь с нами сегодня и получите бесплатную консультацию по вашему проекту
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3 justify-content-center">
|
||
<a href="{% url 'services' %}" class="btn btn-light btn-lg text-primary">
|
||
<i class="fas fa-comments me-2"></i>
|
||
Получить консультацию
|
||
</a>
|
||
<a href="tel:+82-10-XXXX-XXXX" class="btn btn-outline-light btn-lg">
|
||
<i class="fas fa-phone me-2"></i>
|
||
Позвонить сейчас
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Animate elements on scroll
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('animate-fade-in-up');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe service cards
|
||
document.querySelectorAll('.service-card, .step-card').forEach(card => {
|
||
observer.observe(card);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.max-width-600 {
|
||
max-width: 600px;
|
||
}
|
||
|
||
.hero-graphic {
|
||
perspective: 1000px;
|
||
}
|
||
|
||
.code-window {
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.floating-icon {
|
||
animation-delay: 1s;
|
||
}
|
||
|
||
.step-card {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.step-card.animate-fade-in-up {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-graphic {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.code-window {
|
||
transform: rotate(0deg) !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.mobile-preview {
|
||
position: relative !important;
|
||
transform: rotate(0deg) !important;
|
||
margin-top: 1rem;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.floating-icon {
|
||
position: relative !important;
|
||
display: inline-block;
|
||
margin: 0.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %} |