From 68c52e4296c805e366fc3b6d82b57455ca005f01 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 19:14:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 302 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 205 insertions(+), 97 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f7e1469..b757c87 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,9 +10,36 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { BookOpen, Target, Clock, PlayCircle, Star, FileText } from 'lucide-react';
+import { BookOpen, Target, Clock, PlayCircle, Star, FileText, Volume2, VolumeX } from 'lucide-react';
+import { useState } from 'react';
 
 export default function FoodHistoryPage() {
+  const [narrationActive, setNarrationActive] = useState(false);
+  const [currentNarration, setCurrentNarration] = useState<string | null>(null);
+
+  const playNarration = (text: string, sectionId: string) => {
+    if (currentNarration === sectionId && narrationActive) {
+      stopNarration();
+    } else {
+      setCurrentNarration(sectionId);
+      setNarrationActive(true);
+      if ('speechSynthesis' in window) {
+        window.speechSynthesis.cancel();
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.onend = () => setNarrationActive(false);
+        window.speechSynthesis.speak(utterance);
+      }
+    }
+  };
+
+  const stopNarration = () => {
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+    setNarrationActive(false);
+    setCurrentNarration(null);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -27,19 +54,36 @@ export default function FoodHistoryPage() {
       headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Food History"
-          navItems={[
-            { name: "Home", id: "hero" },
-            { name: "History", id: "about" },
-            { name: "Timeline", id: "features" },
-            { name: "Collections", id: "product" },
-            { name: "Stories", id: "blog" }
-          ]}
-          button={{
-            text: "Explore Videos",            href: "#product"
-          }}
-        />
+        <div className="relative">
+          <NavbarLayoutFloatingOverlay
+            brandName="Food History"
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "History", id: "about" },
+              { name: "Timeline", id: "features" },
+              { name: "Collections", id: "product" },
+              { name: "Stories", id: "blog" }
+            ]}
+            button={{
+              text: "Explore Videos",            href: "#product"
+            }}
+          />
+          <button
+            onClick={() => (narrationActive ? stopNarration() : null)}
+            className="fixed top-6 right-32 z-50 p-2 rounded-full bg-primary-cta text-foreground hover:opacity-80 transition-opacity flex items-center gap-2"
+            aria-label={narrationActive ? "Stop narration" : "Narration controls"}
+            title={narrationActive ? "Stop narration" : "Narration available"}
+          >
+            {narrationActive ? (
+              <>
+                <VolumeX size={20} />
+                <span className="text-sm">Stop</span>
+              </>
+            ) : (
+              <Volume2 size={20} />
+            )}
+          </button>
+        </div>
       </div>
 
       <div id="hero" data-section="hero">
