Vietnamese Bakery Listing - Copy this Html, Bootstrap Component to your project
Generate a responsive bakery e-commerce product listing page using HTML and Bootstrap 5 in Vietnamese. Match the layout closely to the image. The layout should include: 🔝 Header: A dark navigation bar with: Left: logo placeholder Center: navigation menu links: TRANG CHỦ, GIỚI THIỆU, SẢN PHẨM, TIN TỨC, LIÊN HỆ, HỆ THỐNG CỬA HÀNG Right: icons for search, wishlist (heart), user profile, and shopping cart 📸 Category Banner: A horizontal row of 5 category images with dark overlay + white text: Bánh kẹp, Bánh sô kem, Bánh mì nướng, Bánh khô, Bánh lạnh Full-width, responsive on mobile 🧾 Main Content Section: Bootstrap container with a row divided into: 🔹 Left Sidebar (col-lg-3): Title: DANH MỤC SẢN PHẨM Accordion menu with categories: Bánh ngọt Bánh mì Bánh lạnh Bánh không đường Section BỘ LỌC SẢN PHẨM: Checkbox filters for: Tags (Tag 01, Tag 02...) LOẠI: Bánh ngọt, Bánh mặn, Bánh nướng TRỌNG LƯỢNG: 50g, 100g, 200g, 300g 🔹 Right Column (col-lg-9): 🔼 Thanh “Sắp xếp theo”: Row above product grid with: Label: Sắp xếp theo Dropdown/select box with options: Mặc định Giá tăng dần Giá giảm dần Tên A-Z Tên Z-A 🧺 Product Grid: Use Bootstrap grid (row + col-lg-3) Each product card includes: Product image Top-left badge: “New”, “Hot” hoặc “-25%” Top-right heart icon (wishlist) Product name Price in VND (e.g., 42.000đ) On hover: subtle shadow or lift ⬇ Pagination: Bottom of grid: Bootstrap pagination with page numbers 🎨 Design: Colors: warm (cream, brown, orange tones) Fonts: modern & friendly Fully responsive for mobile/tablet/desktop
