랜딩페이지 Interactive demo 카드 추가

i18n/de/code.json

@@ -577,6 +577,14 @@
     "message": "Schritt-für-Schritt-Anleitungen, um RcloneView zu meistern.",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "Interaktive Demo",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "Sehen Sie, wie RcloneView funktioniert.",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "Hilfe-Guides",
     "description": "Card title"

i18n/es/code.json

@@ -577,6 +577,14 @@
     "message": "Guías paso a paso para dominar RcloneView.",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "Demo interactiva",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "Descubre cómo funciona RcloneView.",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "Guías de ayuda",
     "description": "Card title"

i18n/fr/code.json

@@ -577,6 +577,14 @@
     "message": "Des guides pas à pas pour maîtriser RcloneView.",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "Démo interactive",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "Découvrez comment fonctionne RcloneView.",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "Guides d’aide",
     "description": "Card title"

i18n/id/code.json

@@ -577,6 +577,14 @@
     "message": "Panduan langkah demi langkah untuk menguasai RcloneView.",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "Demo Interaktif",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "Lihat cara kerja RcloneView.",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "Panduan Bantuan",
     "description": "Card title"

i18n/ja/code.json

@@ -577,6 +577,14 @@
     "message": "RcloneView をマスターするためのステップバイステップガイド。",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "インタラクティブデモ",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "RcloneView の動作を確認しましょう。",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "ヘルプガイド",
     "description": "Card title"

i18n/ko/code.json

@@ -577,6 +577,14 @@
     "message": "RcloneView를 마스터하기 위한 단계별 가이드.",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "인터랙티브 데모",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "RcloneView가 어떻게 동작하는지 확인해 보세요.",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "도움말 가이드",
     "description": "Card title"

i18n/zh-Hans/code.json

@@ -577,6 +577,14 @@
     "message": "掌握 RcloneView 的分步指南。",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "交互式演示",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "了解 RcloneView 的工作方式。",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "帮助指南",
     "description": "Card title"

i18n/zh-Hant/code.json

@@ -577,6 +577,14 @@
     "message": "掌握 RcloneView 的逐步指南。",
     "description": "Card description"
   },
+  "home.demo": {
+    "message": "互動式示範",
+    "description": "Card title"
+  },
+  "home.demoDesc": {
+    "message": "瞭解 RcloneView 的運作方式。",
+    "description": "Card description"
+  },
   "home.helpGuides": {
     "message": "說明指南",
     "description": "Card title"

src/pages/index.js

@@ -10,7 +10,12 @@ import LocalizedDocSearch from "../components/LocalizedDocSearch";
 // import styles from './Support.module.css';  // CSS 모듈 또는 custom.css에서 클래스 정의
 
 export default function SupportPage() {
-  const { siteConfig } = useDocusaurusContext();
+  const {
+    siteConfig,
+    i18n: { currentLocale },
+  } = useDocusaurusContext();
+  // www 데모 페이지도 /{locale}/ 미러 구조 — 현재 로케일의 데모로 연결 (CustomNavbar 의 wwwUrl 과 동일 규칙)
+  const demoUrl = `https://rcloneview.com${currentLocale === "en" ? "" : `/${currentLocale}`}/demo/`;
   return (
     <Layout
       title={translate({ id: "home.title", message: "RcloneView Support Center", description: "Support home title" })}
@@ -38,7 +43,7 @@ export default function SupportPage() {
         </div>
         {/* Tutorials 버튼부터 하단 영역까지 전체 회색 배경 */}
         <div className="bg-gray-100 w-full py-12" style={{ flex: 1 }}>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 w-full max-w-7xl mx-auto">
             <Link
               to="/tutorials/"
               className="bg-white p-6 rounded-xl border border-gray-200 shadow-md hover:shadow-xl transition duration-300 text-center hover:no-underline"
@@ -52,6 +57,21 @@ export default function SupportPage() {
               </p>
             </Link>
 
+            <a
+              href={demoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-white p-6 rounded-xl border border-gray-200 shadow-md hover:shadow-xl transition duration-300 text-center hover:no-underline"
+            >
+              <div className="text-5xl mb-4">🖥️</div>
+              <h3 className="text-xl font-semibold text-gray-800 mb-2" style={{ fontFamily: "Poppins" }}>
+                <Translate id="home.demo" description="Card title">Interactive Demo</Translate>
+              </h3>
+              <p className="text-gray-600" style={{ fontFamily: "Poppins" }}>
+                <Translate id="home.demoDesc" description="Card description">See how RcloneView works.</Translate>
+              </p>
+            </a>
+
             <Link
               to="/howto/"
               className="bg-white p-6 rounded-xl border border-gray-200 shadow-md hover:shadow-xl transition duration-300 text-center hover:no-underline"