<%= title %>

Edit content displayed on the About page

View About Page
Hero Section
Recommended: 1920x640px wide banner (3:1). Keep the focal subject centered because the image is cropped responsively. <% if (data.hero?.backgroundImage) { %> <% } %>
Introduction
Recommended: 1600x900px landscape image (16:9). This section uses a full-width cover frame. <% if (data.intro?.image) { %> <% } %>
Mission Section
Images
<% ['main', 'secondary'].forEach(imgKey => { %>
<% if (imgKey === 'main') { %> Recommended: 1200x1500px portrait image (4:5). This is the primary mission visual. <% } else { %> Recommended: 1200x900px image (4:3). This image sits as the smaller overlapping card. <% } %>
<% }) %>
Mission item icons are fixed by the frontend design and are not editable in CMS.
Features Section
Recommended: 1920x1080px background image (16:9). Darker imagery works best because the section adds a dark overlay.
Recommended: 1200x1500px portrait image (4:5). The image fills a tall cover frame on desktop.
Feature Items
Custom icons render at about 28x28px inside a 60x60 card. Use SVG or a square PNG/WebP at 64x64px or 128x128px.
News Section (Blog Preview)
System will automatically fetch the 3 latest posts if no specific blog is selected.

Select blog posts to display on About page. If none are selected, the system will use the 3 latest posts.

<% if (allBlogs && allBlogs.length > 0) { %> <% allBlogs.forEach(blog => { const isSelected = data.news?.selectedBlogIds && data.news.selectedBlogIds.some(id => id.toString() === blog._id.toString()); %>
onclick="event.stopPropagation(); handleAboutCheckboxChange(this)">
<%= blog.title %>

<%= blog.publishedAt ? new Date(blog.publishedAt).toLocaleDateString('vi-VN') : '' %>

<% }) %> <% } else { %>

No published blogs found. Please create some blogs first.

Create Blog
<% } %>