From ae04fe73ddef87c4dd0ac8d290e5ce771384373c Mon Sep 17 00:00:00 2001
From: paulkrishanu4 <paulkrishanu84@gmail.com>
Date: Sat, 1 Jun 2024 12:20:12 +0530
Subject: [PATCH 1/5] fixed scroll to top on render of new page

---
 frontend/src/App.js                          |  9 ++++++++-
 frontend/src/ChatAssistant/ChatAssistant.css |  1 +
 frontend/src/ChatAssistant/ChatAssistant.jsx |  4 +++-
 frontend/src/Component/ScrollToTop.jsx       | 14 ++++++++++++++
 frontend/src/index.css                       |  2 +-
 frontend/src/index.js                        |  8 ++------
 6 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/Component/ScrollToTop.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
index a850fece..89e98aff 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -13,13 +13,18 @@ import OpenSource from "./Component/OpenSource";
 import Review from "./Component/Review";
 import AOS from 'aos';
 import 'aos/dist/aos.css';
-
+import { BrowserRouter } from 'react-router-dom';
+import ScrollToTop from "./Component/ScrollToTop";
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
   AOS.init();
   return (
     <>
+      <BrowserRouter>
+      <ScrollToTop/>
       <Navbar setSearchQuery={setSearchQuery} />
+    
+      
       <Routes>
         <Route path="/" element={<Home searchQuery={searchQuery} />}></Route>
         <Route path="/bookmark" element={<BookMark />}></Route>
@@ -28,9 +33,11 @@ function App() {
         <Route path="/review" element={<Review />}></Route>
         <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>
+      
       <BackToTopButton />
       <Footer />
       <ChatAssistant/>
+      </BrowserRouter>
     </>
   );
 }
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
index c1cab995..6daa3d56 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.css
+++ b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -69,6 +69,7 @@
   cursor: pointer;
   height:50px;
   width:50px;
+}
 
 .Logo {
   height: 50px;
diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
index 16c88264..94bb996a 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.jsx
+++ b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -22,7 +22,7 @@ const ChatAssistant = () => {
         />
       {isOpen && 
 
-        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
+        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />}
         <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
 
        {isOpen && 
@@ -35,7 +35,9 @@ const ChatAssistant = () => {
         }
         </div>
       </div>
+
     );
   }
+
   
 export default ChatAssistant;
\ No newline at end of file
diff --git a/frontend/src/Component/ScrollToTop.jsx b/frontend/src/Component/ScrollToTop.jsx
new file mode 100644
index 00000000..8fc29c3e
--- /dev/null
+++ b/frontend/src/Component/ScrollToTop.jsx
@@ -0,0 +1,14 @@
+
+import {useEffect} from 'react'
+import { useLocation } from 'react-router-dom'
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(()=>{
+    window.scrollTo(0,0);
+  },[pathname])
+  return null;
+  
+}
+
+export default ScrollToTop;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ddc397fa..3f666386 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,7 @@
 :root,
 body,
 html {
-  overflow-x: hidden;
+  scrollbar-width: none; 
   height: 100%;
 }
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index a8a8d4e0..87024e0d 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,8 +5,8 @@ import App from './App';
 import { Provider } from 'react-redux';
 import store from './Store/store'
 import Darkmode from 'darkmode-js';
