934 lines
37 KiB
HTML
934 lines
37 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="hero-wrapper">
|
||
{% if hero_banners %}
|
||
<!-- Hero Carousel for Multiple Banners -->
|
||
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||
<!-- Hero Container with rounded corners -->
|
||
<div class="hero-container">
|
||
<!-- Custom Carousel Indicators with Pills -->
|
||
<div class="carousel-indicators-container">
|
||
<div class="outer-pill">
|
||
<div class="pill-indicators">
|
||
{% for banner in hero_banners %}
|
||
<button type="button"
|
||
class="pill-indicator {% if forloop.first %}active{% endif %}"
|
||
data-bs-target="#heroCarousel"
|
||
data-bs-slide-to="{{ forloop.counter0 }}"
|
||
data-title="{{ banner.title }}"
|
||
aria-label="Slide {{ forloop.counter }}">
|
||
<span class="pill-indicator-title">{{ banner.title }}</span>
|
||
</button>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-inner">
|
||
{% for banner in hero_banners %}
|
||
<div class="carousel-item {% if forloop.first %}active{% endif %}">
|
||
<!-- Hero Background (Video or Image) -->
|
||
<div class="hero-bg">
|
||
{% if banner.video %}
|
||
<!-- Hero Video Background -->
|
||
<video class="hero-video"
|
||
autoplay muted loop
|
||
{% if banner.video_poster %}poster="{{ banner.video_poster.url }}"{% endif %}>
|
||
<source src="{{ banner.video.url }}" type="video/mp4">
|
||
{% if banner.image %}
|
||
<!-- Fallback image -->
|
||
<img src="{{ banner.image.url }}" alt="{{ banner.title }}">
|
||
{% endif %}
|
||
</video>
|
||
{% elif banner.image %}
|
||
<!-- Hero Image Background -->
|
||
<img src="{{ banner.image.url }}" alt="{{ banner.title }}">
|
||
{% endif %}
|
||
|
||
<!-- Gradient Overlay -->
|
||
<div class="hero-overlay"></div>
|
||
|
||
<!-- Hero Content -->
|
||
<div class="hero-content">
|
||
<div class="row align-items-center w-100">
|
||
<div class="col-lg-8 col-xl-7">
|
||
<div class="animate-fade-in-up">
|
||
<h1 class="hero-title">
|
||
{{ banner.title }}
|
||
</h1>
|
||
{% if banner.subtitle %}
|
||
<h2 class="hero-subtitle">
|
||
{{ banner.subtitle }}
|
||
</h2>
|
||
{% endif %}
|
||
{% if banner.description %}
|
||
<p class="hero-description">
|
||
{{ banner.description }}
|
||
</p>
|
||
{% endif %}
|
||
|
||
<div class="d-flex flex-wrap gap-3">
|
||
{% if banner.button_text and banner.button_link %}
|
||
<a href="{{ banner.button_link }}" class="btn btn-light btn-lg px-4">
|
||
<i class="fas fa-rocket me-2"></i>
|
||
{{ banner.button_text }}
|
||
</a>
|
||
{% endif %}
|
||
<a href="{% url 'services' %}" class="btn btn-outline-light btn-lg px-4">
|
||
<i class="fas fa-cogs me-2"></i>
|
||
Наши услуги
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<!-- Default Hero Section (fallback) -->
|
||
<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 Preview -->
|
||
<div class="mobile-preview position-absolute bg-white rounded-4 p-3 shadow"
|
||
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>
|
||
{% endif %}
|
||
</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>
|
||
|
||
<!-- Portfolio Section -->
|
||
<section class="section-padding bg-light" id="portfolio">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<span class="badge bg-primary rounded-pill px-3 py-2 mb-3">
|
||
<i class="fas fa-briefcase me-2"></i>
|
||
💼 Портфолио
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-3">
|
||
Наши <span class="text-gradient">работы</span>
|
||
</h2>
|
||
<p class="lead text-muted max-width-600 mx-auto">
|
||
Избранные проекты, которыми мы гордимся
|
||
</p>
|
||
</div>
|
||
|
||
{% if latest_projects %}
|
||
<div class="row g-4">
|
||
{% for project in latest_projects %}
|
||
<div class="col-lg-4">
|
||
<div class="project-card bg-white rounded-4 overflow-hidden shadow hover-lift">
|
||
{% if project.image %}
|
||
<div class="project-image">
|
||
<img src="{{ project.image.url }}" alt="{{ project.name }}" class="w-100">
|
||
<div class="project-overlay">
|
||
<a href="{% url 'project_detail' project.pk %}" class="btn btn-light rounded-circle">
|
||
<i class="fas fa-eye"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
<div class="p-4">
|
||
<h5 class="mb-3">{{ project.name }}</h5>
|
||
<p class="text-muted mb-3">{{ project.description|truncatewords:15 }}</p>
|
||
<a href="{% url 'project_detail' project.pk %}" class="text-primary fw-semibold">
|
||
Подробнее <i class="fas fa-arrow-right ms-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="text-center mt-5">
|
||
<a href="{% url 'portfolio' %}" class="btn btn-primary-modern btn-lg">
|
||
<i class="fas fa-th-large me-2"></i>
|
||
Смотреть все проекты
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Blog Section -->
|
||
<section class="section-padding" id="blog">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<span class="badge bg-success rounded-pill px-3 py-2 mb-3">
|
||
<i class="fas fa-blog me-2"></i>
|
||
📝 Блог
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-3">
|
||
Последние <span class="text-gradient">статьи</span>
|
||
</h2>
|
||
</div>
|
||
|
||
{% if latest_blog_posts %}
|
||
<div class="row g-4">
|
||
{% for post in latest_blog_posts %}
|
||
<div class="col-lg-6">
|
||
<article class="blog-card bg-white rounded-4 overflow-hidden shadow hover-lift">
|
||
{% if post.image %}
|
||
<div class="blog-image">
|
||
<img src="{{ post.image.url }}" alt="{{ post.title }}" class="w-100">
|
||
</div>
|
||
{% endif %}
|
||
<div class="p-4">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="text-muted small">{{ post.created_at|date:"d F Y" }}</span>
|
||
</div>
|
||
<h5 class="mb-3">{{ post.title }}</h5>
|
||
<p class="text-muted mb-3">{{ post.content|truncatewords:25 }}</p>
|
||
<a href="{% url 'blog_post_detail' post.pk %}" class="text-primary fw-semibold">
|
||
Читать далее <i class="fas fa-arrow-right ms-1"></i>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="text-center mt-5">
|
||
<a href="{% url 'blog' %}" class="btn btn-primary-modern btn-lg">
|
||
<i class="fas fa-blog me-2"></i>
|
||
Все статьи
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- News Section -->
|
||
<section class="section-padding bg-light" id="news">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<span class="badge bg-warning rounded-pill px-3 py-2 mb-3">
|
||
<i class="fas fa-newspaper me-2"></i>
|
||
📰 Новости
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-3">
|
||
Последние <span class="text-gradient">новости</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-lg-12">
|
||
<div class="news-card bg-white rounded-4 p-4 shadow">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="badge bg-primary rounded-pill px-3 py-1 me-3">24.11.2025</span>
|
||
<h5 class="mb-0">Новый сайт</h5>
|
||
</div>
|
||
<p class="text-muted mb-3">
|
||
Поздравляем всех наших клиентов с этой знаменательной датой!
|
||
Мы переписали свой сайт! теперь у нас современный дизайн и улучшенная функциональность...
|
||
</p>
|
||
<a href="{% url 'news' %}" class="text-primary fw-semibold">
|
||
Узнать больше <i class="fas fa-arrow-right ms-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="{% url 'news' %}" class="btn btn-primary-modern btn-lg">
|
||
<i class="fas fa-newspaper me-2"></i>
|
||
Все новости
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Career Section -->
|
||
<section class="section-padding" id="career">
|
||
<div class="container-modern">
|
||
<div class="text-center mb-5">
|
||
<span class="badge bg-info rounded-pill px-3 py-2 mb-3">
|
||
<i class="fas fa-rocket me-2"></i>
|
||
🚀 Карьера
|
||
</span>
|
||
<h2 class="display-6 fw-bold mb-3">
|
||
Присоединяйтесь к нашей <span class="text-gradient">команде</span>
|
||
</h2>
|
||
<p class="lead text-muted max-width-600 mx-auto">
|
||
Мы ищем талантливых специалистов, которые разделяют нашу страсть к технологиям и инновациям.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-lg-4">
|
||
<div class="career-feature text-center p-4">
|
||
<div class="career-icon bg-primary rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
|
||
<i class="fas fa-chart-line fa-2x"></i>
|
||
</div>
|
||
<h6 class="mb-2">Профессиональный рост</h6>
|
||
<p class="text-muted small mb-0">Возможности для развития и обучения</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="career-feature text-center p-4">
|
||
<div class="career-icon bg-success rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
|
||
<i class="fas fa-users fa-2x"></i>
|
||
</div>
|
||
<h6 class="mb-2">Команда профессионалов</h6>
|
||
<p class="text-muted small mb-0">Работайте с лучшими специалистами</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="career-feature text-center p-4">
|
||
<div class="career-icon bg-warning rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
|
||
<i class="fas fa-clock fa-2x"></i>
|
||
</div>
|
||
<h6 class="mb-2">Гибкий график</h6>
|
||
<p class="text-muted small mb-0">Удаленная работа и гибкое расписание</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="career-stats bg-gradient rounded-4 p-4 text-white mb-4" style="max-width: 300px; margin: 0 auto;">
|
||
<h3 class="display-4 fw-bold mb-2">0</h3>
|
||
<h6 class="mb-2">Открыто вакансий</h6>
|
||
<p class="small mb-0 opacity-75">Найдите свою идеальную позицию</p>
|
||
</div>
|
||
|
||
<a href="{% url 'career' %}" class="btn btn-primary-modern btn-lg me-3">
|
||
<i class="fas fa-briefcase me-2"></i>
|
||
Смотреть вакансии
|
||
</a>
|
||
<a href="{% url 'career' %}" class="btn btn-outline-primary btn-lg">
|
||
Посмотреть все
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|
||
|
||
{% block extra_styles %}
|
||
<style>
|
||
/* CRITICAL Hero Banner Styles - Emergency Fix */
|
||
.hero-modern {
|
||
padding: 2rem 0;
|
||
background: #f8f9fa;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-container {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
|
||
height: 70vh;
|
||
min-height: 500px;
|
||
max-height: 800px;
|
||
}
|
||
|
||
.carousel-item {
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
|
||
.hero-bg {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-video {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-bg img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
color: white;
|
||
text-align: left;
|
||
padding: 3rem;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
margin-bottom: 1rem;
|
||
color: white;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.3rem;
|
||
margin-bottom: 1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 2rem;
|
||
opacity: 0.8;
|
||
max-width: 500px;
|
||
}
|
||
|
||
/* Pill Indicators Styles */
|
||
.carousel-indicators-container {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 4;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.outer-pill {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 50px;
|
||
padding: 8px;
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.pill-indicators {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border-radius: 40px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.pill-indicator {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border: none;
|
||
border-radius: 25px;
|
||
padding: 8px 16px;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.pill-indicator.active {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: #333;
|
||
transform: scale(1.05);
|
||
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.pill-indicator:not(.active):hover {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.pill-indicator-title {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.animate-fade-in-up {
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Container wrapper для центрирования */
|
||
.hero-wrapper {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero-container {
|
||
margin: 0;
|
||
border-radius: 15px;
|
||
height: 60vh;
|
||
min-height: 400px;
|
||
max-height: 600px;
|
||
}
|
||
|
||
.hero-content {
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.carousel-indicators-container {
|
||
bottom: 20px;
|
||
}
|
||
|
||
.pill-indicator {
|
||
padding: 6px 12px;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.hero-container {
|
||
border-radius: 12px;
|
||
height: 50vh;
|
||
min-height: 350px;
|
||
}
|
||
|
||
.hero-content {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const carousel = document.getElementById('heroCarousel');
|
||
const indicators = document.querySelectorAll('.pill-indicator');
|
||
|
||
let currentActiveIndex = 0;
|
||
|
||
function updatePillState(index) {
|
||
// Обновляем классы индикаторов
|
||
indicators.forEach((indicator, i) => {
|
||
if (i === index) {
|
||
indicator.classList.add('active');
|
||
} else {
|
||
indicator.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
currentActiveIndex = index;
|
||
}
|
||
|
||
// Обработчики событий для индикаторов
|
||
indicators.forEach((indicator, index) => {
|
||
indicator.addEventListener('click', function() {
|
||
currentActiveIndex = index;
|
||
updatePillState(index);
|
||
});
|
||
});
|
||
|
||
// Bootstrap carousel события
|
||
if (carousel) {
|
||
carousel.addEventListener('slide.bs.carousel', function(event) {
|
||
const nextIndex = event.to;
|
||
currentActiveIndex = nextIndex;
|
||
updatePillState(nextIndex);
|
||
});
|
||
|
||
// Инициализируем первое состояние
|
||
updatePillState(0);
|
||
}
|
||
|
||
// 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 %} |