feat: improve local demo and documentation

docs-site/src/components/HomepageShowcase/index.tsx

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react';
 import {useState} from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
@@ -11,6 +11,7 @@ type Tab = {
   id: string;
   label: ReactNode;
   image: string;
+  imageAlt: string;
   title: ReactNode;
   description: ReactNode;
 };
@@ -21,10 +22,14 @@ function useTabs(): Tab[] {
       id: 'dashboard',
       label: <Translate id="showcase.tab.dashboard">Dashboard</Translate>,
       image: useBaseUrl('/img/screenshots/dashboard.png'),
-      title: <Translate id="showcase.dashboard.title">Know at a glance</Translate>,
+      imageAlt: translate({
+        id: 'showcase.dashboard.alt',
+        message: 'BackupX dashboard showing 30-day backup trends, storage distribution, task volume and cluster health',
+      }),
+      title: <Translate id="showcase.dashboard.title">Operations at a glance</Translate>,
       description: (
         <Translate id="showcase.dashboard.desc">
-          Backup success rates, storage usage, recent runs and upcoming schedules — all on one page with live data.
+          Track 30-day success and failure trends, storage distribution, task counts, data volume and recent runs from one live operations view.
         </Translate>
       ),
     },
@@ -32,10 +37,14 @@ function useTabs(): Tab[] {
       id: 'tasks',
       label: <Translate id="showcase.tab.tasks">Backup Tasks</Translate>,
       image: useBaseUrl('/img/screenshots/backup-tasks.png'),
-      title: <Translate id="showcase.tasks.title">Visual task editor</Translate>,
+      imageAlt: translate({
+        id: 'showcase.tasks.alt',
+        message: 'BackupX task list showing schedules, storage targets, retention, tags, RPO goals and verification status',
+      }),
+      title: <Translate id="showcase.tasks.title">Policies you can scan</Translate>,
       description: (
         <Translate id="showcase.tasks.desc">
-          Files, MySQL, PostgreSQL, SQLite and SAP HANA with a three-step wizard. Cron editor, multi-target dispatch, retention, compression and encryption — point and click.
+          Review schedules, multi-target policies, retention, tags, RPO goals and verification status together, then act on any task in one click.
         </Translate>
       ),
     },
@@ -43,10 +52,14 @@ function useTabs(): Tab[] {
       id: 'storage',
       label: <Translate id="showcase.tab.storage">Storage Targets</Translate>,
       image: useBaseUrl('/img/screenshots/storage-targets.png'),
-      title: <Translate id="showcase.storage.title">70+ backends, one flow</Translate>,
+      imageAlt: translate({
+        id: 'showcase.storage.alt',
+        message: 'BackupX storage targets showing connection health, live capacity, favourites and redundancy roles',
+      }),
+      title: <Translate id="showcase.storage.title">Every target, one view</Translate>,
       description: (
         <Translate id="showcase.storage.desc">
-          Alibaba OSS, Tencent COS, S3, Google Drive, WebDAV — plus every rclone backend behind a uniform form. Test connection, favourite, and view live usage.
+          Compare connection health, live capacity, favourites and redundancy roles across local disks and 70+ remote backends.
         </Translate>
       ),
     },
@@ -54,10 +67,14 @@ function useTabs(): Tab[] {
       id: 'nodes',
       label: <Translate id="showcase.tab.nodes">Multi-Node</Translate>,
       image: useBaseUrl('/img/screenshots/nodes.png'),
-      title: <Translate id="showcase.nodes.title">Master-Agent in minutes</Translate>,
+      imageAlt: translate({
+        id: 'showcase.nodes.alt',
+        message: 'BackupX node list showing health, Agent versions, queue depth, labels and heartbeat times',
+      }),
+      title: <Translate id="showcase.nodes.title">Cluster health in one view</Translate>,
       description: (
         <Translate id="showcase.nodes.desc">
-          Create a node, copy the token, start the Agent on any remote host. Tasks routed to a node run locally there and upload directly to storage — no reverse connectivity required.
+          Monitor health, Agent versions, queue depth, labels and heartbeat time across the local Master and every remote node.
         </Translate>
       ),
     },
@@ -103,7 +120,7 @@ export default function HomepageShowcase(): ReactNode {
               <span className={clsx(styles.browserDot, styles.browserDotGreen)} />
               <div className={styles.browserUrl}>backupx.local</div>
             </div>
-            <img src={current.image} alt="" className={styles.screenshot} />
+            <img src={current.image} alt={current.imageAlt} className={styles.screenshot} />
           </div>
           <div className={styles.caption}>
             <Heading as="h3" className={styles.captionTitle}>{current.title}</Heading>