fixed homepage

frontend/src/Hero.tsx

@@ -1,7 +1,7 @@
 export default function Hero({ className = '' }: { className?: string }) {
   return (
-    <div className={`flex flex-col ${className}`}>
-      <div className="mb-10 flex items-center justify-center">
+    <div className={`mt-14 mb-12 flex flex-col `}>
+      <div className="mb-10 flex items-center justify-center ">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <p className="text-[27px]">🦖</p>
       </div>
@@ -17,6 +17,53 @@ export default function Hero({ className = '' }: { className?: string }) {
         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">
+              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
+              provided data.
+            </p>
+          </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">
+              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
+              data is kept safe and confidential.
+            </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">
+            <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">
+              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
+              their specific needs.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/conversation/Conversation.tsx

@@ -113,7 +113,7 @@ export default function Conversation() {
   };
 
   return (
-    <div className="flex justify-center p-4">
+    <div className="flex flex-col justify-center p-4 md:flex-row">
       {queries.length > 0 && !hasScrolledToLast ? (
         <button
           onClick={scrollIntoView}
@@ -146,9 +146,11 @@ export default function Conversation() {
           })}
         </div>
       )}
-      {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-      <div className="fixed bottom-0 flex w-10/12 flex-col items-end self-center md:w-[50%]">
-        <div className="flex w-full">
+      {queries.length === 0 && (
+        <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
+      )}
+      <div className="relative bottom-0 flex w-10/12 flex-col items-end self-center md:fixed md:w-[50%]">
+        <div className="flex h-full w-full">
           <div
             ref={inputRef}
             placeholder="Type your message here..."