From e1308c8705e2301056c00b53b5f171c251161296 Mon Sep 17 00:00:00 2001
From: Sebastian Sutu <sebastian.sutu@sensidev.com>
Date: Sun, 24 Sep 2023 19:21:10 +0300
Subject: [PATCH] fix: missing dark mode href; replace vanilla `a` tag with
 nextJS `Link` component for internal pages

---
 app/page.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 41c3132a94..730ebf0c77 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -482,9 +482,12 @@ const DarkModeSection: FC = () => {
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 Flowbite React has native built-in support for{' '}
-                <a href="#" className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">
+                <Link
+                  href="/docs/customize/dark-mode"
+                  className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
+                >
                   dark mode
-                </a>{' '}
+                </Link>{' '}
                 by using Tailwind CSS and the Flowbite design system.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -514,7 +517,7 @@ const DarkModeSection: FC = () => {
                 ))}
               </ul>
               <div className="flex flex-row gap-4">
-                <a
+                <Link
                   href="/docs/customize/dark-mode"
                   className="flex items-center gap-4 font-medium text-cyan-600 hover:underline"
                 >
@@ -527,7 +530,7 @@ const DarkModeSection: FC = () => {
                       fill="currentColor"
                     ></path>
                   </svg>
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -561,12 +564,12 @@ const TailwindSection: FC = () => {
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 Flowbite React uses the utility classes from Tailwind CSS under the hood and provides an advanced{' '}
-                <a
+                <Link
                   href="/docs/customize/theme"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >
                   theming system
-                </a>{' '}
+                </Link>{' '}
                 that you can use to apply classes to UI components and their underlying HTML elements structure.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -590,7 +593,7 @@ const TailwindSection: FC = () => {
                 uses this framework in all of the libraries including the vanilla JS, Svelte, Vue, and React one.
               </p>
               <div className="flex flex-row gap-4">
-                <a
+                <Link
                   href="/docs/customize/theme"
                   className="flex items-center gap-4 font-medium text-cyan-600 hover:underline"
                 >
@@ -603,7 +606,7 @@ const TailwindSection: FC = () => {
                       fill="currentColor"
                     ></path>
                   </svg>
-                </a>
+                </Link>
               </div>
             </div>
           </div>