Update index.js

arghyaxcodes · arghyaxcodes · commit 18a2e568767b · 2022-03-02T21:47:57.000+05:30
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -10,9 +10,11 @@ import ThemeChanger from '@/components/ThemeChanger'
 import Head from 'next/head'
 import Image from 'next/image'
 import NextLink from 'next/link'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
+
 
 export default function Home() {
+  const router = useRouter()
   return (
     <div className="space-y-20 overflow-hidden sm:space-y-32 md:space-y-40 lg:space-y-44">
       <Head>
@@ -87,36 +89,31 @@ export default function Home() {
             <InlineCode>string programs</InlineCode> to <InlineCode>2D arrays</InlineCode> ,{' '}
             <InlineCode>recursion</InlineCode> , <InlineCode>matrices</InlineCode> and many more.
           </p>
-          <div className="mt-12 mb-28 flex flex-col space-y-4 text-center sm:space-y-0 sm:space-x-4 ">
-            <NextLink href="/docs">
-              <a>
-                <button className="focus:outline-none w-full flex-none rounded-lg border border-transparent bg-blue-700 py-3 px-6 text-lg font-semibold leading-6 text-white shadow-md transition-colors duration-200 hover:bg-blue-600 hover:shadow-xl focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white sm:w-auto">
-                  Get started
-                </button>
-              </a>
-            </NextLink>
-            <NextLink href="/about">
-              <a>
-                <button className="focus:outline-none w-full flex-none rounded-lg border border-transparent bg-gray-900 py-3 px-6 text-lg font-semibold leading-6 text-white shadow-md transition-colors duration-200 hover:bg-gray-700 hover:shadow-xl focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto">
-                  Learn more
-                </button>
-              </a>
-            </NextLink>
-            <NextLink href="https://github.com/sponsors/javaistic">
-              <a>
-                <button
-                  className="text-md focus:outline-none flex w-full flex-none items-center justify-center rounded-lg border-2 border-gray-300 bg-gray-50 py-3 font-semibold leading-6 text-gray-900 shadow-md transition-colors duration-200 hover:bg-gray-100 hover:shadow-xl focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:w-auto sm:px-6"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <span className="sr-only">(Sponsor Javaistic)</span>
-                  <svg width="24" height="24" fill="none" stroke="#db61a2" strokeWidth={2.5}>
-                    <path d="M18.7663 7.23375C18.3753 6.84262 17.9111 6.53234 17.4002 6.32065C16.8893 6.10896 16.3417 6 15.7887 6C15.2357 6 14.6881 6.10896 14.1772 6.32065C13.6663 6.53234 13.2021 6.84262 12.8112 7.23375L11.9998 8.04511L11.1884 7.23375C10.3987 6.44406 9.32768 6.00041 8.21089 6.00041C7.09409 6.00041 6.02303 6.44406 5.23334 7.23375C4.44365 8.02344 4 9.0945 4 10.2113C4 11.3281 4.44365 12.3991 5.23334 13.1888L6.0447 14.0002L11.9998 19.9553L17.9549 14.0002L18.7663 13.1888C19.1574 12.7979 19.4677 12.3337 19.6794 11.8228C19.891 11.3119 20 10.7643 20 10.2113C20 9.65828 19.891 9.11068 19.6794 8.59978C19.4677 8.08888 19.1574 7.6247 18.7663 7.23375V7.23375Z" />
-                  </svg>
-                  &nbsp;Sponsor
-                </button>
-              </a>
-            </NextLink>
+          <div className="mt-12 mb-28 flex flex-wrap space-y-4 text-center sm:space-y-0 sm:space-x-4 ">
+            <button
+              className="focus:outline-none w-full flex-none rounded-lg border border-transparent bg-blue-700 py-3 px-6 text-lg font-semibold leading-6 text-white shadow-md transition-colors duration-200 hover:bg-blue-600 hover:shadow-xl focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
+              type="button" onClick={() => router.push('/docs')}
+            >
+              Get started
+            </button>
+            <button
+              className="focus:outline-none w-full flex-none rounded-lg border border-transparent bg-gray-900 py-3 px-6 text-lg font-semibold leading-6 text-white shadow-md transition-colors duration-200 hover:bg-gray-700 hover:shadow-xl focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
+              type="button" onClick={() => router.push('/about')}
+            >
+              Learn more
+            </button>
+            <button
+              className="text-md focus:outline-none flex w-full flex-none items-center justify-center rounded-lg border-2 border-gray-300 bg-gray-50 py-3 font-semibold leading-6 text-gray-900 shadow-md transition-colors duration-200 hover:bg-gray-100 hover:shadow-xl focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:w-auto sm:px-6"
+              target="_blank"
+              rel="noopener noreferrer"
+              type="button" onClick={() => router.push('/sponsors')}
+            >
+              <span className="sr-only">(Sponsor Javaistic)</span>
+              <svg width="24" height="24" fill="none" stroke="#db61a2" strokeWidth="2.5">
+                <path d="M18.7663 7.23375C18.3753 6.84262 17.9111 6.53234 17.4002 6.32065C16.8893 6.10896 16.3417 6 15.7887 6C15.2357 6 14.6881 6.10896 14.1772 6.32065C13.6663 6.53234 13.2021 6.84262 12.8112 7.23375L11.9998 8.04511L11.1884 7.23375C10.3987 6.44406 9.32768 6.00041 8.21089 6.00041C7.09409 6.00041 6.02303 6.44406 5.23334 7.23375C4.44365 8.02344 4 9.0945 4 10.2113C4 11.3281 4.44365 12.3991 5.23334 13.1888L6.0447 14.0002L11.9998 19.9553L17.9549 14.0002L18.7663 13.1888C19.1574 12.7979 19.4677 12.3337 19.6794 11.8228C19.891 11.3119 20 10.7643 20 10.2113C20 9.65828 19.891 9.11068 19.6794 8.59978C19.4677 8.08888 19.1574 7.6247 18.7663 7.23375V7.23375Z"></path>
+              </svg>
+              &nbsp;Sponsor
+            </button>
           </div>
         </div>
         <Hero />
