Hero Carousel Setup
Current homepage hero behavior
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.
Tùy chọn dự phòng. Homepage hiện ưu tiên ảnh của từng slide.
<% if (data.hero?.backgroundImage) { %>
<% } %>
Recommended content structure
- Dùng ảnh slide tỉ lệ ngang, ưu tiên ảnh lớn để fit container.
- Title ngắn 2-4 dòng để không tràn trên mobile.
- Description giữ ở mức 1-3 câu ngắn.
- Hai nút nên dùng link nội bộ như
/contact.
Hero Slides
<% const existingSlides=(data.hero && Array.isArray(data.hero.slides) && data.hero.slides.length> 0)
? data.hero.slides
: [{
title: data.hero?.title || '',
subtitle: data.hero?.subtitle || '',
description: data.hero?.description || '',
heroImage: data.hero?.heroImage || '',
videoUrl: data.hero?.videoUrl || '',
primaryButton: data.hero?.primaryButton || {},
secondaryButton: data.hero?.secondaryButton || {},
}];
%>
<% existingSlides.forEach(function(slide, index) { %>
<% }); %>
Slide
Hiện không render ngoài frontend, chỉ giữ để tương thích dữ liệu cũ.
Ả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.
<% if (slide.heroImage) { %>
<% } %>
Frontend hiện không render video trong hero. Giữ lại chỉ để tránh mất dữ liệu cũ.