System Requirements Document for baithke-bihari-cafe

1. Introduction

Baithke Bihari Cafe is a neighbourhood cafe on Boring Road, Sri Krishnapuri, Patna, serving pizza, Chinese, fast food, coffee, shakes and beverages to students, young friend-groups and families looking for a hangout spot. This project delivers a single premium, animation-heavy, fully responsive one-page landing page that presents the cafe, its food, its vibe and its location, and converts visitors into walk-ins, calls, WhatsApp enquiries and table or group bookings.

The product intent is appetite-driven and social: the page must feel like a party invitation rather than a restaurant brochure. It must let a visitor immediately see whether the cafe is open, browse and filter the real menu, search for a craving, view featured items, combos and offers, look through food and Instagram-style galleries, read reviews and the Google rating, find the cafe on a map, and act through Call, WhatsApp, Directions, Add to Enquiry / Order Now, Book Your Table, or Enquire for Group Booking.

The audience is the prospective cafe visitor on a phone in Patna, plus the table/group booking enquirer planning a get-together, and the cafe owner/manager who owns the page content and receives the resulting enquiries.

2. System Overview

The system is one public, anonymous, single-page landing site for Baithke Bihari Cafe. It is a mobile-first, animation-heavy marketing and discovery surface with no visitor accounts, no login, and no in-page ordering or payment. All visitor actions either navigate to a provider surface (phone dialer, WhatsApp, Google Maps, Instagram, Google Reviews) or submit an enquiry to the cafe.

Current delivery is a single first-party page, Landing, which is anonymously reachable and contains every accepted section: animated hero, live opening status, category marquee, "ONE CAFE. SO MANY CRAVINGS." mood tiles, interactive food menu with category filtering and search, food item cards, TODAY'S CRAVINGS featured items, food gallery, Instagram-style gallery, customer reviews slider, Google rating section, Why Baithke Bihari Cafe, Choose Your Mood, TODAY'S SPECIAL offers, location with Google Maps, animated counters, reservation/table enquiry, party/group booking enquiry, plus the persistent chrome: scroll progress bar, smart header, quick menu overlay, back-to-top button, floating WhatsApp button, sticky mobile action bar, and the once-per-session offer popup.

Actors are the Cafe Visitor / Diner, the Table / Group Booking Enquirer, and the Cafe Owner / Manager. The cafe owner/manager is not a user of the page UI; they are the content authority and the recipient of enquiries, and their confirmations gate several conditional sections.

Narrow exclusions: there is no visitor account, no login, no online payment, no in-page cart or checkout, no delivery tracking, and no multi-page navigation. The page is one page only.

2a. Product Interpretation and Delivery Boundary

The landing page is a first-party, anonymous, public surface. No visitor identity is established, stored or resumed, because no accepted journey requires a visitor to privately own or resume durable state: every visitor action is either a one-shot navigation to a provider surface or a one-shot enquiry submission to the cafe. Consequently there is no sign-up, no login, no session-bound visitor profile, and no permission model. The only session-scoped state is the once-per-session offer popup suppression, which is a display rule, not an identity.

Provider-owned work stays with its provider: telephony (Call) is handled by the device dialer, WhatsApp enquiry by WhatsApp, directions and the map by Google Maps, the Instagram gallery link by Instagram, and the Google Reviews button by Google. The page only composes the entry point and the prefilled message or destination.

Content authority sits with the cafe owner/manager. Menu items, prices, veg/non-veg markers, Popular badges, opening hours, offers and combo prices, Google rating and happy-customer counts, and counter numbers are only rendered once the cafe supplies or confirms them. Where the cafe has not confirmed a value, the corresponding section renders in a truthful unconfirmed state rather than showing invented numbers. The reservation/table booking section is enabled only if the cafe takes table bookings.

Current horizon covers everything listed above. Future horizon covers any capability not accepted in the authoritative thread, such as online ordering, payment, delivery, loyalty, or visitor accounts; none of these are in scope now.

2b. Source Content Inventory

Not applicable — no reference directive with content_source was supplied.

2c. Page Content and Component Coverage

Landing

The single anonymous public page. All sections below are stacked vertically as full-bleed colour bands on the dark espresso ground, with the persistent chrome layered above.

Information and state

• Live opening status derived from the cafe's confirmed opening hours: Open Now (green/yellow dot) or Closed (red), with "Opens at 11:00 AM" / "Closes at …" messaging that changes automatically with time.
• Menu data: items with image, name, short description, price, veg/non-veg indicator, optional Popular badge, and an Add to Enquiry / Order Now action.
• Category set: Pizza, Chinese, Fast Food, Coffee, Shakes, Beverages.
• Featured items: 4–6 popular/highlighted items for TODAY'S CRAVINGS.
• Gallery media across pizza, Chinese, shakes, cafe ambience, interior and customer moments.
• Instagram-style grid media and the Follow Us @BaithkeBihariCafe link.
• Customer reviews with star ratings; Google rating and happy-customer count when confirmed; counter numbers when confirmed; offer cards and prices when confirmed.
• Location: 1st Floor, Jagdamba Tower, Sahdeo Mahto Marg, Boring Road, Sri Krishnapuri, Patna.
• Enquiry state: reservation form values (Name, Mobile, Date, Time, Guests) and group booking enquiry state.

Primary actions

• View Menu (hero) → smooth-scroll to the interactive food menu.
• Get Directions (hero and location) → Google Maps directions to the cafe address.
• Category chip click → animated filtering of the menu grid.
• Search input ("What are you craving?") → live filtering of matching items.
• Mood tile click (Hungry, Chilling, Pizza Time, Something Refreshing, Hangout With Friends) → highlight the related food category.
• "ONE CAFE. SO MANY CRAVINGS." buttons (Pizza, Chinese, Fast Food, Coffee, Shakes) → smooth-scroll and filter the menu to that category.
• Add to Enquiry / Order Now on a food item card.
• Reserve Now on the Book Your Table form.
• Enquire for Group Booking.
• View Google Reviews.
• Follow Us @BaithkeBihariCafe.
• Call, WhatsApp, Directions, Menu from the sticky mobile action bar; Call and WhatsApp from the header/contact areas.
• Navigate to Cafe (mobile directions CTA).
• EXPLORE MENU from the offer popup.

Supporting actions

• Header MENU button → animated full-screen quick menu overlay.
• Back-to-top floating button.
• Scroll progress bar (read-only indicator).
• Offer popup dismiss.
• Testimonial slider manual navigation and hover/focus pause.

Domain entities

