feat: add intro audio to homepage

Signed-off-by: frank-zsy <[email protected]>

i18n/en/code.json

@@ -293,7 +293,7 @@
     "message": "Open Source Analysis Platform"
   },
   "homepage.getStarted": {
-    "message": "OpenDigger Introduction in 3min ⏱️"
+    "message": "OpenDigger Introduction in 5 min 🔊"
   },
   "features.richMetrics.title": {
     "message": "Rich Metrics"

i18n/zh/code.json

@@ -293,7 +293,7 @@
     "message": "开源数据分析平台"
   },
   "homepage.getStarted": {
-    "message": "OpenDigger 3 分钟简介 ⏱️"
+    "message": "OpenDigger 5 分钟简介 🔊"
   },
   "features.richMetrics.title": {
     "message": "丰富的指标实现"

src/pages/index.tsx

@@ -1,24 +1,34 @@
+import React, { useRef } from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import HomepageFeatures from '../components/HomepageFeatures';
 import Layout from '@theme/Layout';
 import Translate, { translate } from '@docusaurus/Translate';
 
 import styles from './index.module.css';
+import Link from '@docusaurus/Link';
 
 function HomepageHeader() {
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const handleAudioPlay = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+  };
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <img src="img/logo/logo-black-blue-combination-horizontal.png" alt="Logo" /> {/* 插入图片 */}
         <p className="hero__subtitle">{translate({ id: 'homepage.tagLine' })}</p>
-        <div className={styles.buttons}>
+        <div className={styles.buttons} onClick={handleAudioPlay}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/user_docs/intro">
+            onClick={handleAudioPlay}>
             <Translate id="homepage.getStarted" />
           </Link>
+          <audio ref={audioRef} src="audio/intro_en.mp3" />
         </div>
       </div>
     </header>