Langkah Membuat FrontEnd 1

 LANDING PAGE

https://chatgpt.com/c/699d4ea2-9614-8320-a5d6-2047538f05b7

https://sites.google.com/view/ayamgoreng80/halaman-muka

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