diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..96ff167 --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,279 @@ +'use client'; + +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; +import { useLanguage } from "@/lib/language-context"; +import { getTranslation } from "@/lib/translations"; +import { useState } from 'react'; +import { motion, AnimatePresence } from "framer-motion"; +import { User, Lock, MapPin, LogIn, Phone, MessageCircle } from "lucide-react"; + +/** + * ============================================================================= + * STAFF LOGIN / AUTHENTICATION PAGE + * ============================================================================= + * + * Beautiful, theme-matched placeholder login experience. + * - Fully language compatible (sv default + en/hi/ur) + * - No real backend yet — always shows friendly "under construction" message + * - Mobile-first: large tap targets, excellent spacing, easy form on phones + * - Desktop: elegant split layout with dark luxury graphic panel + form + * - Uses existing design tokens (gold accents, cream bg, rounded cards, serif titles) + * + * Future: when real auth is added, this will become the entry to a protected staff area + * (per-site menus, orders, inventory etc. for Askim vs Backaplan). + */ + +export default function LoginPage() { + const { language } = useLanguage(); + const t = getTranslation(language); + + const [formData, setFormData] = useState({ + username: '', + password: '', + site: '', + }); + const [isSubmitted, setIsSubmitted] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Placeholder behaviour: always show the construction notice. + // No validation beyond native required fields — real auth coming later. + setIsSubmitted(true); + }; + + const resetForm = () => { + setFormData({ username: '', password: '', site: '' }); + setIsSubmitted(false); + }; + + return ( +
+ + +
+ {/* Elegant header */} +
+
+ STAFF PORTAL +
+

+ {t.auth.title} +

+

+ {t.auth.subtitle} +

+
+ + {/* Content area — beautiful split layout on desktop, clean single column on mobile */} +
+
+ {/* LEFT: Premium dark graphic panel (desktop only). Matches royal theme with gold details. */} +
+
+ {/* Subtle gold frame lines */} +
+
+ +
+
+ Shahi Kitchen +
+ +
+ Shahi
Kitchen +
+
+ STAFF ACCESS +
+
+ +
+
+

+ Two locations serving royal Indian & Pakistani hospitality in Gothenburg since 2016. +

+
+ ASKIM • BACKAPLAN +
+
+
+
+ + {/* RIGHT / MOBILE: The actual elegant login card */} +
+
+ {/* Mobile-only logo accent for visual continuity */} +
+
+ Shahi Kitchen +
+
+ + + {!isSubmitted ? ( + +
+ {/* Username */} +
+ +
+ + +
+
+ + {/* Password */} +
+ +
+ + +
+
+ + {/* Site / Location dropdown — Askim or Backaplan */} +
+ +
+ + + {/* Custom dropdown arrow for polish */} +
▾
+
+

Select the location you are working at today.

+
+ + {/* Primary gold action button — large & mobile friendly */} + +
+ +

+ {t.auth.footerNote} +

+ + ) : ( + /* Beautiful result state — always shows the construction notice */ + +
+ +
+ +

+ {t.auth.construction.title} +

+ +

+ {t.auth.construction.message} +

+ + {/* Helpful contact actions (real numbers from the site) */} + + +

+ We appreciate your patience while we build a seamless experience. +

+ + )} + +
+ + {/* Small trust line */} +

+ SHAHI KITCHEN • GOTHENBURG • EST 2016 +

+
+
+
+
+ +
+ ); +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 250dd08..c2b98d3 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import Link from "next/link"; import { useCart } from "./CartContext"; -import { ShoppingBag, ArrowRight, Home, UtensilsCrossed, MapPin, Star, Phone, X } from "lucide-react"; +import { ShoppingBag, ArrowRight, Home, UtensilsCrossed, MapPin, Star, Phone, X, LogIn } from "lucide-react"; import LanguageSwitcher from "./LanguageSwitcher"; import { useLanguage } from "@/lib/language-context"; import { getTranslation } from "@/lib/translations"; @@ -39,6 +39,7 @@ export default function Navbar({ variant = "default" }: NavbarProps) { { href: "/", label: t.nav.home }, { href: "/menu", label: t.nav.menu }, { href: "/locations", label: t.nav.locations }, + { href: "/login", label: t.nav.login }, { href: "/#experience", label: t.nav.experience }, { href: "/#contact", label: t.nav.contact }, ]; @@ -232,6 +233,7 @@ export default function Navbar({ variant = "default" }: NavbarProps) { link.href === '/' ? Home : link.href === '/menu' ? UtensilsCrossed : link.href === '/locations' ? MapPin : + link.href === '/login' ? LogIn : link.href.includes('experience') ? Star : Phone; return ( diff --git a/lib/translations.ts b/lib/translations.ts index 252a4ef..3800e0e 100644 --- a/lib/translations.ts +++ b/lib/translations.ts @@ -14,6 +14,7 @@ export const translations = { home: 'Home', menu: 'Menu', locations: 'Locations', + login: 'Login', experience: 'Experience', contact: 'Contact', }, @@ -172,6 +173,29 @@ export const translations = { messageThanks: 'Thank you!', }, + // Authentication / Staff Login Page (fully translated, placeholder only) + auth: { + title: 'Staff Login', + subtitle: 'Secure access for Shahi Kitchen team members at our locations', + usernameLabel: 'Username', + usernamePlaceholder: 'Enter your username', + passwordLabel: 'Password', + passwordPlaceholder: 'Enter your password', + siteLabel: 'Select Site', + sitePlaceholder: 'Choose your branch', + askim: 'Askim (Sisjön)', + backaplan: 'Backaplan', + submit: 'Sign In', + submitting: 'Signing in...', + construction: { + title: 'Authentication Under Construction', + message: 'Our staff login system is currently under development. The backend authentication service is not yet available. Please try again later. For immediate assistance with orders or reservations, please contact the restaurant directly via phone or WhatsApp.', + contact: 'Contact Restaurant', + tryAgain: 'Close & Try Later', + }, + footerNote: 'This portal is for authorized Shahi Kitchen staff only.', + }, + // Full Menu Page menu: { title: 'Our Menu', @@ -191,6 +215,7 @@ export const translations = { home: 'Hem', menu: 'Meny', locations: 'Platser', + login: 'Logga in', experience: 'Upplevelse', contact: 'Kontakt', }, @@ -343,6 +368,29 @@ export const translations = { messageThanks: 'Tack!', }, + // Authentication / Staff Login Page (fully translated, placeholder only) + auth: { + title: 'Personalloggning', + subtitle: 'Säker åtkomst för Shahi Kitchen teammedlemmar vid våra platser', + usernameLabel: 'Användarnamn', + usernamePlaceholder: 'Ange ditt användarnamn', + passwordLabel: 'Lösenord', + passwordPlaceholder: 'Ange ditt lösenord', + siteLabel: 'Välj plats', + sitePlaceholder: 'Välj din restaurang', + askim: 'Askim (Sisjön)', + backaplan: 'Backaplan', + submit: 'Logga in', + submitting: 'Loggar in...', + construction: { + title: 'Autentisering under uppbyggnad', + message: 'Vårt personallogginssystem är för närvarande under utveckling. Backend-autentiseringstjänsten är inte tillgänglig ännu. Vänligen försök igen senare. För omedelbar hjälp med beställningar eller bokningar, kontakta restaurangen direkt via telefon eller WhatsApp.', + contact: 'Kontakta restaurangen', + tryAgain: 'Stäng & försök senare', + }, + footerNote: 'Denna portal är endast för auktoriserad Shahi Kitchen-personal.', + }, + // Full Menu Page menu: { title: 'Vår Meny', @@ -362,6 +410,7 @@ export const translations = { home: 'होम', menu: 'मेन्यू', locations: 'स्थान', + login: 'लॉगिन', experience: 'अनुभव', contact: 'संपर्क', }, @@ -523,6 +572,29 @@ export const translations = { messageTotal: 'कुल', messageThanks: 'धन्यवाद!', }, + + // Authentication / Staff Login Page (fully translated, placeholder only) + auth: { + title: 'स्टाफ लॉगिन', + subtitle: 'शाही किचन टीम सदस्यों के लिए सुरक्षित पहुंच', + usernameLabel: 'उपयोगकर्ता नाम', + usernamePlaceholder: 'अपना उपयोगकर्ता नाम दर्ज करें', + passwordLabel: 'पासवर्ड', + passwordPlaceholder: 'अपना पासवर्ड दर्ज करें', + siteLabel: 'साइट चुनें', + sitePlaceholder: 'अपनी शाखा चुनें', + askim: 'Askim (Sisjön)', + backaplan: 'Backaplan', + submit: 'साइन इन करें', + submitting: 'साइन इन हो रहा है...', + construction: { + title: 'प्रमाणीकरण निर्माणाधीन', + message: 'हमारा स्टाफ लॉगिन सिस्टम वर्तमान में विकास के अधीन है। बैकएंड प्रमाणीकरण सेवा अभी उपलब्ध नहीं है। कृपया बाद में पुनः प्रयास करें। तत्काल सहायता के लिए, कृपया रेस्तरां से सीधे फोन या व्हाट्सएप के माध्यम से संपर्क करें।', + contact: 'रेस्तरां से संपर्क करें', + tryAgain: 'बंद करें और बाद में प्रयास करें', + }, + footerNote: 'यह पोर्टल केवल अधिकृत शाही किचन स्टाफ के लिए है।', + }, }, ur: { @@ -530,6 +602,7 @@ export const translations = { home: 'ہوم', menu: 'مینو', locations: 'مقامات', + login: 'لاگ ان', experience: 'تجربہ', contact: 'رابطہ', }, @@ -691,6 +764,29 @@ export const translations = { messageTotal: 'کل', messageThanks: 'شکریہ!', }, + + // Authentication / Staff Login Page (fully translated, placeholder only) + auth: { + title: 'اسٹاف لاگ ان', + subtitle: 'شاہی کچن ٹیم کے ممبران کے لیے محفوظ رسائی', + usernameLabel: 'صارف نام', + usernamePlaceholder: 'اپنا صارف نام درج کریں', + passwordLabel: 'پاس ورڈ', + passwordPlaceholder: 'اپنا پاس ورڈ درج کریں', + siteLabel: 'سائٹ منتخب کریں', + sitePlaceholder: 'اپنی برانچ منتخب کریں', + askim: 'Askim (Sisjön)', + backaplan: 'Backaplan', + submit: 'سائن ان کریں', + submitting: 'سائن ان ہو رہا ہے...', + construction: { + title: 'تصدیق زیر تعمیر', + message: 'ہمارا اسٹاف لاگ ان سسٹم فی الحال ترقی کے مراحل میں ہے۔ بیک اینڈ تصدیقی سروس ابھی دستیاب نہیں ہے۔ براہ کرم بعد میں دوبارہ کوشش کریں۔ فوری مدد کے لیے، براہ کرم براہ راست فون یا واٹس ایپ کے ذریعے ریستوراں سے رابطہ کریں۔', + contact: 'ریستوراں سے رابطہ کریں', + tryAgain: 'بند کریں اور بعد میں کوشش کریں', + }, + footerNote: 'یہ پورٹل صرف مجاز شاہی کچن اسٹاف کے لیے ہے۔', + }, }, } as const;