# QR Menu — Ana Səhifə (E-Menu home)

1:1 build of **Home Page Spec.md** + reference screenshot. iPhone Safari shell + customer e-menu
home. SF Pro Text · safe margin 16 · radius 12 · primary `#2684FF`.

## Foundations
- **Artboard** 375px content (390px phone frame, 10px bezel). Safe margin **16px** sol/sağ.
- **Type**: H1 20/700 · H2 17/700 · card title 15/600 · button 15–16/500 · body 13–14/500 ·
  caption 11–12/400–500 · amount 20/700.
- **Colour**: primary `#2684FF` · soft `rgb(240,246,250)` · text-1 `rgb(29,29,29)` ·
  text-2 `rgb(95,103,116)` · text-3 `rgb(102,102,102)` · line `rgb(242,244,245)` ·
  success `rgb(16,150,90)` · black `#000`.
- **Radius**: buttons/cards/info 12 · logo 16 · chip/icon 8 · pill 999.
- **Shadow**: primary (Kampaniyalar) `0 8px 18px rgba(38,132,255,.22)` → hover `.28`.

## Shell
Phone 390×840 r46 black bezel · inner screen r38 white · **Dynamic Island** 110×34 r20 top-center ·
page bg `#e9ecf0`. **Status bar** 44 (9:41 15/600 · signal·wifi·battery). **Safari URL** margin
`4 8 0`, h38 r12 pill bg (`aA` · 🔒 · **tendirmendir.clopos.com** green `#1a9b4b` 15 · ↻). **Content**
scroll, bottom pad 100. **Safari tab bar** h72, translucent + blur, 5 blue icons.

## Blocks (top → bottom)
1. **Top bar** — pad `12 16`, space-between. User chip (Nurlan, user icon 18) · **AZ** language chip
   (Azerbaijan flag) — *matches the real screenshot (not the gear).*
2. **Brand** — cover 174 r12 · row (mt16 gap12): logo 72 r16 · name «Təndir Məndir» 20/700 ·
   description (RU, 11/text-2) · meta Takeaway · Delivery (14px icons).
3. **Menyu** — primary, h48 r12, menu icon + arrow.
4. **Kampaniyalar** — primary, h48 r12, blue shadow, gift icon + arrow.
5. **Cashback** — soft card, pad12, h124: money 28 + `100.50 ₼` 20/700 · QR 44 r10; white divider;
   info + «Keşbek haqqında» + arrow (all primary).
6. **Apple Wallet** — black h56 r12: layered wallet 40 · «Əlavə edin / Apple Wallet» · `+`.
7. **Actions** — pad `16 16 0` gap10: pair «Ofisiantı çağır» + «Qəlyançı çağır»; rows «Hesabı istə»
   (no chevron), «Tips» (chevron), «Dəyərləndirmə» (chevron). Outline, blue icon 24, 16/500.
8. **Info cards** — soft, r12, pad14: Wi-Fi şifrəsi (şəbəkə adı · şifrə + copy) · Əlaqə ·
   İş saatları (green «Açıqdır» · «Çərşənbə axşamı / 12:00 - 23:00» + chevron-down).
9. **Sosial media** — 17/700 title · 2-col grid: Vebsayt (blue) · Instagram (`#E1306C`) ·
   Facebook (`#1877F2`) · Google review (4-colour).
10. **Footer** — centered «Powered by **Clopos**» (link primary).

## Notes
- Cover foto və logo mockup üçün SVG/gradient placeholder ilə verilib (real brand fotosu deyil).
- İkonlar inline SVG.