Zeeshan Khan
56fe68eb48
- 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
98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|