Zeeshan Khan
ffaef59049
- On mobile (<768px): posters shown while scrolling the menu. - After user stops scrolling and lingers on a video item for ~2s: the animation (video) plays in place of the poster (replaces img opacity, plays video, hides gradient). - On scroll/touchmove resume: immediately pause videos and show posters. - Initial load on mobile: auto-plays the first focused video item after settle. - Added isMobile state + resize listener, scroll/touch listeners with 2s debounce timeout. - Helper functions: playMobileVideo(id), pauseAllMobileVideos(), findFocusedVideoItem() (visibility + center scoring). - Data attributes data-id and data-has-video added to .menu-card for reliable targeting. - Desktop hover logic untouched. - Only affects items with .video in menu-data (e.g. Lahore Chana now works on mobile too). - Cleanup on unmount/resize to desktop. - Builds cleanly.
Shahikitchen — Animated Restaurant Website
This directory contains the official website for Shahi Kitchen, a popular Indian & Pakistani restaurant in Gothenburg (Göteborg), Sweden.
Domain: shahikitchen.se
About Shahi Kitchen
Shahi Kitchen is an authentic Indian and Pakistani restaurant specializing in flavorful curries, tandoori dishes, biryanis, haleem, fresh naan, and traditional sweets. The restaurant is particularly well-known for its generous lunch buffet, which offers excellent value and is popular among locals in the Gothenburg area.
Key Information
| Detail | Information |
|---|---|
| Full Name | Shahi Kitchen (Shahikitchen / Shahi Kitchen Sisjön) |
| Cuisine | Indian & Pakistani (Halal options available) |
| Address | Datavägen 10A, 436 32 Askim, Sweden |
| Area | Sisjön / Askim (suburb of Gothenburg) |
| Phone | 031-28 89 10 / 0739-381089 (Imran) |
| hello@shahikitchen.se | |
| Opened | Around 2016 |
| Specialties | Lunch buffet, Biryani, Lamb Karahi, Curries, Sweets (Shahi Sweets) |
Current Online Presence
- Instagram: @shahikitchen
- Facebook: facebook.com/shahikitchengbg
- Reviews: ~4.1/5 on Google (600+ reviews)
- Note: As of 2026, the domain
shahikitchen.seis parked. This project will give the restaurant a proper modern website.
Tech Stack
- Next.js 15 (App Router) + TypeScript
- Tailwind CSS
- GSAP — for advanced scroll and UI animations
- React Three Fiber — for 3D experiences (dishes)
- Spline (optional) — for high-quality hosted 3D scenes
- Framer Motion (optional alternative to GSAP for simpler animations)
Project Structure (Planned)
shahikitchen/
├── app/
│ ├── layout.tsx
│ ├── page.tsx # Homepage (Hero + Menu + About + Contact)
│ └── globals.css
├── components/
│ ├── MenuSection.tsx
│ ├── Dish3D.tsx # React Three Fiber or Spline component
│ ├── ReservationForm.tsx
│ └── ...
├── lib/
│ └── menu-data.ts # Menu items
├── public/
│ └── images/
└── ...
Development
Getting Started
# Install dependencies
npm install
# Run development server
npm run dev
Open http://localhost:3000 in your browser.
Planned Features (in order)
- ✅ Create Next.js project
- ⏳ Build normal restaurant homepage (Hero, Navigation, About)
- ⏳ Add menu items (name, description, price)
- ⏳ Style with Tailwind CSS
- ⏳ Add animations (GSAP / Framer Motion)
- ⏳ Add 3D dishes (React Three Fiber + Spline)
- ⏳ Reservation / Contact form
- ⏳ Mobile responsive
- ⏳ Deploy to Vercel
License
This project is being built for Shahi Kitchen. All rights reserved.