Adjust mobile layout to match design mockup

[Dustin-Reyes]

Problem

The current mobile layout doesn't match the design mockup. This is a mobile-first template and the layout needs significant adjustments.

Reference Images

• Desktop Layout: `/public/layout-desktop.png` ✅ (in dev branch)
• Mobile Layout: `/public/layout-mobile.png` ✅ (in dev branch)

Specific Mobile Layout Differences

❌ Missing Components:

1. Header Icons

   • Missing: Search icon (top right)
   • Missing: Notification bell with badge (top right)
   • Have: Hamburger menu ✅

2. Search Bar

   • Missing: Full-width search input below UserGreeting
   • Missing: Filter icon on search bar

3. Menu Item Cards

   • Missing: Star ratings (e.g., ⭐ 4.5)
   • Missing: "Add to Cart" button (red)
   • Missing: Heart icon (favorite/wishlist)
   • Missing: Category badge (green "Burger" tag)
   • Missing: Currency display ("EGP")
   • Have: Image, name, description, price ✅

4. Promotional Banner

   • Missing: "Get 20% OFF" promo banner between sections

5. Section Headers

   • Missing: "See Menu →" link on Food Category
   • Missing: "View All →" links on sections

⚠️ Layout Issues:

• Bottom padding not accounting for BottomNav properly
• Card spacing/sizing doesn't match mockup
• Category pills styling may need adjustment

Tasks

• Add search icon and notification bell to header
• Create full-width SearchBar component
• Update MenuItemCard to include:
  • Star ratings
  • "Add to Cart" button
  • Heart/favorite icon
  • Category badge
  • Currency formatting (EGP)
• Create PromoBanner component
• Add "View All" links to section headers
• Adjust spacing and sizing to match mockup
• Test on mobile viewport (375px, 414px)

Acceptance Criteria

• ✅ Mobile layout matches `layout-mobile.png` exactly
• ✅ All interactive elements are touch-friendly (44px min)
• ✅ Proper spacing for fixed BottomNav
• ✅ Responsive design works on all mobile sizes
• ✅ Desktop layout still matches `layout-desktop.png`

Priority

🔴 HIGH - This is a mobile-first template