From 79b6cd341927e6f6772ab380fbe411895e749440 Mon Sep 17 00:00:00 2001
From: Duc Anh <110779192+ducanh-ho2296@users.noreply.github.com>
Date: Sat, 2 Nov 2024 10:51:42 +0100
Subject: [PATCH] fix links

---
 docs/Overview.md | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/docs/Overview.md b/docs/Overview.md
index 9185555..a4437ed 100644
--- a/docs/Overview.md
+++ b/docs/Overview.md
@@ -8,6 +8,7 @@ import React, { useState } from 'react';
 import AvailableModels from '@site/src/components/AvailableModels';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Link from '@docusaurus/Link';
 
 # Overview
 
@@ -23,35 +24,35 @@ Our LLM model serving enables effortless querying of open-source LLM models like
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
 
-<div style={{ flex: '1 1 45%', position: 'relative', borderRadius: '8px', padding: '16px', backgroundColor: '#E6EAF0', color: '#333', textAlign: 'center', height: '200px', overflow: 'hidden' }}>
-  <a href="./introduction#magenta-smartchat" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
-    <h3>Magenta SmartChat</h3>
-    <p>Build conversational assistants using our LLM endpoints and RAG API.</p>
-  </a>
-  <img src="/img/smart-chat.png" alt="Magenta SmartChat" style={{ position: 'absolute', bottom: '10px', right: '10px', width: '120px', height: '120px', objectFit: 'cover', opacity: '0.3', transform: 'scale(1.2)', zIndex: 0 }} />
-</div>
+  <div style={{ flex: '1 1 45%', position: 'relative', borderRadius: '8px', padding: '16px', backgroundColor: '#E6EAF0', color: '#333', textAlign: 'center', height: '200px', overflow: 'hidden' }}>
+    <Link to="./introduction#magenta-smartchat" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
+      <h3>Magenta SmartChat</h3>
+      <p>Build conversational assistants using our LLM endpoints and RAG API.</p>
+    </Link>
+    <img src="/img/smart-chat.png" alt="Magenta SmartChat" style={{ position: 'absolute', bottom: '10px', right: '10px', width: '120px', height: '120px', objectFit: 'cover', opacity: '0.3', transform: 'scale(1.2)', zIndex: 0 }} />
+  </div>
 
 <div style={{ flex: '1 1 45%', position: 'relative', borderRadius: '8px', padding: '16px', backgroundColor: '#D8E2F1', color: '#333', textAlign: 'center', height: '200px', overflow: 'hidden' }}>
-  <a href="./introduction#llm-playground" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
+  <Link to="./introduction#llm-playground" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
     <h3>LLM Playground</h3>
     <p>Experiment with different LLMs, prompt templates, and documents with your API key.</p>
-  </a>
+  </Link>
   <img src="/img/playground.png" alt="LLM Playground" style={{ position: 'absolute', bottom: '10px', right: '10px', width: '120px', height: '120px', objectFit: 'cover', opacity: '0.3', transform: 'scale(1.2)', zIndex: 0 }} />
 </div>
 
 <div style={{ flex: '1 1 45%', position: 'relative', borderRadius: '8px', padding: '16px', backgroundColor: '#EFE7DD', color: '#333', textAlign: 'center', height: '200px', overflow: 'hidden' }}>
-  <a href="./introduction#create-tsi" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
+  <Link to="./introduction#create-tsi" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
     <h3>Create TSI</h3>
     <p>A generative AI RAG toolkit that generates AI applications with low code.</p>
-  </a>
+  </Link>
   <img src="/img/create-tsi.png" alt="Create TSI" style={{ position: 'absolute', bottom: '10px', right: '10px', width: '120px', height: '120px', objectFit: 'cover', opacity: '0.3', transform: 'scale(1.2)', zIndex: 0 }} />
 </div>
 
 <div style={{ flex: '1 1 45%', position: 'relative', borderRadius: '8px', padding: '16px', backgroundColor: '#F9E0DD', color: '#333', textAlign: 'center', height: '200px', overflow: 'hidden' }}>
-  <a href="./introduction#api-key-portal" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
+  <Link to"./introduction#api-key-portal" style={{ textDecoration: 'none', color: 'inherit', position: 'relative', zIndex: 1 }}>
     <h3>API Key Portal</h3>
     <p>Manage your LLM API keys and monitor token usage effectively.</p>
-  </a>
+  </Link>
   <img src="/img/api-portal.png" alt="API Key Portal" style={{ position: 'absolute', bottom: '10px', right: '10px', width: '120px', height: '120px', objectFit: 'cover', opacity: '0.3', transform: 'scale(1.2)', zIndex: 0 }} />
 </div>