From d2ec0e574db0c22a8d57ff359d31e3ff9a75af75 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Tue, 21 Jul 2026 20:08:52 +0530
Subject: [PATCH] add ChefShowcase and EntranceExperience components with
 canvas spark animations

---
 src/components/ChefShowcase.tsx       | 12 +-----------
 src/components/EntranceExperience.tsx | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/ChefShowcase.tsx b/src/components/ChefShowcase.tsx
index d30ba78..a3fe8d9 100644
--- a/src/components/ChefShowcase.tsx
+++ b/src/components/ChefShowcase.tsx
@@ -204,17 +204,7 @@ export default function ChefShowcase() {
             className="lg:col-span-5 flex justify-center relative"
           >
 
-            {/* 30+ Years Experience Badge Overlay */}
-            <div className="hidden lg:flex absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
-              <div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
-              {/* Gold Flower Icon */}
-              <svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M10 2L11.5 7L16 8L11.5 9L10 14L8.5 9L4 8L8.5 7Z" />
-              </svg>
-              <span className="font-serif text-lg sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
-              <span className="font-sans text-[7px] sm:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mt-0.5">Years</span>
-              <span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-[#e4d7bc] uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
-            </div>
+
 
             {/* Seamless Image Wrapper */}
             <div className="hidden lg:block relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
diff --git a/src/components/EntranceExperience.tsx b/src/components/EntranceExperience.tsx
index 3367488..f849678 100644
--- a/src/components/EntranceExperience.tsx
+++ b/src/components/EntranceExperience.tsx
@@ -87,7 +87,7 @@ function CinematicFlight({ progress }: { progress: number }) {
   const { width, height } = useThree((state) => state.viewport);
 
   // Compute facade dimensions based on dusk photo aspect ratio
-  const aspect = 1920 / 864; 
+  const aspect = 1920 / 864;
   const planeH = height;
   const planeW = planeH * aspect;
 
@@ -162,7 +162,7 @@ function CinematicFlight({ progress }: { progress: number }) {
 
     // 5. Reactive Opacity Updates inside useFrame to prevent unmounting stutters
     const extOpacity = progress < 0.25 ? 1 : Math.max(0, 1 - (progress - 0.25) / 0.15);
-    
+
     let intOpacity = 0;
     if (progress >= 0.08 && progress <= 0.25) {
       intOpacity = (progress - 0.08) / 0.17;
@@ -301,7 +301,7 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
         scrollTrigger: {
           trigger: container,
           start: "top top",
-          end: "+=450%", 
+          end: "+=450%",
           scrub: 1.2,
           pin: true,
           onUpdate: (self) => {
@@ -382,18 +382,18 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
             {/* Inner traditional gold frame */}
             <div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
 
-            <span className="font-sans text-[#188754] text-base sm:text-base tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
-              AUTHENTIC SOUTH INDIAN · PURE VEGETARIAN
+            <span className="font-sans text-[#188754] text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.22em] uppercase font-bold block mb-2 text-center mt-1 whitespace-nowrap">
+              AUTHENTIC SOUTH INDIAN
             </span>
 
-            <h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.15em] uppercase font-bold mb-3 text-center">
-              A Royal Banquet in the Heart of Waterloo
+            <h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.12em] font-bold mb-3 text-center leading-tight">
+              A Royal Banquet in the<br />Heart of Waterloo
             </h3>
 
-            <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-4" />
+            <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-3" />
 
-            <p className="font-sans text-sm sm:text-lg text-stone-800 leading-relaxed tracking-wider font-medium text-justify">
-              A tradition older than memory. The table is set for a royal banquet on fresh banana leaves—dosas roasted in pure ghee to a crisp, golden perfection, slow-simmered sambar, and chutneys hand-ground fresh every morning. Served exactly as it was meant to be. 100% pure vegetarian.
+            <p className="font-sans text-xs sm:text-sm md:text-base text-stone-800 leading-relaxed tracking-wide font-medium text-center">
+              A royal banquet served on fresh banana leaves—crisp ghee dosas, slow-simmered sambar, and chutneys hand-ground fresh every morning. 100% pure vegetarian.
             </p>
           </motion.div>
         )}