From 613eb58cba27cf2408fb7b8bcc7215f97fb9baf6 Mon Sep 17 00:00:00 2001
From: Kevin Satria D <130447401+kevinnsd1@users.noreply.github.com>
Date: Wed, 20 May 2026 15:46:39 +0700
Subject: [PATCH] feat: add Hero component with auto-playing video carousel and
 search functionality

---
 src/components/Hero.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 4a295f2..e8856b5 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -5,15 +5,15 @@ import { Search } from "lucide-react";
 const SLIDES = [
   {
     id: 1,
-    videoUrl: "https://videos.pexels.com/video-files/3253245/3253245-uhd_2560_1440_25fps.mp4",
+    videoId: "Fpn1imb9qZg", // Konser
   },
   {
     id: 2,
-    videoUrl: "https://videos.pexels.com/video-files/2086119/2086119-uhd_2560_1440_24fps.mp4",
+    videoId: "qqvBnmUBP8g", // Lari
   },
   {
     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="relative w-full aspect-video bg-black brutal-border overflow-hidden">
                 {SLIDES.map((slide, idx) => (
-                  <video
+                  <iframe
                     key={`video-${slide.id}`}
-                    src={slide.videoUrl}
-                    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 ${
+                    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-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
                       currentSlide === idx
                         ? "opacity-100 z-10"
                         : "opacity-0 z-0"
                     }`}
-                    autoPlay
-                    muted
-                    loop
-                    playsInline
+                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
+                    frameBorder="0"
                   />
                 ))}
                 <div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>