• Menu Category (name, order, associated items).
• Menu Item (image, name, short description, price, veg/non-veg, popular flag, category, enquiry action).
• Featured Item (subset of menu items highlighted in TODAY'S CRAVINGS).
• Gallery Media (image, category tag, overlay caption).
• Instagram Media (image, link to @BaithkeBihariCafe).
• Review (stars, quote text, attribution as provided).
• Rating Summary (Google rating value, happy-customer count, View Google Reviews link) — only when confirmed.
• Offer (title, description, price) — only when confirmed.
• Counter Stat (value, label) — only when confirmed.
• Opening Hours (open time, close time, derived open/closed state).
• Location (address lines, map embed, directions link).
• Reservation Enquiry (Name, Mobile, Date, Time, Guests).
• Group Booking Enquiry (occasion type: Birthday, Friends Meet, Small Party, Casual Gathering; contact details).
• Mood Option (label, emoji, mapped category).
• Marquee Item (category label with emoji).

Component responsibilities

• Smart Header: transparent at top, becomes glass/solid sticky after scroll; hosts the MENU button and primary contact actions.
• Scroll Progress Bar: thin animated bar at the very top reflecting scroll position.
• Hero: full-screen food background/video, floating pizza/coffee/shake elements, animated headline, View Menu and Get Directions CTAs, scroll-down animation, live status sticker.
• Live Status Sticker: renders Open Now / Closed and the Opens/Closes messaging.
• Category Marquee: continuous horizontal ribbon of Pizza, Chinese, Fast Food, Coffee, Shakes, Beverages directly under the hero.
• Mood Tiles Section: "ONE CAFE. SO MANY CRAVINGS." with category buttons that scroll/filter the menu.
• Choose Your Mood: five mood options that highlight the related category on click.
• Menu Section: sticky category chip rail, search bar, filtered card grid.
• Food Item Card: image, name, description, price, veg/non-veg indicator, Popular badge, Add to Enquiry / Order Now.
• Featured Items: TODAY'S CRAVINGS with 4–6 large animated items.
• Food Gallery: masonry layout with hover zoom and overlay.
• Instagram Gallery: FOLLOW THE VIBE grid with Follow Us link.
• Reviews Slider: auto-sliding testimonials with star ratings.
• Google Rating Section: rating, happy-customer count, View Google Reviews button.
• Why Baithke Bihari Cafe: six animated icons (Fresh Food, Quality Ingredients, Great Taste, Comfortable Ambience, Quick Service, Perfect Hangout).
• Offers Section: TODAY'S SPECIAL animated offer cards.
• Counters Section: animated counter stats.
• Location Section: large Google Maps area, address, Get Directions button.
• Reservation Section: Book Your Table form with Name, Mobile, Date, Time, Guests and Reserve Now.
• Group Booking Section: PLANNING A GET-TOGETHER? with occasion types and Enquire for Group Booking.
• Quick Menu Overlay: full-screen animated menu popup from the header MENU button.
• Sticky Mobile Action Bar: bottom dock with Call, WhatsApp, Directions, Menu.
• Floating WhatsApp Button: prefilled enquiry message.
• Back-to-Top Button: floating ↑ control.
• Offer Popup: first-visit HUNGRY ALREADY? popup with EXPLORE MENU, shown once per session.

States

• Loading: hero media and gallery images load progressively with lazy loading; menu grid shows a lightweight placeholder while item data resolves.
• Empty: search with no matches shows a no-results message with a clear-search affordance; a category with no confirmed items shows an empty-category message; unconfirmed sections (Google rating, offers, counters) render their unconfirmed state instead of fabricated values.
• Success: category filter applies with animated transition; search narrows the grid live; reservation or group enquiry submits and confirms to the visitor; directions/WhatsApp/Call hand off to the provider.
• Error: reservation or group enquiry submission failure shows a retryable error and preserves entered values; map embed failure shows the address and Get Directions fallback; media failure shows a neutral placeholder without breaking layout.
• Recovery: form errors keep the visitor's input; failed provider handoffs leave the visitor on the page with the action still available; dismissed popup does not reappear in the same session.

3. Functional Requirements

FR-1 — Premium one-page landing page (explicit) As a Cafe Visitor / Diner, I should land on a single premium, animation-heavy, fully responsive one-page site for Baithke Bihari Cafe, so that I get the whole cafe story, menu and contact actions without navigating between pages.

• Trigger: visitor opens the site URL.
• Observable result: one page renders with hero, menu, galleries, reviews, location and enquiry sections in a single scroll.
• Constraint: the site is one page only; no additional pages are introduced.
• Continuation: visitor scrolls or uses the header MENU button.

FR-2 — Animated hero section (explicit) As a Cafe Visitor / Diner, I should see a full-screen animated hero with a food background/video, floating pizza, coffee and shake elements, an animated headline, "View Menu" and "Get Directions" CTAs, and a scroll-down animation, so that I immediately feel the cafe's energy and know my two next moves.

• Trigger: page load.
• Observable result: hero fills the viewport with animated headline and floating food elements; both CTAs are visible and actionable; a scroll-down animation invites scrolling.
• Failure/recovery: if the hero video or background media fails, a static food image or colour ground renders with the headline and CTAs intact.
• Continuation: "View Menu" scrolls to the menu; "Get Directions" opens directions; scroll-down animation leads into the marquee.

FR-3 — Live opening status (explicit) As a Cafe Visitor / Diner, I should see a live opening status showing\x20\xf0\x9f\x9f\xa2 Open Now or\x20\xf0\x9f\x94\xb4 Closed that changes automatically with time, along with "Opens at 11:00 AM" / "Closes at …" messaging, so that I know whether the cafe is open before I travel.

• Trigger: page load and passage of time.
• Observable result: status indicator shows Open Now or Closed consistent with the cafe's confirmed hours, with the next opening or closing time stated.
• Failure/recovery: if hours are not confirmed, the status renders in an unconfirmed state rather than asserting a wrong open/closed value.
• Continuation: visitor proceeds to menu, directions or contact.

FR-4 — Sticky mobile action bar (explicit) As a Cafe Visitor / Diner on mobile, I should see a sticky bottom action bar with\x20\xf0\x9f\x93\x9e Call,\x20\xf0\x9f\x92\xac WhatsApp,\x20\xf0\x9f\x93\x8d Directions and\x20\xf0\x9f\x8d\xbd️ Menu, so that the four most useful actions are always one tap away.

• Trigger: mobile viewport.
• Observable result: the bar stays pinned to the bottom of the screen while scrolling; each action performs its handoff.
• Continuation: visitor taps any action at any scroll position.

FR-5 — Interactive food menu with categories (explicit) As a Cafe Visitor / Diner, I should browse an interactive food menu with the categories Pizza, Chinese, Fast Food, Coffee, Shakes and Beverages, where clicking a category applies animated filtering, so that I can narrow the menu to what I want.

• Trigger: category click.
• Observable result: the grid animates to show only items in the selected category; the active category is visually indicated.
• Failure/recovery: a category with no confirmed items shows an empty-category message and the visitor can switch back.
• Continuation: visitor opens an item, searches, or switches category.

FR-6 — Food item cards (explicit) As a Cafe Visitor / Diner, I should see food item cards each showing a food image, item name, short description, price, veg/non-veg indicator, a\x20\xe2\xad\x90 Popular badge where applicable, and an "Add to Enquiry" / "Order Now" action, so that I can judge an item and act on it.

• Trigger: menu render or filter.
• Observable result: each card shows all listed fields; the action is available per item.
• Failure/recovery: a missing item image shows a neutral placeholder without breaking the card layout.
• Continuation: visitor adds the item to enquiry or continues browsing.

FR-7 — Featured items "TODAY'S CRAVINGS" (explicit) As a Cafe Visitor / Diner, I should see a\x20\xf0\x9f\x94\xa5 TODAY'S CRAVINGS section with 4–6 popular/highlighted food items shown with large images and animations, so that the cafe's best picks are obvious.

• Trigger: scroll into the section.
• Observable result: 4–6 highlighted items render with large imagery and entrance animation.
• Continuation: visitor can act on a featured item or continue to the menu.

FR-8 — Masonry food gallery (explicit) As a Cafe Visitor / Diner, I should browse a masonry-style gallery covering pizza, Chinese, shakes, cafe ambience, interior and customer moments, with zoom and overlay on image hover, so that I can see the food and the place.

• Trigger: scroll into the gallery; hover on desktop.
• Observable result: masonry columns render the media; hover applies zoom and an overlay.
• Failure/recovery: a failed image leaves the masonry layout intact with a placeholder.
• Continuation: visitor continues to the Instagram gallery or menu.

FR-9 — Instagram-style gallery "FOLLOW THE VIBE" (explicit) As a Cafe Visitor / Diner, I should see a\x20\xf0\x9f\x93\xb8 FOLLOW THE VIBE Instagram-style grid with a "Follow Us @BaithkeBihariCafe" link, so that I can follow the cafe's social presence.

• Trigger: scroll into the section; click on the follow link.
• Observable result: an Instagram-style grid renders; the follow link opens the cafe's Instagram profile on the provider surface.
• Continuation: visitor returns to the page and continues.

FR-10 — Customer reviews slider (explicit) As a Cafe Visitor / Diner, I should see an animated testimonial slider with\x20\xe2\xad\x90⭐⭐⭐⭐ ratings and reviews such as "Amazing food, great taste and a nice place to hang out!", with multiple reviews auto-sliding, so that I can gauge other customers' experience.

• Trigger: scroll into the section.
• Observable result: reviews auto-slide through multiple entries with star ratings.
• Continuation: visitor continues to the Google rating section.

FR-11 — Google rating section (explicit) As a Cafe Visitor / Diner, I should see a Google rating section showing the rating (e.g.\x20\xe2\xad\x90 4.8/5) and happy-customer count (e.g. 500+ Happy Customers) with a "View Google Reviews" button, using the actual Google rating only if it is available, so that I can trust the cafe's reputation.

• Trigger: scroll into the section; click "View Google Reviews".
• Observable result: the confirmed rating and count render with the button; the button opens Google Reviews on the provider surface.
• Constraint: the rating and count are shown only when actual Google rating data is available; otherwise the section renders in an unconfirmed state.
• Continuation: visitor returns to the page.

FR-12 — Why Baithke Bihari Cafe (explicit) As a Cafe Visitor / Diner, I should see a "Why Baithke Bihari Cafe?" section with animated icons for\x20\xf0\x9f\x8d\x95 Fresh Food,\x20\xf0\x9f\x91\xa8‍\xf0\x9f\x8d\xb3 Quality Ingredients,\x20\xe2\x9d\xa4️ Great Taste,\x20\xf0\x9f\xaa\x91 Comfortable Ambience,\x20\xe2\x9a\xa1 Quick Service and\x20\xf0\x9f\x91\xa5 Perfect Hangout, so that I understand what the cafe stands for.

• Trigger: scroll into the section.
• Observable result: six animated icon items render with their labels.
• Continuation: visitor continues to Choose Your Mood or the menu.

FR-13 — Choose Your Mood (explicit) As a Cafe Visitor / Diner, I should see a "WHAT ARE YOU CRAVING?" section with the options\x20\xf0\x9f\x98\x8b Hungry,\x20\xe2\x98\x95 Chilling,\x20\xf0\x9f\x8d\x95 Pizza Time,\x20\xf0\x9f\xa5\xa4 Something Refreshing and\x20\xf0\x9f\x91\xa5 Hangout With Friends, where clicking an option highlights the related food category, so that I can jump straight to what fits my mood.

• Trigger: mood option click.
• Observable result: the related food category is highlighted in the menu.
• Continuation: visitor browses the highlighted category.

FR-14 — Combo / special offers "TODAY'S SPECIAL" (explicit) As a Cafe Visitor / Diner, I should see a\x20\xf0\x9f\x8e\x89 TODAY'S SPECIAL section with animated offer cards for Pizza + Beverage Combo, Friends Combo and Coffee + Snack Combo, using actual offers and prices only if the cafe provides them, so that I can see current deals.

• Trigger: scroll into the section.
• Observable result: animated offer cards render; prices and details appear only when the cafe provides them, otherwise the cards render without fabricated prices.
• Continuation: visitor acts on an offer or continues to the menu.

FR-15 — Food search (explicit) As a Cafe Visitor / Diner, I should use a search bar labelled "\xf0\x9f\x94\x8d What are you craving?" where typing terms like pizza, coffee or shake filters matching items, so that I can find a specific craving fast.

• Trigger: typing in the search bar.
• Observable result: the menu grid filters live to matching items.
• Failure/recovery: no matches shows a no-results message with a clear-search affordance.
• Continuation: visitor selects a result or clears the search.

FR-16 — Quick menu popup (explicit) As a Cafe Visitor / Diner, I should click the MENU button in the header and get an animated full-screen menu overlay, so that I can jump to a menu area from anywhere on the page.

• Trigger: header MENU button click.
• Observable result: a full-screen animated menu overlay opens; selecting an entry navigates to that menu area and closes the overlay.
• Continuation: visitor lands on the chosen menu area.

FR-17 — Location section (explicit) As a Cafe Visitor / Diner, I should see a location section with a large Google Maps area and the address 1st Floor, Jagdamba Tower, Sahdeo Mahto Marg, Boring Road, Sri Krishnapuri, Patna, plus a\x20\xf0\x9f\x93\x8d Get Directions button, so that I can find and reach the cafe.

• Trigger: scroll into the section; click Get Directions.
• Observable result: the map area and full address render; Get Directions opens Google Maps directions on the provider surface.
• Failure/recovery: if the map embed fails, the address and Get Directions button remain usable.
• Continuation: visitor navigates to the cafe.

FR-18 — Distance / directions CTA for mobile (explicit) As a Cafe Visitor / Diner on mobile, I should see a "Navigate to Cafe" CTA, so that I can start turn-by-turn directions from my phone.

• Trigger: mobile viewport; CTA click.
• Observable result: the device opens directions to the cafe address.
• Continuation: visitor follows directions to the cafe.

FR-19 — WhatsApp enquiry (explicit) As a Cafe Visitor / Diner, I should use a floating WhatsApp button that opens a chat prefilled with "Hi Baithke Bihari Cafe, I want to know about your menu.", so that I can ask about the menu without typing.

• Trigger: floating WhatsApp button click.
• Observable result: WhatsApp opens on the provider surface with the prefilled message addressed to the cafe.
• Continuation: visitor sends the message and receives the cafe's reply on WhatsApp.

FR-20 — Reservation / table enquiry (explicit, conditional) As a Table / Group Booking Enquirer, I should use a "BOOK YOUR TABLE" section with fields Name, Mobile, Date, Time and Guests and a Reserve Now action, so that I can request a table.

• Trigger: Reserve Now click after filling the fields.
• Observable result: the reservation enquiry is submitted to the cafe and the visitor sees a confirmation.
• Constraint: this section is enabled only if the cafe takes table bookings.
• Failure/recovery: a failed submission shows a retryable error and preserves the entered values.
• Continuation: the cafe receives the enquiry and responds to the visitor's mobile number.

FR-21 — Party / group booking enquiry (explicit) As a Table / Group Booking Enquirer, I should see a "\xf0\x9f\x8e\x89 PLANNING A GET-TOGETHER?" section covering Birthday, Friends Meet, Small Party and Casual Gathering with an "Enquire for Group Booking" action, so that I can ask about hosting a group.

• Trigger: Enquire for Group Booking click.
• Observable result: the group booking enquiry is submitted to the cafe and the visitor sees a confirmation.
• Failure/recovery: a failed submission shows a retryable error and preserves the entered values.
• Continuation: the cafe receives the enquiry and responds to the visitor.

FR-22 — Animated counter section (explicit) As a Cafe Visitor / Diner, I should see an animated counter section with stats such as 1000+ Happy Foodies, 6+ Food Categories and 11 AM Opening Time, using numbers only when the cafe confirms them, so that the cafe's scale is visible without invented figures.

• Trigger: scroll into the section.
• Observable result: counters animate to their confirmed values; unconfirmed counters are not shown as fabricated numbers.
• Continuation: visitor continues scrolling.

FR-23 — Scroll progress bar (explicit) As a Cafe Visitor / Diner, I should see a thin animated progress bar at the top of the page, so that I know how far through the page I am.

• Trigger: scrolling.
• Observable result: the bar fills proportionally to scroll position.
• Continuation: visitor keeps scrolling.

FR-24 — Back-to-top button (explicit) As a Cafe Visitor / Diner, I should see a floating ↑ button while scrolling that returns me to the top, so that I can jump back without a long scroll.

• Trigger: scrolling past the top region; button click.
• Observable result: the button appears while scrolling and smoothly returns the page to the top.
• Continuation: visitor is at the top of the page.

FR-25 — Smart header (explicit) As a Cafe Visitor / Diner, I should see a header that starts transparent and becomes a glass/solid sticky header after scrolling, so that navigation stays available without covering the hero.

• Trigger: scroll position change.
• Observable result: the header transitions from transparent to glass/solid and remains sticky.
• Continuation: visitor uses the header MENU button or contact actions.

FR-26 — Dark/light food theme (explicit) As a Cafe Visitor / Diner, I should experience a premium cafe theme built on warm cream, dark brown/black and orange/red accents, so that the page feels like a premium cafe rather than a generic site.

• Trigger: page load.
• Observable result: the page renders in the specified warm, premium cafe palette.
• Continuation: visitor continues browsing.

FR-27 — Micro animations (explicit) As a Cafe Visitor / Diner, I should experience micro animations — button hover, image zoom, food card tilt, text reveal, floating icons, smooth section transitions, and cursor interaction on desktop — so that the page feels alive and premium.

• Trigger: hover, scroll, cursor movement on desktop.
• Observable result: the listed micro animations play on their respective elements.
• Continuation: visitor continues interacting.

FR-28 — First-visit offer popup (explicit) As a Cafe Visitor / Diner, I should see a subtle first-visit popup reading "\xf0\x9f\x91\x8b HUNGRY ALREADY? Explore Our Menu & Discover Your Next Favourite Bite." with an [ EXPLORE MENU ] button, shown only once per session, so that I get a nudge without being annoyed.

• Trigger: first visit in a session.
• Observable result: the popup appears once; EXPLORE MENU takes the visitor to the menu; the popup does not reappear in the same session.
• Continuation: visitor browses the menu.

FR-29 — Mobile-first responsive design (explicit) As a Cafe Visitor / Diner, I should get a properly optimized experience on\x20\xf0\x9f\x93\xb1 Mobile,\x20\xf0\x9f\x93\xb2 Tablet,\x20\xf0\x9f\x92\xbb Laptop,\x20\xf0\x9f\x96\xa5️ Desktop and large screens, so that the page works well on whatever device I use.

• Trigger: any viewport size.
• Observable result: layout, controls and readable text stay whole and usable at every supported viewport.
• Continuation: visitor uses the page normally.

FR-30 — SEO features (explicit) As a Cafe Owner / Manager, I should have the page optimized for cafe name + location, local SEO headings, meta title/description, restaurant structured data, Google Maps integration, click-to-call, WhatsApp CTA and image alt text, so that the cafe is discoverable in local search.

• Trigger: search engine crawl or share preview.
• Observable result: the page exposes the listed SEO signals and structured data.
• Continuation: searchers reach the page.

FR-31 — Fast loading (explicit) As a Cafe Visitor / Diner, I should get a fast-loading page despite the heavy animation, using WebP/AVIF images, lazy loading, optimized animations, compressed videos and mobile performance optimization, so that I am not kept waiting.

• Trigger: page load on any connection, especially mobile.
• Observable result: media is served in modern formats, off-screen media is lazy-loaded, animations are optimized, and videos are compressed.
• Continuation: visitor reaches the hero and menu quickly.

FR-32 — Category marquee after hero (explicit) As a Cafe Visitor / Diner, I should see a horizontal animated marquee immediately after the hero cycling\x20\xf0\x9f\x8d\x95 PIZZA •\x20\xf0\x9f\xa5\xa2 CHINESE •\x20\xf0\x9f\x8d\x94 FAST FOOD •\x20\xe2\x98\x95 COFFEE •\x20\xf0\x9f\xa5\xa4 SHAKES •\x20\xf0\x9f\xa7\x83 BEVERAGES, so that the cafe's range is instantly legible.

• Trigger: scroll past the hero.
• Observable result: the marquee scrolls continuously through the category list.
• Continuation: visitor continues to the mood section or menu.

FR-33 — "ONE CAFE. SO MANY CRAVINGS." section (explicit) As a Cafe Visitor / Diner, I should see a "ONE CAFE. SO MANY CRAVINGS." section asking "What are you in the mood for today?" with [\x20\xf0\x9f\x8d\x95 Pizza ] [\x20\xf0\x9f\xa5\xa2 Chinese ] [\x20\xf0\x9f\x8d\x94 Fast Food ] [\x20\xe2\x98\x95 Coffee ] [\x20\xf0\x9f\xa5\xa4 Shakes ] buttons that smoothly scroll and filter the menu to the relevant category on click, so that I can go straight to a category.

• Trigger: category button click.
• Observable result: the page smoothly scrolls to the menu with that category filtered.
• Continuation: visitor browses the filtered category.

FR-34 — Cafe confirmation gate for conditional content (required_inference) As a Cafe Owner / Manager, I should supply and confirm the real menu items, prices, offers, opening hours, Google rating and counter numbers, so that the page only shows truthful values.

• Trigger: content setup and updates by the cafe.
• Observable result: confirmed values render on the page; unconfirmed values render in an unconfirmed state rather than as invented figures.
• Continuation: the cafe updates values as they change.

FR-35 — Enquiry receipt by the cafe (required_inference) As a Cafe Owner / Manager, I should receive the table reservation and group booking enquiries submitted from the page, so that I can respond to the visitor.

• Trigger: a visitor submits a reservation or group booking enquiry.
• Observable result: the enquiry reaches the cafe with the visitor's submitted details (Name, Mobile, Date, Time, Guests for reservations; occasion and contact details for group bookings).
• Failure/recovery: if delivery fails, the visitor sees a retryable error and the enquiry is not silently lost.
• Continuation: the cafe contacts the visitor on the provided mobile number.

4. User Personas

Cafe Visitor / Diner

A prospective customer browsing the Baithke Bihari Cafe landing page, usually on a phone, deciding what to eat and whether to head over. Their context is appetite-driven and time-sensitive: they want to know if the cafe is open right now, what is on the menu, what is popular, and how to get there.

Primary goal: find a craving match and reach the cafe or send an enquiry.

Distinct accepted responsibilities: checking the live open/closed status and opening hours; browsing and filtering the interactive menu by category; searching for a specific craving; viewing featured items, combos and offers; looking through the food and Instagram-style galleries; reading reviews and the Google rating; and acting through Call, WhatsApp, Directions, or Add to Enquiry / Order Now.

Relevant inputs and decisions: which category or search term matches their craving; whether the cafe is open now; whether a featured item or combo appeals; whether to call, WhatsApp, or navigate.

Interactions with other accepted participants: their Call and WhatsApp actions reach the cafe owner/manager; their Add to Enquiry / Order Now action is an enquiry to the cafe; their Directions action hands off to Google Maps.

Observable success: they find a craving match and either reach the cafe or send an enquiry.

Table / Group Booking Enquirer

A visitor planning a table reservation or a group gathering such as a birthday, friends meet, small party or casual gathering. Their context is planning-oriented: they already intend to visit, and they need the cafe to confirm a slot or a group arrangement.

Primary goal: submit a reservation or group booking enquiry to the cafe.

Distinct accepted responsibilities: filling the Book Your Table form with Name, Mobile, Date, Time and Guests and submitting Reserve Now; or choosing an occasion (Birthday, Friends Meet, Small Party, Casual Gathering) and submitting Enquire for Group Booking.

Relevant inputs and decisions: the date, time and guest count for a table; the occasion type and contact details for a group; whether the cafe takes table bookings at all.

Interactions with other accepted participants: their submitted enquiry is received and answered by the cafe owner/manager on the mobile number they provide.

Observable success: their reservation or group booking enquiry is submitted to the cafe and acknowledged.

Cafe Owner / Manager

The cafe operator who owns the landing page content and receives the resulting enquiries. Their context is operational: the page must represent the cafe accurately and convert visitors into walk-ins and bookings.

Primary goal: keep the page accurate and convert visitors into walk-ins and bookings.

Distinct accepted responsibilities: supplying and confirming the real menu items, prices, veg/non-veg markers, Popular badges, offers and combo prices, opening hours, Google rating and happy-customer counts, and counter numbers; enabling the reservation section only if the cafe takes table bookings; and handling incoming table, group and WhatsApp enquiries.

Relevant inputs and decisions: which items are on the menu and at what price; which items are popular; which offers are live; the actual opening hours; whether table bookings are accepted; the confirmed rating and counter figures.

Interactions with other accepted participants: they receive enquiries from the Cafe Visitor / Diner and the Table / Group Booking Enquirer, and they respond on the visitor's provided contact channel.

Observable success: the page accurately represents the cafe and converts visitors into walk-ins and bookings.

5. Core User Flows

Flow 1 — Cafe Visitor / Diner: check status and decide to visit

1. The visitor opens the Baithke Bihari Cafe landing page on their phone.
2. The hero renders with the animated headline, floating food elements, and the live status sticker.
3. The visitor reads the status:\x20\xf0\x9f\x9f\xa2 Open Now with "Closes at …", or\x20\xf0\x9f\x94\xb4 Closed with "Opens at 11:00 AM".
4. If open, the visitor taps "Get Directions" in the hero (or\x20\xf0\x9f\x93\x8d Directions in the sticky mobile action bar).
5. Google Maps opens on the provider surface with directions to 1st Floor, Jagdamba Tower, Sahdeo Mahto Marg, Boring Road, Sri Krishnapuri, Patna.
6. The visitor follows the directions to the cafe.

• Failure/recovery: if the map embed fails on the page, the address and Get Directions button remain usable; if hours are unconfirmed, the status shows an unconfirmed state rather than a wrong value.

Flow 2 — Cafe Visitor / Diner: browse and filter the menu

1. The visitor taps "View Menu" in the hero, or\x20\xf0\x9f\x8d\xbd️ Menu in the sticky mobile action bar, or scrolls to the menu.
2. The menu section shows the sticky category chip rail (Pizza, Chinese, Fast Food, Coffee, Shakes, Beverages) and the card grid.
3. The visitor taps a category chip, for example Pizza.
4. The grid animates to show only Pizza items, and the active chip is visually indicated.
5. The visitor reads a food item card: image, item name, short description, price, veg/non-veg indicator, and a\x20\xe2\xad\x90 Popular badge where applicable.
6. The visitor taps "Add to Enquiry" / "Order Now" on the item.
7. The enquiry action is registered for that item and the visitor can continue browsing.

• Failure/recovery: a category with no confirmed items shows an empty-category message and the visitor can switch back.

Flow 3 — Cafe Visitor / Diner: search for a craving

1. The visitor focuses the search bar labelled "\xf0\x9f\x94\x8d What are you craving?".
2. The visitor types a term such as pizza, coffee or shake.
3. The menu grid filters live to matching items.
4. The visitor selects a matching item and acts on it, or clears the search.

• Failure/recovery: if no items match, a no-results message appears with a clear-search affordance.

Flow 4 — Cafe Visitor / Diner: use mood and category shortcuts

1. The visitor scrolls past the hero and sees the category marquee cycling\x20\xf0\x9f\x8d\x95 PIZZA •\x20\xf0\x9f\xa5\xa2 CHINESE •\x20\xf0\x9f\x8d\x94 FAST FOOD •\x20\xe2\x98\x95 COFFEE •\x20\xf0\x9f\xa5\xa4 SHAKES •\x20\xf0\x9f\xa7\x83 BEVERAGES.
2. The visitor reaches the "ONE CAFE. SO MANY CRAVINGS." section and taps a category button, for example [\x20\xf0\x9f\x8d\x95 Pizza ].
3. The page smoothly scrolls to the menu with the Pizza category already filtered.
4. Alternatively, the visitor uses the "WHAT ARE YOU CRAVING?" section and taps a mood such as\x20\xf0\x9f\x98\x8b Hungry,\x20\xe2\x98\x95 Chilling,\x20\xf0\x9f\x8d\x95 Pizza Time,\x20\xf0\x9f\xa5\xa4 Something Refreshing or\x20\xf0\x9f\x91\xa5 Hangout With Friends.
5. The related food category is highlighted in the menu.
6. The visitor browses the highlighted category.

Flow 5 — Cafe Visitor / Diner: explore featured items, offers and galleries

1. The visitor scrolls into\x20\xf0\x9f\x94\xa5 TODAY'S CRAVINGS and sees 4–6 popular items with large images and animations.
2. The visitor continues to the\x20\xf0\x9f\x8e\x89 TODAY'S SPECIAL section and reads the animated offer cards (Pizza + Beverage Combo, Friends Combo, Coffee + Snack Combo); prices and details appear only where the cafe has provided them.
3. The visitor scrolls through the masonry food gallery (pizza, Chinese, shakes, cafe ambience, interior, customer moments) and hovers to see zoom and overlay.
4. The visitor reaches\x20\xf0\x9f\x93\xb8 FOLLOW THE VIBE and taps "Follow Us @BaithkeBihariCafe".
5. Instagram opens on the provider surface with the cafe's profile.
6. The visitor returns to the page and continues.

Flow 6 — Cafe Visitor / Diner: read reviews and rating

1. The visitor scrolls into the customer reviews slider and watches multiple\x20\xe2\xad\x90⭐⭐⭐⭐ reviews auto-slide, including "Amazing food, great taste and a nice place to hang out!".
2. The visitor continues to the Google rating section and reads the confirmed rating (e.g.\x20\xe2\xad\x90 4.8/5) and happy-customer count (e.g. 500+ Happy Customers).
3. The visitor taps "View Google Reviews".
4. Google Reviews opens on the provider surface.
5. The visitor returns to the page.

• Failure/recovery: if actual Google rating data is not available, the section renders in an unconfirmed state instead of showing a fabricated rating.

Flow 7 — Cafe Visitor / Diner: contact the cafe

1. The visitor taps\x20\xf0\x9f\x93\x9e Call in the sticky mobile action bar (or a call action in the header).
2. The device dialer opens with the cafe's number.
3. Alternatively, the visitor taps the floating WhatsApp button.
4. WhatsApp opens with the prefilled message "Hi Baithke Bihari Cafe, I want to know about your menu."
5. The visitor sends the message.
6. The cafe owner/manager receives the WhatsApp enquiry and replies on WhatsApp.

Flow 8 — Cafe Visitor / Diner: first-visit offer popup

1. The visitor arrives on the page for the first time in the session.
2. A subtle popup appears: "\xf0\x9f\x91\x8b HUNGRY ALREADY? Explore Our Menu & Discover Your Next Favourite Bite." with [ EXPLORE MENU ].
3. The visitor taps [ EXPLORE MENU ] and is taken to the menu section.
4. The popup does not appear again in the same session.

• Failure/recovery: if the visitor dismisses the popup, it stays dismissed for the session.

Flow 9 — Table / Group Booking Enquirer: book a table

1. The Table / Group Booking Enquirer scrolls to the "BOOK YOUR TABLE" section (available because the cafe takes table bookings).
2. The enquirer fills Name, Mobile, Date, Time and Guests.
3. The enquirer taps Reserve Now.
4. The reservation enquiry is submitted to the cafe and the enquirer sees a confirmation.
5. The cafe owner/manager receives the enquiry with the submitted details and contacts the enquirer on the provided mobile number.

• Failure/recovery: if submission fails, a retryable error appears and the entered values are preserved.

Flow 10 — Table / Group Booking Enquirer: enquire for a group booking

1. The enquirer scrolls to "\xf0\x9f\x8e\x89 PLANNING A GET-THERE?" and sees the occasion types Birthday, Friends Meet, Small Party and Casual Gathering.
2. The enquirer selects the occasion that fits and taps "Enquire for Group Booking".
3. The group booking enquiry is submitted to the cafe and the enquirer sees a confirmation.
4. The cafe owner/manager receives the enquiry and responds to the enquirer.

• Failure/recovery: if submission fails, a retryable error appears and the enquirer's input is preserved.

Flow 11 — Cafe Owner / Manager: keep the page truthful

1. The cafe owner/manager supplies and confirms the real menu items, prices, veg/non-veg markers, Popular badges, offers and combo prices, opening hours, Google rating and happy-customer counts, and counter numbers.
2. The page renders the confirmed values; unconfirmed values render in an unconfirmed state rather than as invented figures.
3. The cafe owner/manager confirms whether the cafe takes table bookings; the reservation section is enabled only if it does.
4. The cafe owner/manager receives table, group and WhatsApp enquiries and responds to visitors.
5. The cafe owner/manager updates values as the menu, offers or hours change.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Saturated craving-worlds after Jessica Walsh. The page must feel like a party invitation, not a restaurant brochure — loud, joyful, appetite-driven and social, on a saturated dark ground rather than a white-first page.

Mode and palette (dark mode)

• Background (espresso ground): #1A0E0A
• Surface (toasted brown, cards and sticky header after scroll): #2A1710
• Text (warm cream): #FFF4E6 — approximately 15:1 on the ground
• Primary (hot tomato-red-orange, CTAs, add-to-enquiry pill, scroll progress bar, active category states): #FF4D2E
• Accent (poster yellow, Popular sticker, live Open Now dot, star ratings, marquee band): #FFD400
• Muted (descriptions and metadata only, never body copy below 16px): #B98F73
• Tangerine (allowed only as gradient partner inside offer cards and the hero's floating food blobs): #FF8A3D

Rough proportion: 60% dark ground, 20% surface, 12% primary, 8% accent.

Typography

• Headings: Archivo Black, all-caps, extremely tight tracking (-0.03em), leading 0.86, stacked in 2–3 lines with one word per line where possible; the word "CRAVINGS" and section titles set at viewport-spanning scale.
• Body: Outfit 400/500 at 17px with 1.65 line-height and a 62ch measure.
• Labels, prices and category chips: Outfit 600 uppercase with 0.12em letterspacing so numbers read like menu-board type.
• Scale: 1.333 modular — display clamp(52px, 11vw, 132px); section title clamp(36px, 6.5vw, 76px); card title 22px; body 17px; label 13px; price 20px tabular.

Shape language

• Big soft radii on everything interactive: 24px cards, full-pill buttons and chips.
• Hard-edged colour-band section dividers and diagonal marquee ribbons keep the poster energy.
• Sticker shapes — rotated rounded rectangles and circles — carry the Popular badge, the veg/non-veg marker and the Open Now pill.
• Cards use a hard offset shadow 0 18px 0 rgba(0,0,0,0.35) rather than a soft blur, so they read as physical stickers on the dark ground.

Layout

• One page, full-bleed colour bands stacked vertically, each band a different ground value (espresso, toasted brown, one full tomato-red band for TODAY'S SPECIAL, one full yellow band for the marquee).
• Hero is left-weighted with type on the left 7 columns and floating food objects bleeding off the right edge.
• Menu uses a horizontally scrollable category chip rail that sticks under the header, then a 1/2/3-column card grid.
• Gallery is a true masonry column layout; the Instagram grid is a hard 3x3 on mobile and 6x2 on desktop.
• Mobile bottom action bar is a 4-up pill dock with safe-area padding; reservation and party booking sit side-by-side at 1280px and stacked at 375px.

Imagery

• Surreal, art-directed food photography on saturated colour grounds — a pizza shot from directly above on a tomato-red backdrop, a shake with a splash frozen mid-air on yellow, noodles lifted with chopsticks against espresso brown — plus warm interior and customer-moment shots treated with a slight warm duotone so they sit inside the palette.
• Hero food objects are cut-out PNG/WebP with transparent edges, tilted and overlapping.
• No stock-photo people smiling at laptops; no flat vector food clip art.

Avoid

• White or near-white page ground; the page stays on the dark espresso/tomato/yellow colour bands.
• Blue, indigo or violet anywhere in the palette; no #2563EB-family accents and no blue-to-purple gradient blobs.
• Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body.
• Centred hero headline + subtext + single button over a gradient blob.
• A grid of identical hover-lift cards with soft blurred shadows — use hard offset sticker shadows and varied card sizes.
• Generic flat vector food clip art in place of art-directed photography and cut-out food objects.
• Motion that keeps running under prefers-reduced-motion — marquee, floats and auto-slide must stop and show whole, wrapped items.
• Cropping, covering or clipping any readable text, price, label or control at 375px, 768px or 1280px.

7. Signature Design Concept

The Sticker Wall. The public entry is a full-viewport dark espresso stage (#1A0E0A) with a slow-drifting warm radial glow behind the type. The left 7 columns carry a masked three-line Archivo Black headline — BAITHKE / BIHARI / CAFE at clamp(52px, 11vw, 132px) — each line rising into place on load from behind its mask line, with the words PIZZA · SHAKES · CHINESE set beneath in accent yellow at 18px uppercase. Under the headline sit two pills side by side: a solid tomato #FF4D2E VIEW MENU and an outlined cream GET DIRECTIONS.

The right side is the sticker wall: five cut-out food objects (pizza slice, iced coffee, shake, noodle bowl, burger) at three different scales, rotated between -12° and 14°, bleeding off the right and top edges, each floating on its own 6–9s loop with a soft drop shadow. Pinned to the top-left of the hero is the live status sticker — a rotated rounded rectangle with a yellow dot and OPEN NOW · CLOSES 11 PM, flipping to the red #Closed state outside hours. Bottom-centre, a scroll-down chevron in a circle bounces once every 3s.

The composition is deliberately asymmetric, type-led and colour-grounded: never a centred headline with a blue button over a gradient blob. Directly beneath the hero, the poster ribbon takes over — a full-width tomato-red band with yellow Archivo Black marquee text scrolling \xf0\x9f\x8d\x95 PIZZA •\x20\xf0\x9f\xa5\xa2 CHINESE •\x20\xf0\x9f\x8d\x94 FAST FOOD •\x20\xe2\x98\x95 COFFEE •\x20\xf0\x9f\xa5\xa4 SHAKES •\x20\xf0\x9f\xa7\x83 BEVERAGES continuously, pausing on hover and wrapping into static rows under reduced motion.

The sticker-badge system carries through the whole page: Popular, veg/non-veg and the live Open/Closed status are all rotated sticker shapes with hard offset shadows, pinned to the corner of cards and to the hero. Category chips form a horizontally scrollable sticky rail under the header, where the active chip fills with tomato red and physically nudges its neighbours aside, and filtered cards spring in with a staggered scale-in rather than a plain fade. "Choose Your Mood" is a row of five oversized emoji-topped colour tiles that, on click, flip to the category's colour, fire a colour-block wipe across the section, and smooth-scroll the menu to that category with the chip already active — the tile itself is the navigation.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the masked three-line Archivo Black headline BAITHKE / BIHARI / CAFE on the left, with five cut-out food objects (pizza slice, iced coffee, shake, noodle bowl, burger) floating and bleeding off the right edge.
• Input → transformation → outcome thesis: on load, each headline line rises from behind its mask line by line while the food objects drift on slow independent loops with slight rotation; the live status sticker settles into place; the scroll-down chevron bounces once every 3s. The outcome is a composed, appetite-driven first frame that reads as a party invitation and points to View Menu and Get Directions.
• Motion vocabulary: springy scale-ins on cards as they enter (cubic-bezier(.34,1.56,.64,1), 420ms); floating hero food objects on slow independent loops with slight rotation; marquee running continuously; colour-flip hover on category chips; image zoom 1.0→1.08 on gallery hover; cursor-following tangerine glow blob on desktop only; type-reveal where hero words rise from behind a mask line by line; auto-sliding testimonial track that pauses on hover and on focus.
• Composed first frame: dark espresso ground with a warm radial glow, headline lines mid-rise, food objects at their resting rotations, status sticker pinned top-left, both CTA pills visible, chevron at rest.
• Reduced-motion state: everything collapses to static, whole, wrapped content — the marquee stops and wraps into rows, floating objects hold still, the testimonial track stops and shows whole items, and no motion runs.

9. Non-Functional Requirements

NFR-1 — Single-page constraint (explicit) The site must be a single one-page landing page. Rationale: the user explicitly asked for a one-page landing page; no additional pages are introduced.

NFR-2 — Full responsiveness (explicit) The page must be fully responsive and properly optimized across\x20\xf0\x9f\x93\xb1 Mobile,\x20\xf0\x9f\x93\xb2 Tablet,\x20\xf0\x9f\x92\xbb Laptop,\x20\xf0\x9f\x96\xa5️ Desktop and large screens. Rationale: the user explicitly required mobile-first responsive design across these device classes.

NFR-3 — Fast loading despite heavy animation (explicit) Despite the animation-heavy design, the page must load fast using WebP/AVIF images, lazy loading, optimized animations, compressed videos and mobile performance optimization. Rationale: the user explicitly required fast loading as a hard constraint.

NFR-4 — Readable text and controls stay whole (explicit, from creative direction) Headlines, wordmarks, labels, numbers, cards' text and controls must stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design and is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. Rationale: the creative direction makes this rule take precedence for readable text and controls.

NFR-5 — Reduced-motion compliance (explicit, from creative direction) Under prefers-reduced-motion, marquee, floats and auto-slide must stop and show whole, wrapped items; moving content wraps into rows or sits in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Rationale: the creative direction requires motion to stop and content to remain whole under reduced motion.

NFR-6 — SEO (explicit) The page must implement cafe name + location optimization, local SEO headings, meta title/description, restaurant structured data, Google Maps integration, click-to-call, WhatsApp CTA and image alt text. Rationale: the user explicitly listed these SEO features.

NFR-7 — Content truthfulness gate (explicit) Google rating and happy-customer counts must use actual Google rating data only if available; combo/special offer details and prices must use actual offers/prices only if the cafe provides them; animated counter numbers must only be used when the cafe confirms them. Rationale: the user explicitly constrained these values to confirmed data only.

NFR-8 — Conditional reservation section (explicit) The reservation / table booking section applies only if the cafe takes table bookings. Rationale: the user explicitly conditioned this section on the cafe accepting table bookings.

NFR-9 — Popup frequency limit (explicit) The first-visit offer popup must be shown only once per session to avoid being annoying. Rationale: the user explicitly limited the popup to once per session.

NFR-10 — No visitor accounts (required_inference) The page must not require or create visitor accounts, logins or sessions beyond the once-per-session popup suppression. Rationale: no accepted journey requires a visitor to privately own or resume durable state; every visitor action is a one-shot provider handoff or a one-shot enquiry submission.

10. Tech Stack

• Frontend: React, built as a single-page landing site with component-based sections (hero, marquee, mood tiles, menu, cards, galleries, reviews, rating, offers, counters, location, reservation, group booking, chrome).
• Styling and motion: CSS with the specified palette, Archivo Black and Outfit typography, hard offset sticker shadows, and springy entrance/hover motion; motion respects prefers-reduced-motion.
• Media: WebP/AVIF images with lazy loading; compressed hero video with a static fallback.
• Backend: Python / FastAPI to serve confirmed cafe content (menu items, prices, offers, hours, rating, counters) and to receive reservation and group booking enquiries.
• Storage: a lightweight persistent store for menu/content records and submitted enquiries.
• Deployment: Docker / docker-compose for local and single-host deployment. Kubernetes is not required for this single-page site and is not included.
• Provider integrations: Google Maps (map embed and directions), WhatsApp (prefilled enquiry), device dialer (click-to-call), Instagram (profile link), Google Reviews (external link).

11. Assumptions and Constraints

• Single page. The deliverable is one landing page; no additional routes or pages are created. (explicit)
• Anonymous access. The page is publicly reachable with no visitor login or account. (required_inference — no accepted journey requires visitor identity)
• Cafe-confirmed content. Menu items, prices, veg/non-veg markers, Popular badges, offers and combo prices, opening hours, Google rating and happy-customer counts, and counter numbers are supplied or confirmed by the cafe owner/manager before they are displayed; unconfirmed values render in an unconfirmed state. (explicit)
• Conditional reservation. The Book Your Table section is enabled only if the cafe takes table bookings. (explicit)
• Popup frequency. The first-visit offer popup appears at most once per session. (explicit)
• Provider-owned handoffs. Call, WhatsApp, Directions, Instagram and Google Reviews are handled by their respective providers; the page only composes the entry point and prefilled content. (explicit)
• No ordering or payment. The page provides Add to Enquiry / Order Now as an enquiry action; there is no in-page cart, checkout, payment or delivery tracking. (explicit — not requested)
• Address. The cafe address is 1st Floor, Jagdamba Tower, Sahdeo Mahto Marg, Boring Road, Sri Krishnapuri, Patna. (explicit)
• Opening time reference. The example opening time is 11 AM; the actual hours are used once confirmed by the cafe. (explicit)
• Default — not specified by user: exact hosting provider, CDN choice, and analytics tooling are not specified and are left to implementation defaults.

12. Glossary

• Landing — the single anonymous public page that contains every section of the Baithke Bihari Cafe site.
• Live Opening Status — the time-driven indicator showing Open Now or Closed with the next opening or closing time.
• Category Marquee — the continuous horizontal ribbon of category labels directly under the hero.
• Category Chip Rail — the horizontally scrollable sticky row of category chips above the menu grid.
• Food Item Card — the menu card showing image, name, short description, price, veg/non-veg indicator, optional Popular badge, and the Add to Enquiry / Order Now action.
• TODAY'S CRAVINGS — the featured items section showing 4–6 highlighted items with large images and animations.
• FOLLOW THE VIBE — the Instagram-style gallery section with the Follow Us @BaithkeBihariCafe link.
• TODAY'S SPECIAL — the combo/special offers section with animated offer cards.
• Choose Your Mood / WHAT ARE YOU CRAVING? — the mood section whose options highlight the related food category.
• ONE CAFE. SO MANY CRAVINGS. — the section whose category buttons smooth-scroll and filter the menu.
• Quick Menu Overlay — the animated full-screen menu popup opened from the header MENU button.
• Sticky Mobile Action Bar — the bottom mobile dock with Call, WhatsApp, Directions and Menu.
• Smart Header — the header that starts transparent and becomes glass/solid sticky after scrolling.
• Offer Popup — the first-visit HUNGRY ALREADY? popup shown once per session.
• Unconfirmed state — the truthful rendering used when the cafe has not supplied or confirmed a value (rating, offers, counters, hours), instead of a fabricated figure.
• Provider surface — an external destination owned by another service (device dialer, WhatsApp, Google Maps, Instagram, Google Reviews) that the page hands off to.