Zeeshan Khan
280 lines
14 KiB
TypeScript
280 lines
14 KiB
TypeScript
'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<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
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 (
|
|
<div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
|
|
<Navbar />
|
|
|
|
<main className="pt-16 pb-20">
|
|
{/* Elegant header */}
|
|
<div className="max-w-5xl mx-auto px-6 pt-8 text-center">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-[#B38B4D]/10 px-4 py-1 text-[#B38B4D] text-[10px] tracking-[3.5px] font-medium mb-4">
|
|
STAFF PORTAL
|
|
</div>
|
|
<h1 className="font-serif text-5xl md:text-6xl tracking-[-2.2px] leading-none mb-4">
|
|
{t.auth.title}
|
|
</h1>
|
|
<p className="mx-auto max-w-md text-lg text-[#6B665F]">
|
|
{t.auth.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content area — beautiful split layout on desktop, clean single column on mobile */}
|
|
<div className="mx-auto max-w-5xl px-6 mt-10">
|
|
<div className="grid items-start gap-8 md:grid-cols-5">
|
|
{/* LEFT: Premium dark graphic panel (desktop only). Matches Shahi theme with gold details. */}
|
|
<div className="hidden md:col-span-2 md:block">
|
|
<div className="sticky top-24 flex h-[520px] flex-col justify-between overflow-hidden rounded-3xl border border-[#c99a2e]/20 bg-gradient-to-br from-[#101724] via-[#1a1816] to-[#2C2A26] p-10 text-white shadow-2xl">
|
|
{/* Subtle gold frame lines */}
|
|
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e] to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-[#c99a2e]/50 to-transparent" />
|
|
|
|
<div>
|
|
<div className="mb-8 inline-flex h-16 w-16 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-white/5 p-3 backdrop-blur">
|
|
<img
|
|
src="/images/logo/logo1.png"
|
|
alt="Shahi Kitchen"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<div className="font-serif text-[42px] leading-[0.95] tracking-[-1.8px]">
|
|
Shahi<br />Kitchen
|
|
</div>
|
|
<div className="mt-1 text-sm font-medium tracking-[2.5px] text-[#c99a2e]">
|
|
STAFF ACCESS
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="my-6 h-px w-10 bg-[#c99a2e]/40" />
|
|
<p className="max-w-[220px] text-sm leading-relaxed text-white/70">
|
|
Two locations serving Shahi Indian & Pakistani hospitality in Gothenburg since 2016.
|
|
</p>
|
|
<div className="mt-5 text-[10px] uppercase tracking-[2.5px] text-[#c99a2e]/60">
|
|
ASKIM • BACKAPLAN
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT / MOBILE: The actual elegant login card */}
|
|
<div className="md:col-span-3">
|
|
<div className="rounded-3xl border border-[#EDE6D9] bg-white p-8 shadow-xl md:p-10">
|
|
{/* Mobile-only logo accent for visual continuity */}
|
|
<div className="mb-6 flex justify-center md:hidden">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-[#c99a2e]/30 bg-[#F8F5F0] p-2.5">
|
|
<img src="/images/logo/logo1.png" alt="Shahi Kitchen" className="h-full w-full object-contain" />
|
|
</div>
|
|
</div>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{!isSubmitted ? (
|
|
<motion.div
|
|
key="login-form"
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Username */}
|
|
<div>
|
|
<label htmlFor="username" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.usernameLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<User className="absolute left-4 top-4 h-5 w-5 text-[#B38B4D]" />
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
type="text"
|
|
value={formData.username}
|
|
onChange={handleChange}
|
|
placeholder={t.auth.usernamePlaceholder}
|
|
required
|
|
className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div>
|
|
<label htmlFor="password" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.passwordLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-4 top-4 h-5 w-5 text-[#B38B4D]" />
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
placeholder={t.auth.passwordPlaceholder}
|
|
required
|
|
className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Site / Location dropdown — Askim or Backaplan */}
|
|
<div>
|
|
<label htmlFor="site" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
|
|
{t.auth.siteLabel}
|
|
</label>
|
|
<div className="relative">
|
|
<MapPin className="pointer-events-none absolute left-4 top-4 z-10 h-5 w-5 text-[#B38B4D]" />
|
|
<select
|
|
id="site"
|
|
name="site"
|
|
value={formData.site}
|
|
onChange={handleChange}
|
|
required
|
|
className="w-full cursor-pointer appearance-none rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 pl-12 pr-10 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
|
|
>
|
|
<option value="">{t.auth.sitePlaceholder}</option>
|
|
<option value="askim">{t.auth.askim}</option>
|
|
<option value="backaplan">{t.auth.backaplan}</option>
|
|
</select>
|
|
{/* Custom dropdown arrow for polish */}
|
|
<div className="pointer-events-none absolute right-4 top-4 text-[#B38B4D]">▾</div>
|
|
</div>
|
|
<p className="mt-1.5 text-[11px] text-[#8A8478]">Select the location you are working at today.</p>
|
|
</div>
|
|
|
|
{/* Primary gold action button — large & mobile friendly */}
|
|
<button
|
|
type="submit"
|
|
className="btn-primary mt-2 flex w-full items-center justify-center gap-3 rounded-2xl py-4 text-base font-semibold tracking-[0.5px] active:scale-[0.985] transition"
|
|
>
|
|
<LogIn className="h-5 w-5" />
|
|
{t.auth.submit}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-8 text-center text-[11px] tracking-wide text-[#8A8478]">
|
|
{t.auth.footerNote}
|
|
</p>
|
|
</motion.div>
|
|
) : (
|
|
/* Beautiful result state — always shows the construction notice */
|
|
<motion.div
|
|
key="construction-result"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center"
|
|
>
|
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[#B38B4D]/10">
|
|
<LogIn className="h-8 w-8 text-[#B38B4D]" />
|
|
</div>
|
|
|
|
<h2 className="mb-3 font-serif text-3xl tracking-[-1px]">
|
|
{t.auth.construction.title}
|
|
</h2>
|
|
|
|
<p className="mx-auto max-w-md text-[15px] leading-relaxed text-[#6B665F]">
|
|
{t.auth.construction.message}
|
|
</p>
|
|
|
|
{/* Helpful contact actions (real numbers from the site) */}
|
|
<div className="mt-8 space-y-3">
|
|
<a
|
|
href="tel:031288910"
|
|
className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
|
|
>
|
|
<Phone className="h-4 w-4" />
|
|
{t.auth.construction.contact} — 031-28 89 10
|
|
</a>
|
|
|
|
<a
|
|
href="https://wa.me/46739381089"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex w-full items-center justify-center gap-2 rounded-2xl border border-[#EDE6D9] py-3.5 text-sm font-medium transition active:bg-[#F8F5F0] hover:bg-[#F8F5F0]"
|
|
>
|
|
<MessageCircle className="h-4 w-4" />
|
|
WhatsApp +46 73 938 10 89
|
|
</a>
|
|
|
|
<button
|
|
onClick={resetForm}
|
|
className="mt-2 w-full rounded-2xl bg-[#101724] py-3.5 text-sm font-semibold text-white active:bg-black transition"
|
|
>
|
|
{t.auth.construction.tryAgain}
|
|
</button>
|
|
</div>
|
|
|
|
<p className="mt-6 text-[10px] text-[#8A8478]">
|
|
We appreciate your patience while we build a seamless experience.
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Small trust line */}
|
|
<p className="mt-5 text-center text-[10px] text-[#8A8478] tracking-[1px]">
|
|
SHAHI KITCHEN • GOTHENBURG • EST 2016
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|