Update src/app/videos/page.tsx
This commit is contained in:
@@ -1,48 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { useState } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
import Input from '@/components/form/Input';
|
||||
import { Play, X } from "lucide-react";
|
||||
|
||||
interface Video {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
thumbnail: string;
|
||||
videoUrl: string;
|
||||
cuisine: string;
|
||||
chef: string;
|
||||
duration: string;
|
||||
}
|
||||
|
||||
const videos: Video[] = [
|
||||
{
|
||||
id: "1", title: "Luxurious Night Skincare Routine", description: "Learn the perfect evening skincare regimen for deep hydration and overnight repair.", thumbnail: "http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ElephantsDream.mp4", cuisine: "Skincare Tutorial", chef: "Dr. Sarah Chen", duration: "12:45"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Anti-Aging Serum Application Guide", description: "Master the technique for maximum anti-aging benefits with our premium serum.", thumbnail: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/BigBuckBunny.mp4", cuisine: "Product Guide", chef: "Elena Rodriguez", duration: "8:30"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Hydration Secrets for Dry Skin", description: "Discover professional techniques to combat dryness and achieve radiant skin.", thumbnail: "http://img.b2bpic.net/free-photo/flat-lay-hands-holding-body-care-product-wooden-background_23-2148241876.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerBlazes.mp4", cuisine: "Skincare Tutorial", chef: "Dr. James Wilson", duration: "15:20"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Natural Ingredients Deep Dive", description: "Explore the science behind our carefully selected natural ingredients.", thumbnail: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965833.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerJoyrides.mp4", cuisine: "Educational", chef: "Dr. Lisa Martinez", duration: "18:10"
|
||||
},
|
||||
{
|
||||
id: "5", title: "Minimalist Skincare Routine", description: "Less is more: build an effective skincare routine with just essentials.", thumbnail: "http://img.b2bpic.net/free-photo/model-career-kit-still-life-flat-lay_23-2150218023.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerEscapes.mp4", cuisine: "Skincare Tutorial", chef: "Emma Thompson", duration: "10:15"
|
||||
},
|
||||
{
|
||||
id: "6", title: "Acne Treatment Protocol", description: "Professional advice on treating acne-prone skin with our product line.", thumbnail: "http://img.b2bpic.net/free-photo/close-perfection-closeup-peaceful-relaxed-redhead-happy-woman-closed-eyes-pure-delighted-smile-sh_1258-139766.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ElephantsDream.mp4", cuisine: "Product Guide", chef: "Dr. Michael Lee", duration: "14:05"
|
||||
},
|
||||
{
|
||||
id: "7", title: "Sensitive Skin Solutions", description: "Gentle approaches to care for sensitive and reactive skin types.", thumbnail: "http://img.b2bpic.net/free-photo/young-beautiful-woman-having-online-meeting_23-2149116347.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/BigBuckBunny.mp4", cuisine: "Skincare Tutorial", chef: "Dr. Sophie Brown", duration: "11:40"
|
||||
},
|
||||
{
|
||||
id: "8", title: "Seasonal Skincare Adjustments", description: "How to adapt your skincare routine for different seasons and climates.", thumbnail: "http://img.b2bpic.net/free-photo/young-women-polishing-nails-bed_23-2147770248.jpg", videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerBlazes.mp4", cuisine: "Educational", chef: "Dr. Amanda White", duration: "16:25"
|
||||
}
|
||||
];
|
||||
|
||||
export default function VideosPage() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
|
||||
const [cuisineFilter, setCuisineFilter] = useState<string>("All");
|
||||
const [chefFilter, setChefFilter] = useState<string>("All");
|
||||
|
||||
const allVideos = [
|
||||
{
|
||||
id: "1", category: "French Cuisine", title: "Classic French Techniques", excerpt: "Learn the essential knife skills and techniques used by professional chefs in French cuisine. Master julienne, brunoise, and chiffonade cuts.", imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-dish_23-2148241892.jpg", imageAlt: "Chef preparing French dish", authorName: "Chef Marie Dubois", authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg", date: "Jan 20, 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Mediterranean", title: "Mediterranean Summer Salad", excerpt: "Discover how to prepare fresh, vibrant Mediterranean dishes with seasonal ingredients. Fresh vegetables, feta, and olive oil combinations.", imageSrc: "http://img.b2bpic.net/free-photo/food-photography-salad_23-2148241893.jpg", imageAlt: "Mediterranean salad", authorName: "Chef Antonio Rivera", authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-woman-having-online-meeting_23-2149116347.jpg", date: "Jan 18, 2025"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Baking", title: "Artisan Bread Making", excerpt: "Master the art of baking traditional sourdough bread with proper fermentation techniques. Create perfect crusts and fluffy interiors.", imageSrc: "http://img.b2bpic.net/free-photo/baking-bread_23-2148241894.jpg", imageAlt: "Artisan bread", authorName: "Chef Sophie Laurent", authorAvatar: "http://img.b2bpic.net/free-photo/young-women-polishing-nails-bed_23-2147770248.jpg", date: "Jan 15, 2025"
|
||||
},
|
||||
{
|
||||
id: "4", category: "Asian Cuisine", title: "Wok Mastery for Beginners", excerpt: "Learn the fundamentals of wok cooking including proper heat management and ingredient timing for authentic Asian flavors.", imageSrc: "http://img.b2bpic.net/free-photo/cooking-asian-food_23-2148241895.jpg", imageAlt: "Asian wok cooking", authorName: "Chef Lin Chen", authorAvatar: "http://img.b2bpic.net/free-photo/close-perfection-closeup-peaceful-relaxed-redhead-happy-woman-closed-eyes-pure-delighted-smile-sh_1258-139766.jpg", date: "Jan 12, 2025"
|
||||
},
|
||||
{
|
||||
id: "5", category: "Desserts", title: "Chocolate Tempering Secrets", excerpt: "Unlock the secrets of professional chocolate tempering for glossy, smooth finishes on your desserts and confections.", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-dessert_23-2148241896.jpg", imageAlt: "Chocolate tempering", authorName: "Chef Laurent Petit", authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg", date: "Jan 10, 2025"
|
||||
},
|
||||
{
|
||||
id: "6", category: "French Cuisine", title: "Perfect Béarnaise Sauce", excerpt: "Create the classic French béarnaise sauce from scratch with proper emulsification techniques and flavor balancing.", imageSrc: "http://img.b2bpic.net/free-photo/sauce-preparation_23-2148241897.jpg", imageAlt: "Béarnaise sauce", authorName: "Chef Marie Dubois", authorAvatar: "http://img.b2bpic.net/free-photo/woman-smiles-toothily-keeps-palms-pressed-together-looks-away-joyfully-wears-casual-t-shirt-isolated-beige-copy-space-away-positive-emotions-concept_273609-56517.jpg", date: "Jan 8, 2025"
|
||||
}
|
||||
];
|
||||
const cuisines = ["All", ...Array.from(new Set(videos.map(v => v.cuisine)))];
|
||||
const chefs = ["All", ...Array.from(new Set(videos.map(v => v.chef)))];
|
||||
|
||||
const categories = ['all', 'French Cuisine', 'Mediterranean', 'Baking', 'Asian Cuisine', 'Desserts'];
|
||||
|
||||
const filteredVideos = allVideos.filter(video => {
|
||||
const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
video.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
video.authorName.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesCategory = selectedCategory === 'all' || video.category === selectedCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
const filteredVideos = useMemo(() => {
|
||||
return videos.filter(video => {
|
||||
const cuisineMatch = cuisineFilter === "All" || video.cuisine === cuisineFilter;
|
||||
const chefMatch = chefFilter === "All" || video.chef === chefFilter;
|
||||
return cuisineMatch && chefMatch;
|
||||
});
|
||||
}, [cuisineFilter, chefFilter]);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -60,11 +77,12 @@ export default function VideosPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Videos", id: "videos" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/" }}
|
||||
brandName="Lumière Skin"
|
||||
@@ -72,72 +90,150 @@ export default function VideosPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Cooking Videos & Tutorials"
|
||||
description="Explore our collection of culinary expertise from world-class chefs. Learn techniques, recipes, and cooking secrets."
|
||||
tag="Video Gallery"
|
||||
textPosition="center"
|
||||
showDimOverlay={true}
|
||||
<HeroLogoBillboard
|
||||
logoText="Skincare Videos"
|
||||
description="Expert tutorials, product guides, and educational content to help you master your skincare routine."
|
||||
buttons={[
|
||||
{ text: "Browse Videos", href: "#videos" }
|
||||
{ text: "Back to Home", href: "/" },
|
||||
{ text: "Shop Collection", href: "/" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-preparing-dish_23-2148241892.jpg"
|
||||
imageAlt="Professional chef cooking"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-applying-moisturizer-her-beauty-routine_23-2150166464.jpg"
|
||||
imageAlt="Video Gallery"
|
||||
mediaAnimation="slide-up"
|
||||
frameStyle="card"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="filters" data-section="filters" className="relative py-20 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-bold mb-4">Search & Filter Videos</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex gap-2">
|
||||
<Search className="w-5 h-5 opacity-50 self-center" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder="Search by title, chef name, or topic..."
|
||||
type="text"
|
||||
/>
|
||||
<div id="videos" data-section="videos" className="py-20">
|
||||
<div className="w-full max-w-7xl mx-auto px-6">
|
||||
{/* Filters */}
|
||||
<div className="mb-12">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Filter by Category</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{cuisines.map(cuisine => (
|
||||
<button
|
||||
key={cuisine}
|
||||
onClick={() => setCuisineFilter(cuisine)}
|
||||
className={`px-4 py-2 rounded-lg transition-all ${
|
||||
cuisineFilter === cuisine
|
||||
? "bg-gradient-to-r from-pink-500 to-rose-500 text-white"
|
||||
: "bg-gray-200 text-gray-700 hover:bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
{cuisine}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map(category => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 rounded-full transition ${
|
||||
selectedCategory === category
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-secondary-cta/30 hover:bg-secondary-cta/50'
|
||||
}`}
|
||||
>
|
||||
{category.charAt(0).toUpperCase() + category.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Filter by Expert</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{chefs.map(chef => (
|
||||
<button
|
||||
key={chef}
|
||||
onClick={() => setChefFilter(chef)}
|
||||
className={`px-4 py-2 rounded-lg transition-all ${
|
||||
chefFilter === chef
|
||||
? "bg-gradient-to-r from-pink-500 to-rose-500 text-white"
|
||||
: "bg-gray-200 text-gray-700 hover:bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
{chef}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm opacity-75">Found {filteredVideos.length} video{filteredVideos.length !== 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||||
{filteredVideos.map(video => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="group cursor-pointer rounded-xl overflow-hidden bg-white shadow-lg hover:shadow-xl transition-shadow"
|
||||
onClick={() => setSelectedVideo(video)}
|
||||
>
|
||||
<div className="relative aspect-video bg-gray-900 overflow-hidden">
|
||||
<img
|
||||
src={video.thumbnail}
|
||||
alt={video.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors">
|
||||
<Play className="w-16 h-16 text-white fill-white" />
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 bg-black/70 px-3 py-1 rounded text-white text-sm">
|
||||
{video.duration}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-pink-600 transition-colors">
|
||||
{video.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{video.description}</p>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
<span className="text-xs bg-pink-100 text-pink-700 px-2 py-1 rounded">
|
||||
{video.cuisine}
|
||||
</span>
|
||||
<span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
|
||||
{video.chef}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredVideos.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600 text-lg">No videos found with the selected filters.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="videos" data-section="videos">
|
||||
{filteredVideos.length > 0 ? (
|
||||
<BlogCardThree
|
||||
blogs={filteredVideos}
|
||||
title="Featured Cooking Videos"
|
||||
description="Watch expert chefs share their culinary techniques and recipes in our video gallery."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Videos"
|
||||
/>
|
||||
) : (
|
||||
<div className="py-20 text-center">
|
||||
<p className="text-xl opacity-75">No videos found matching your search. Try different keywords or categories.</p>
|
||||
{/* Video Player Modal */}
|
||||
{selectedVideo && (
|
||||
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-xl overflow-hidden max-w-4xl w-full">
|
||||
<div className="flex justify-between items-center p-6 border-b">
|
||||
<h2 className="text-xl font-semibold">{selectedVideo.title}</h2>
|
||||
<button
|
||||
onClick={() => setSelectedVideo(null)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="aspect-video bg-black">
|
||||
<video
|
||||
src={selectedVideo.videoUrl}
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-gray-700 mb-4">{selectedVideo.description}</p>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-600 font-medium">Category</p>
|
||||
<p className="text-gray-900">{selectedVideo.cuisine}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600 font-medium">Expert</p>
|
||||
<p className="text-gray-900">{selectedVideo.chef}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
@@ -145,24 +241,24 @@ export default function VideosPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/#products" },
|
||||
{ label: "Skincare Routine", href: "/#products" },
|
||||
{ label: "Collections", href: "/#products" },
|
||||
{ label: "Gift Sets", href: "/#products" }
|
||||
{ label: "All Products", href: "/" },
|
||||
{ label: "Skincare Routine", href: "/" },
|
||||
{ label: "Collections", href: "/" },
|
||||
{ label: "Gift Sets", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Our Story", href: "/#about" },
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Our Story", href: "/" },
|
||||
{ label: "Sustainability", href: "#" },
|
||||
{ label: "Careers", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/#contact" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact Us", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Returns", href: "#" }
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user