Home Page - Copy this React, Tailwind Component to your project
1.-Bố-cục-tổng-thể-Trang-chủ-được-chia-thành-5-phần-chính:-Header-(Thanh-điều-hướng).-Banner-chính-(Hero-Section).-Danh-mục-sản-phẩm-(Product-Categories).-Sản-phẩm-nổi-bật-(Featured-Products).-Footer-(Chân-trang).-2.-Chi-tiết-từng-phần-2.1-Header-(Thanh-điều-hướng)-Chiều-cao:-80px.-Màu-nền:-Trắng-(#ffffff)-với-bóng-mờ-nhẹ-ở-phía-dưới-(box-shadow:-0px-4px-6px-rgba(0,-0,-0,-0.1)).-Logo:-Đặt-ở-góc-trái,-kích-thước-120x50px.-Logo-Dala-Nust-có-phông-nền-trong-suốt.-Menu-điều-hướng:-Vị-trí:-Căn-đều-sang-phải,-khoảng-cách-giữa-các-mục-menu-là-30px.-Mục-menu:-"Trang-chủ",-"Sản-phẩm",-"Khuyến-mãi",-"Liên-hệ".-Font-chữ:-Roboto,-kích-thước-16px,-màu-xám-đậm-(#333333).-Hiệu-ứng:-Khi-rê-chuột-qua-(hover),-mục-menu-được-gạch-chân-(underline)-và-đổi-màu-xanh-lá-đậm-(#3a8a3a).-Nút-CTA:-Vị-trí:-Góc-phải-của-thanh-điều-hướng.-Kích-thước:-100x40px.-Màu-nền:-Cam-(#f78c1f).-Font-chữ:-Trắng,-bo-tròn-8px,-hover-đổi-thành-cam-đậm-(#f56b1c).-2.2-Banner-chính-(Hero-Section)-Bố-cục:-Kích-thước:-Chiều-cao-100vh-(full-màn-hình-đầu-tiên).-Chia-đôi-màn-hình:-Bên-trái:-Tiêu-đề-lớn:-Font-chữ:-Playfair-Display,-kích-thước-48px,-màu-trắng-(#ffffff),-đậm.-Nội-dung:-"Khám-phá-tinh-hoa-nông-sản-Việt."-Dòng-phụ:-Font-chữ:-Roboto,-kích-thước-20px,-màu-trắng-nhạt-(#e0e0e0).-Nội-dung:-"Sản-phẩm-tươi-ngon,-chất-lượng-cao-từ-những-nông-trại-sạch."-Nút-CTA:-Text:-"Mua-ngay".-Kích-thước:-200x50px,-nền-cam-(#f78c1f),-chữ-trắng-(#ffffff),-bo-góc-8px.-Hiệu-ứng-hover:-Nền-cam-đậm-(#f56b1c)-kèm-bóng-mờ-nhẹ.-Bên-phải:-Hình-ảnh:-Một-bàn-gỗ-(màu-nâu-nhạt)-với-các-sản-phẩm-như-hạt,-trái-cây-sấy,-hộp-sản-phẩm-bày-biện-gọn-gàng.-Hình-ảnh-rõ-nét,-ánh-sáng-tự-nhiên.-Hiệu-ứng:-Toàn-bộ-banner-có-hiệu-ứng-parallax-scrolling,-hình-nền-di-chuyển-chậm-hơn-nội-dung-khi-cuộn-trang.-2.3-Danh-mục-sản-phẩm-(Product-Categories)-Bố-cục:-Kích-thước:-3-cột-ngang-(mỗi-cột-là-một-danh-mục-sản-phẩm).-Danh-mục:-Hạt-dinh-dưỡng-(Nuts-&-Seeds).-Trái-cây-sấy-(Dried-Fruits).-Thực-phẩm-đóng-hộp-(Canned-Goods).-Thiết-kế-từng-danh-mục:-Hình-ảnh:-Định-dạng-tròn-(circle-crop),-đường-kính-150px.-Hình-ảnh-sản-phẩm-nổi-bật,-nền-trắng-hoặc-nền-gỗ-nhẹ.-Text:-Font-chữ:-Roboto,-kích-thước-18px,-màu-xanh-lá-(#3a8a3a).-Căn-giữa-dưới-hình-ảnh.-Hiệu-ứng:-Khi-rê-chuột-qua:-Hình-ảnh-phóng-to-nhẹ-(scale-1.1).-Thêm-viền-sáng-xanh-lá-đậm.-2.4-Sản-phẩm-nổi-bật-(Featured-Products)-Bố-cục:-Mỗi-hàng-hiển-thị-4-sản-phẩm-(chia-đều).-Kích-thước-khung-mỗi-sản-phẩm:-300x400px.-Thiết-kế-từng-sản-phẩm:-Hình-ảnh:-Định-dạng-hình-chữ-nhật,-kích-thước-tối-thiểu-300x300px.-Phông-nền-trắng,-sản-phẩm-được-chụp-cận-cảnh-rõ-nét.-Tên-sản-phẩm:-Font-chữ-Roboto,-màu-xám-đậm-(#333333),-kích-thước-16px.-Giá-sản-phẩm:-Font-chữ-Roboto,-màu-cam-(#f78c1f),-kích-thước-18px,-đậm.-Hiệu-ứng:-Khi-rê-chuột-qua:-Hình-ảnh-sản-phẩm-phóng-to-nhẹ.-Hiện-nút-"Thêm-vào-giỏ-hàng"-ở-dưới,-kích-thước-150x40px,-nền-cam-(#f78c1f),-chữ-trắng.-2.5-Footer-(Chân-trang)-Bố-cục:-Chia-4-cột:-Logo-+-slogan-("Nông-sản-Việt---Chất-lượng-quốc-tế").-Liên-kết-nhanh:-Trang-chủ,-Sản-phẩm,-Khuyến-mãi,-Liên-hệ.-Chính-sách:-Chính-sách-bảo-hành,-đổi-trả.-Liên-hệ:-Email,-hotline,-địa-chỉ.-Màu-sắc-và-hiệu-ứng:-Màu-nền:-Xanh-lá-đậm-(#3a8a3a).-Text:-Màu-trắng,-font-chữ-Roboto.-Icon-mạng-xã-hội:-Icon-tròn,-màu-trắng.-Hover-đổi-thành-xanh-nhạt-(#76c7c0).
