Initial commit: Shahi Kitchen premium website

- Royal cream + gold theme - Playful animated hero with chef mascot - Advanced menu with sidebar + video hover - Multilingual support (EN, SV, HI, UR) - Cart system with WhatsApp ordering - Real restaurant photos integration - Responsive design with proper navbar
2026-06-01 15:14:19 +02:00
parent edd906d893
commit 56fe68eb48
314 changed files with 4129 additions and 111 deletions
@@ -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 <Toaster> provides beautiful toast notifications used by the cart
+ * 
+ * ARCHITECTURAL NOTES:
+ * - We deliberately render <CartDrawer /> and <Toaster /> 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 (
    <html
      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${playfair.variable} ${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-[#F8F5F0] text-[#2C2A26]">
+        <LanguageProvider>
+          <CartProvider>
+            {children}
+            <CartDrawer />
+            <Toaster position="top-center" richColors closeButton />
+          </CartProvider>
+        </LanguageProvider>
+      </body>
    </html>
  );
 }