diff --git a/README.md b/README.md index e215bc4..9170d9b 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,98 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Shahikitchen — Animated Restaurant Website -## Getting Started +This directory contains the official website for **Shahi Kitchen**, a popular Indian & Pakistani restaurant in Gothenburg (Göteborg), Sweden. -First, run the development server: +**Domain**: [shahikitchen.se](https://shahikitchen.se) -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +--- + +## 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) | +| **Email** | hello@shahikitchen.se | +| **Opened** | Around 2016 | +| **Specialties** | Lunch buffet, Biryani, Lamb Karahi, Curries, Sweets (Shahi Sweets) | + +### Current Online Presence + +- **Instagram**: [@shahikitchen](https://www.instagram.com/Shahikitchen/) +- **Facebook**: [facebook.com/shahikitchengbg](https://www.facebook.com/shahikitchengbg/) +- **Reviews**: ~4.1/5 on Google (600+ reviews) +- **Note**: As of 2026, the domain `shahikitchen.se` is 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/ +└── ... ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +--- -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## Development -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +### Getting Started -## Learn More +```bash +# Install dependencies +npm install -To learn more about Next.js, take a look at the following resources: +# Run development server +npm run dev +``` -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +Open [http://localhost:3000](http://localhost:3000) in your browser. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +### Planned Features (in order) -## Deploy on Vercel +1. ✅ Create Next.js project +2. ⏳ Build normal restaurant homepage (Hero, Navigation, About) +3. ⏳ Add menu items (name, description, price) +4. ⏳ Style with Tailwind CSS +5. ⏳ Add animations (GSAP / Framer Motion) +6. ⏳ Add 3D dishes (React Three Fiber + Spline) +7. ⏳ Reservation / Contact form +8. ⏳ Mobile responsive +9. ⏳ Deploy to Vercel -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +--- -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +## License + +This project is being built for Shahi Kitchen. All rights reserved. diff --git a/app/globals.css b/app/globals.css index a2dc41e..6e02385 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,107 @@ +/** + * ============================================================================= + * GLOBAL DESIGN SYSTEM — Shahi Kitchen + * ============================================================================= + * + * Royal cream + gold visual identity for Shahi Kitchen. + * Bright, warm, appetizing, and luxurious without being dark. + */ + @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; -} + /* === Refined Royal Light Palette - Warm Cream + Gold === */ + + /* Backgrounds */ + --bg: #F8F5F0; + --bg-elevated: #F5F1E9; + --surface: #FFFFFF; + --surface-subtle: #F2EDE4; -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); + /* Gold System */ + --gold: #B38B4D; + --gold-dark: #8C6B3A; + --gold-light: #C9A46B; + --gold-muted: #d4a73d; + + /* Emerald for contrast (kept from recent improvements) */ + --emerald: #0f5a4a; + + /* Text */ + --text: #2C2520; + --text-muted: #6B665F; + --text-light: #8A8478; + + /* Borders */ + --border: #EDE6D9; + + /* Typography */ + --font-display: var(--font-playfair); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + + /* Motion */ + --ease: cubic-bezier(0.25, 1, 0.5, 1); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - +/* Base */ body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: var(--font-sans); + background-color: var(--bg); + color: var(--text); +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + letter-spacing: -0.025em; + color: var(--text); +} + +/* Premium Buttons */ +.btn-primary { + background: linear-gradient(135deg, var(--gold), var(--gold-muted)); + color: #241806; + font-weight: 700; + transition: all 0.2s var(--ease); +} + +.btn-primary:hover { + transform: translateY(-1px); +} + +.btn-outline { + border: 1px solid var(--gold); + color: var(--gold-dark); + background: transparent; + font-weight: 600; + transition: all 0.2s var(--ease); +} + +.btn-outline:hover { + background: var(--gold); + color: #241806; +} + +/* Glass effect helper */ +.glass { + background: rgba(255, 253, 248, 0.72); + backdrop-filter: blur(20px); +} + +/* Luxury card style */ +.luxury-card { + border-radius: 2rem; + transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); +} + +.luxury-card:hover { + transform: translateY(-4px); + box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.12); +} + +/* Mesmerizing shimmer animation for premium buttons (used in Navbar) */ +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(200%); } } diff --git a/app/layout.tsx b/app/layout.tsx index 976eb90..13de391 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,22 +1,89 @@ +/** + * ROOT LAYOUT — Shahi Kitchen (shahikitchen.se) + * + * This is the single root layout for the entire Next.js App Router application. + * + * RESPONSIBILITIES: + * - Set up global metadata (title, description, favicon) for SEO and social sharing + * - Load the premium typography system: + * • Playfair Display (display/serif) → used for headings via --font-playfair + * • Geist Sans (system UI) → body text + * • Geist Mono → code / tabular data + * - Initialize the GLOBAL CART SYSTEM: + * • CartProvider wraps the whole tree so any page/component can use `useCart()` + * • CartDrawer is rendered once at the root (slide-in basket panel) + * • Sonner provides beautiful toast notifications used by the cart + * + * ARCHITECTURAL NOTES: + * - We deliberately render and at the root level instead of + * inside individual pages. This guarantees only ONE instance exists and prevents + * duplicate drawers/toasts when navigating. + * - The cream/gold royal theme tokens live in globals.css and are referenced via + * Tailwind arbitrary values (e.g. bg-[#F8F5F0]). + * + * FUTURE DEVELOPERS: + * - To add a new global provider (theme, analytics, etc.), wrap it here. + * - WhatsApp number for orders is currently hardcoded in CartDrawer.tsx (46709864995). + * - If you ever split the cart into a separate modal library, keep the provider here. + */ + import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Playfair_Display, Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import { Toaster } from "sonner"; +import { CartProvider } from "@/components/CartContext"; +import CartDrawer from "@/components/CartDrawer"; +import { LanguageProvider } from "@/lib/language-context"; + +const playfair = Playfair_Display({ + variable: "--font-playfair", + subsets: ["latin"], + weight: ["400", "500", "600", "700"], + style: ["normal", "italic"], +}); const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], + weight: ["400", "500", "600", "700"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], + weight: ["400", "500", "600"], }); +/** + * Next.js Metadata API (static) + * These values power: + * - Browser tab title + * - Search engine results + * - Social cards (Open Graph / Twitter) when shared + * + * For dynamic per-page metadata, use `generateMetadata()` in page files. + */ export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Shahi Kitchen | Authentic Indian & Pakistani Restaurant in Gothenburg", + description: "Experience royal flavors at Shahi Kitchen in Askim, Gothenburg. Authentic Indian & Pakistani cuisine, famous lunch buffet, and traditional sweets since 2016.", + icons: { + icon: "/favicon.ico", + }, }; +/** + * RootLayout + * + * The ONLY place in the app where we initialize: + * 1. CartProvider → gives every descendant access to `useCart()` hook + * 2. CartDrawer → the actual slide-in basket UI (controlled via context) + * 3. Toaster → global toast surface used by cart (Sonner library) + * + * IMPORTANT: + * - Never wrap the entire app in another CartProvider — it will break the singleton. + * - The body uses the royal cream background (#F8F5F0) as the base canvas. + * - `antialiased` + font variables are applied once at the root for consistency. + */ export default function RootLayout({ children, }: Readonly<{ @@ -25,9 +92,17 @@ export default function RootLayout({ return ( - {children} + + + + {children} + + + + + ); } diff --git a/app/locations/page.tsx b/app/locations/page.tsx new file mode 100644 index 0000000..ebf63ec --- /dev/null +++ b/app/locations/page.tsx @@ -0,0 +1,132 @@ +/** + * LOCATIONS PAGE + * + * Dedicated page for the restaurant's two physical branches. + * + * ARCHITECTURE: + * - Two branches are modeled as distinct concepts: + * 1. Shahi Kitchen Askim (Sisjön) → Full restaurant + famous lunch buffet + * 2. Shahi Sweets Backaplan → Sweets, snacks, café, halwa puri etc. + * - Both are operated by the same team (explicitly stated at the bottom) + * - Google Maps embeds are intentionally simple (lazy loaded) + * + * FUTURE: + * - When real online ordering launches, this page could show "Order from Askim" + * vs "Order from Backaplan" with different delivery radii. + * - Instagram handles for each location are mentioned where relevant. + */ + +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; + +export default function LocationsPage() { + return ( +
+ + +
+
+
WHERE TO FIND US
+

Our Locations

+

+ Two branches in Gothenburg — both serving authentic flavors with the same royal hospitality. +

+
+ + + +
+ {/* Branch 1: Askim */} +
+
RESTAURANT & BUFFET
+

Shahi Kitchen – Askim (Sisjön)

+ +
+
+
ADDRESS
+
Datavägen 10A
436 32 Askim, Gothenburg
+
+ +
+
PHONE
+ 031-28 89 10 + 0739-381089 +
+ +
+
OPENING HOURS
+
Monday – Sunday • 11:00 – 21:00
+
+ +
+
WHAT TO EXPECT
+
Full restaurant experience with our popular lunch buffet, à la carte, and traditional Pakistani & Indian dishes.
+
+
+ +
+