-import { BrowserRouter } from 'react-router-dom';
 import Preloader from './Component/Preloader';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 const options = {
@@ -29,12 +29,8 @@ darkmode.showWidget();
 
 
 root.render(
-  <React.StrictMode>
-    <BrowserRouter>
       <Provider store={store}>
-        {/* <App /> */}
+        { /*<App />*/ }
         <Preloader/>
       </Provider>
-    </BrowserRouter>
-  </React.StrictMode>
 );
\ No newline at end of file

From fac10d882ce5191257e2a199d054ad2801613ece Mon Sep 17 00:00:00 2001
From: mukilan2815 <mukilan2808@gmail.com>
Date: Sat, 1 Jun 2024 13:06:57 +0530
Subject: [PATCH 2/5] Errors fixed

---
 frontend/src/ChatAssistant/ChatAssistant.css |  2 +-
 frontend/src/ChatAssistant/ChatAssistant.jsx | 75 ++++++++++++--------
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
index c1cab995..1de80a91 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.css
+++ b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -69,7 +69,7 @@
   cursor: pointer;
   height:50px;
   width:50px;
-
+}
 .Logo {
   height: 50px;
   width: 50px;
diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
index 16c88264..33fa5b3e 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.jsx
+++ b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -1,12 +1,12 @@
 import Chatbot from "react-chatbot-kit";
-import 'react-chatbot-kit/build/main.css'
-import config from '../ChatBot/config.jsx';
-import MessageParser from '../ChatBot/MessageParser';
-import ActionProvider from '../ChatBot/ActionProvider';
-import "./ChatAssistant.css"
-import React, { useState } from 'react';
-import chatbotLogo from '../assets/chatbotLogo.jpeg'
-import chatbotLogo1 from '../assets/logo1.png'
+import "react-chatbot-kit/build/main.css";
+import config from "../ChatBot/config.jsx";
+import MessageParser from "../ChatBot/MessageParser";
+import ActionProvider from "../ChatBot/ActionProvider";
+import "./ChatAssistant.css";
+import React, { useState } from "react";
+import chatbotLogo from "../assets/chatbotLogo.jpeg";
+import chatbotLogo1 from "../assets/logo1.png";
 
 const ChatAssistant = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -14,28 +14,43 @@ const ChatAssistant = () => {
   const toggleChatbot = () => {
     setIsOpen(!isOpen);
   };
-    return (
-      <div className="chatbot">
-        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} 
-        onMouseEnter={() => (document.querySelector(".Logo").src = chatbotLogo1)} 
+  return (
+    <div className="chatbot">
+      <img
+        className="Logo"
+        src={chatbotLogo}
+        alt="Logo"
+        onClick={toggleChatbot}
+        onMouseEnter={() =>
+          (document.querySelector(".Logo").src = chatbotLogo1)
+        }
         onMouseLeave={() => (document.querySelector(".Logo").src = chatbotLogo)}
-        />
-      {isOpen && 
-
-        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
-        <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
-
-       {isOpen && 
-        <Chatbot
-          config={config}
-          messageParser={MessageParser}
-          actionProvider={ActionProvider}
+      />
+      {isOpen && (
+        <div>
+          <img
+            className="Logo"
+            src={chatbotLogo}
+            alt="Logo"
+            onClick={toggleChatbot}
           />
-          
-        }
+          <div
+            className={`${
+              isOpen ? "chatbot-animation" : "chatbot-close-animation"
+            }`}
+          >
+            {isOpen && (
+              <Chatbot
+                config={config}
+                messageParser={MessageParser}
+                actionProvider={ActionProvider}
+              />
+            )}
+          </div>
         </div>
-      </div>
-    );
-  }
-  
-export default ChatAssistant;
\ No newline at end of file
+      )}
+    </div>
+  );
+};
+
+export default ChatAssistant;

From 288e13eb8192f26f0c19ef542228160348d3d022 Mon Sep 17 00:00:00 2001
From: mukilan2815 <mukilan2808@gmail.com>
Date: Sat, 1 Jun 2024 13:10:05 +0530
Subject: [PATCH 3/5] closing button added

---
 frontend/src/ChatAssistant/ChatAssistant.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
