Update components

Author: MariferVL

src/components/Header.js

@@ -45,7 +45,7 @@ export default function Header() {
             <Link href="/" className="text-white hover:text-green-400 transition">Inicio</Link>
             <Link href="/multimedia" className="text-white hover:text-green-400 transition">Multimedia</Link>
             <Link href="/previous-editions" className="text-white hover:text-green-400 transition">Ediciones Anteriores</Link>
-            <Link href="#registro" className="text-white bg-green-600 hover:bg-green-700 px-4 py-2 rounded-full transition">Registrarse</Link>
+            <Link href="/register" className="text-white bg-green-600 hover:bg-green-700 px-4 py-2 rounded-full transition">Registrarse</Link>
           </nav>
         </div>
 
@@ -56,7 +56,7 @@ export default function Header() {
               <Link href="/" className="text-white hover:text-green-400 transition">Inicio</Link>
               <Link href="/multimedia" className="text-white hover:text-green-400 transition">Multimedia</Link>
               <Link href="/previous-editions" className="text-white hover:text-green-400 transition">Ediciones Anteriores</Link>
-              <Link href="#registro" className="text-white bg-green-600 hover:bg-green-700 px-4 py-2 rounded-full transition text-center">Registrarse</Link>
+              <Link href="/register" className="text-white bg-green-600 hover:bg-green-700 px-4 py-2 rounded-full transition text-center">Registrarse</Link>
             </div>
           </div>
         )}

src/components/LazyVideoPlayerWrapper.js

@@ -0,0 +1,13 @@
+"use client";
+import dynamic from "next/dynamic";
+
+const VideoPlayer = dynamic(() => import("@/components/VideoPlayer"), {
+  ssr: false,
+  loading: () => (
+    <div className="aspect-video bg-gray-800/50 animate-pulse rounded-lg" />
+  ),
+});
+
+export default function LazyVideoPlayerWrapper({ video }) {
+  return <VideoPlayer video={video} />;
+}

src/components/VideoPlayer.js

@@ -0,0 +1,59 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+
+export default function VideoPlayer({ video }) {
+  const iframeRef = useRef(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsLoaded(true);
+          observer.disconnect(); 
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (iframeRef.current) {
+      observer.observe(iframeRef.current);
+    }
+    return () => observer.disconnect();
+  }, []); 
+
+  return (
+    <div className="bg-black/30 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg">
+      <div className="aspect-video relative">
+        {!isLoaded ? (
+          <Image
+            src={video.thumbnail}
+            alt={`Thumbnail - ${video.title}`}
+            fill
+            className="object-cover"
+            quality={60}
+            loading="lazy"
+          />
+        ) : (
+          <iframe
+            ref={iframeRef}
+            src={video.url}
+            title={video.title}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="absolute inset-0 w-full h-full"
+            loading="lazy"
+            onLoad={() => console.log("Video loaded")}
+          />
+        )}
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold">{video.title}</h3>
+        <p className="text-sm text-gray-300 mt-1">
+          {video.speaker} • PyDay Chile {video.year}
+        </p>
+      </div>
+    </div>
+  );
+}