feat: implement core event ticketing navigation, detailed event pages, checkout flow, and QR code integration.

src/components/Hero.tsx

@@ -5,15 +5,15 @@ import { Search } from "lucide-react";
 const SLIDES = [
   {
     id: 1,
-    videoId: "Fpn1imb9qZg",
+    videoUrl: "https://videos.pexels.com/video-files/3253245/3253245-uhd_2560_1440_25fps.mp4",
   },
   {
     id: 2,
-    videoId: "PN7Pv23FrWg",
+    videoUrl: "https://videos.pexels.com/video-files/2086119/2086119-uhd_2560_1440_24fps.mp4",
   },
   {
     id: 3,
-    videoId: "YsJqKjD2sXE",
+    videoUrl: "https://videos.pexels.com/video-files/3163534/3163534-uhd_2560_1440_30fps.mp4",
   },
 ];
 
@@ -71,16 +71,18 @@ 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) => (
-                  <iframe
+                  <video
                     key={`video-${slide.id}`}
-                    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`}
-                    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 ${
+                    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 ${
                       currentSlide === idx
                         ? "opacity-100 z-10"
                         : "opacity-0 z-0"
                     }`}
-                    allow="autoplay; encrypted-media; fullscreen"
-                    frameBorder="0"
+                    autoPlay
+                    muted
+                    loop
+                    playsInline
                   />
                 ))}
                 <div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>