DESINO

🏛️ PROMPT IMPLEMENTATION: E-COMMERCE FASHION HOMEPAGE (page.tsx)

📌 CONTEXT & OVERVIEW

Bạn là một Senior Frontend Developer chuyên về thương hiệu thời trang cao cấp. Hãy xây dựng trang chủ E-commerce Fashion (src/app/[locale]/page.tsx) dựa trên bộ Design System hiện tại của dự án:

  • Design Tokens & Colors: Từ tailwind.config.ts (Màu nền white / ivory, chữ màu gray-800 / black, nhấn màu gold-500 tiết chế tinh tế).
  • Typography System: Từ src/styles/type.scss (heading-1..4, body-0..4, button-1..3, title-1..3).
  • Brand Aesthetic Inspiration:
    • Bottega Veneta: Tinh tế, tối giản cao cấp, tập trung vào hình ảnh lớn và Typography sắc nét.
    • Cambridge Satchel: Phong cách thủ công truyền thống, danh mục sản phẩm thanh lịch.
    • Ralph Lauren: Đẳng cấp Editorial, bố cục Bento Grid quyến rũ.
  • Visual Reference Layout: Dựa theo ảnh mẫu tham chiếu (Hero Slider -> Collection Bento Grid -> Fullwidth Parallax Banner -> Trending Products -> Workshop / Journal -> Shop By Outlook Bento -> Editorial Footer).

🎨 DESIGN RULES & CONSTRAINT CHECKS (BẮT BUỘC TUÂN THỦ)

  1. Colors Standard:

    • Background: Chỉ sử dụng màu white (#FFFFFF) hoặc bg-ivory / bg-ivory-100 (#F6F2ED). Tuyệt đối không dùng nền màu lạ.
    • Text: Sử dụng màu đen mặc định (text-black) hoặc text-gray-800 (#1F1F1F).
    • Gold Accent: Sử dụng gold-500 (#C9A86A) tinh tế và hạn chế (chỉ dùng cho viền active nhỏ, điểm nhấn nhãn Haute Couture hoặc icon trạng thái đặc biệt). Không lạm dụng làm mảng màu lớn.
    • No Custom Inline Colors: Tuyệt đối không dùng màu ad-hoc tự nghĩ ngoài cấu hình Tailwind.

  2. Typography Standard:

    • KHÔNG sử dụng JIT Text Classes như text-[10px], text-[14px], text-[2rem].
    • CHỈ SỬ DỤNG các utility class chuẩn từ type.scss:
      • Tiêu đề: heading-1, heading-2, heading-3, heading-4 (sử dụng font font-display).
      • Thẻ mô tả / Văn bản: body-0, body-1, body-2, body-3, body-4 (font font-sans).
      • Thẻ Nút Bấm: button-1, button-2, button-3.
      • Thẻ Nhãn / Subtitle: title-1, title-2, title-3.

  3. Responsive Breakpoint Rules:

    • Áp dụng các điểm dừng: Desktop xl:, lg:, Tablet md:, Mobile (block md:hidden / flex md:hidden).
    • TUYỆT ĐỐI KHÔNG DÙNG breakpoint sm:.

🧩 COMPONENT ARCHITECTURE & SECTIONS

Hãy chia nhỏ các Component vào thư mục src/components/home/ hợp lý, dễ bảo trì và tối ưu hóa Render Performance: