Убрана секция карьеры с главной страницы и обновлены категории портфолио на овальные пилюли

smartsoltech/web/templates/web/home_modern.html

@@ -455,68 +455,6 @@
         </div>
     </div>
 </section>
-
-<!-- Career Section -->
-<section class="section-padding" id="career">
-    <div class="container-modern">
-        <div class="text-center mb-5">
-            <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-home bg-white rounded-4 p-4 shadow-lg mb-4" style="max-width: 320px; margin: 0 auto; border: 2px solid #667eea;">
-                <h3 class="display-4 fw-bold mb-2 text-primary">{{ total_open_positions|default:0 }}</h3>
-                <h6 class="mb-2 text-dark fw-semibold">Открыто вакансий</h6>
-                <p class="small mb-0 text-muted">Найдите свою идеальную позицию</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 %}
@@ -1132,66 +1070,6 @@ document.addEventListener('DOMContentLoaded', function() {
         display: inline-block;
         margin: 0.5rem;
     }
-    
-    .career-stats-home {
-        max-width: 280px !important;
-        padding: 1.5rem !important;
-    }
-    
-    .career-stats-home h3 {
-        font-size: 2.5rem !important;
-    }
-}
-
-/* Career Stats Home Styles */
-.career-stats-home {
-    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
-    border: 2px solid #667eea !important;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15) !important;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.career-stats-home::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(45deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-    z-index: 1;
-}
-
-.career-stats-home:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.25) !important;
-    border-color: #5a67d8;
-}
-
-.career-stats-home > * {
-    position: relative;
-    z-index: 2;
-}
-
-.career-stats-home h3 {
-    color: #667eea !important;
-    text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
-    font-size: 3rem;
-    font-weight: 800;
-}
-
-.career-stats-home h6 {
-    color: #2d3748 !important;
-    font-weight: 600;
-    font-size: 1.1rem;
-    letter-spacing: 0.5px;
-}
-
-.career-stats-home p {
-    color: #6b7280 !important;
-    font-size: 0.9rem;
 }
 </style>
 {% endblock %}

smartsoltech/web/templates/web/portfolio_list.html

@@ -14,28 +14,45 @@
 
 .category-filter {
     display: flex;
-    gap: 1rem;
+    gap: 0.75rem;
     flex-wrap: wrap;
     margin: 2rem 0;
     justify-content: center;
+    padding: 0 1rem;
 }
 
-.category-btn {
-    padding: 0.75rem 1.5rem;
-    border: 2px solid #667eea;
-    background: white;
-    color: #667eea;
+.category-pill {
+    padding: 0.7rem 1.4rem;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #495057;
+    border: 2px solid transparent;
     border-radius: 50px;
     transition: all 0.3s ease;
-    font-weight: 600;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
 }
 
-.category-btn:hover,
-.category-btn.active {
+.category-pill:hover {
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.3);
+    text-decoration: none;
+}
+
+.category-pill.active {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    border-color: transparent;
 }
 
 .portfolio-card {
@@ -107,6 +124,40 @@
     font-weight: 600;
     z-index: 10;
 }
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 768px) {
+    .portfolio-hero {
+        padding: 80px 0 40px;
+    }
+    
+    .portfolio-hero h1 {
+        font-size: 2rem;
+    }
+    
+    .portfolio-hero .lead {
+        font-size: 1rem;
+    }
+    
+    .category-filter {
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .category-pill {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+    
+    .portfolio-card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .featured-badge {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+}
 </style>
 {% endblock %}
 
@@ -120,11 +171,11 @@
 
 <div class="container py-5">
     <div class="category-filter">
-        <a href="{% url 'portfolio_list' %}" class="category-btn {% if not request.GET.category %}active{% endif %}">
+        <a href="{% url 'portfolio_list' %}" class="category-pill {% if not request.GET.category %}active{% endif %}">
             <i class="fas fa-th me-2"></i>Все проекты
         </a>
         {% for category in categories %}
-        <a href="?category={{ category.slug }}" class="category-btn {% if request.GET.category == category.slug %}active{% endif %}">
+        <a href="?category={{ category.slug }}" class="category-pill {% if request.GET.category == category.slug %}active{% endif %}">
             <i class="{{ category.icon }} me-2"></i>{{ category.name }}
         </a>
         {% endfor %}