From 1810db09b9fed12634843ee997b66c7fe07d5dcd Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Tue, 25 Nov 2025 12:43:30 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20UX:=20Hero=20=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80=20=D1=81=20=D0=BE=D0=B3?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=87=D0=B5=D0=BD=D0=BD=D0=BE=D0=B9=20?=
 =?UTF-8?q?=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=BE=D0=B9=20=D0=B8=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=BA=D1=80=D1=83=D0=B3=D0=BB=D0=B5=D0=BD=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=BC=D0=B8=20=D0=BA=D1=80=D0=B0=D1=8F=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/templates/web/home_modern.html        | 77 +++++++++++++++----
 1 file changed, 61 insertions(+), 16 deletions(-)

diff --git a/smartsoltech/web/templates/web/home_modern.html b/smartsoltech/web/templates/web/home_modern.html
index 16720eb..de27c79 100644
--- a/smartsoltech/web/templates/web/home_modern.html
+++ b/smartsoltech/web/templates/web/home_modern.html
@@ -5,6 +5,7 @@
 {% 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">
@@ -190,6 +191,7 @@
             </div>
         </div>
     {% endif %}
+    </div>
 </section><!-- Services Preview Section -->
 <section class="section-padding bg-light">
     <div class="container-modern">
@@ -573,11 +575,10 @@
 <style>
 /* CRITICAL Hero Banner Styles - Emergency Fix */
 .hero-modern {
-    padding: 0;
-    background: #000;
+    padding: 2rem 0;
+    background: #f8f9fa;
     position: relative;
     overflow: hidden;
-    min-height: 100vh;
 }
 
 .hero-container {
@@ -587,18 +588,21 @@
     margin: 0 auto;
     border-radius: 20px;
     overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
+    height: 70vh;
+    min-height: 500px;
+    max-height: 800px;
 }
 
 .carousel-item {
     position: relative;
-    min-height: 100vh;
+    height: 100%;
 }
 
 .hero-bg {
     position: relative;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -639,35 +643,40 @@
     z-index: 3;
     color: white;
     text-align: left;
-    padding: 2rem;
+    padding: 3rem;
     width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
 .hero-title {
-    font-size: 3.5rem;
+    font-size: 3rem;
     font-weight: 800;
     margin-bottom: 1rem;
     color: white;
+    line-height: 1.2;
 }
 
 .hero-subtitle {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     margin-bottom: 1rem;
     opacity: 0.9;
 }
 
 .hero-description {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     margin-bottom: 2rem;
     opacity: 0.8;
+    max-width: 500px;
 }
 
 /* Pill Indicators Styles */
 .carousel-indicators-container {
     position: absolute;
-    top: 50%;
+    bottom: 30px;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
     z-index: 4;
     pointer-events: auto;
 }
@@ -739,21 +748,41 @@
     }
 }
 
+/* Container wrapper для центрирования */
+.hero-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .hero-container {
-        border-radius: 0;
         margin: 0;
+        border-radius: 15px;
+        height: 60vh;
+        min-height: 400px;
+        max-height: 600px;
+    }
+    
+    .hero-content {
+        padding: 2rem 1.5rem;
     }
     
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.1rem;
+    }
+    
+    .hero-description {
+        font-size: 1rem;
     }
     
     .carousel-indicators-container {
         bottom: 20px;
-        top: auto;
-        transform: translateX(-50%);
     }
     
     .pill-indicator {
@@ -761,6 +790,22 @@
         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 %}