@@ -122,98 +166,162 @@ export default function FoodHistoryPage() {
       </div>
 
       <div id="product" data-section="product">
-        <ProductCardThree
-          title="Featured Collections"
-          description="Explore our curated video collections organized by culinary tradition and geography"
-          tag="Video Collections"
-          tagIcon={PlayCircle}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          products={[
-            {
-              id: "1",              name: "Mediterranean Flavors",              price: "12 Videos",              imageSrc: "http://img.b2bpic.net/free-photo/italian-food-concept-with-slate-pizza-pasta_23-2147686527.jpg",              imageAlt: "Mediterranean cuisine collection",              initialQuantity: 1
-            },
-            {
-              id: "2",              name: "Asian Culinary Arts",              price: "15 Videos",              imageSrc: "http://img.b2bpic.net/free-photo/couple-cooking-vegetables-kitchen_23-2148114115.jpg",              imageAlt: "Asian cuisine collection",              initialQuantity: 1
-            },
-            {
-              id: "3",              name: "American Heritage",              price: "10 Videos",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cherry-pie-with-notepad-dough-cherries-dark-blue-pie-cake-sweet-sugar-bake_140725-34056.jpg",              imageAlt: "American cuisine collection",              initialQuantity: 1
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-        />
+        <div className="relative">
+          <ProductCardThree
+            title="Featured Collections"
+            description="Explore our curated video collections organized by culinary tradition and geography"
+            tag="Video Collections"
+            tagIcon={PlayCircle}
+            tagAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            products={[
+              {
+                id: "1",                name: "Mediterranean Flavors",                price: "12 Videos",                imageSrc: "http://img.b2bpic.net/free-photo/italian-food-concept-with-slate-pizza-pasta_23-2147686527.jpg",                imageAlt: "Mediterranean cuisine collection",                initialQuantity: 1
+              },
+              {
+                id: "2",                name: "Asian Culinary Arts",                price: "15 Videos",                imageSrc: "http://img.b2bpic.net/free-photo/couple-cooking-vegetables-kitchen_23-2148114115.jpg",                imageAlt: "Asian cuisine collection",                initialQuantity: 1
+              },
+              {
+                id: "3",                name: "American Heritage",                price: "10 Videos",                imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-cherry-pie-with-notepad-dough-cherries-dark-blue-pie-cake-sweet-sugar-bake_140725-34056.jpg",                imageAlt: "American cuisine collection",                initialQuantity: 1
+              }
+            ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+          />
+          <button
+            onClick={() => playNarration(
+              "Featured Collections. Explore our curated video collections organized by culinary tradition and geography. Mediterranean Flavors with 12 videos, Asian Culinary Arts with 15 videos, and American Heritage with 10 videos.",              "product"
+            )}
+            className="absolute top-20 right-6 p-2 rounded-full bg-secondary-cta text-foreground hover:opacity-80 transition-opacity"
+            aria-label="Play narration for product section"
+            title="Play narration"
+          >
+            {currentNarration === "product" && narrationActive ? (
+              <VolumeX size={20} />
+            ) : (
+              <Volume2 size={20} />
+            )}
+          </button>
+        </div>
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardFive
-          title="What Food Historians Say"
-          description="Hear from culinary experts and food historians about our platform"
-          tag="Testimonials"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          testimonials={[
-            {
-              id: "1",              name: "Dr. Sarah Chen, Food Historian",              date: "Date: 15 November 2024",              title: "Exceptional documentation of food heritage",              quote: "This platform represents the gold standard in food history documentation. The video quality and historical accuracy are unmatched. I recommend it to all my students.",              tag: "Academic Research",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg?_wi=2"
-            },
-            {
-              id: "2",              name: "Marco Rossi, Italian Chef & Author",              date: "Date: 20 October 2024",              title: "Preserving traditions beautifully",              quote: "As someone dedicated to traditional Italian cooking, I'm impressed by how thoughtfully this platform captures culinary techniques and their cultural significance.",              tag: "Culinary Arts",              avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg?_wi=2"
-            },
-            {
-              id: "3",              name: "Dr. Lisa Wong, Culinary Researcher",              date: "Date: 5 September 2024",              title: "Game-changing educational resource",              quote: "I use these videos in my classroom. Students are more engaged and develop a deeper appreciation for global cuisines through this immersive storytelling approach.",              tag: "Education",              avatarSrc: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg"
-            },
-            {
-              id: "4",              name: "James Thompson, Food Preservation Expert",              date: "Date: 12 August 2024",              title: "Critical work for cultural preservation",              quote: "The world is losing culinary traditions daily. This platform's commitment to documentation ensures future generations understand where our food comes from.",              tag: "Heritage",              avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg"
-            },
-            {
-              id: "5",              name: "Maria Santos, Food Writer",              date: "Date: 28 July 2024",              title: "Beautifully crafted storytelling",              quote: "Every video is a masterpiece. The cinematography combined with expert narration creates an unforgettable learning experience about food history.",              tag: "Media & Writing",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg?_wi=3"
-            },
-            {
-              id: "6",              name: "Dr. Ahmed Hassan, Cultural Studies",              date: "Date: 10 July 2024",              title: "Window into cultural identity",              quote: "Food is culture, and this platform captures that connection perfectly. It's an invaluable resource for understanding how civilizations shaped their culinary identities.",              tag: "Cultural Studies",              avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",              videoSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg?_wi=3"
-            }
-          ]}
-        />
+        <div className="relative">
+          <TestimonialCardFive
+            title="What Food Historians Say"
+            description="Hear from culinary experts and food historians about our platform"
+            tag="Testimonials"
+            tagIcon={Star}
+            tagAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              {
+                id: "1",                name: "Dr. Sarah Chen, Food Historian",                date: "Date: 15 November 2024",                title: "Exceptional documentation of food heritage",                quote: "This platform represents the gold standard in food history documentation. The video quality and historical accuracy are unmatched. I recommend it to all my students.",                tag: "Academic Research",                avatarSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg?_wi=2"
+              },
+              {
+                id: "2",                name: "Marco Rossi, Italian Chef & Author",                date: "Date: 20 October 2024",                title: "Preserving traditions beautifully",                quote: "As someone dedicated to traditional Italian cooking, I'm impressed by how thoughtfully this platform captures culinary techniques and their cultural significance.",                tag: "Culinary Arts",                avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg?_wi=2"
+              },
+              {
+                id: "3",                name: "Dr. Lisa Wong, Culinary Researcher",                date: "Date: 5 September 2024",                title: "Game-changing educational resource",                quote: "I use these videos in my classroom. Students are more engaged and develop a deeper appreciation for global cuisines through this immersive storytelling approach.",                tag: "Education",                avatarSrc: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg"
+              },
+              {
+                id: "4",                name: "James Thompson, Food Preservation Expert",                date: "Date: 12 August 2024",                title: "Critical work for cultural preservation",                quote: "The world is losing culinary traditions daily. This platform's commitment to documentation ensures future generations understand where our food comes from.",                tag: "Heritage",                avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg"
+              },
+              {
+                id: "5",                name: "Maria Santos, Food Writer",                date: "Date: 28 July 2024",                title: "Beautifully crafted storytelling",                quote: "Every video is a masterpiece. The cinematography combined with expert narration creates an unforgettable learning experience about food history.",                tag: "Media & Writing",                avatarSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/smiling-woman-reading-breakfast_23-2147767499.jpg?_wi=3"
+              },
+              {
+                id: "6",                name: "Dr. Ahmed Hassan, Cultural Studies",                date: "Date: 10 July 2024",                title: "Window into cultural identity",                quote: "Food is culture, and this platform captures that connection perfectly. It's an invaluable resource for understanding how civilizations shaped their culinary identities.",                tag: "Cultural Studies",                avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",                videoSrc: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg?_wi=3"
+              }
+            ]}
+          />
+          <button
+            onClick={() => playNarration(
+              "Testimonials. What food historians say. Hear from culinary experts and food historians about our platform. Dr. Sarah Chen shares that this platform represents the gold standard in food history documentation. Marco Rossi, an Italian chef and author, is impressed by how thoughtfully the platform captures culinary techniques and their cultural significance.",              "testimonials"
+            )}
+            className="absolute top-20 right-6 p-2 rounded-full bg-secondary-cta text-foreground hover:opacity-80 transition-opacity"
+            aria-label="Play narration for testimonials section"
+            title="Play narration"
+          >
+            {currentNarration === "testimonials" && narrationActive ? (
+              <VolumeX size={20} />
+            ) : (
+              <Volume2 size={20} />
+            )}
+          </button>
+        </div>
       </div>
 
       <div id="blog" data-section="blog">
-        <BlogCardOne
-          title="Latest Food History Insights"
-          description="Deep dives into culinary traditions, forgotten recipes, and the stories behind global dishes"
-          tag="Blog"
-          tagIcon={FileText}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          carouselMode="buttons"
-          blogs={[
-            {
-              id: "1",              category: "History",              title: "The Ancient Art of Fermentation",              excerpt: "Explore how fermented foods transformed civilization—from sauerkraut to kimchi, discover the scientific genius behind preservation.",              imageSrc: "http://img.b2bpic.net/free-photo/plate-with-sliced-bread-female-hands_169016-48551.jpg",              imageAlt: "Ancient bread making",              authorName: "Dr. Robert Mitchell",              authorAvatar: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",              date: "18 Jan 2025"
-            },
-            {
-              id: "2",              category: "Trade",              title: "Spice Routes: The Highways of Flavor",              excerpt: "How the silk road brought cinnamon, pepper, and cloves across continents, reshaping global cuisine and commerce forever.",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-autumn-food-wooden-background_23-2148234242.jpg",              imageAlt: "Spice trade history",              authorName: "Elena Vasquez",              authorAvatar: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg",              date: "12 Jan 2025"
-            },
-            {
-              id: "3",              category: "Traditions",              title: "Wine: From Ancient Ritual to Modern Science",              excerpt: "Trace the evolution of winemaking from Mesopotamian ceremonies to contemporary biodynamic vineyards.",              imageSrc: "http://img.b2bpic.net/free-photo/red-grapes-vineyard_23-2151599722.jpg",              imageAlt: "Wine making history",              authorName: "Philippe Leclerc",              authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg",              date: "5 Jan 2025"
-            }
-          ]}
-        />
+        <div className="relative">
+          <BlogCardOne
+            title="Latest Food History Insights"
+            description="Deep dives into culinary traditions, forgotten recipes, and the stories behind global dishes"
+            tag="Blog"
+            tagIcon={FileText}
+            tagAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            animationType="slide-up"
+            carouselMode="buttons"
+            blogs={[
+              {
+                id: "1",                category: "History",                title: "The Ancient Art of Fermentation",                excerpt: "Explore how fermented foods transformed civilization—from sauerkraut to kimchi, discover the scientific genius behind preservation.",                imageSrc: "http://img.b2bpic.net/free-photo/plate-with-sliced-bread-female-hands_169016-48551.jpg",                imageAlt: "Ancient bread making",                authorName: "Dr. Robert Mitchell",                authorAvatar: "http://img.b2bpic.net/free-photo/pleased-young-handsome-cook-chef-uniform-looking-with-open-arms-isolated-white-space_141793-44700.jpg",                date: "18 Jan 2025"
+              },
+              {
+                id: "2",                category: "Trade",                title: "Spice Routes: The Highways of Flavor",                excerpt: "How the silk road brought cinnamon, pepper, and cloves across continents, reshaping global cuisine and commerce forever.",                imageSrc: "http://img.b2bpic.net/free-photo/top-view-autumn-food-wooden-background_23-2148234242.jpg",                imageAlt: "Spice trade history",                authorName: "Elena Vasquez",                authorAvatar: "http://img.b2bpic.net/free-photo/attractive-fashionable-young-man-with-beard-having-coffee-modern-cafe_273609-1929.jpg",                date: "12 Jan 2025"
+              },
+              {
+                id: "3",                category: "Traditions",                title: "Wine: From Ancient Ritual to Modern Science",                excerpt: "Trace the evolution of winemaking from Mesopotamian ceremonies to contemporary biodynamic vineyards.",                imageSrc: "http://img.b2bpic.net/free-photo/red-grapes-vineyard_23-2151599722.jpg",                imageAlt: "Wine making history",                authorName: "Philippe Leclerc",                authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-young-man-looking-camera-vinyl-store_23-2148237235.jpg",                date: "5 Jan 2025"
+              }
+            ]}
+          />
+          <button
+            onClick={() => playNarration(
+              "Blog. Latest food history insights. Deep dives into culinary traditions, forgotten recipes, and the stories behind global dishes. Featured articles include The Ancient Art of Fermentation, exploring how fermented foods transformed civilization. Spice Routes: The Highways of Flavor, discussing how the silk road brought cinnamon, pepper, and cloves across continents. And Wine: From Ancient Ritual to Modern Science, tracing winemaking evolution.",              "blog"
+            )}
+            className="absolute top-20 right-6 p-2 rounded-full bg-secondary-cta text-foreground hover:opacity-80 transition-opacity"
+            aria-label="Play narration for blog section"
+            title="Play narration"
+          >
+            {currentNarration === "blog" && narrationActive ? (
+              <VolumeX size={20} />
+            ) : (
+              <Volume2 size={20} />
+            )}
+          </button>
+        </div>
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
-          text="Ready to immerse yourself in culinary history? Subscribe now to unlock exclusive video content, expert interviews, and historical recipes."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Subscribe Now", href: "#" },
-            { text: "Learn More", href: "#about" }
-          ]}
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-        />
+        <div className="relative">
+          <ContactText
+            text="Ready to immerse yourself in culinary history? Subscribe now to unlock exclusive video content, expert interviews, and historical recipes."
+            animationType="entrance-slide"
+            buttons={[
+              { text: "Subscribe Now", href: "#" },
+              { text: "Learn More", href: "#about" }
+            ]}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+          />
+          <button
+            onClick={() => playNarration(
+              "Contact section. Ready to immerse yourself in culinary history? Subscribe now to unlock exclusive video content, expert interviews, and historical recipes.",              "contact"
+            )}
+            className="absolute top-20 right-6 p-2 rounded-full bg-secondary-cta text-foreground hover:opacity-80 transition-opacity"
+            aria-label="Play narration for contact section"
+            title="Play narration"
+          >
+            {currentNarration === "contact" && narrationActive ? (
+              <VolumeX size={20} />
+            ) : (
+              <Volume2 size={20} />
+            )}
+          </button>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
-- 
2.49.1