Added Rate Us

src/App.css

@@ -195,8 +195,6 @@
   }
 }
 
-
-/* Additional styling for responsiveness */
 @media (max-width: 768px) {
   .contact-form {
     flex-direction: column;
@@ -209,10 +207,6 @@
   }
 }
 
-/* Info card in mars section */
-
-
-
 .card {
   border-radius: 10px;
   filter: drop-shadow(0 5px 10px 0 #ffffff);
@@ -283,8 +277,6 @@
     width: 350px;
   }
 
-  /*mars illus optimized for mobile devices*/
-
   .rover_section_img {
     display: flex;
     justify-content: center;
@@ -385,8 +377,6 @@
   height: 80%;
 }
 
-/* sidebar for mobile devices*/
-
 .sidebar-icon {
   position: absolute;
   top: 80px;

src/App.jsx

@@ -9,11 +9,8 @@ import PreLoader from './components/PreLoader/PreLoader.jsx'
 import { useState } from 'react'
 import Chatbot from './components/Chatbot/chatbot.jsx';
 
-
 function App() {
-
   const [isPreLoading, setIsPreLoading] = useState(true)
-
   return (
     <>
       {isPreLoading && <PreLoader />}
@@ -27,5 +24,4 @@ function App() {
     </>
   );
 }
-
 export default App;

src/components/Navbar/Navbar.css

@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100dvw;
+  width: 100%;
   background-image: linear-gradient(to left, rgba(10, 0, 73, 0.9), rgba(0, 0, 0, 0.9));
   color: #fff;
   padding: 1rem 2rem;
@@ -27,7 +27,7 @@
 }
 
 .navigator {
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 
 .navigator.open {
@@ -42,8 +42,6 @@
   gap: 2rem;
 }
 
-/*  */
-
 .navbar-links.open {
   display: flex;
   flex-direction: column;
@@ -71,47 +69,19 @@
   opacity: 1;
 }
 
-.navbar-list-item-contact-us {
-  opacity: 0.7;
-  list-style-type: none;
-  transition: 0.5s;
-}
-
-.active {
-  text-decoration: none;
-  opacity: 1;
-  color: rgb(0, 255, 255);
-  font-weight: bold;
-}
-
 .navbar-list-item:after {
   content: "";
-  /* Empty content for pseudo-element */
   position: absolute;
-  /* Absolute positioning for underline */
   width: 100%;
-  /* Full width of the list item */
   height: 2px;
-  /* Underline height */
   background-color: aqua;
-  /* White underline color */
   opacity: 0;
-  /* Initially hidden */
   transition: all 0.3s;
-  /* Smooth transition on hover */
   bottom: -7px;
-  /* Increased gap */
   left: 0;
-  /* Align underline to the left of the list item */
 }
 
 .navbar-list-item:hover:after {
-  /* font-size: large; */
-  opacity: 1;
-}
-
-.navbar-list-item-contact-us:hover {
-  /* font-size: large; */
   opacity: 1;
 }
 
@@ -146,7 +116,7 @@
     top: 0;
     right: 0;
     width: 30%;
-    height: 100dvh;
+    height: 100vh;
     background-color: #030013ee;
     overflow: auto;
     z-index: 10;
@@ -175,4 +145,4 @@
   .logo-img {
     width: 250px;
   }
-}
+}

src/components/Navbar/Navbar.jsx

@@ -122,7 +122,11 @@ function Navbar() {
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/about">About us</NavLink>
           </li>
           <li className="navbar-list-item" onClick={handleMenuClose}>
+
+            <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/rateus">Rate Us</NavLink>
+
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/login">AstroAccess</NavLink>
+
           </li>
           {renderContactLink()}
         </ul>

src/main.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom"
 import './index.css'
 import App from './App.jsx'
+import Rateus from './pages/Rateus/Rateus.jsx'
 import Home from "./pages/Home/Home.jsx"
 import Login from './pages/Login/page.jsx'
 import MarsRover from './pages/MarsRover/MarsRover.jsx'
@@ -18,7 +19,11 @@ const router = createBrowserRouter(
       <Route path='/marsrover' element={<MarsRover />} />
       <Route path='/nasaprojects' element={<NasaProjects />} />
       <Route path='/about' element={<About />} />
+
+      <Route path='/rateus' element={<Rateus />} />
+
       <Route path='/login' element={<Login />} />
+
       <Route path='*' element={<NotFoundPage />} />
     </Route>
   )

src/pages/Rateus/Rateus.css

@@ -0,0 +1,92 @@
+.rate-us-container {
+  border: 1px solid #ccc;
+  padding: 20px;
+  width: 350px;
+  margin: 130px auto 0;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: rgb(62, 62, 103);
+  transition: box-shadow 0.3s ease, background-color 0.3s ease;
+}
+
+.rate-us-container:hover {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  background-color: #1f244a;
+}
+
+.rate-us-container h1 {
+  margin-bottom: 20px;
+  color: black;
+  text-align: center;
+}
+
+.stars {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  cursor: pointer;
+}
+
+input[type='radio'] {
+  display: none;
+}
+
+.star {
+  color: #e4e5e9;
+  font-size: 24px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.star:hover,
+.star:hover ~ .star {
+  color: #ffc107;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+textarea {
+  width: 100%;
+  height: 120px;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  resize: none;
+  z-index: 1;
+}
+
+button {
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+.toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #4caf50;
+  color: white;
+  padding: 15px 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}

src/pages/Rateus/Rateus.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import './Rateus.css';
+
+const RateUs = () => {
+  const [rating, setRating] = useState(null);
+  const [hover, setHover] = useState(null);
+  const [feedback, setFeedback] = useState('');
+  const [showMessage, setShowMessage] = useState(false); // State for showing message
+  const [message, setMessage] = useState(''); // State for the message content
+
+  const handleSubmit = (event) => {
+    event.preventDefault(); // Prevent default form submission
+
+    // Set the message content and show the message
+    setMessage(`Thanks For Your Feedback: "${feedback}"`);
+    setShowMessage(true);
+
+    // Hide the message after 3 seconds
+    setTimeout(() => {
+      setShowMessage(false);
+      setFeedback('');
+    }, 3000);
+  };
+
+  return (
+    <div className="rate-us-container">
+      <center><h1>Rate Us</h1></center>
+      <div className="stars">
+        {[...Array(5)].map((_, index) => {
+          const ratingValue = index + 1;
+
+          return (
+            <label key={index}>
+              <input
+                type="radio"
+                name="rating"
+                value={ratingValue}
+                onClick={() => setRating(ratingValue)}
+              />
+              <span
+                className="star"
+                role="img"
+                aria-label={`${ratingValue} star`}
+                style={{
+                  color: ratingValue <= (hover || rating) ? '#ffc107' : '#e4e5e9',
+                  fontSize: '24px',
+                  cursor: 'pointer'
+                }}
+                onMouseEnter={() => setHover(ratingValue)}
+                onMouseLeave={() => setHover(null)}
+              >
+                ★
+              </span>
+            </label>
+          );
+        })}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <textarea
+          placeholder="Leave your feedback here..."
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+        />
+        <button type="submit">Submit</button>
+      </form>
+
+      {showMessage && (
+        <div className="custom-toast">
+          {message}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RateUs;