kevinsatriadarmawan/Frontend-Smart_Ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Hero component with auto-playing video carousel and search functionality

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 15:46:39 +07:00
parent 4aea7ca68c
commit 613eb58cba
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Hero.tsx
View File

@@ -5,15 +5,15 @@ import { Search } from "lucide-react";
const SLIDES = [ const SLIDES = [
{ {
id: 1, id: 1,
videoUrl: "https://videos.pexels.com/video-files/3253245/3253245-uhd_2560_1440_25fps.mp4", videoId: "Fpn1imb9qZg", // Konser
}, },
{ {
id: 2, id: 2,
videoUrl: "https://videos.pexels.com/video-files/2086119/2086119-uhd_2560_1440_24fps.mp4", videoId: "qqvBnmUBP8g", // Lari
}, },
{ {
id: 3, id: 3,
videoUrl: "https://videos.pexels.com/video-files/3163534/3163534-uhd_2560_1440_30fps.mp4", videoId: "DK3hsi6NBjw", // Seminar
}, },
]; ];
@@ -71,18 +71,16 @@ export default function Hero() {
<div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto"> <div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto">
<div className="relative w-full aspect-video bg-black brutal-border overflow-hidden"> <div className="relative w-full aspect-video bg-black brutal-border overflow-hidden">
{SLIDES.map((slide, idx) => ( {SLIDES.map((slide, idx) => (
<video <iframe
key={`video-${slide.id}`} key={`video-${slide.id}`}
src={slide.videoUrl} src={`https://www.youtube.com/embed/${slide.videoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${slide.videoId}&modestbranding=1&playsinline=1&rel=0&showinfo=0&disablekb=1&fs=0`}
className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full object-cover max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${ className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
currentSlide === idx currentSlide === idx
? "opacity-100 z-10" ? "opacity-100 z-10"
: "opacity-0 z-0" : "opacity-0 z-0"
}`} }`}
autoPlay allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
muted frameBorder="0"
loop
playsInline
/> />
))} ))}
<div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div> <div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>