# SAINT Sky Bar — Mobile-First Restructure (Design Spec) **Date:** 2026-07-08 **Scope:** Reorganize the one-page site around a mobile-first flow: swappable hero, an experience-selector button grid, a 4th "Shisha" experience, a reviews section, and a reservation flow — then adapt it cleanly to desktop with the same section order. > Status: DRAFT — recommended defaults chosen while the client was away. Open items flagged with **⚠**. Awaiting review. --- ## 1. Section order (mobile & desktop — identical order) 1. **Header** — unchanged (logo, EN/EL, theme toggle). 2. **Hero** — swappable per-experience image + brand + **"Learn More"** button. 3. **Experience selector** — button grid (mobile: 2×2 + wide button; desktop: horizontal row). 4. **The Experience** — tabbed frosted-glass panels: **Sushi · Cocktails · Shisha · The View**. 5. **Gallery** — the existing 10-photo coverflow. **⚠ Not in the client's list — kept here by default (preserves the 10 supplied photos). Confirm keep / move / remove.** 6. **Reviews** — testimonial slider. 7. **Reservation** — the existing form (name, email, phone, guests, message). 8. **Footer** — unchanged. **⚠ Removed:** the standalone "An evening here is measured in sunsets…" **Welcome** section (its role is absorbed by the hero). Confirm. --- ## 2. Hero — swappable images + Learn More - The hero image reflects the **currently selected experience**. Four images: `hero-sushi`, `hero-cocktails`, `hero-shisha`, `hero-view` (built from existing/supplied photos; shisha = placeholder). - **Default selection: The View** (its caldera image doubles as the brand hero). - Selecting an experience button **crossfades** the hero to that image (reuse the existing blur-dissolve). - The **dark-mode video is retired** (decision Q1-A); light/dark now only changes UI chrome, not the hero source. - New **"Learn More"** button in the hero → smooth-scrolls to **The Experience** with the matching tab already active. - Brand logo, kicker, sub-line, scroll cue: unchanged. **Interaction detail (⚠ confirm):** tapping a selector button crossfades the hero *and* smooth-scrolls up to the hero so the change is visible; "Learn More" then jumps back down to the detailed tab. Alternative: no auto-scroll (button just highlights + hero updates silently). --- ## 3. Experience selector (the button grid) Dark tiles with a thin divider grid, centered line-icon + label (styled after the client's reference screenshot). - **Mobile:** a **2×2** square grid — `Sushi · Cocktails · Shisha · The View` — then **one full-width "Make Reservation"** button (1 row × 2 cols) beneath it. - **Desktop:** the four tiles become a **horizontal row**, with the **Make Reservation** button prominent beside/below (decision Q4-A). Centered, max-width. - **Behavior:** - Experience tile → selects that experience (swaps hero, highlights the active tile, retargets "Learn More"). - **Make Reservation** → smooth-scrolls to the Reservation form. - Icons: reuse shrimp (Sushi), cocktail (Cocktails), sunset (The View); **new line "hookah" icon for Shisha**. --- ## 4. The Experience (tabs) - Add **Shisha** as a 4th tab alongside Sushi, Cocktails, The View. - Keep the cinematic full-bleed image + **frosted-glass `svc-glass` card** (kept square-ish/rounded). "More info": expand each panel's copy slightly; chips remain (hidden on mobile per earlier decision; long-press-to-peek remains). - Each panel is **deep-linkable**: `#experience` + a tab id so the hero's "Learn More" and the selector can open the right tab. - Shisha content = placeholder copy + chips + placeholder image (Q2-A). --- ## 5. Gallery (⚠ kept by default) - The existing 10-photo coverflow, unchanged (full-screen cards on mobile, stacked coverflow on desktop). - Placed after The Experience. Confirm placement / keep. --- ## 6. Reviews - **Elegant testimonial slider** (Q3-A): a frosted-glass card with a quote, guest name, and 5 stars; auto-advances (pause on interaction); dot indicators; EN/EL. - Placeholder reviews (client-editable). Self-contained (no external widgets). --- ## 7. Reservation - The existing form (with the new **Number of guests** field) becomes the terminal section. Anchor `#reserve`. - Reached via the wide **Make Reservation** button and footer/nav links. --- ## 8. Implementation units - **`experience` controller (app.js):** holds selected experience; on select → set hero image (crossfade), highlight tile, set Learn-More target, optional scroll. - **Hero assets:** `hero-sushi.jpg`, `hero-cocktails.jpg`, `hero-shisha.jpg`, `hero-view.jpg`. - **Selector grid:** new markup + CSS (2×2 mobile / row desktop, dark tiles). - **Experience section:** +Shisha tab/panel/icon/content; tab-activation API for deep links. - **Reviews:** new section markup + slider JS + i18n. - **Learn More / Make Reservation:** anchor + tab-activation wiring. - **Retire:** dark-mode hero video path; standalone Welcome section. ## 9. Verification - Mobile (≤430px) screenshots per section; no horizontal overflow. - Selector → hero crossfade works; active tile highlights. - "Learn More" opens The Experience on the correct tab; "Make Reservation" scrolls to the form. - Shisha tab renders; reviews slider auto-advances + is swipeable; EN/EL intact; light/dark intact. - Desktop mirrors the same order in a desktop-native layout. ## 10. Open questions (need client confirmation) 1. **Q1–Q4** (hero behavior, shisha assets, reviews style, desktop format) — defaults A chosen. 2. **Welcome section** — remove (default) or keep? 3. **Gallery/coverflow** — keep (default, placed after The Experience), move, or remove? 4. **Selector interaction** — auto-scroll-to-hero on tap (default) or silent hero update? 5. **Shisha image** — placeholder now, real photo later?