feat(site): demo video section and doc portal link

- Add #demos section with embedded WebM from doc.fluxmq.com/video/*.
- Nav + i18n (en/zh); documentation portal card for 演示视频.
- Constants FLUXMQ_DOC_ORIGIN / FLUXMQ_DOC_DEMOS_URL.

Made-with: Cursor

Author: 1ssqq1lxr

package-lock.json

@@ -0,0 +1,64 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, Play } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { FLUXMQ_DEMO_VIDEOS } from "@/lib/demoVideos";
+import { FLUXMQ_DOC_DEMOS_URL } from "@/lib/constants";
+
+const DemoVideos = () => {
+  const { t } = useTranslation();
+
+  return (
+    <section id="demos" className="py-24 bg-background">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-14">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/40 px-4 py-1.5 text-sm text-muted-foreground mb-4">
+            <Play className="h-4 w-4 text-primary" />
+            <span>{t("demos.badge")}</span>
+          </div>
+          <h2 className="text-4xl md:text-5xl font-bold mb-4">
+            {t("demos.title")}
+            <span className="text-gradient block">{t("demos.titleHighlight")}</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-8">
+            {t("demos.subtitle")}
+          </p>
+          <Button variant="outline" size="lg" asChild>
+            <a href={FLUXMQ_DOC_DEMOS_URL} target="_blank" rel="noopener noreferrer">
+              <ExternalLink className="mr-2 h-4 w-4" />
+              {t("demos.viewDocs")}
+            </a>
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          {FLUXMQ_DEMO_VIDEOS.map((item) => (
+            <Card
+              key={item.id}
+              className="bg-gradient-card border-border/50 overflow-hidden shadow-card hover:shadow-lg transition-shadow"
+            >
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">{t(item.titleKey)}</CardTitle>
+                <CardDescription>{t("demos.videoHint")}</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="rounded-lg overflow-hidden border border-border/50 bg-black/5 aspect-video">
+                  <video
+                    className="w-full h-full object-contain bg-black"
+                    controls
+                    preload="metadata"
+                    playsInline
+                  >
+                    <source src={item.src} type="video/webm" />
+                  </video>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DemoVideos;

src/components/DemoVideos.tsx

@@ -17,7 +17,7 @@ import {
   BarChart3
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { FLUXMQ_DOC_INSTALL_CATEGORY_URL } from '@/lib/constants';
+import { FLUXMQ_DOC_INSTALL_CATEGORY_URL, FLUXMQ_DOC_DEMOS_URL } from '@/lib/constants';
 
 interface DocSection {
   id: string;
@@ -43,6 +43,15 @@ const DocumentationPortal: React.FC = () => {
       external: true,
       badge: t('docs.badges.essential')
     },
+    {
+      id: 'demo-videos',
+      title: t('docs.portal.demos.title'),
+      description: t('docs.portal.demos.desc'),
+      icon: <TestTube className="h-5 w-5" />,
+      href: FLUXMQ_DOC_DEMOS_URL,
+      external: true,
+      badge: t('docs.badges.basic')
+    },
     {
       id: 'configuration',
       title: t('docs.portal.configuration.title'),

src/components/DocumentationPortal.tsx

@@ -74,6 +74,9 @@ const Header = () => {
             <a href="#products" className="text-muted-foreground hover:text-primary transition-colors whitespace-nowrap min-w-[80px] text-center">
               {t('nav.products')}
             </a>
+            <a href="#demos" className="text-muted-foreground hover:text-primary transition-colors whitespace-nowrap min-w-[80px] text-center">
+              {t('nav.demos')}
+            </a>
             <a href="#features" className="text-muted-foreground hover:text-primary transition-colors whitespace-nowrap min-w-[80px] text-center">
               {t('nav.features')}
             </a>
@@ -155,6 +158,9 @@ const Header = () => {
                 <a href="#products" className="text-muted-foreground hover:text-primary transition-colors py-2 whitespace-nowrap">
                   {t('nav.products')}
                 </a>
+                <a href="#demos" className="text-muted-foreground hover:text-primary transition-colors py-2 whitespace-nowrap">
+                  {t('nav.demos')}
+                </a>
                 <a href="#features" className="text-muted-foreground hover:text-primary transition-colors py-2 whitespace-nowrap">
                   {t('nav.features')}
                 </a>

src/components/Header.tsx

@@ -4,3 +4,9 @@
  */
 export const FLUXMQ_DOC_INSTALL_CATEGORY_URL =
   "https://doc.fluxmq.com/category/%E5%AE%89%E8%A3%85%E9%83%A8%E7%BD%B2";
+
+/** 文档站根 URL（演示视频、静态资源等） */
+export const FLUXMQ_DOC_ORIGIN = "https://doc.fluxmq.com";
+
+/** 文档站《演示视频》页面（与 fluxmq-doc product/demos 对应） */
+export const FLUXMQ_DOC_DEMOS_URL = `${FLUXMQ_DOC_ORIGIN}/product/demos`;

src/lib/constants.ts

@@ -0,0 +1,26 @@
+import { FLUXMQ_DOC_ORIGIN } from "@/lib/constants";
+
+export type DemoVideoItem = {
+  id: string;
+  titleKey: string;
+  src: string;
+};
+
+/** 与 fluxmq-doc static/video 及《演示视频》文档一致 */
+export const FLUXMQ_DEMO_VIDEOS: DemoVideoItem[] = [
+  {
+    id: "overview",
+    titleKey: "demos.items.overview",
+    src: `${FLUXMQ_DOC_ORIGIN}/video/overview.webm`,
+  },
+  {
+    id: "rule-engine-datasource",
+    titleKey: "demos.items.datasource",
+    src: `${FLUXMQ_DOC_ORIGIN}/video/rule-engine-datasource.webm`,
+  },
+  {
+    id: "instruct",
+    titleKey: "demos.items.instruct",
+    src: `${FLUXMQ_DOC_ORIGIN}/video/instruct.webm`,
+  },
+];

src/lib/demoVideos.ts

@@ -18,6 +18,7 @@ const resources = {
       "nav.about": "About",
       "nav.github": "GitHub",
       "nav.getStarted": "Contact Us",
+      "nav.demos": "Demos",
 
       // Hero Section
       "hero.badge": "FluxMQ · FCP",
@@ -170,6 +171,8 @@ const resources = {
       "docs.portal.fcpDocDesc": "Control plane: license, applications, proxy, monitoring",
       "docs.portal.gettingStarted.title": "Quick Start",
       "docs.portal.gettingStarted.desc": "Installation deployment and basic configuration guide",
+      "docs.portal.demos.title": "Demo videos",
+      "docs.portal.demos.desc": "Console walkthroughs (WebM) aligned with the documentation site",
       "docs.portal.configuration.title": "Configuration Guide",
       "docs.portal.configuration.desc": "Detailed configuration parameter description",
       "docs.portal.features.title": "Features",
@@ -188,6 +191,15 @@ const resources = {
       "docs.portal.quickAccess.faq": "FAQ",
       "docs.portal.quickAccess.github": "GitHub",
       "docs.portal.viewDocs": "View Documentation",
+      "demos.badge": "Console walkthroughs",
+      "demos.title": "See FluxMQ",
+      "demos.titleHighlight": "in action",
+      "demos.subtitle": "Short WebM clips recorded from the public demo: dashboard, rule engine data sources, and command consumption.",
+      "demos.viewDocs": "Open demo videos page in docs",
+      "demos.videoHint": "WebM · demo.fluxmq.com",
+      "demos.items.overview": "Console overview",
+      "demos.items.datasource": "Rule engine · Data sources",
+      "demos.items.instruct": "Command consumption",
       "docs.structure.introduction.title": "Introduction",
       "docs.structure.introduction.overview": "Product Overview", 
       "docs.structure.introduction.features": "Key Features",
@@ -535,6 +547,7 @@ const resources = {
       "nav.about": "关于我们",
       "nav.github": "GitHub",
       "nav.getStarted": "联系我们",
+      "nav.demos": "演示视频",
 
       // Hero Section
       "hero.badge": "FluxMQ · FCP",
@@ -687,6 +700,8 @@ const resources = {
       "docs.portal.fcpDocDesc": "控制平面：License、应用、代理、监控",
       "docs.portal.gettingStarted.title": "快速开始",
       "docs.portal.gettingStarted.desc": "安装部署和基础配置指南",
+      "docs.portal.demos.title": "演示视频",
+      "docs.portal.demos.desc": "控制台短视频（WebM），与文档站《演示视频》同步",
       "docs.portal.configuration.title": "配置指南",
       "docs.portal.configuration.desc": "详细的配置参数说明",
       "docs.portal.features.title": "功能特性",
@@ -705,6 +720,15 @@ const resources = {
       "docs.portal.quickAccess.faq": "常见问题",
       "docs.portal.quickAccess.github": "GitHub",
       "docs.portal.viewDocs": "查看文档",
+      "demos.badge": "控制台演示",
+      "demos.title": "观看",
+      "demos.titleHighlight": "FluxMQ 实操演示",
+      "demos.subtitle": "基于公开演示环境录制的 WebM 短视频：总览、规则引擎数据源、指令消费。",
+      "demos.viewDocs": "在文档站打开演示视频页",
+      "demos.videoHint": "WebM · demo.fluxmq.com",
+      "demos.items.overview": "控制台总览",
+      "demos.items.datasource": "规则引擎 · 数据源",
+      "demos.items.instruct": "指令消费",
       "docs.structure.introduction.title": "产品介绍",
       "docs.structure.introduction.overview": "产品概述", 
       "docs.structure.introduction.features": "核心特性",

src/lib/i18n.ts

@@ -8,6 +8,7 @@ import PerformanceComparison from "@/components/PerformanceComparison";
 import QuickStart from "@/components/QuickStart";
 import Pricing from "@/components/Pricing";
 import DocumentationPortal from "@/components/DocumentationPortal";
+import DemoVideos from "@/components/DemoVideos";
 import GetStarted from "@/components/GetStarted";
 import Footer from "@/components/Footer";
 
@@ -24,6 +25,7 @@ const Index = () => {
       <QuickStart />
       <Pricing />
       <DocumentationPortal />
+      <DemoVideos />
       <GetStarted />
       <Footer />
     </div>