admin/shahikitchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: default language Swedish, modern mobile navigation menu, mobile optimizations & translations, shorten mobile hero banner to 4s

Browse Source 
- Set 'sv' as default in LanguageProvider + layout (users can switch to 'en')
- Completely revamped mobile drawer menu: slide animation (framer-motion), icons, active states with high-contrast text, large touch targets, better tap feedback
- Horizontal snap-scrolling category filters on mobile (homepage + /menu) for thumb-friendly UX
- Added active:scale / touch-manipulation + press states across cards, buttons, filters for better mobile tap visibility/feedback
- Updated translations for menu page, locations, footer, experience (Swedish-first)
- Made locations + footer language-aware
- Trimmed banner_mobile.mp4 (raw + re-optimized) from 6s to 4s for faster load on mobile
- Reordered languages so Svenska appears first in switcher
- .gitignore already protects developer_instructions.txt (previous commit)
This commit is contained in:
Zeeshan Khan
2026-06-02 13:44:19 +02:00
parent 10d7555d31
commit 0b6cc1acae
11 changed files with 221 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Footer.tsx
+15 -11
View File
@@ -15,8 +15,12 @@
*/
import Link from "next/link";
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";
export default function Footer() {
const { language } = useLanguage();
const t = getTranslation(language);
return (
<footer className="bg-[#F5F1E9] border-t border-[#EDE6D9] pt-14 pb-10 text-[#6B665F]">
<div className="max-w-7xl mx-auto px-6">
@@ -34,13 +38,13 @@ export default function Footer() {
<span className="text-[#2C2A26] font-medium tracking-[-0.3px]">Shahi Kitchen</span>
</div>
<p className="text-sm leading-relaxed">
Authentic Indian &amp; Pakistani cuisine in Gothenburg since 2016.
{t.footer.tagline}
</p>
</div>
{/* Contact - Both Locations */}
<div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">OUR LOCATIONS</div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{t.footer.locations}</div>
<div className="space-y-4 text-sm">
<div>
<div className="font-medium text-[#2C2A26]">Shahi Kitchen (Askim / Sisjön)</div>
@@ -63,7 +67,7 @@ export default function Footer() {
{/* Hours */}
<div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">OPENING HOURS</div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{language === 'sv' ? 'ÖPPETTIDER' : 'OPENING HOURS'}</div>
<div className="text-sm space-y-1">
<div><span className="font-medium">Askim:</span> Mon–Sun 11:00–21:00</div>
<div><span className="font-medium">Backaplan:</span> Mon–Sun 11:00–21:00</div>
@@ -72,15 +76,15 @@ export default function Footer() {
{/* Quick Links + Social */}
<div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">EXPLORE</div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-4">{t.footer.explore}</div>
<div className="flex flex-col gap-1.5 text-sm mb-8">
<Link href="/" className="hover:text-[#B38B4D] transition-colors">Home</Link>
<Link href="/menu" className="hover:text-[#B38B4D] transition-colors">Menu</Link>
<Link href="/#experience" className="hover:text-[#B38B4D] transition-colors">Our Experience</Link>
<Link href="/#contact" className="hover:text-[#B38B4D] transition-colors">Contact &amp; Reserve</Link>
<Link href="/" className="hover:text-[#B38B4D] transition-colors">{t.nav.home}</Link>
<Link href="/menu" className="hover:text-[#B38B4D] transition-colors">{t.nav.menu}</Link>
<Link href="/#experience" className="hover:text-[#B38B4D] transition-colors">{language === 'sv' ? 'Vår Upplevelse' : 'Our Experience'}</Link>
<Link href="/#contact" className="hover:text-[#B38B4D] transition-colors">{language === 'sv' ? 'Kontakt &amp; Boka' : 'Contact &amp; Reserve'}</Link>
</div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-3">FOLLOW US</div>
<div className="text-[#2C2A26] text-sm tracking-[1.5px] mb-3">{t.footer.follow}</div>
<div className="flex gap-5 text-sm">
<a
href="https://www.instagram.com/Shahikitchen/"
@@ -103,8 +107,8 @@ export default function Footer() {
</div>
<div className="mt-14 pt-8 border-t border-[#EDE6D9] text-xs tracking-widest flex flex-col md:flex-row md:items-center justify-between gap-y-2 text-[#8A8478]">
<div>© {new Date().getFullYear()} SHAHI KITCHEN • GOTHENBURG. ALL RIGHTS RESERVED.</div>
<div>Made with tradition and heart.</div>
<div>© {new Date().getFullYear()} SHAHI KITCHEN • GÖTEBORG. ALL RIGHTS RESERVED.</div>
<div>{language === 'sv' ? 'Tillagat med tradition och hjärta.' : 'Made with tradition and heart.'}</div>
</div>
</div>
</footer>