Merge pull request #289 from AE-Hertz/main

closes: #263
dhairyagothi · Oct 18, 2024 · c02f1be · c02f1be
2 parents 79d20f6 + 670baa8
commit c02f1be
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 73 deletions.
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
@@ -69,7 +69,7 @@ const Herosection = () => {
                 <button type="submit" onClick={RegisterClick} className="w-20 py-2 ml-8 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Register</button>
             </div>
 
-            <div className='grid grid-cols-3 gap-4 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
+            <div className='grid grid-cols-3 gap-4 mt-32 pb-20 md:flex md:flex-row md:justify-evenly justify-items-center '>
             <div 
   type="submit" 
   onClick={ContributorCLick} 

diff --git a/frontend/src/components/chatbot.css b/frontend/src/components/chatbot.css
@@ -1,86 +1,121 @@
 .chatbot-container {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    right: 20px;
-    z-index: 1000;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  right: 20px;
+  z-index: 1000;
+}
+
+.chatbot {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.chatbot img {
+  width: 40px;
+  height: 40px;
+}
+
+.chatbox {
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  width: 300px;
+  position: absolute;
+  bottom: 70px;
+  right: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+
+.chatbox h3 {
+  margin: 0;
+  padding-bottom: 10px;
+  text-align: center;
+}
+
+.chat-output {
+  flex-grow: 1;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.chat-output p {
+  margin: 5px 0;
+  padding: 5px 10px;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+}
+
+#chatInput {
+  resize: none;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+#sendMessage {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#sendMessage:hover {
+  --tw-bg-opacity: 2;
+  background-color: rgb(28 97 211 / var(--tw-bg-opacity));
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .chatbox {
+    width: 90%; 
+    max-width: 300px; 
   }
-  
+
   .chatbot {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    width: 60px;
-    height: 60px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    width: 50px; 
+    height: 50px; 
   }
-  
+
   .chatbot img {
-    width: 40px;
-    height: 40px;
+    width: 30px; 
+    height: 30px; 
   }
-
+}
+
+@media (max-width: 480px) {
   .chatbox {
-    background-color: #f1f1f1;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    width: 300px;
-    position: absolute;
-    bottom: 70px;
-    right: 0;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    padding: 15px;
+    bottom: 60px; 
   }
-  
+
   .chatbox h3 {
-    margin: 0;
-    padding-bottom: 10px;
-    text-align: center;
+    font-size: 16px;
   }
-
-  .chat-output {
-    flex-grow: 1;
-    background-color: #fff;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-    overflow-y: auto;
-    max-height: 200px;
-  }
-
-  .chat-output p {
-    margin: 5px 0;
-    padding: 5px 10px;
-    background-color: #e0e0e0;
-    border-radius: 5px;
-  }
-
+
   #chatInput {
-    resize: none;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 10px;
+    padding: 8px;
   }
-  
+
   #sendMessage {
-    --tw-bg-opacity: 1;
-    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-    color: white;
-    border: none;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
+    padding: 8px; 
   }
-
-  #sendMessage:hover {
-    --tw-bg-opacity: 2;
-    background-color: rgb(28 97 211 / var(--tw-bg-opacity));
-
-  }
+}