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] 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 b62823aa..406e48f8 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