trevor/smartsoltech_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚀 MEGA UPDATE: Объединение всех изменений для продакшена
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
✨ НОВЫЕ ФУНКЦИИ:
- 🎬 Поддержка видео в Hero баннерах и услугах
- 💊 Водная анимация пилюль маркеров банеров
- 📱 Полная главная страница с портфолио, блогом, новостями
- 🎯 HeroBanner модель с видео/изображениями
- 🎨 Современные hover-эффекты и анимации

📊 УЛУЧШЕНИЯ СТРУКТУРЫ:
- Расширенная home_modern.html с полным контентом
- Новые URL маршруты для всех секций
- Обновленные views с передачей всех данных
- CSS стили для всех новых секций
- Миграции для видео полей

🎪 HERO БАНЕР СИСТЕМА:
- Динамические банеры с видео/фото фонами
- Пилюли маркеры с водной анимацией
- Растягивание маркеров от центра
- Адаптивный дизайн для мобильных
- Glassmorphism эффекты

🎨 СОВРЕМЕННЫЙ ДИЗАЙН:
- Hover анимации для карточек
- Плавные переходы везде
- Современная типографика
- Градиенты и тени
- Отзывчивая сетка

Готов к продакшену! 🚀
This commit is contained in:
Andrey K. Choi
2025-11-25 11:24:19 +09:00
parent 6a576136af
commit 6f43fa4c3b
14 changed files with 1832 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
original_home_modern.html Normal file
View File

@@ -0,0 +1,361 @@
{% 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 %}