purple-deals

bySyed Eman Ali Shah

You are a senior full-stack web developer continuing the development of the **Unique Café** single-page restaurant website. A previous code generation was cut off mid-way through the Deals section. Your sole task is to **complete the Deals section in full** — delivering all 15 deal cards as production-ready HTML/CSS/JavaScript that integrates seamlessly with the existing page. --- ## Context: What Already Exists The page has an established dark premium theme with deep red, golden, and orange accent colors. Menu card components, PKR pricing display, sticky navbar, and interactive section patterns are already implemented. The Deals section was started but cut off before Deal 1 was completed. **Do not recreate anything already built.** --- ## Your Task: Complete the Full Deals Section (Deals 1–15) Deliver a **single self-contained HTML/CSS/JS block** that completes the Deals section from where it was cut off. Insert a clear comment marking the continuation point. All styles should be scoped to the deals section to avoid conflicts with existing CSS. --- ### Deal Data (All Prices in PKR) - **Deal 1** — Rs. 350: 1 Zinger Shawarma + 1 Tin Pack - **Deal 2** — Rs. 399: 1 Zinger Burger + 1 Tin Pack - **Deal 3** — Rs. 499: 1 Zinger Burger + Fries + 1 Tin Pack - **Deal 4** — Rs. 799: 2 Zinger Burgers + 2 Tin Packs - **Deal 5** — Rs. 999: 5 Shawarmas + 1.5 Ltr Drink - **Deal 6** — Rs. 1,099: 1 Medium Pizza + Fries + 1 Ltr Drink - **Deal 7** — Rs. 1,199: 1 Medium Pizza + 1 Zinger Shawarma + 1.5 Ltr Drink - **Deal 8** — Rs. 1,199: 2 Zinger Burgers + 1 Shawarma + 1.5 Ltr Drink - **Deal 9** — Rs. 1,699: 1 Large Pizza + 1 Zinger Burger + Fries + 1.5 Ltr Drink ⭐ **Popular** - **Deal 10** — Rs. 2,349: 2 Medium Pizzas + 1 Shawarma + 1 Zinger Shawarma + 1 Chicken Burger + 1.5 Ltr Drink - **Deal 11** — Rs. 2,650: 2 Large Pizzas + 1.5 Ltr Drink - **Deal 12** — Rs. 3,750: 3 Medium Pizzas + 1 Pound Cake + Wings + Nuggets + 1.5 Ltr Drink ⭐ **Best Value** - **Deal 13** — Rs. 4,199: 1 Large Pizza + 1 Medium Pizza + 1 Zinger Burger + 1 Chicken Burger + Pratha Roll + Shawarma + Fries + 1.5 Ltr Drink ⭐ **Best Value** - **Deal 14** — Rs. 4,549: 3 Large Pizzas + 4 Shawarmas + Fries + 1.5 Ltr Drink - **Deal 15** — Rs. 4,799: 3 Large Pizzas + 2 Pound Cakes + Fries + 1.5 Ltr Drink --- ## UI & Interaction Requirements **Deal Cards:** - Bold deal number badge (e.g., "DEAL 1") styled with golden/red accent matching the existing theme - Total PKR price displayed prominently — large, high-contrast, unmissable - Itemized list of included items with bullet or icon styling consistent with existing menu cards - Apply **"Popular"** badge on Deal 9 and **"Best Value"** badge on Deals 12 and 13 — visually distinct (e.g., glowing accent border or ribbon) - Calculate and display **savings vs. individual item pricing** on each card using realistic individual item prices derived from the menu data already established on the page **Expanded Detail Modal / Inline Expansion:** - Clicking a deal card expands it (inline accordion or modal) to show full deal breakdown, individual item prices crossed out, and total savings highlighted - Smooth open/close animation consistent with the dark premium aesthetic **Quantity Selector:** - Each deal card includes a `−` / `+` quantity control that updates a subtotal displayed on the card - Quantity minimum is 1 **Filtering:** - Filter bar above the deals grid with options: **All | Under Rs. 1,000 | Rs. 1,000–Rs. 2,500 | Rs. 2,500–Rs. 5,000 | Most Popular** - Filtering triggers a smooth fade/slide transition — non-matching cards hide gracefully, matching cards remain visible - Active filter state clearly highlighted using the existing golden/red accent **Animations:** - Cards animate into view on scroll (fade-up with slight delay stagger per card) - Hover state: subtle lift (translateY), golden border glow, slight background lightening — consistent with existing card hover patterns **Layout:** - Responsive CSS Grid: 3 columns on desktop, 2 on tablet, 1 on mobile - Section heading styled to match existing section headers (e.g., "OUR DEALS" with decorative underline accent) --- ## Code Standards - Vanilla HTML/CSS/JS only — no external libraries unless already present in the existing page - All CSS scoped with `.deals-section` parent class to prevent conflicts - JavaScript modular — use a `dealsData` array as the data source, render cards dynamically via JS - No inline styles; all styling via scoped CSS classes - Comment each major block (filter logic, card render function, modal/expand handler, quantity logic)