feature section

Author: Riya922003

src/components/WatchDemo.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useState } from 'react'
+import Image from 'next/image'
 
 export default function WatchDemo() {
   const [open, setOpen] = useState(false)
@@ -49,7 +50,9 @@ export default function WatchDemo() {
             </button>
 
             <div className="p-4">
-              <img src="/assets/Gif/keynotes.gif" alt="Keynotes demo" className="w-full h-auto rounded" />
+              <div className="relative w-full" style={{ aspectRatio: '16/9' }}>
+                <Image src="/assets/Gif/keynotes.gif" alt="Keynotes demo" fill className="object-contain rounded" />
+              </div>
             </div>
           </div>
         </div>

src/lib/realtime.ts

@@ -31,7 +31,11 @@ export function broadcastNotesUpdated(payload: unknown = { type: 'notesUpdated',
   const chunk = formatSSE('notesUpdated', payload)
 
   // Keep the debug lightweight to avoid spamming logs with full payloads
-  console.debug('[realtime] broadcastNotesUpdated', { type: (payload && (payload as any).type) ?? 'notesUpdated', recipientsCount: recipients?.length ?? 0 })
+  let _typeField = 'notesUpdated'
+  if (payload && typeof payload === 'object' && 'type' in payload && typeof (payload as Record<string, unknown>).type === 'string') {
+    _typeField = (payload as Record<string, unknown>).type as string
+  }
+  console.debug('[realtime] broadcastNotesUpdated', { type: _typeField, recipientsCount: recipients?.length ?? 0 })
 
   if (!recipients || recipients.length === 0) {
     // broadcast to all