Homepage buttons (index.tsx) - change absolute links to relative

Author: kimsauce

src/pages/index.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
 import bgImage from '../../static/img/hero-secondary-background.webp';
 import heroImage from '../../static/img/hero-secondary-graphic.webp';
 import SumoLogicDocsLogo from '../../static/img/sumo-logic-docs.svg';
 import { Feature } from '../components/Feature';
 import { features } from '../helper/features';
-import ErrorBoundary from '../components/ErrorBoundary'; // Import the ErrorBoundary component
+import ErrorBoundary from '../components/ErrorBoundary';
 
 export const Home = () => {
   const [tab, setTab] = useState('0');
@@ -83,10 +84,7 @@ export const Home = () => {
               }}
               height='100%'
             >
-              <Grid
-                item
-                md={6}
-              >
+              <Grid item md={6}>
                 <Stack
                   alignItems={{
                     md: 'flex-start',
@@ -117,53 +115,47 @@ export const Home = () => {
                     {
                       children: '1. Set up collector and source',
                       description: 'Set up a Sumo Logic collector and source',
-                      href: 'https://help.sumologic.com/docs/get-started/quickstart/#step-1-get-your-data-into-sumo',
+                      to: '/docs/get-started/quickstart#step-1-get-your-data-into-sumo',
                     },
                     {
                       children: '2. Explore your data insights',
                       description: 'Explore your insights',
-                      href: 'https://help.sumologic.com/docs/get-started/quickstart/#step-2-search-and-analyze-your-data',
+                      to: '/docs/get-started/quickstart#step-2-search-and-analyze-your-data',
                     },
                     {
                       children: '3. Monitor and secure your environment',
                       description: 'Monitor, troubleshoot, and secure your environment',
-                      href: 'https://help.sumologic.com/docs/get-started/quickstart/#step-3-monitor-and-troubleshoot-your-environment',
+                      to: '/docs/get-started/quickstart#step-3-monitor-and-troubleshoot-your-environment',
                     },
-                  ].map(({ children, ...rest }) => (
-                    <Button
-                      key={rest.href}
-                      sx={{
-                        bgcolor: 'transparent',
-                        border: '.5px solid',
-                        borderColor: '#e3e3e3',
-                        borderRadius: 2,
-                        fontFamily: 'Lab Grotesque',
-                        textTransform: 'none',
-                        width: {
-                          md: 'auto',
-                          xs: '100%',
-                        },
-                        '&:hover': {
-                          bgcolor: '#0045BE',
-                          borderColor: '#0045BE',
-                          color: '#e3e3e3',
-                        },
-                      }}
-                      variant='contained'
-                      {...rest}
-                    >
-                      {children}
-                    </Button>
+                  ].map(({ children, to }) => (
+                    <Link key={to} to={to} style={{ textDecoration: 'none' }}>
+                      <Button
+                        sx={{
+                          bgcolor: 'transparent',
+                          border: '.5px solid',
+                          borderColor: '#e3e3e3',
+                          borderRadius: 2,
+                          fontFamily: 'Lab Grotesque',
+                          textTransform: 'none',
+                          width: {
+                            md: 'auto',
+                            xs: '100%',
+                          },
+                          '&:hover': {
+                            bgcolor: '#0045BE',
+                            borderColor: '#0045BE',
+                            color: '#e3e3e3',
+                          },
+                        }}
+                        variant='contained'
+                      >
+                        {children}
+                      </Button>
+                    </Link>
                   ))}
                 </Stack>
               </Grid>
-              <Grid
-                item
-                md={6}
-                pl={{
-                  md: 13,
-                }}
-              >
+              <Grid item md={6} pl={{ md: 13 }}>
                 <Box
                   component='img'
                   alt='hero background image'