Added Hover effect

frontend/src/App.js

@@ -4,35 +4,37 @@ import "./App.css";
 import About from "./Component/About";
 import Footer from "./Component/Footer";
 import Rateus from "./Component/Rateus";
+import ChatAssistant from "./ChatAssistant/ChatAssistant";
 import Home from "./Component/Home";
 import Navbar from "./Component/Navbar/Navbar";
-import BookMark from "./Component/BookMark";
-import ChatAssistant from "./ChatAssistant/ChatAssistant";
 import NotFound from "./Component/NotFound";
 import BackToTopButton from "./Component/BackToTopButton";
 import OpenSource from "./Component/OpenSource";
 import Review from "./Component/Review";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
+import BookMark from "./Component/BookMark";
 import ScrollToTop from "./Component/ScrollToTop";
 //cards
 import RemoteJobs from "./pages/RemoteJobs";
 import AI from "./pages/AI";
+import UI from "./pages/UI";
 import Movie from "./pages/Movie";
 import Extension from "./pages/Extension";
-import UI from "./pages/UI";
-import FrontendTools from "./pages/FrontendTools";
 import EthicalHacking from "./pages/EthicalHacking";
-import Faq from "./Component/Faq";
-import CodingPlatform from "./pages/CodingPlatform"; // Corrected import
+import CodingPlatform from "./pages/CodingPlateform";
 import CoursesPlatform from "./pages/CoursesPlatform";
+import FrontendTools from "./pages/FrontendTools";
+import Faq from "./Component/Faq";
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
+
   useEffect(() => {
     AOS.init();
   }, []);
+
   return (
     <>
       <ScrollToTop />
@@ -53,10 +55,8 @@ function App() {
         <Route path="/front-end-tools" element={<FrontendTools />} />
         <Route path="/ethical-hacking" element={<EthicalHacking />} />
         <Route path="/coding-platform" element={<CodingPlatform />} />
-
-        <Route path="/courses-platform" element={<CoursesPlatform />}/>
-        {/* Define other routes as needed */}
-<Route path="*" element={<NotFound />} /> {/* 404 route */}
+        <Route path="/courses-platform" element={<CoursesPlatform />} />
+        <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>
       <BackToTopButton />
       <Footer />

frontend/src/Component/Rateus.js

@@ -1,14 +1,12 @@
 import React, { useState } from "react";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import "./../style/Rateus.css";
 
 function RateUsComponent({ previousContent }) {
   const [rating, setRating] = useState(0);
   const [feedback, setFeedback] = useState("");
 
-  const handleStarClick = (star) => {
-    setRating(star);
+  const handleIconClick = (iconIndex) => {
+    setRating(iconIndex + 1);
   };
 
   const handleFeedbackChange = (e) => {
@@ -21,14 +19,8 @@ function RateUsComponent({ previousContent }) {
       // Reset the state after submitting
       setRating(0);
       setFeedback("");
-      // Show toast message
-      toast.success("Thanks For Your Feedback :)", {
-        position: "top-center"
-      });
+      // Provide feedback here (you can replace this with your custom feedback mechanism)
     } else {
-      toast.error("Please Enter All Details :(", {
-        position: "top-center"
-      });
     }
   };
 
@@ -37,14 +29,18 @@ function RateUsComponent({ previousContent }) {
       <div className="rate-us-page">
         <div className="rate-us-container">
           <h2 className="rate-us-heading">Rate Our Website</h2>
-          <div className="star-rating">
-            {[1, 2, 3, 4, 5].map((star) => (
+          <div className="icon-rating">
+            {[0, 1, 2, 3, 4].map((index) => (
               <span
-                key={star}
-                className={star <= rating ? "star filled" : "star"}
-                onClick={() => handleStarClick(star)}
+                key={index}
+                className={`icon ${index === rating - 1 ? "selected" : ""}`}
+                onClick={() => handleIconClick(index)}
               >
-                ★
+                {index === 0 && "😞"}
+                {index === 1 && "😐"}
+                {index === 2 && "😊"}
+                {index === 3 && "😃"}
+                {index === 4 && "😍"}
               </span>
             ))}
           </div>
@@ -59,7 +55,6 @@ function RateUsComponent({ previousContent }) {
           </button>
         </div>
       </div>
-      <ToastContainer />
     </>
   );
 }

frontend/src/index.js

@@ -1,38 +1,37 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import { Provider } from "react-redux";
-import store from "./Store/store";
-import Darkmode from "darkmode-js";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import App from "./App";
-import { BrowserRouter } from "react-router-dom";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-
-const options = {
-  bottom: "unset",
-  left: "15px",
-  time: "0.5s",
-  mixColor: "#fff",
-  backgroundColor: "#051626",
-  buttonColorDark: "#8758f6",
-  buttonColorLight: "#FFFBF5",
-  saveInCookies: true,
-  label: "🌓",
-  autoMatchOsTheme: true,
-};
-
-const darkmode = new Darkmode(options);
-darkmode.showWidget();
-
-root.render(
-  <Provider store={store}>
-    <BrowserRouter>
-      <App />
-      {/* <Preloader /> */}
-      <ToastContainer />
-    </BrowserRouter>
-  </Provider>
-);
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import { Provider } from "react-redux";
+import store from "./Store/store";
+import "react-toastify/dist/ReactToastify.css";
+import App from "./App";
+import { ToastContainer } from "react-toastify";
+import Darkmode from "darkmode-js";
+import { BrowserRouter } from "react-router-dom";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+const options = {
+  bottom: "unset",
+  left: "15px",
+  time: "0.5s",
+  mixColor: "#fff",
+  backgroundColor: "#fff",
+  buttonColorDark: "#f0f0f0",
+  buttonColorLight: "#100f2c",
+  saveInCookies: true,
+  label: "🌓",
+  autoMatchOsTheme: true,
+};
+
+const darkmode = new Darkmode(options);
+darkmode.showWidget();
+
+root.render(
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+      <ToastContainer />
+    </BrowserRouter>
+  </Provider>
+);

frontend/src/style/Home.css

@@ -17,22 +17,20 @@
 }
 
 /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
-::-webkit-scrollbar {
-  width: 6px; /* Width of the scrollbar */
+
+::-webkit-scrollbar-track {
+  background-color: var(
+    --scrollbar-bg
+  ); /* Background color of the scrollbar track */
+  border-radius: 15px;
 }
 
 /* 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;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(
-    --scrollbar-bg
-  ); /* Background color of the scrollbar track */
-  border-radius: 15px;
+  width: 6px; /* Width of the scrollbar */
 }
 /* contributor style */
 .contributors-section {