fix: homepage - use Link for internal links (#1246)

Co-authored-by: SutuSebastian <[email protected]>

Author: SutuSebastian

components/homepage/components-section.tsx

@@ -25,7 +25,7 @@ export const ComponentsSection: FC = () => {
           ))}
         </div>
         <div className="mb-4 flex w-full justify-center text-center">
-          <Button href="/docs/components/accordion" color="light">
+          <Button as={Link} href="/docs/components/accordion" color="light">
             View all components
           </Button>
         </div>

components/homepage/hero-section/hero-section.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { HiOutlineArrowRight } from 'react-icons/hi';
 import { Button } from '~/src';
 import { CopyPackageInput } from './copy-package-input';
+import Link from 'next/link';
 
 export const HeroSection: FC = () => {
   return (
@@ -23,7 +24,12 @@ export const HeroSection: FC = () => {
                 <CopyPackageInput value="npm i flowbite-react" />
                 <div className="justify-center sm:flex sm:justify-start">
                   <div className="mx-0 flex flex-row items-center gap-4 sm:gap-6">
-                    <Button href="/docs/getting-started/introduction" size="lg" className="w-full whitespace-nowrap">
+                    <Button
+                      as={Link}
+                      size="lg"
+                      href="/docs/getting-started/introduction"
+                      className="w-full whitespace-nowrap"
+                    >
                       Get started <HiOutlineArrowRight className="ml-2 mt-1 h-4 w-4" />
                     </Button>
                   </div>

components/homepage/react-section.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import type { FC } from 'react';
 import { HiOutlineArrowRight } from 'react-icons/hi';
 import { Button } from '~/src';
@@ -75,10 +76,10 @@ export const ReactSection: FC = () => {
                 ))}
               </ul>
               <div className="flex flex-row gap-4">
-                <Button href="/docs/getting-started/quickstart">
+                <Button as={Link} href="/docs/getting-started/quickstart">
                   Start building <HiOutlineArrowRight className="ml-2 h-5 w-5" />
                 </Button>
-                <Button href="https://github.com/themesberg/flowbite-react" color="gray">
+                <Button as={Link} href="https://github.com/themesberg/flowbite-react" color="gray">
                   View on GitHub
                 </Button>
               </div>