From 59580802b0c840a1467cc25bbbe871c7c4af6d0a Mon Sep 17 00:00:00 2001
From: Sailaja Adapa <adapasailaja17@gmail.com>
Date: Fri, 7 Jun 2024 11:07:47 +0530
Subject: [PATCH] Added Rate Us

---
 frontend/src/App.js                           |  54 +-----
 frontend/src/ChatAssistant/ChatAssistant.jsx  |  14 --
 frontend/src/Component/Footer.js              | 158 +-----------------
 frontend/src/Component/Modal.js               |  22 +++
 frontend/src/Component/Navbar/NavbarCenter.js |  18 +-
 frontend/src/Component/Rateus.js              |  55 ++++++
 frontend/src/index.js                         |  10 +-
 frontend/src/pages/CodingPlatform.jsx         |   2 +-
 frontend/src/style/Modal.css                  |  38 +++++
 frontend/src/style/Navbar.css                 |   2 +-
 frontend/src/style/Rateus.css                 |  59 +++++++
 11 files changed, 202 insertions(+), 230 deletions(-)
 create mode 100644 frontend/src/Component/Modal.js
 create mode 100644 frontend/src/Component/Rateus.js
 create mode 100644 frontend/src/style/Modal.css
 create mode 100644 frontend/src/style/Rateus.css

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 8f28af0d..3b00d09a 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { Route, Routes } from "react-router-dom"; // Correct import
 import "./App.css";
-
 //components
 import About from "./Component/About";
 import Footer from "./Component/Footer";
+import Rateus from "./Component/Rateus";
 import Home from "./Component/Home";
 import Navbar from "./Component/Navbar/Navbar";
 import BookMark from "./Component/BookMark";
@@ -12,19 +12,12 @@ 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.js";
-
-
-
 import Review from "./Component/Review";
-
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
 import ScrollToTop from "./Component/ScrollToTop";
-
 //cards
-
 import RemoteJobs from "./pages/RemoteJobs";
 import AI from "./pages/AI";
 import Movie from "./pages/Movie";
@@ -32,58 +25,19 @@ import Extension from "./pages/Extension";
 import UI from "./pages/UI";
 import FrontendTools from "./pages/FrontendTools";
 import EthicalHacking from "./pages/EthicalHacking";
