Added BoxShadow Effect

frontend/src/Component/Footer.js

@@ -1,11 +1,12 @@
 import React from "react";
 import logo from "../image/logo1.png";
 import "../style/Footer.css";
+
 import {
   FaGithubSquare,
   FaLinkedinIn,
   FaFacebookF,
-  FaHome,
+  FaHome, 
   FaBookmark,
   FaQuestionCircle,
   FaRegHeart,
@@ -14,7 +15,6 @@ import {
   FaFilm,
   FaTools,
   FaLaptopCode,
-  FaUser,
   FaLock,
 } from "react-icons/fa";
 import {
@@ -27,7 +27,6 @@ import { BsYoutube, BsFillPersonLinesFill, BsCodeSlash } from "react-icons/bs";
 import { Link } from "react-router-dom";
 function Footer() {
   return (
-
     <footer>
       <div className="Footer">
         <div className="container">
@@ -37,11 +36,11 @@ function Footer() {
                 <img width={209} src={logo} alt="devlabs" />
               </a>
               <p className="footer-content">
-                Welcome to DevLabs, a website where you can search for free
-                tools that are useful for your daily needs. This application is
-                created by the incredible open-source community. On DevLabs, you
-                can discover a collection of free tools that can assist you in
-                various aspects of your life.
+                Welcome to DevLabs, a website where you can search for free tools
+                that are useful for your daily needs. This application is created
+                by the incredible open-source community. On DevLabs, you can
+                discover a collection of free tools that can assist you in various
+                aspects of your life.
               </p>
               <h3>Facing an issue or just enjoying the site?</h3>
               <button>
@@ -76,12 +75,6 @@ function Footer() {
                     <AiFillStar className="mr-2" /> Rate Us
                   </a>
                 </li>
-                <li className="nav-item">
-                  <a href="https://www.devlabsstore.tech/profile">
-                    <FaUser className="mr-2" /> My Profile
-                  </a>
-
-                </li>
                 <li className="nav-item">
                   <a href="https://www.devlabsstore.tech/open-source">
                     <FaRegHeart className="mr-2" /> Open Source
@@ -107,23 +100,28 @@ function Footer() {
                     <FaRobot className="mr-2" /> AI
                   </a>
                 </li>
+
                 <li className="nav-item">
                   <a href="/movies&series">
                     <FaFilm className="mr-2" /> Movie/Series
                   </a>
                 </li>
+
                 <li className="nav-item">
                   <a href="/extensions">
                     <FaTools className="mr-2" /> Extension
                   </a>
-                </li>
-                <li className="nav-item">
+                </li> 
+
+                <li className="nav-item"> 
                   <a href="/ui-designs">
                     <FaLaptopCode className="mr-2" /> UI Design
                   </a>
                 </li>
+
               </ul>
             </div>
+
             <div className="col-md-6 col-lg-2 col-12 ft-2 ft-last">
               <h3>Explore</h3>
               <ul>
@@ -147,44 +145,31 @@ function Footer() {
           </div>
         </div>
       </div>
-
       <div className="Last-footer">
         <div className="container">
           <div className="row justify-content-center">
             <div className="col-md-6 col-12 ft-1">
               <div className="text-center fs-6 my-3">
-                COPYRIGHT © Devlabs 2024 | <br /> MAINTAINED BY HIMANSHU NARWARE
+                COPYRIGHT © Devlaps 2024 | <br /> MAINTAINED BY HIMANSHU NARWARE
               </div>
               <div className="text-center mb-2">
-                <a
-                  href="https://github.com/sponsors/HimanshuNarware"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <a href="https://github.com/sponsors/HimanshuNarware" target="_blank" rel="noopener noreferrer">
                   <img
                     src="https://badgen.net/badge/icon/github?icon=github&label=Sponsor&color=orange"
                     alt="Sponsor Me on GitHub"
-                    style={{ height: "30px", width: "auto" }}
+                    style={{ height: '30px', width: 'auto' }}
                   />
                 </a>
               </div>
               <div className="outerD gap-4 md:gap-2">
                 <span className="icons">
                   <a href="/" target="_blank" rel="noopener noreferrer">
-                    <AiOutlineInstagram
-                      color="white"
-                      fontSize={25}
-                      className="ico"
-                    />
+                    <AiOutlineInstagram color="white" fontSize={25} className="ico" />
                   </a>
                 </span>
                 <span className="icons">
                   <a href="/" target="_blank" rel="noopener noreferrer">
-                    <AiOutlineTwitter
-                      color="white"
-                      fontSize={25}
-                      className="ico"
-                    />
+                    <AiOutlineTwitter color="white" fontSize={25} className="ico" />
                   </a>
                 </span>
                 <span className="icons">
@@ -204,25 +189,13 @@ function Footer() {
                 </span>
                 <span className="icons">
                   <a href="/" target="_blank" rel="noopener noreferrer">
-                    <FaGithubSquare
-                      color="white"
-                      fontSize={25}
-                      className="ico"
-                    />
+                    <FaGithubSquare color="white" fontSize={25} className="ico" />
                   </a>
                 </span>
                 <span className="icons">
-                  <a
-                    href="mailto:example@gmail.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <AiOutlineMail
-                      color="white"
-                      fontSize={25}
-                      className="ico"
-                    />
-                  </a>
+                  <a href="mailto:example@gmail.com" target="_blank" rel="noopener noreferrer">
+                    <AiOutlineMail color="white" fontSize={25} className="ico" />
+                  </a>  
                 </span>
               </div>
               <hr />
@@ -234,4 +207,5 @@ function Footer() {
   );
 }
 
+
 export default Footer;

frontend/src/Component/Navbar/NavbarLeft.js

@@ -21,6 +21,7 @@ function NavbarLeft(props, showSideNav) {
     e.preventDefault();
     props.setShowSideNav(!props.showSideNav);
   }
+
   function handleItemClick() {
     props.setShowSideNav(false);
   }
@@ -45,4 +46,5 @@ function NavbarLeft(props, showSideNav) {
     </span>
   );
 }
-export default NavbarLeft;
+
+export default NavbarLeft;

frontend/src/Component/Navbar/NavbarRight.js

@@ -1,60 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { BsSearch } from "react-icons/bs";
 import { RxCross2 } from "react-icons/rx";
 import "../../style/Navbar.css";
-function NavbarRight({ setSearchQuery }) {
-  const [searchQuery, setLocalSearchQuery] = useState(""); // Local state to manage search query
-
-  //debounce search query
-  useEffect(() => {
-    let timer = setTimeout(() => {
-      setSearchQuery(searchQuery);
-    }, 300);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [searchQuery, setSearchQuery]);
-
-  const handleInputChange = (e) => {
-    setLocalSearchQuery(e.target.value); // Update the search query when input changes
-  };
-  const handleSearch = (e) => {
-    e.preventDefault();
-    setSearchQuery(searchQuery); // Pass the search query to the parent component (App)
-  };
 
+function NavbarRight({ setSearchQuery }) {
   const clearSearchHandler = (e) => {
     e.preventDefault();
-    setLocalSearchQuery("");
     setSearchQuery(""); // Pass the empty search query to the parent component (App)
   };
 
   return (
     <div className="navbar-right" id="navbarTogglerDemo03">
-      <div className="search">
-        <form role="search" className="search-bar" onSubmit={handleSearch}>
-          <div className="box" focus>
-            <input
-              type="text"
-              className="input"
-              placeholder="Search . . ."
-              value={searchQuery} // Set input value to the search query
-              onChange={handleInputChange}
-            />
-
-            <button
-              className={`span ${!searchQuery && "invisible"}`}
-              type="button"
-              onClick={clearSearchHandler}
-            >
-              <RxCross2 />
-            </button>
-            <button className="span" type="submit">
-              <BsSearch />
-            </button>
-          </div>
-        </form>
-      </div>
+      {/* Any other content you want to keep in the navbar */}
     </div>
   );
 }

frontend/src/Component/Rateus.js

@@ -1,25 +1,67 @@
-import React from 'react';
+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 handleFeedbackChange = (e) => {
+    setFeedback(e.target.value);
+  };
+
+  const handleEmojiClick = (emojiIndex) => {
+    setRating(emojiIndex);
+  };
+
+  const handleSubmit = () => {
+    if (rating !== 0 && feedback.trim() !== "") {
+      setRating(0);
+      setFeedback("");
+      toast.success("Thanks For Your Feedback :)", {
+        position: "top-center"
+      });
+    } else {
+      toast.error("Please Enter All Details :(", {
+        position: "top-center"
+      });
+    }
+  };
+
+  const emojis = ["😢", "😟", "😐", "😊", "😍"];
 
-export default function Rate({ rating, setRating }) {
   return (
-    <div>
-      {[1, 2, 3, 4, 5].map((star) => (
-        <span
-          className='rate-us__icon'
-          style={{
-            cursor: 'pointer',
-            color: rating >= star ? '#0d6efd' : 'gray',
-            fontSize: '35px',
-          }}
-          onClick={() => {
-            setRating(star);
-          }}
-        >
-          ★
-        </span>
-      ))}
-    </div>
+    <>
+      <div className="rate-us-page">
+        <div className="rate-us-container">
+          <h2 className="rate-us-heading">Rate Our Website</h2>
+          <div className="emoji-rating">
+            {emojis.map((emoji, index) => (
+              <span
+                key={index}
+                className={index + 1 === rating ? "emoji selected" : "emoji"}
+                onClick={() => handleEmojiClick(index + 1)}
+              >
+                {emoji}
+              </span>
+            ))}
+          </div>
+          <textarea
+            className="feedback-textarea"
+            placeholder="Write your feedback here..."
+            value={feedback}
+            onChange={handleFeedbackChange}
+          ></textarea>
+          <button className="submit-button" onClick={handleSubmit}>
+            Submit
+
+          </button>
+        </div>
+      </div>
+      <ToastContainer />
+    </>
   );
 }
 
-
+export default RateUsComponent;
+

frontend/src/Component/Sidebar/Sidebar.js

@@ -15,7 +15,8 @@ import {
   faEnvelope,
 } from "@fortawesome/free-solid-svg-icons";
 import { FaRobot, FaUserSecret, FaFilm, FaCogs, FaLaptopCode, FaTools, FaBook, FaUsers, FaTasks } from "react-icons/fa";
-import "../../style/Sidebar.css";
+import "../../style/sidebar.css";
+
 function Sidebar({ showSideNav }) {
   const sidebarContent = [
     { name: "all", description: "All", url: "/", icon: AiFillHome },
@@ -45,6 +46,7 @@ function Sidebar({ showSideNav }) {
             <BsBookmark /> BookMark
           </Link>
         </div>
+
         <div className="sidebar-btn home-btn" key="about">
           <Link to="/about" className="Link Bookmark nav-link active" aria-current="page">
             <FontAwesomeIcon icon={faInfoCircle} /> About Us
@@ -66,7 +68,7 @@ function Sidebar({ showSideNav }) {
           </Link>
         </div>
         <div className="sidebar-btn bookmark-btn" key="rate-us">
-          <Link to="/Rate" className="Link Bookmark nav-link active" aria-current="page">
+          <Link to="/rateus" className="Link Bookmark nav-link active" aria-current="page">
             <FontAwesomeIcon icon={faStar} /> Rate Us
           </Link>
         </div>