add live now panel with time elapsed

frontend/src/components/IsLivePulse.tsx

@@ -0,0 +1,13 @@
+const IsLivePulse = () => {
+    return (
+        <span className={"relative flex h-2 w-2"}>
+            <span
+                className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-live-red"
+            ></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-live-red"
+            ></span>
+        </span>
+    );
+}
+
+export default IsLivePulse;

frontend/src/components/video/VideoCard.tsx

@@ -63,7 +63,7 @@ const VideoCard = ({ id, title, duration, createdAt, onEdit, onDelete, className
     return (
         <Link to={`${playerPath}/${id}`}>
             <div className={clsx("flex flex-col group cursor-pointer", className)}>
-                <div className="relative overflow-hidden rounded-lg">
+                <div className="relative overflow-hidden rounded-lg hover:shadow-xl transition-transform duration-300">
                     <img
                         src={thumbnailAvailable ? thumbnailUrl : fallbackThumbnail}
                         alt="Video Thumbnail"