From ab7f6e8300df498e09d464232135d563f4521551 Mon Sep 17 00:00:00 2001
From: staticGuru <vigneshguru274@gmail.com>
Date: Fri, 6 Oct 2023 23:42:22 +0530
Subject: [PATCH 1/4] Change the hero section with figma style

---
 frontend/src/Hero.tsx | 52 ++++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 8ed80fc..df0ad28 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -5,28 +5,26 @@ export default function Hero({ className = '' }: { className?: string }) {
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <p className="text-[27px]">🦖</p>
       </div>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!
       </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
         Enter a query related to the information in the documentation you
-        selected to receive
-        <br /> and we will provide you with the most relevant answers.
+        selected to receive and we will provide you with the most relevant
+        answers.
       </p>
-      <p className="mb-3 text-center leading-6 text-black-1000">
+      <p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
         Start by entering your query in the input field below and we will do the
         rest!
       </p>
-      <div className="sections mt-1 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0  ">
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
-          <div className="h-full rounded-[45px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
-            <img
-              src="/message-text.svg"
-              alt="lock"
-              className="h-[24px] w-[24px]"
-            />
-            <h2 className="mt-2 mb-3 text-lg font-bold">Chat with Your Data</h2>
-            <p className="w-[250px] text-xs text-gray-500">
+      <div className="sections mt-7 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0  ">
+        <div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
+          <div className="h-full rounded-[25px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
+            <img src="/message-text.svg" alt="lock" className="h-7 w-7" />
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Chat with Your Data
+            </h2>
+            <p className="w-[300px] text-sm font-normal leading-6 text-black-1000">
               DocsGPT will use your data to answer questions. Whether its
               documentation, source code, or Microsoft files, DocsGPT allows you
               to have interactive conversations and find answers based on the
@@ -35,11 +33,13 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
 
-        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none  md:py-1 md:px-0">
-          <div className="rounded-[45px] bg-white px-6 py-4 md:rounded-none">
-            <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
-            <h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2>
-            <p className=" w-[250px] text-xs text-gray-500">
+        <div className=" rounded-[28px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none  md:py-1 md:px-0">
+          <div className="rounded-[25px] bg-white px-6 py-6 md:rounded-none">
+            <img src="/lock.svg" alt="lock" className="h-7 w-7" />
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Secure Data Storage
+            </h2>
+            <p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
               The security of your data is our top priority. DocsGPT ensures the
               utmost protection for your sensitive information. With secure data
               storage and privacy measures in place, you can trust that your
@@ -47,15 +47,17 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tl-none md:rounded-bl-none">
-          <div className="rounded-[45px] bg-white px-6 p-6 lg:rounded-tl-none lg:rounded-bl-none">
+        <div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tl-none md:rounded-bl-none">
+          <div className="rounded-[25px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
             <img
               src="/message-programming.svg"
               alt="lock"
-              className="h-[24px] w-[24px]"
+              className="h-7 w-7"
             />
-            <h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2>
-            <p className=" w-[250px] text-xs text-gray-500">
+            <h2 className="mt-2 mb-5 text-base font-normal leading-6">
+              Open Source Code
+            </h2>
+            <p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
               DocsGPT is built on open source principles, promoting transparency
               and collaboration. The source code is freely available, enabling
               developers to contribute, enhance, and customize the app to meet

From f47fc7a484fa011ba281f28a0fc5314559432f46 Mon Sep 17 00:00:00 2001
From: staticGuru <vigneshguru274@gmail.com>
Date: Sat, 7 Oct 2023 11:39:51 +0530
Subject: [PATCH 2/4] add the additional div in the chat sections

---
 frontend/src/conversation/Conversation.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index ab43576..8d85f3c 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -144,6 +144,7 @@ export default function Conversation() {
               </Fragment>
             );
           })}
+          {hasScrolledToLast && <div className="h-40 w-full" />}
         </div>
       )}
       {queries.length === 0 && (

From 0e496181a16bd011073fd1912200a2e226d0347d Mon Sep 17 00:00:00 2001
From: staticGuru <vigneshguru274@gmail.com>
Date: Sat, 7 Oct 2023 12:03:43 +0530
Subject: [PATCH 3/4] Fix the question input hidden issue

---
 frontend/src/conversation/Conversation.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 8d85f3c..e6b5d9c 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -134,7 +134,7 @@ export default function Conversation() {
             return (
               <Fragment key={index}>
                 <ConversationBubble
-                  className={'mb-7'}
+                  className={'mb-7 last:mb-24'}
                   key={`${index}QUESTION`}
                   message={query.prompt}
                   type="QUESTION"
@@ -144,7 +144,6 @@ export default function Conversation() {
               </Fragment>
             );
           })}
-          {hasScrolledToLast && <div className="h-40 w-full" />}
         </div>
       )}
       {queries.length === 0 && (

From 8323b8af4d9d7725a5c4ac7c1d3b9376e637866c Mon Sep 17 00:00:00 2001
From: staticGuru <vigneshguru274@gmail.com>
Date: Sat, 7 Oct 2023 12:13:05 +0530
Subject: [PATCH 4/4] Reset the input hidden issues

---
 frontend/src/conversation/Conversation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index e6b5d9c..ab43576 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -134,7 +134,7 @@ export default function Conversation() {
             return (
               <Fragment key={index}>
                 <ConversationBubble
-                  className={'mb-7 last:mb-24'}
+                  className={'mb-7'}
                   key={`${index}QUESTION`}
                   message={query.prompt}
                   type="QUESTION"