Align home hero API and CMS hero editor

views/admin/home/sections/hero.ejs

@@ -1,21 +1,30 @@
 <!-- Hero Tab -->
 <div class="tab-pane fade show active" id="hero" role="tabpanel">
   <div class="row g-4">
-    <!-- Background Image (section-level) -->
     <div class="col-md-12">
       <div class="card border shadow-sm mb-3">
         <div class="card-header bg-white d-flex justify-content-between align-items-center">
           <h6 class="mb-0">
-            <i class="fas fa-image me-2"></i>Hero Background
+            <i class="fas fa-layer-group me-2"></i>Hero Carousel Setup
           </h6>
         </div>
         <div class="card-body">
-          <div class="row g-3">
-            <div class="col-md-6">
-              <label class="form-label fw-medium">Background Image</label>
+          <div class="alert alert-light border mb-3">
+            <div class="fw-semibold mb-1">Current homepage hero behavior</div>
+            <div class="small text-muted">
+              Mỗi slide dùng ảnh riêng làm nền full-width. Title, description và 2 button chỉ là lớp overlay.
+              Trường video hiện không còn được hiển thị ở frontend.
+            </div>
+          </div>
+          <div class="row g-3 align-items-start">
+            <div class="col-lg-6">
+              <label class="form-label fw-medium">Fallback Background Image</label>
+              <small class="text-muted d-block mb-1">
+                Tùy chọn dự phòng. Homepage hiện ưu tiên ảnh của từng slide.
+              </small>
               <div class="input-group mb-2">
                 <input type="text" class="form-control" id="heroBackgroundImage"
-                  value="<%= data.hero?.backgroundImage || '' %>" placeholder="/assets/img/home-1/hero/bg.jpg" />
+                  value="<%= data.hero?.backgroundImage || '' %>" placeholder="/uploads/home/hero-fallback.jpg" />
                 <button type="button" class="btn btn-outline-primary btn-upload-image"
                   data-target-input="heroBackgroundImage" data-image-type="home">
                   <i class="fas fa-upload me-1"></i>Upload
@@ -28,6 +37,17 @@
                 </div>
                 <% } %>
             </div>
+            <div class="col-lg-6">
+              <div class="border rounded p-3 h-100 bg-light-subtle">
+                <div class="fw-semibold mb-2">Recommended content structure</div>
+                <ul class="small text-muted mb-0 ps-3">
+                  <li>Dùng ảnh slide tỉ lệ ngang, ưu tiên ảnh lớn để fit container.</li>
+                  <li>Title ngắn 2-4 dòng để không tràn trên mobile.</li>
+                  <li>Description giữ ở mức 1-3 câu ngắn.</li>
+                  <li>Hai nút nên dùng link nội bộ như <code>/contact</code>.</li>
+                </ul>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -79,6 +99,7 @@
                     </div>
                     <div class="col-md-6">
                       <label class="form-label fw-medium">Subtitle</label>
+                      <small class="text-muted d-block mb-1">Hiện không render ngoài frontend, chỉ giữ để tương thích dữ liệu cũ.</small>
                       <input type="text" class="form-control" id="heroSlide_<%= index %>_subtitle"
                         value="<%= slide.subtitle || '' %>" placeholder="e.g., Global Education Simplified" />
                     </div>
@@ -88,11 +109,11 @@
                         placeholder="Enter hero description"><%= slide.description || '' %></textarea>
                     </div>
                     <div class="col-md-6">
-                      <label class="form-label fw-medium">Hero Image</label>
-                      <small class="text-muted d-block mb-1">Recommended size: 893x848px</small>
+                      <label class="form-label fw-medium">Slide Background Image</label>
+                      <small class="text-muted d-block mb-1">Ảnh này đang được dùng làm nền full hero. Khuyến nghị ảnh ngang lớn hoặc GIF nếu cần.</small>
                       <div class="input-group mb-2">
                         <input type="text" class="form-control" id="heroSlide_<%= index %>_heroImage"
-                          value="<%= slide.heroImage || '' %>" placeholder="/assets/img/home-1/hero/man.png" />
+                          value="<%= slide.heroImage || '' %>" placeholder="/uploads/home/hero-slide-01.jpg" />
                         <button type="button" class="btn btn-outline-primary btn-upload-image"
                           data-target-input="heroSlide_<%= index %>_heroImage" data-image-type="home">
                           <i class="fas fa-upload me-1"></i>Upload
@@ -107,8 +128,9 @@
                     </div>
                     <div class="col-md-6">
                       <label class="form-label fw-medium">Video URL</label>
+                      <small class="text-muted d-block mb-1">Frontend hiện không render video trong hero. Giữ lại chỉ để tránh mất dữ liệu cũ.</small>
                       <input type="text" class="form-control" id="heroSlide_<%= index %>_videoUrl"
-                        value="<%= slide.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..." />
+                        value="<%= slide.videoUrl || '' %>" placeholder="Không bắt buộc" />
                     </div>
 
                     <!-- Primary Button -->
@@ -309,4 +331,4 @@
     // Initial normalization (in case indices rendered from server are not 0..n)
     updateLabels();
   });
-</script>
+</script>