Senin, 23 Februari 2026

Langkah Membuat FrontEnd 1

 LANDING PAGE




Tujuan

Menampilkan branding & mengarahkan user ke menu.


Grid System

  • Container: 1140px

  • 12 column layout

  • Gap 24px

  • Section spacing 80px

HALAMAN MENU / KATALOG

Tujuan

Menampilkan semua produk dengan filter.


Komponen

  • SidebarFilter

  • ProductCard (hover effect)

  • Pagination

  • Sorting Dropdown

DESIGN SYSTEM (Desktop Web)

📐 Layout

  • Max-width: 1200px

  • Container centered

  • Section spacing 60–80px

  • Grid 12 column

🎨 Warna

  • Primary: #FF6B00 (Food tone)

  • Secondary: #1F2937

  • Background: #F9FAFB

  • Success: #10B981

🖱 Interaction

  • Hover effect pada card

  • Transition 0.3s

  • Button shadow ringan

  • Sticky cart icon





Tidak ada komentar:

Posting Komentar

Langkah Membuat FrontEnd 1

 LANDING PAGE https://chatgpt.com/c/699d4ea2-9614-8320-a5d6-2047538f05b7 https://sites.google.com/view/ayamgoreng80/halaman-muka Tujuan Men...