fix: add demo website to docs

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lazyload": "^3.2.1",
     "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"
   },

src/components/documents.jsx

@@ -197,6 +197,16 @@ const UlBox = styled.ul`
         text-align: center;
         margin-top: 30px;
     }
+    .flexLine{
+        display: flex;
+        align-items: flex-end;
+        gap:20px;
+        a{
+            margin-bottom: 10px;
+            cursor: pointer;
+            text-transform: capitalize;
+        }
+    }
 `
 
 const FlexBox = styled.ul`
@@ -232,10 +242,14 @@ export default function Documents() {
                             browsers.
                         </div>
                     </div>
-                    <div className="iconBox">
-                        <i className="flaticon-081-electricity icon"></i>
+                    <div className="flexLine">
+                        <div className="iconBox">
+                            <i className="flaticon-081-electricity icon"></i>
+                        </div>
+                        <a href="https://demo-app.reiwallet.io/" target="_blank" rel="noreferrer">demo-app.reiwallet.io</a>
                     </div>
 
+
                 </li>
                 <li>
                     <div>

src/components/home.jsx

@@ -3,8 +3,10 @@ import Twitter from "../assets/images/Twitter.png";
 import Discord from "../assets/images/Discord.png";
 import Telegram from "../assets/images/Telegram.png";
 import Medium from "../assets/images/Medium.png";
-import BgVideo from "../assets/images/bg.mp4";
+// import BgVideo from "../assets/images/bg.mp4";
 import BgImg from "../assets/images/bg-jpg.png";
+import React, {  lazy } from 'react';
+const BgVideo = lazy(() => import('../assets/images/bg.mp4'));
 
 const Box = styled.div`
     display: flex;
@@ -111,10 +113,10 @@ const BtnGroup = styled.div`
 
 export default function Home(){
     return <Box>
+            <video autoPlay muted loop poster={BgImg} id="myVideo" preload="none">
+                <source src={BgVideo} type="video/mp4"/>
+            </video>
 
-        <video autoPlay muted loop poster={BgImg} id="myVideo">
-            <source src={BgVideo} type="video/mp4"/>
-        </video>
         <div className="inner">
             <BgBox>
                 <TitleBox>REI Wallet </TitleBox>

src/router/router.jsx

@@ -7,7 +7,7 @@ import HomePage from "../pages/home.jsx";
 function RouterLink() {
     return (
         <Routes>
-            <Route path="/" element={<Navigate to="/home" />}/>
+            <Route path="/" element={<Navigate to="/home#home" />}/>
             <Route path="/privacy" element={<Privacy />}/>
             <Route path="/home" element={<HomePage />}/>
         </Routes>