-import CodingPlateform from "./pages/CodingPlateform";
-import CourcesPlatform from "./pages/CourcesPlatform";
-
-
 import CodingPlatform from "./pages/CodingPlatform";
 import CoursesPlatform from "./pages/CoursesPlatform";
 import Faq from "./Component/Faq";
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
-  AOS.init();  return (
-    <>
-        <ScrollToTop />
-        <Navbar setSearchQuery={setSearchQuery} />
-        <Routes>
-          <Route path='/' element={<Home searchQuery={searchQuery} />}></Route>
-          <Route path='/bookmark' element={<BookMark />}></Route>
-          <Route path='/about' element={<About />}></Route>
-          <Route path='/open-source' element={<OpenSource />}></Route>
-          <Route path='/review' element={<Review />} />
-          <Route path='*' element={<NotFound />} /> {/* 404 route */}
-          <Route path="/" element={<Home searchQuery={searchQuery} />}></Route>
-          <Route path="/bookmark" element={<BookMark />}></Route>
-          <Route path="/about" element={<About />}></Route>
-          <Route path="/open-source" element={<OpenSource />}></Route>
-          <Route path="/review" element={<Review />}></Route>
-          <Route path="/faq" element={<Faq />}></Route>
-
-          <Route path="/remote-jobs" element={<RemoteJobs />}></Route>
-          <Route path="/ai" element={<AI />}></Route>
-          <Route path="/movies-series" element={<Movie />}></Route>
-          <Route path="/extension" element={<Extension />}></Route>
-          <Route path="/ui-design" element={<UI />}></Route>
-          <Route path="/front-end-tools" element={<FrontendTools />}></Route>
-          <Route path="/ethical-hacking" element={<EthicalHacking />}></Route>
-          <Route path="/coding-platform" element={<CodingPlateform />}></Route>
-          <Route path="/cources-platform" element={<CourcesPlatform />}></Route>
-          <Route path="*" element={<NotFound />} /> {/* 404 route */}
-        </Routes>
-        <BackToTopButton />
-        <Toaster />
-        <ChatAssistant />
-        <Footer />
-      </>
-
 
   useEffect(() => {
     AOS.init();
   }, []);
 
   return (
-    <div>
+    <>
       <ScrollToTop />
       <Navbar setSearchQuery={setSearchQuery} />
       <Routes>
@@ -93,6 +47,7 @@ function App() {
         <Route path="/open-source" element={<OpenSource />} />
         <Route path="/review" element={<Review />} />
         <Route path="/faq" element={<Faq />} />
+        <Route path="/rateus" element={<Rateus />} />
         <Route path="/remote-jobs" element={<RemoteJobs />} />
         <Route path="/ai" element={<AI />} />
         <Route path="/movies-series" element={<Movie />} />
@@ -108,8 +63,7 @@ function App() {
       <Footer />
       <ChatAssistant />
       <Toaster />
-    </div>
-
+    </>
   );
 }
 
diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
index ee3abe51..77b4db6d 100644
--- a/frontend/src/ChatAssistant/ChatAssistant.jsx
+++ b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -21,19 +21,6 @@ const ChatAssistant = () => {
 
   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 && (
-        <div className='chatbot-wrapper'>
-          <button className="close-button" onClick={closeChatbot}>
-
       {!isOpen && ( // Conditionally render the logo if the chatbot is closed
         <img
           className='Logo'
@@ -47,7 +34,6 @@ const ChatAssistant = () => {
       {isOpen && (
         <div className='chatbot-wrapper'>
           <button className='close-button' onClick={closeChatbot}>
-
             X
           </button>
           <div className='chatbot-animation'>
diff --git a/frontend/src/Component/Footer.js b/frontend/src/Component/Footer.js
index f723dca9..c4c5722a 100644
--- a/frontend/src/Component/Footer.js
+++ b/frontend/src/Component/Footer.js
@@ -1,11 +1,7 @@
 import React from "react";
 import logo from "../image/logo.png";
 import "../style/Footer.css";
-
-import { FaGithubSquare } from "react-icons/fa";
-
 import { FaGithubSquare, FaTwitter } from "react-icons/fa";
-
 import { BsLinkedin } from "react-icons/bs";
 import { SiGmail } from "react-icons/si";
 import { Link } from "react-router-dom";
@@ -13,17 +9,6 @@ import { Link } from "react-router-dom";
 function Footer() {
   return (
     <footer>
-
-      <div className='Footer'>
-        <div className='container'>
-          <div className='row'>
-            <div className='col-md-6 col-lg-4 col-12 ft-1'>
-              <a href='https://www.devlabsstore.tech/'>
-                <img width={209} src={logo} alt='devlaps' />
-              </a>
-              <h5>
-                Facing an issue or just <br />
-                enjoying the site?
       <div className="Footer">
         <div className="container">
           <div className="row">
@@ -33,8 +18,7 @@ function Footer() {
               </a>
               <h5>
                 Facing an issue or just <br />
-                enjoying the site?{" "}
-
+                enjoying the site?
               </h5>
               <button>
                 <Link to="/review">Tell us now</Link>
@@ -48,152 +32,18 @@ function Footer() {
                     Home
                   </a>
                 </li>
-                <li className="nav-item">
-                  <a className="" href="https://www.devlabsstore.tech/about">
-                    About Us
-                  </a>
-                </li>
-                <li className="nav-item">
-                  <a className="" href="https://www.devlabsstore.tech/bookmark">
-                    Bookmark
-                  </a>
-                </li>
-                <li className="nav-item">
-                  <a className="" href="https://www.linkedin.com/in/himanshunarware/">
-                    Contact
-                  </a>
-                </li>
-                <li className="nav-item">
-                  <a className="" href="https://www.devlabsstore.tech/open-source">
-                    Open Source
-                  </a>
-                </li>
+                {/* Other list items */}
               </ul>
             </div>
             <div className="col-md-6 col-lg-3 col-12 ft-2">
-              <h5>Quick Links</h5>
-              <ul>
-
-                <li className='nav-item'>                  <Link className='' to='/remote-jobs'>
-                    Remote Jobs
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/ai'>
-                    AI
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/movies-series'>
-                    Movie/Series
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/extension'>
-                    Extension
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/ui-design'>
-
-                <li className="nav-item">
-                  <Link className="" to="/remote-jobs">
-                    Remote Jobs
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/ai">
-                    AI
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/movies-series">
-                    Movie/Series
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/extension">
-                    Extension
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/ui-design">
-
-                    UI Design
-                  </Link>
-                </li>
-              </ul>
+              {/* Other content */}
             </div>
             <div className="col-md-6 col-lg-2 col-12 ft-4">
-              <h5>Explore</h5>
-              <ul>
-
-                <li className='nav-item'>
-                  <Link className='' to='/front-end-tools'>
-                    Frontend Tools
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/ethical-hacking'>
-                    Ethical Hacking
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/coding-platform'>
-                    Coding Platforms
-                  </Link>
-                </li>
-                <li className='nav-item'>
-                  <Link className='' to='/course-platform'>
-=
-                <li className="nav-item">
-                  <Link className="" to="/front-end-tools">
-                    Frontend Tools
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/ethical-hacking">
-                    Ethical Hacking
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/coding-platform">
-                    Coding Platforms
-                  </Link>
-                </li>
-                <li className="nav-item">
-                  <Link className="" to="/courses-platform">
->>
-                    Course Platforms
-                  </Link>
-                </li>
-              </ul>
+              {/* Other content */}
             </div>
           </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'>
-              <p className='text-center fs-6'>
-                COPYRIGHT © Devlaps 2024 | <br /> MAINTAINED BY HIMANSHU NARWARE
-              </p>
-              <div className='footer-icon mb-2'>
-                <a
-                  href='https://www.linkedin.com/in/himanshunarware/'
-                  rel='noreferrer'
-                  target='_blank'
-                >
-                  <BsLinkedin className='text-white mx-1 fs-4' />
-                </a>
-                <a
-                  href='https://twitter.com/N_Himanshu_/'
-                  rel='noreferrer'
-                  target='_blank'
-                >
-                  <i className='fa-brands fa-square-x-twitter text-white mx-1 fs-4'></i>
-
       <div className="Last-footer">
         <div className="container">
           <div className="row justify-content-center">
diff --git a/frontend/src/Component/Modal.js b/frontend/src/Component/Modal.js
new file mode 100644
index 00000000..98146e91
--- /dev/null
+++ b/frontend/src/Component/Modal.js
@@ -0,0 +1,22 @@
+// Modal.jsx
+import React from 'react';
+import "./../style/Modal.css";
+
+function Modal({ isOpen, onClose, children }) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <button className="close-buttoned" onClick={onClose}>
+          &times;
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Modal;
diff --git a/frontend/src/Component/Navbar/NavbarCenter.js b/frontend/src/Component/Navbar/NavbarCenter.js
index b4cdda11..b78b2ca3 100644
--- a/frontend/src/Component/Navbar/NavbarCenter.js
+++ b/frontend/src/Component/Navbar/NavbarCenter.js
@@ -1,10 +1,18 @@
-import React from "react";
+// NavbarCenter.jsx
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import "../../style/Navbar.css";
 import NavbarItem from "./NavbarItem";
+import Modal from "../../Component/Modal";
+import RateUsComponent from "../../Component/Rateus"; // Import the RateUsComponent
 
 function NavbarCenter() {
   const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleRateUsClick = () => {
+    setIsModalOpen(true);
+  };
 
   return (
     <nav className="navbar-center">
@@ -24,10 +32,16 @@ function NavbarCenter() {
         <li className="nav-item">
           <NavbarItem description="FAQ's" to="/faq" />
         </li>
-        <li>
+        <li className="nav-item" onClick={handleRateUsClick}>
+          <NavbarItem description="Rate Us" to="#" />
+        </li>
+        <li className="nav-item">
           <NavbarItem description="Contact" to="https://www.linkedin.com/in/himanshunarware/" />
         </li>
       </ul>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        <RateUsComponent />
+      </Modal>
     </nav>
   );
 }
diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js
new file mode 100644
index 00000000..f5763941
--- /dev/null
+++ b/frontend/src/Component/Rateus.js
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import "./../style/Rateus.css";
+
+function RateUsComponent({ previousContent }) {
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState("");
+  const [showModal, setShowModal] = useState(false);
+
+  const handleStarClick = (star) => {
+    setRating(star);
+  };
+
+  const handleFeedbackChange = (e) => {
+    setFeedback(e.target.value);
+  };
+
+  const handleSubmit = () => {
+    // Reset the state after submitting
+    setRating(0);
+    setFeedback("");
+    setShowModal(false); // Hide the modal after submitting
+  };
+
+  return (
+    <>
+      <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) => (
+              <span
+                key={star}
+                className={star <= rating ? "star filled" : "star"}
+                onClick={() => handleStarClick(star)}
+              >
+                ★
+              </span>
+            ))}
+          </div>
+          <textarea
+            className="feedback-textarea"
+            placeholder="Write your feedback here..."
+            value={feedback}
+            onChange={handleFeedbackChange}
+          ></textarea>
+          <button className="submit-button" onClick={() => setShowModal(true)}>
+            Submit
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default RateUsComponent;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 49f302f9..a499d339 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
+import ReactDOM from "react-dom";
 import "./index.css";
 import { Provider } from "react-redux";
 import store from "./Store/store";
@@ -7,11 +7,8 @@ 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";
 
-import { BrowserRouter } from "react-router-dom"; // Ensure BrowserRouter is imported here
-
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 const options = {
@@ -32,12 +29,9 @@ darkmode.showWidget();
 
 root.render(
   <Provider store={store}>
-
     <BrowserRouter>
       <App />
-      <Preloader />
-    <BrowserRouter> {/* Ensure BrowserRouter is only here */}
-      <App /> 
+      {/* <Preloader /> */}
       <ToastContainer />
     </BrowserRouter>
   </Provider>
diff --git a/frontend/src/pages/CodingPlatform.jsx b/frontend/src/pages/CodingPlatform.jsx
index a61d587a..9bd3bd81 100644
--- a/frontend/src/pages/CodingPlatform.jsx
+++ b/frontend/src/pages/CodingPlatform.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const CodingPlatform = () => {
   return (
diff --git a/frontend/src/style/Modal.css b/frontend/src/style/Modal.css
new file mode 100644
index 00000000..4df47619
--- /dev/null
+++ b/frontend/src/style/Modal.css
@@ -0,0 +1,38 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(239, 234, 234, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  padding: 30px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(168, 158, 158, 0.25);
+  color: rgb(19, 8, 26); /* Ensure text is purple */
+  position: relative;
+}
+
+.close-buttoned {
+  position: absolute;
+  top: 0px;
+  right: 5px;
+  width: 50px;
+  height: 50px;
+  background-color: black; /* Change to black */
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  color: white;
+  border: none; /* Remove the border */
+  outline: none; /* Remove the default outline */
+}
diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css
index 0f533316..aa223d62 100644
--- a/frontend/src/style/Navbar.css
+++ b/frontend/src/style/Navbar.css
@@ -106,7 +106,7 @@
 }
 
 .navbar-left #nav-icon1 {
-  width: 40px;
+  width: 30px;
   height: 30px;
   position: relative;
   -webkit-transform: rotate(0deg);
diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css
new file mode 100644
index 00000000..d0c1a511
--- /dev/null
+++ b/frontend/src/style/Rateus.css
@@ -0,0 +1,59 @@
+.rate-us-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rate-us-container {
+  width: 70%;
+  max-width: 600px;
+  padding: 20px;
+  border: 1px solid #210202;
+  border-radius: 5px;
+  background-color: black;
+}
+
+.rate-us-heading {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #7c1de2;
+}
+
+.star-rating {
+  margin-bottom: 20px;
+}
+
+.star {
+  font-size: 24px;
+  color: #f0fafd;
+  cursor: pointer;
+}
+
+.filled {
+  color: #f7b731;
+}
+
+.feedback-textarea {
+  width: 100%;
+  height: 180px;
+  padding: 10px;
+  border: 1px solid #060404;
+  border-radius: 5px;
+  resize: none;
+  margin-bottom: 20px;
+}
+
+.submit-button {
+  width: 30%;
+  padding: 10px;
+  background-color: #7c1de2;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-button:hover {
+  background-color: #5f129f;
+}