feat: edr help video

apps/edr-freight-web/portal/src/pages/support/HelpPage.tsx

@@ -72,8 +72,33 @@ export default function HelpPage() {
     <DocShell
       current="/help"
       title="Help & Support"
-      subtitle="Get answers fast — browse the common topics, check the FAQ, or reach our team directly."
+      subtitle="Get answers fast — watch the walkthrough, browse the common topics, check the FAQ, or reach our team directly."
     >
+      <section className="mb-12">
+        <h2 className="text-xl font-bold tracking-tight">
+          Portal walkthrough
+        </h2>
+        <p className="mt-2 leading-7 text-muted-foreground">
+          A guided tour of the portal — registering your company, raising a
+          booking against a contract, and settling an invoice.
+        </p>
+
+        {/* preload="metadata" so the 28 MB file is not pulled on every visit;
+            the browser fetches it only once playback starts. */}
+        <video
+          controls
+          preload="metadata"
+          className="mt-6 w-full rounded-[32px] border border-border bg-black"
+        >
+          <source src="/assets/edr-portal-guide.webm" type="video/webm" />
+          Your browser cannot play this video. Download it at{" "}
+          <a href="/assets/edr-portal-guide.webm">
+            /assets/edr-portal-guide.webm
+          </a>
+          .
+        </video>
+      </section>
+
       {/* Live chat is the fastest route, so lead with it. */}
       <div className="rounded-[32px] border border-border bg-card p-8">
         <div className="flex items-start gap-4">