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
@@ -0,0 +1,97 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import React, { useState, useEffect } from "react";
+
+/**
+ * Shahi Kitchen Hero - Focused on the Chef Logo
+ * - Large central logo with life (wink + smile cycle)
+ * - Cream background circle so the logo blends/absorbs into the site color
+ * - No more small floating dishes
+ */
+
+export default function PlayfulHeroScene() {
+  const [expression, setExpression] = useState<'normal' | 'wink' | 'smile'>('normal');
+
+  // Cycle expressions for life (wink and smile)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setExpression(prev => {
+        const rand = Math.random();
+        if (rand < 0.45) return 'wink';
+        if (rand < 0.9) return 'smile';
+        return 'normal';
+      });
+    }, 2400);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const getLogoSrc = () => {
+    if (expression === 'wink') return '/images/animation/chef-wink.jpg';
+    if (expression === 'smile') return '/images/animation/chef-smile.jpg';
+    return '/images/animation/chef-normal.jpg';
+  };
+
+  return (
+    <div className="relative w-full h-full min-h-[520px] md:min-h-[620px] flex items-center justify-center overflow-hidden">
+      
+      {/* Large cream background circle - matches website exactly so logo absorbs */}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
+                      w-[440px] h-[440px] md:w-[540px] md:h-[540px] lg:w-[620px] lg:h-[620px] 
+                      bg-[#fbf7ef] rounded-full blur-[130px] opacity-95" />
+
+      {/* Central Chef Logo with life */}
+      <div className="relative z-30">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={expression}
+            initial={{ opacity: 0.7, scale: 0.97 }}
+            animate={{ 
+              opacity: 1, 
+              scale: 1,
+              y: [0, -24, 0],
+              rotate: [-3.5, 3.5, -3.5]
+            }}
+            exit={{ opacity: 0.7, scale: 0.97 }}
+            transition={{
+              y: { duration: 6.6, repeat: Infinity, ease: "easeInOut" },
+              rotate: { duration: 6.6, repeat: Infinity, ease: "easeInOut" },
+              opacity: { duration: 0.4 },
+              scale: { duration: 0.4 }
+            }}
+            className="w-[280px] h-[280px] md:w-[360px] md:h-[360px] lg:w-[420px] lg:h-[420px]"
+          >
+            <img
+              src={getLogoSrc()}
+              alt="Shahi Kitchen Chef"
+              className="w-full h-full object-contain drop-shadow-[0_25px_55px_rgba(0,0,0,0.35)]"
+            />
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Enhanced royal glows */}
+        <div className="absolute -top-14 left-1/2 -translate-x-1/2 w-44 h-44 bg-[#f4d47f] rounded-full blur-3xl opacity-48" />
+        <div className="absolute -top-7 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#c99a2e] rounded-full blur-2xl opacity-32" />
+        <div className="absolute -bottom-9 left-1/2 -translate-x-1/2 w-32 h-16 bg-[#c99a2e] rounded-full blur-3xl opacity-22" />
+      </div>
+
+      {/* Subtle steam for life */}
+      <motion.div
+        className="absolute left-[41%] top-[36%] w-4 h-11 opacity-32"
+        animate={{ y: [0, -36, 0], opacity: [0.28, 0.52, 0.28] }}
+        transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
+      >
+        <div className="w-full h-full bg-gradient-to-t from-[#f4d47f] to-transparent rounded-full blur-md" />
+      </motion.div>
+
+      <motion.div
+        className="absolute right-[40%] top-[41%] w-3 h-9 opacity-27"
+        animate={{ y: [0, -30, 0], opacity: [0.22, 0.48, 0.22] }}
+        transition={{ duration: 4.2, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
+      >
+        <div className="w-full h-full bg-gradient-to-t from-[#c99a2e] to-transparent rounded-full blur-md" />
+      </motion.div>
+    </div>
+  );
+}