index 33fa5b3e..dd342e05 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.jsx
+++ b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -14,6 +14,11 @@ const ChatAssistant = () => {
   const toggleChatbot = () => {
     setIsOpen(!isOpen);
   };
+
+  const closeChatbot = () => {
+    setIsOpen(false);
+  };
+
   return (
     <div className="chatbot">
       <img
@@ -34,6 +39,9 @@ const ChatAssistant = () => {
             alt="Logo"
             onClick={toggleChatbot}
           />
+          <button className="close-button" onClick={closeChatbot}>
+            X
+          </button>
           <div
             className={`${
               isOpen ? "chatbot-animation" : "chatbot-close-animation"

From 52a97105912edc81b437fee14b730cd69c4dd3b4 Mon Sep 17 00:00:00 2001
From: mukilan2815 <mukilan2808@gmail.com>
Date: Sat, 1 Jun 2024 13:13:14 +0530
Subject: [PATCH 4/5] changed zindex as home page is overlaying

---
 frontend/src/ChatAssistant/ChatAssistant.css |  23 +-
 frontend/src/style/Home.css                  | 503 ++++++++++---------
 2 files changed, 264 insertions(+), 262 deletions(-)

diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
index 1de80a91..003c2606 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.css
+++ b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -4,29 +4,30 @@
   right: 0;
   margin-right: 20px;
   margin-bottom: 12px;
+  z-index: 999;
 }
-.chatbot-close-animation{
+.chatbot-close-animation {
   animation: animate-close ease-in 0.3s forwards;
-
 }
-.chatbot-animation{
-  
+.chatbot-animation {
   animation: animate ease-in 0.3s forwards;
 }
 @keyframes animate {
-  from{
+  from {
     height: 0px;
     /* width: 250px; */
-  }to{
+  }
+  to {
     height: 450px;
     width: 350px;
   }
 }
 @keyframes animate-close {
-  from{
+  from {
     height: 450px;
     width: 350px;
-  }to{
+  }
+  to {
     height: 0px;
     width: 0px;
   }
@@ -65,10 +66,10 @@
   height: 45px;
 }
 
-.Logo{
+.Logo {
   cursor: pointer;
-  height:50px;
-  width:50px;
+  height: 50px;
+  width: 50px;
 }
 .Logo {
   height: 50px;
diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css
index 5d54ed6a..31a81e1e 100644
--- a/frontend/src/style/Home.css
+++ b/frontend/src/style/Home.css
@@ -1,187 +1,188 @@
 /* hero section starts */
 .hero {
-    margin-top: 5.3vh;
-    width: 100%;
-    height: 90vh;
-    position: relative;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    text-align: start;
-    background-image: url("https://t3.ftcdn.net/jpg/04/57/92/32/360_F_457923238_8zmuShXTsS2CdsXisZSIutaBqKzl5haw.jpg");
+  margin-top: 5.3vh;
+  width: 100%;
+  z-index: 0;
+  height: 90vh;
+  position: relative;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  text-align: start;
+  background-image: url("https://t3.ftcdn.net/jpg/04/57/92/32/360_F_457923238_8zmuShXTsS2CdsXisZSIutaBqKzl5haw.jpg");
 }
 :root {
-    --scrollbar-bg: white; /* Background color of the scrollbar track */
-    --scrollbar-thumb: #0d6efd; /* Color of the scrollbar thumb */
+  --scrollbar-bg: white; /* Background color of the scrollbar track */
+  --scrollbar-thumb: #0d6efd; /* Color of the scrollbar thumb */
 }
 
 /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
-    width: 6px; /* Width of the scrollbar */
+  width: 6px; /* Width of the scrollbar */
 }
 
 /* Custom scrollbar for Firefox */
 ::-webkit-scrollbar {
-    scrollbar-width: thin; /* Makes the scrollbar thin */
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Custom colors */
-    border-radius: 15px;
+  scrollbar-width: thin; /* Makes the scrollbar thin */
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Custom colors */
+  border-radius: 15px;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: var(
-        --scrollbar-bg
-    ); /* Background color of the scrollbar track */
-    border-radius: 15px;
+  background-color: var(
+    --scrollbar-bg
+  ); /* Background color of the scrollbar track */
+  border-radius: 15px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb); /* Color of the scrollbar thumb */
-    border-radius: 15px;
+  background-color: var(--scrollbar-thumb); /* Color of the scrollbar thumb */
+  border-radius: 15px;
 }
 
 @media (min-width: 768px) {
-    .hero {
-        background-position: left top;
-    }
+  .hero {
+    background-position: left top;
+  }
 }
 
 @media (max-width: 768px) {
-    .hero-heading {
-        /* margin-right:5rem; */
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
+  .hero-heading {
+    /* margin-right:5rem; */
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
 }
 .hero-text {
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .hero-container {
-    position: relative;
-    max-width: 80rem;
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-left: 3px;
-    padding-right: 3px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    height: 100%;
+  position: relative;
+  max-width: 80rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  height: 100%;
 }
 
 @media (min-width: 768px) {
-    .hero-container {
-        margin-left: 3rem;
-    }
+  .hero-container {
+    margin-left: 3rem;
+  }
 }
 
 @media (min-width: 1024px) {
-    .hero-container {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
+  .hero-container {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
 }
 
 .hero-content {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    gap: 6px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  gap: 6px;
 }
 @media (max-width: 768px) {
-    .hero-button {
-        width: 50%;
-        /* margin-left:2rem; */
-    }
-
-    .hero-content {
-        width: 100%;
-        text-align: center;
-        max-width: 100%;
-        padding-left: 0rem;
-        /* padding-right: 1rem; */
-        display: flex;
-        align-self: center;
-        justify-content: center;
-        margin-top: 6rem;
-    }
+  .hero-button {
+    width: 50%;
+    /* margin-left:2rem; */
+  }
+
+  .hero-content {
+    width: 100%;
+    text-align: center;
+    max-width: 100%;
+    padding-left: 0rem;
+    /* padding-right: 1rem; */
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    margin-top: 6rem;
+  }
 }
 @media (min-width: 1024px) {
-    .hero-content {
-        left: 2%;
-    }
+  .hero-content {
+    left: 2%;
+  }
 }
 
 .hero-heading {
-    font-weight: 500;
-    font-size: 2.5rem;
-    color: #8b5cf6;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 1rem;
-    margin-top: 5rem;
+  font-weight: 500;
+  font-size: 2.5rem;
+  color: #8b5cf6;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+  margin-top: 5rem;
 }
 
 @media (min-width: 768px) {
-    .hero-heading {
-        font-size: 3rem;
-    }
+  .hero-heading {
+    font-size: 3rem;
+  }
 }
 
 @media (min-width: 1024px) {
-    .hero-heading {
-        font-size: 4rem;
-        font-weight: 650;
-    }
+  .hero-heading {
+    font-size: 4rem;
+    font-weight: 650;
+  }
 }
 .hero-button {
-    background-color: #8b5cf6;
-    height: 3.5rem;
-    font-size: 2rem;
-    border-radius: 30px;
-    font-weight: 600;
-    margin-top: 3px;
-    border: none;
-    width: 70%;
+  background-color: #8b5cf6;
+  height: 3.5rem;
+  font-size: 2rem;
+  border-radius: 30px;
+  font-weight: 600;
+  margin-top: 3px;
+  border: none;
+  width: 70%;
 }
 
 .hero-button-container {
-    width: 100%;
+  width: 100%;
 }
 
 .hero-button:hover {
-    background: #101623;
-    border: 2px solid #8b5cf6;
-    color: white;
-    box-shadow: 4px 4px 2px #8b5cf6;
+  background: #101623;
+  border: 2px solid #8b5cf6;
+  color: white;
+  box-shadow: 4px 4px 2px #8b5cf6;
 }
 .hero-button a:hover {
-    color: white;
+  color: white;
 }
 .hero-end {
-    margin-top: 5%;
-    font-size: 1.25rem;
+  margin-top: 5%;
+  font-size: 1.25rem;
 }
 .hero-subheading {
-    margin-top: 7%;
-    font-size: 1.5rem;
-    font-weight: 500;
+  margin-top: 7%;
+  font-size: 1.5rem;
+  font-weight: 500;
 }
 
 @media (min-width: 768px) {
-    .hero-subheading {
-        font-size: 2.25rem;
-    }
+  .hero-subheading {
+    font-size: 2.25rem;
+  }
 }
 
 /* .hero-image {
@@ -189,204 +190,204 @@
 } */
 
 @media (max-width: 768px) {
-    .hero-image {
-        height: 45%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 2rem;
-    }
-    .hero {
-        height: 101vh;
-    }
-    .hero-image img {
-        height: 100%;
-        width: 100%;
-        object-fit: fill;
-        background: none;
-    }
+  .hero-image {
+    height: 45%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2rem;
+  }
+  .hero {
+    height: 101vh;
+  }
+  .hero-image img {
+    height: 100%;
+    width: 100%;
+    object-fit: fill;
+    background: none;
+  }
 }
 
 @media (min-width: 768px) {
-    .hero-image {
-        display: block;
-        position: absolute;
-        top: 40%;
-        left: 55%;
-        right: 0;
-        transform: translateY(-30%);
-        width: 45%;
-        height: auto;
-        z-index: 1;
-    }
-    .hero-image img {
-        background: none;
-    }
+  .hero-image {
+    display: block;
+    position: absolute;
+    top: 40%;
+    left: 55%;
+    right: 0;
+    transform: translateY(-30%);
+    width: 45%;
+    height: auto;
+    z-index: 1;
+  }
+  .hero-image img {
+    background: none;
+  }
 }
 /* hero section ends */
 .page-container {
-    padding-top: 5%;
-    width: 100vw;
-    max-width: 100vw;
+  padding-top: 5%;
+  width: 100vw;
+  max-width: 100vw;
 }
 .main-container {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    margin: 10px;
-    margin-top: 5rem;
-    gap: 20px;
-    animation: zoomIn 1s ease forwards;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin: 10px;
+  margin-top: 5rem;
+  gap: 20px;
+  animation: zoomIn 1s ease forwards;
 }
 
 .loading-container {
-    margin: 10px;
-    margin-top: 8rem;
+  margin: 10px;
+  margin-top: 8rem;
 }
 
 @media screen and (max-width: 1300px) {
-    .main-container {
-        grid-template-columns: repeat(3, 1fr);
-    }
+  .main-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media screen and (max-width: 900px) {
-    .main-container {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .main-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media screen and (max-width: 550px) {
-    .main-container {
-        grid-template-columns: repeat(1, 1fr);
-    }
+  .main-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
 
 .content-box-home {
-    background-color: #101623;
-    border: 2px solid rgba(79, 71, 125, 255);
-    margin: 20px;
-    padding: 7px 12px;
-    border-radius: 12px;
-    box-shadow: 2px 2px 8px rgba(79, 71, 125, 255);
+  background-color: #101623;
+  border: 2px solid rgba(79, 71, 125, 255);
+  margin: 20px;
+  padding: 7px 12px;
+  border-radius: 12px;
+  box-shadow: 2px 2px 8px rgba(79, 71, 125, 255);
 }
 
 @media screen and (max-width: 950px) {
-    .content-box-home {
-        margin: 10px;
-        padding: 5px 8px;
-        border-radius: 8px;
-        box-shadow: 2px 2px 5px rgba(79, 71, 125, 255);
-    }
+  .content-box-home {
+    margin: 10px;
+    padding: 5px 8px;
+    border-radius: 8px;
+    box-shadow: 2px 2px 5px rgba(79, 71, 125, 255);
+  }
 }
 
 .content-box-home:hover {
-    transform: scale(1.1);
-    box-shadow: 0px 0px 25px #8b5cf6;
-    transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 25px #8b5cf6;
+  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
 .content-box-home {
-    transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
+  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
 .container-box-home {
-    transition: 1s ease;
+  transition: 1s ease;
 }
 
 .content-box-text {
-    color: white;
-    padding: 4px;
-    min-height: 80px;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    margin-bottom: 1rem;
-    height: 100px;
+  color: white;
+  padding: 4px;
+  min-height: 80px;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  margin-bottom: 1rem;
+  height: 100px;
 }
 
 .logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 10px;
-    margin-top: 10px;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
 .btn-booked-box,
 .btn-b-box {
-    color: rgb(255, 255, 255);
-    font-size: 1.1rem;
-    border: 1px solid #8b5cf6;
-    margin-inline: 10px;
-    padding: 6px 16px 6px 16px;
-    background: transparent;
-    margin-bottom: 10px;
-    border-radius: 6px;
-    box-shadow: 1px 1px rgb(0, 0, 0, 0.5);
-    background-color: #8b5cf6;
-    cursor: pointer;
+  color: rgb(255, 255, 255);
+  font-size: 1.1rem;
+  border: 1px solid #8b5cf6;
+  margin-inline: 10px;
+  padding: 6px 16px 6px 16px;
+  background: transparent;
+  margin-bottom: 10px;
+  border-radius: 6px;
+  box-shadow: 1px 1px rgb(0, 0, 0, 0.5);
+  background-color: #8b5cf6;
+  cursor: pointer;
 }
 .btn-booked-box {
-    border: 2px dashed #8b5cf6;
-    color: white;
-    cursor: pointer;
-    background: transparent;
+  border: 2px dashed #8b5cf6;
+  color: white;
+  cursor: pointer;
+  background: transparent;
 }
 
 .btn-booked-box:hover {
-    color: white;
-    cursor: pointer;
-    background-color: #8b5cf6;
+  color: white;
+  cursor: pointer;
+  background-color: #8b5cf6;
 }
 
 .btn-b-box:hover {
-    background: transparent;
-    cursor: pointer;
-    box-shadow: 2px 2px 1px #8b5cf6;
+  background: transparent;
+  cursor: pointer;
+  box-shadow: 2px 2px 1px #8b5cf6;
 }
 
 .popup {
-    position: fixed;
-    top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #4caf50;
-    color: #fff;
-    padding: 10px;
-    border-radius: 5px;
-    z-index: 1000;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #4caf50;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1000;
 }
 
 .checkmark {
-    display: inline-block;
-    position: relative;
-    top: 5px;
-    width: 22px;
-    height: 22px;
-    -ms-transform: rotate(45deg);
-    /* IE 9 */
-    -webkit-transform: rotate(45deg);
-    /* Chrome, Safari, Opera */
-    transform: rotate(45deg);
+  display: inline-block;
+  position: relative;
+  top: 5px;
+  width: 22px;
+  height: 22px;
+  -ms-transform: rotate(45deg);
+  /* IE 9 */
+  -webkit-transform: rotate(45deg);
+  /* Chrome, Safari, Opera */
+  transform: rotate(45deg);
 }
 
 .checkmark_stem {
-    position: absolute;
-    width: 3px;
-    height: 14px;
-    background-color: #ccc;
-    left: 11px;
-    top: 2.5px;
+  position: absolute;
+  width: 3px;
+  height: 14px;
+  background-color: #ccc;
+  left: 11px;
+  top: 2.5px;
 }
 
 .checkmark_kick {
-    position: absolute;
-    width: 6px;
-    height: 3px;
-    background-color: #ccc;
-    left: 6px;
-    top: 14px;
+  position: absolute;
+  width: 6px;
+  height: 3px;
+  background-color: #ccc;
+  left: 6px;
+  top: 14px;
 }

From 1bda4b0faf983a3c55da95f14e9ff640ff14a6be Mon Sep 17 00:00:00 2001
From: mukilan2815 <mukilan2808@gmail.com>
Date: Sat, 1 Jun 2024 13:14:32 +0530
Subject: [PATCH 5/5] close button ui

---
 frontend/src/ChatAssistant/ChatAssistant.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
index 003c2606..40f93dc1 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.css
+++ b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -90,7 +90,15 @@
   width: 50px;
   border-radius: 50px;
 }
-
+.close-button {
+  background-color: #55a0ea;
+  height: 45px;
+  width: 45px;
+  border-radius: 50px;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+}
 @media only screen and (max-width: 425px) {
   .chatbot {
     margin-right: 5px;