From 5e0dd5c63b39b0ff235aa86e92656634f60a1b9d Mon Sep 17 00:00:00 2001
From: Varun Dhand <varundhand77@gmail.com>
Date: Tue, 31 Oct 2023 18:56:18 +0530
Subject: [PATCH 1/3] feat: mobile responsive hero page

---
 frontend/src/Hero.tsx | 178 +++++++++++++++++++++++++++++++++---------
 1 file changed, 139 insertions(+), 39 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index b62823aaa..406e48f87 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,34 +1,81 @@
+import { useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function Hero({ className = '' }: { className?: string }) {
+  // const isMobile = window.innerWidth <= 768;
+  const { isMobile } = useMediaQuery();
   return (
-    <div className={`mt-14 mb-12 flex flex-col `}>
-      <div className="mb-10 flex items-center justify-center ">
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
+      <div className=" mb-2 flex items-center justify-center sm:mb-10">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
       </div>
-      <p className="mb-3 text-center leading-6 text-black-1000">
-        Welcome to DocsGPT, your technical documentation assistant!
-      </p>
-      <p className="mb-3 text-center 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.
-      </p>
-      <p className="mb-3 text-center 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-8 flex flex-col items-center justify-center gap-1 sm:gap-0 lg:flex-row">
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-r-none">
-          <div className="h-full rounded-[21px] bg-white p-6 lg:rounded-r-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">
+      {isMobile ? (
+        <p className="mb-3 text-center leading-6 text-black-1000">
+          Welcome to <span className="font-bold ">DocsGPT</span>, your technical
+          documentation assistant! Start by entering your query in the input
+          field below, and we&apos;ll provide you with the most relevant
+          answers.
+        </p>
+      ) : (
+        <>
+          <p className="mb-3 text-center leading-6 text-black-1000">
+            Welcome to DocsGPT, your technical documentation assistant!
+          </p>
+          <p className="mb-3 text-center 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.
+          </p>
+          <p className="mb-3 text-center 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 ${
+          isMobile ? '' : 'mt-1'
+        } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
+      >
+        {/* first */}
+        <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-${
+              isMobile ? '3.5' : '6 py-8'
+            }  md:rounded-tr-none md:rounded-br-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-text.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px] "
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Chat with Your Data
+                </h2>
+              </div>
+            ) : (
+              <>
+                <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={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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
@@ -36,12 +83,36 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-none lg:px-0">
-          <div className="h-full rounded-[21px] bg-white p-6 lg: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">
+        {/* second */}
+        <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 p-${
+              isMobile ? '3.5' : '6 py-6'
+            }  md:rounded-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </div>
+            ) : (
+              <>
+                <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={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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
@@ -49,15 +120,44 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 lg:rounded-l-none">
-          <div className="h-full rounded-[21px] bg-white p-6 lg:rounded-l-none">
-            <img
-              src="/message-programming.svg"
-              alt="lock"
-              className="h-[24px] w-[24px]"
-            />
-            <h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2>
-            <p className=" w-[250px] text-xs text-gray-500">
+        {/* third */}
+        <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 p-${
+              isMobile ? '3.5' : '6 px-6 '
+            } lg:rounded-tl-none lg:rounded-bl-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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 7ba939b00861191957c65893b03df67db4a789e8 Mon Sep 17 00:00:00 2001
From: Varun Dhand <varundhand77@gmail.com>
Date: Tue, 31 Oct 2023 18:56:18 +0530
Subject: [PATCH 2/3] feat: mobile responsive hero page

---
 frontend/src/Hero.tsx | 178 +++++++++++++++++++++++++++++++++---------
 1 file changed, 139 insertions(+), 39 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index b62823aaa..406e48f87 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,34 +1,81 @@
+import { useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function Hero({ className = '' }: { className?: string }) {
+  // const isMobile = window.innerWidth <= 768;
+  const { isMobile } = useMediaQuery();
   return (
-    <div className={`mt-14 mb-12 flex flex-col `}>
-      <div className="mb-10 flex items-center justify-center ">
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
+      <div className=" mb-2 flex items-center justify-center sm:mb-10">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
       </div>
-      <p className="mb-3 text-center leading-6 text-black-1000">
-        Welcome to DocsGPT, your technical documentation assistant!
-      </p>
-      <p className="mb-3 text-center 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.
-      </p>
-      <p className="mb-3 text-center 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-8 flex flex-col items-center justify-center gap-1 sm:gap-0 lg:flex-row">
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-r-none">
-          <div className="h-full rounded-[21px] bg-white p-6 lg:rounded-r-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">
+      {isMobile ? (
+        <p className="mb-3 text-center leading-6 text-black-1000">
+          Welcome to <span className="font-bold ">DocsGPT</span>, your technical
+          documentation assistant! Start by entering your query in the input
+          field below, and we&apos;ll provide you with the most relevant
+          answers.
+        </p>
+      ) : (
+        <>
+          <p className="mb-3 text-center leading-6 text-black-1000">
+            Welcome to DocsGPT, your technical documentation assistant!
+          </p>
+          <p className="mb-3 text-center 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.
+          </p>
+          <p className="mb-3 text-center 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 ${
+          isMobile ? '' : 'mt-1'
+        } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
+      >
+        {/* first */}
+        <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-${
+              isMobile ? '3.5' : '6 py-8'
+            }  md:rounded-tr-none md:rounded-br-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-text.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px] "
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Chat with Your Data
+                </h2>
+              </div>
+            ) : (
+              <>
+                <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={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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
@@ -36,12 +83,36 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 sm:mr-0 lg:rounded-none lg:px-0">
-          <div className="h-full rounded-[21px] bg-white p-6 lg: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">
+        {/* second */}
+        <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 p-${
+              isMobile ? '3.5' : '6 py-6'
+            }  md:rounded-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Secure Data Storage
+                </h2>
+              </div>
+            ) : (
+              <>
+                <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={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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
@@ -49,15 +120,44 @@ export default function Hero({ className = '' }: { className?: string }) {
             </p>
           </div>
         </div>
-        <div className="relative mb-4 h-60 rounded-[25px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 lg:rounded-l-none">
-          <div className="h-full rounded-[21px] bg-white p-6 lg:rounded-l-none">
-            <img
-              src="/message-programming.svg"
-              alt="lock"
-              className="h-[24px] w-[24px]"
-            />
-            <h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2>
-            <p className=" w-[250px] text-xs text-gray-500">
+        {/* third */}
+        <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 p-${
+              isMobile ? '3.5' : '6 px-6 '
+            } lg:rounded-tl-none lg:rounded-bl-none`}
+          >
+            {/* Add Mobile check here */}
+            {isMobile ? (
+              <div className="flex justify-center">
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mb-0 pl-1 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </div>
+            ) : (
+              <>
+                <img
+                  src="/message-programming.svg"
+                  alt="lock"
+                  className="h-[24px] w-[24px]"
+                />
+                <h2 className="mt-2 mb-3 text-lg font-bold">
+                  Open Source Code
+                </h2>
+              </>
+            )}
+            <p
+              className={
+                isMobile
+                  ? `w-[250px] text-center text-xs text-gray-500`
+                  : `w-[250px] text-xs text-gray-500`
+              }
+            >
               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 353e24f1c5dd9cdce883a6f40e04ea47c9de194e Mon Sep 17 00:00:00 2001
From: Varun Dhand <varundhand77@gmail.com>
Date: Wed, 1 Nov 2023 03:56:48 +0530
Subject: [PATCH 3/3] fix: container layout for firefox

---
 frontend/src/Hero.tsx  |  2 +-
 frontend/src/index.css | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 406e48f87..cb55ca1fe 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -123,7 +123,7 @@ export default function Hero({ className = '' }: { className?: string }) {
         {/* third */}
         <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 p-${
+            className={`firefox rounded-[45px] bg-white p-${
               isMobile ? '3.5' : '6 px-6 '
             } lg:rounded-tl-none lg:rounded-bl-none`}
           >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 256367b4a..4d881fe08 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -364,3 +364,17 @@ template {
   color: #9ca3af;
   opacity: 1;
 }
+
+/* third container laylout for Firefox */
+@-moz-document url-prefix() {
+  .firefox{
+    padding: 32px;
+  }
+}
+
+/* For screens with a maximum width of 768px (mobile) */
+@media (max-width: 768px) {
+  .firefox {
+    padding: 16px;
+  }
+}
\ No newline at end of file