Add platform demo

src/components/SQLCourse/PlatformDemo.tsx

@@ -1,40 +1,34 @@
 import { SectionHeader } from './SectionHeader';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { Play } from 'lucide-react';
+import { VideoModal } from '../VideoModal';
 
 export function PlatformDemo() {
-  const [isZoomed, setIsZoomed] = useState(false);
-
-  useEffect(() => {
-    function onScroll() {
-      if (isZoomed) {
-        setIsZoomed(false);
-      }
-    }
-
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, [isZoomed]);
+  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
 
   return (
     <>
-      {isZoomed && (
+      {isVideoModalOpen && (
+        <VideoModal
+          videoId="6S1CcF-ngeQ"
+          onClose={() => setIsVideoModalOpen(false)}
+        />
+      )}
+      <div className="relative mt-12 w-full max-w-5xl sm:mt-20">
+        <img
+          src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
+          alt="Course Environment"
+          className="w-full rounded-xl"
+        />
         <div
-          onClick={() => setIsZoomed(false)}
-          className="fixed inset-0 z-[999] flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
+          onClick={() => setIsVideoModalOpen(true)}
+          className="group absolute inset-0 flex cursor-pointer items-center justify-center rounded-xl bg-black/40 transition-all hover:bg-black/50"
         >
-          <img
-            src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
-            alt="Course Environment"
-            className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain"
-          />
+          <div className="flex size-12 items-center justify-center rounded-full bg-white/90 transition-transform group-hover:scale-105 lg:size-16">
+            <Play className="ml-1 fill-current text-black lg:size-8" />
+          </div>
         </div>
-      )}
-      <img
-        src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
-        alt="Course Environment"
-        onClick={() => setIsZoomed(true)}
-        className="mt-12 sm:mt-20 w-full max-w-5xl rounded-xl cursor-zoom-in"
-      />
+      </div>
     </>
   );
 }