Modern E-commerce Homepage - Copy this Html, Bootstrap Component to your project
Generate a complete, responsive e-commerce homepage (HTML, CSS, JavaScript) using https://cellphones.com.vn/ as the visual and functional reference. Requirements: 1. Structure & sections: - Top header with logo placeholder, search input, language/region toggle, account/icon area, and cart icon with item count badge. - Main navigation with category dropdowns or horizontal menu. - Large rotating banner/hero area for advertisements (autoplay carousel + manual controls). - "Hot Sale" section: horizontal carousel or grid of product cards with image placeholder, product name, original price, sale price, discount badge, rating (stars), and "Buy" button. Include an optional countdown timer for featured deals. - "Recommended for you" section: responsive grid of product cards. - Footer with links (support, company info), newsletter signup, and social icons. 2. Visual / style: - Use orange as primary (#ff6a00 or similar), white background, clean modern UI, subtle shadows and rounded corners. - Mobile-first, fully responsive breakpoints (mobile, tablet, desktop). - Use placeholder images (via data-src or <img src> placeholder) and sample product data embedded in JS (no external calls). - Smooth animations for carousel and hover states. 3. Accessibility & performance: - Semantic HTML (header, nav, main, section, footer). - ARIA labels where appropriate, keyboard operable carousel controls, and lazy-loading for images. - Small, efficient CSS and vanilla JS (no frameworks). Prefer CSS Grid/Flexbox. 4. Deliverables & constraints: - Return only code (HTML/CSS/JS files or a single HTML with embedded CSS/JS). Do not include backend code or explanatory text. - Use thegioididong.com as inspiration for layout and UX but do NOT copy any copyrighted assets; use placeholders and clearly labeled sample data. - Include comments in the code for where to swap real images, product data, and integrate backend APIs later. Output: A production-ready, responsive front-end homepage that mirrors the layout and UX patterns of thegioididong.com (header, banner, Hot Sale, recommendations), with sample data and placeholder images, accessible controls, and no external dependencies.