Merge version_2 into main #2

Merged
bender merged 1 commits from version_2 into main 2026-03-06 19:14:20 +00:00

View File

@@ -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">