web: fix CSP blocking fonts/video, replace YouTube embed with local MP4

CSP (next.config.mjs):
- style-src: add https://rsms.me (Inter font CSS loaded in layout.tsx)
- font-src: add https://rsms.me (Inter font files)
- media-src: add 'self' (local video playback)
- connect-src: add API domains for dashboard fetch calls

Hero video:
- Replace HeroVideoDialog YouTube iframe with native <video> element
  playing /assets/demo-video.mp4 (autoplay, loop, muted, playsInline)
- Eliminates the frame-src CSP violation entirely — no iframe needed
- Removes unused HeroVideoDialog import

Blog author:
- /author.jpg didn't exist — temporarily use /logo-small.png as avatar
  until the real headshot is provided

Author: decebal

apps/web/next.config.mjs

@@ -21,10 +21,11 @@ const nextConfig = {
             value: [
               "default-src 'self'",
               "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
-              "style-src 'self' 'unsafe-inline'",
+              "style-src 'self' 'unsafe-inline' https://rsms.me",
               "img-src 'self' data: blob: https://randomuser.me",
-              "font-src 'self' data:",
-              "connect-src 'self' ws: wss:",
+              "font-src 'self' data: https://rsms.me",
+              "media-src 'self'",
+              "connect-src 'self' ws: wss: https://api.all-source.xyz https://allsource-query.fly.dev",
               "frame-ancestors 'none'",
               "base-uri 'self'",
               "form-action 'self'",

apps/web/src/app/(marketing)/blog/[slug]/page.tsx

@@ -104,7 +104,7 @@ export default async function Blog({ params }: { params: Promise<{ slug: string
           <Author
             twitterUsername={post.metadata.author}
             name={post.metadata.author}
-            image={"/author.jpg"}
+            image={"/logo-small.png"}
           />
         </div>
         <article

apps/web/src/components/sections/hero.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { buttonVariants, cn, HeroVideoDialog, Icons } from "@allsource/ui";
+import { buttonVariants, cn, Icons } from "@allsource/ui";
 import { motion } from "motion/react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
@@ -273,11 +273,13 @@ function HeroImage() {
         {/* Hover glow intensification */}
         <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-primary/20 via-purple-500/10 to-primary/20 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
 
-        <HeroVideoDialog
-          animationStyle="from-center"
-          videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-          thumbnailSrc="/assets/hero-screenshot.png"
-          thumbnailAlt="AllSource Dashboard — Event Explorer with real-time metrics"
+        <video
+          src="/assets/demo-video.mp4"
+          poster="/assets/hero-screenshot.png"
+          autoPlay
+          loop
+          muted
+          playsInline
           className="relative border rounded-lg shadow-lg shadow-primary/10 max-w-screen-lg transition-shadow duration-500 group-hover:shadow-xl group-hover:shadow-primary/20"
         />
       </div>