Merge pull request #153 from aarushsaboo/testX

Added a chatbot help button that is responsive and will be used to display the chatbot when clicked on.

client/src/components/ChatbotHelp.css

@@ -0,0 +1,30 @@
+.chatbotHelpContainer {
+    position: fixed;
+    display: flex;
+    bottom: 10px; /* Adjust this to where you want the element */
+    right: 20px; /* Adjust this to where you want the element */
+    z-index: 1000; /* Ensures it stays on top of other elements */
+}
+
+.chatbotHelpContainer svg:nth-of-type(2){
+    transform: translateX(58px);
+    z-index: 888;
+        transition: fill 0.3s ease, filter 0.3s ease;
+}
+
+.chatbotHelpContainer svg:nth-of-type(2) circle{
+    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+
+}
+.chatbotHelpContainer svg:nth-of-type(2) circle:hover{
+    fill: black;
+}
+.chatbotHelpContainer svg:nth-of-type(1):hover ~ svg:nth-of-type(2) circle{
+    fill: black;
+}
+.chatbotHelpContainer svg:nth-of-type(1){
+    transform: translate(175px, 85px);
+    z-index: 889;
+    cursor: pointer;
+}

client/src/components/ChatbotHelp.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "./ChatbotHelp.css";
+
+const ChatbotHelp = () => {
+  return (
+    <div className="chatbotHelpContainer">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="auto"
+        viewBox="0 -960 960 960"
+        width="32px"
+        fill="white"
+      >
+        <path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z" />
+      </svg>
+      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="100" cy="100" r="26" fill="rgb(253, 134, 75)" />
+      </svg>
+    </div>
+  );
+};
+
+export default ChatbotHelp;

client/src/pages/Home.jsx

@@ -3,6 +3,7 @@ import Carousel from '../components/Carousel'
 import CategoriesHead from '../components/TopCategoriesHead'
 import TopCategoriesList from '../components/TopCategoriesList'
 import BuyCard from '../components/BuyCards'
+import ChatbotHelp from '../components/ChatbotHelp'
 
 function Home() {
   return (
@@ -16,6 +17,7 @@ function Home() {
         <CategoriesHead title="Supersaver" greenTitle="Up to 50% off"/>
         <BuyCard/>
       </div>
+      <ChatbotHelp />
     </>
   )
 }