From 0701fac807fe9b9ab53df6a4588b2496b72c7d2d Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 16 May 2024 18:42:19 +0530
Subject: [PATCH] (hero): hover button outline

---
 frontend/src/Hero.tsx | 65 +++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index f267744..a444ead 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,28 +1,31 @@
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
-const demos: { header: string, query: string }[] = [
+const demos: { header: string; query: string }[] = [
   {
-    header: "Learn about DocsGPT",
-    query: "What is DocsGPT ?"
+    header: 'Learn about DocsGPT',
+    query: 'What is DocsGPT ?',
   },
   {
-    header: "Summarise documentation",
-    query: "Summarise current context"
+    header: 'Summarise documentation',
+    query: 'Summarise current context',
   },
   {
-    header: "Write Code",
-    query: "Write code for api request for /api/answer"
+    header: 'Write Code',
+    query: 'Write code for api request for /api/answer',
   },
   {
-    header: "Learning Assistance",
-    query: "Write potential questions that can be answered by context"
-  }
+    header: 'Learning Assistance',
+    query: 'Write potential questions that can be answered by context',
+  },
 ];
 
-export default function Hero({ handleQuestion  }: { handleQuestion: (question: string) => void }) {
-
+export default function Hero({
+  handleQuestion,
+}: {
+  handleQuestion: (question: string) => void;
+}) {
   return (
     <div
-      className={`mt-14 mb-4 flex w-11/12 sm:w-7/12 flex-col justify-end text-black-1000 dark:text-bright-gray lg:mt-6`}
+      className={`mt-14 mb-4 flex w-11/12 flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-7/12 lg:mt-6`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">
@@ -30,27 +33,23 @@ export default function Hero({ handleQuestion  }: { handleQuestion: (question: s
           <img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
         </div>
 
-        <div className="mb-4 flex flex-col items-center justify-center dark:text-white">
-
-        </div>
+        <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
       </div>
       <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:gap-6 md:text-sm  lg:grid-cols-2">
-        {
-          demos.map((demo) => (
-            <>
-              <button 
-              onClick={()=>handleQuestion(demo.query)}
-              className="w-full text-left rounded-full border-2 border-silver px-6 py-4">
-                <p className="mb-1 font-semibold text-black dark:text-silver">
-                  {demo.header}
-                </p>
-                <span className="text-gray-400">
-                  {demo.query}
-                </span>
-              </button>
-            </>
-          ))
-        }
+        {demos.map((demo) => (
+          <>
+            <button
+              onClick={() => handleQuestion(demo.query)}
+              className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000"
+            >
+              <p className="mb-1 font-semibold text-black dark:text-silver">
+                {demo.header}
+              </p>
+              <span className="text-gray-400">{demo.query}</span>
+            </button>
+          </>
+        ))}
       </div>
-    </div>);
+    </div>
+  );
 }