From 03c08b6543ed49eda6e96bd950e36bae16fa5ae9 Mon Sep 17 00:00:00 2001
From: deepeshahlawat <deepeshahlawat001@gmail.com>
Date: Wed, 12 Feb 2025 12:50:42 +0530
Subject: [PATCH 1/2] Added and Redesigned feedback page

---
 src/App.jsx                          |   1 +
 src/components/Feedback/Feedback.css | 150 +++++++++----------------
 src/components/Feedback/Feedback.jsx | 162 ++++++++++-----------------
 3 files changed, 111 insertions(+), 202 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index fa3aeaa..ca8e936 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -110,6 +110,7 @@ const App = () => {
           <Route path="/admin-dashboard" element={<AdminDashboard />} />
           <Route path="/Privacy-Policy" element={<PrivacyPolicy />} />
           <Route path="/Terms-Conditions" element={<TermsConditions />} />
+          <Route path="/Feedback" element={<Feedback />} />
           <Route path="/comingsoon" element={<ComingSoon />} />
         </Routes>
       )}
diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css
index ab9b0d4..f4549f8 100644
--- a/src/components/Feedback/Feedback.css
+++ b/src/components/Feedback/Feedback.css
@@ -1,128 +1,82 @@
-/* Container for feedback form */
-.feedback-form-container {
-  background-color: #ccdada;
-  border: 3px solid rgb(164, 2, 19);
-  border-radius: 10px;
-  padding: 50px;
-  width: 600px; /* Slightly increased width for a spacious feel */
-  margin: 50px auto;
-  color: rgb(10, 10, 10);
-  text-align: center;
-  box-shadow: 0 5px 15px rgba(6, 4, 4, 0.4);
+.feedback-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-top: 130px;
+  margin-bottom: 60px;
+  background-color: #f0f4f8;
 }
 
-/* Form headings */
-.title {
-  margin-bottom: 30px; /* Increased spacing below heading */
-  font-size: 48px; /* Increased font size for the heading */
-  color: #d20808;
-}
-
-/* Input fields styling */
-.name,
-.email,
-.message {
-  margin-top: 30px; /* Increased top margin for space between inputs */
+.feedback-card {
   width: 100%;
-  padding: 10px; /* Increased padding for larger inputs */
-  background-color: #faf5f5;
-  border: 2px solid rgb(9, 9, 8);
-  border-radius: 5px;
-  color: rgb(21, 20, 20);
-  font-size: 18px; /* Slightly increased font size for input text */
-  box-sizing: border-box;
+  max-width: 500px;
+  padding: 20px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
-textarea {
-  height: 100px; /* Increased height of the textarea */
-  resize: none;
+.feedback-title {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
 
-/* Star rating styling */
-.stars {
-  margin-top: 30px; /* Ensure consistent spacing */
-  display: flex;
-  justify-content: center;
-  margin: 10px 0;
-  gap: 20px;
+.feedback-success {
+  color: green;
+  text-align: center;
 }
 
-.star,
-.star-filled {
-  font-size: 35px; /* Slightly larger stars for better visibility */
-  cursor: pointer;
-  transition: color 0.3s;
+.feedback-error {
+  color: red;
+  text-align: center;
 }
 
-.star {
-  color: rgb(108, 106, 106);
+.feedback-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.star-filled {
-  color: gold;
+.feedback-form label {
+  font-weight: bold;
 }
 
-/* Submit button */
-.post-button {
-  margin-top: 40px; /* More space between the last input and button */
-  background-color: #000504;
-  color: #fdfafa;
-  border: 2px solid rgb(205, 6, 6);
-  padding: 15px 30px; /* Bigger button for easier clicking */
+.feedback-form input,
+.feedback-form textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
   border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
 }
 
-.post-button:hover {
-  background-color: #cbd3f5;
-  border: 2px solid rgb(8, 7, 7);
-  color: black;
-}
-
-/* Pop-up overlay styling */
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+.feedback-stars {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  gap: 5px;
 }
 
-.popup {
-  background-color: #faf9fc;
-  padding: 28px;
-  border-radius: 10px;
-  text-align: center;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
-  color: black;
-  border: 1px solid rgb(4, 4, 4);
-}
-
-.popup h3 {
-  margin-bottom: 10px;
-  color: #0d0d0d;
+.star-selected {
+  color: gold;
+  cursor: pointer;
 }
 
-.popup p {
-  margin-bottom: 20px;
-  color: #0f0e0e;
+.star-unselected {
+  color: gray;
+  cursor: pointer;
 }
 
-.close-popup-button {
-  background-color: #0a0370;
-  color: #fdfbfb;
-  border: 2px solid rgb(245, 242, 242);
-  padding: 10px 20px;
+.feedback-submit {
+  width: 100%;
+  padding: 10px;
+  background-color: #093360;
+  color: white;
+  border: none;
   border-radius: 5px;
   cursor: pointer;
+  font-size: 1rem;
 }
 
-/* .close-popup-button:hover {
-    background-color: #e3e4e5;
-  } */
+.feedback-submit:hover {
+  background-color: #031c36;
+}
diff --git a/src/components/Feedback/Feedback.jsx b/src/components/Feedback/Feedback.jsx
index 2f88c74..4ed8232 100644
--- a/src/components/Feedback/Feedback.jsx
+++ b/src/components/Feedback/Feedback.jsx
@@ -1,122 +1,76 @@
-import React, { useState } from "react";
-import "./Feedback.css";
-import Footer from "../Footer-section/Footer";
+import { useState,useEffect } from "react";
+import { Star } from "lucide-react";
+import "./feedback.css";
 import RentNavbar from "../Header-section/RentNavbar";
+import Footer from "../Footer-section/Footer";
 
-const Feedback = () => {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [rating, setRating] = useState(0);
-  const [hoverRating, setHoverRating] = useState(0);
-  const [feedback, setFeedback] = useState("");
-  const [isSubmitted, setIsSubmitted] = useState(false);
+export default function FeedbackPage() {
+  const [feedback, setFeedback] = useState({ name: "", email: "", rating: 0, message: "" });
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
-  const handleRating = (rate) => {
-    setRating(rate);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFeedback({ ...feedback, [name]: value });
+  };
+
+  const handleRating = (rating) => {
+    setFeedback({ ...feedback, rating });
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (name && email && rating && feedback) {
-      setIsSubmitted(true);
-      // Here, handle actual submission, such as sending to a backend API
-      console.log({
-        name,
-        email,
-        rating,
-        feedback,
-      });
-      // Reset form after submission
-      setName("");
-      setEmail("");
-      setRating(0);
-      setFeedback("");
-      setHoverRating(0);
+    if (feedback.name && feedback.email && feedback.message) {
+      setError("");
+      setSubmitted(true);
+      setFeedback({ name: "", email: "", rating: 0, message: "" });
+      setTimeout(() => setSubmitted(false), 3000);
     } else {
-      alert("Please fill out all fields");
+      setError("Please fill out all required fields.");
     }
   };
 
-  const closePopup = () => {
-    setIsSubmitted(false);
-  };
-
   return (
     <>
-      <div className="feedback-form-container">
-        <RentNavbar />
-
-        <form onSubmit={handleSubmit}>
-          <h1 className="title">Feedback Form</h1>
-
-          {/* Name Input */}
-          <input
-            className="name"
-            type="text"
-            placeholder="Your Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            required
-          />
-
-          {/* Email Input */}
-          <input
-            className="email"
-            type="email"
-            placeholder="Your Email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-
-          {/* Star Rating */}
-          <div className="stars">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <span
-                key={star}
-                className={
-                  star <= (hoverRating || rating) ? "star-filled" : "star"
-                }
-                onClick={() => handleRating(star)}
-                onMouseEnter={() => setHoverRating(star)}
-                onMouseLeave={() => setHoverRating(0)}
-              >
-                ★
-              </span>
-            ))}
-          </div>
-
-          {/* Feedback Textarea */}
-          <textarea
-            className="message"
-            value={feedback}
-            onChange={(e) => setFeedback(e.target.value)}
-            placeholder="Describe your experience.."
-            required
-          />
-
-          {/* Submit Button */}
-          <button type="submit" className="post-button">
-            Submit
-          </button>
-        </form>
-
-        {/* Success Pop-up */}
-        {isSubmitted && (
-          <div className="popup-overlay">
-            <div className="popup">
-              <h3>Thank You!</h3>
-              <p>Your feedback has been successfully submitted.</p>
-              <button onClick={closePopup} className="close-popup-button">
-                Close
-              </button>
+      <RentNavbar />
+      <div className="feedback-container">
+        <div className="feedback-card">
+          <h2 className="feedback-title">We Value Your Feedback</h2>
+          {submitted && <p className="feedback-success">🎉 Feedback submitted! Thank you!</p>}
+          {error && <p className="feedback-error">⚠️ {error}</p>}
+          <form onSubmit={handleSubmit} className="feedback-form">
+            <div className="input-group">
+              <label>Name</label>
+              <input type="text" name="name" value={feedback.name} onChange={handleInputChange} placeholder="Enter your name" required />
             </div>
-          </div>
-        )}
+            <div className="input-group">
+              <label>Email</label>
+              <input type="email" name="email" value={feedback.email} onChange={handleInputChange} placeholder="Enter your email" required />
+            </div>
+            <div className="input-group">
+              <label>Rating</label>
+              <div className="feedback-stars">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <Star
+                    key={star}
+                    onClick={() => handleRating(star)}
+                    className={feedback.rating >= star ? "star-selected" : "star-unselected"}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className="input-group">
+              <label>Message</label>
+              <textarea name="message" value={feedback.message} onChange={handleInputChange} placeholder="Write your feedback here..." required />
+            </div>
+            <button type="submit" className="feedback-submit">Submit Feedback</button>
+          </form>
+        </div>
       </div>
       <Footer />
     </>
   );
-};
-
-export default Feedback;
+}

From a48a3c35e1c7590c60ddd0211ba415df34f46226 Mon Sep 17 00:00:00 2001
From: deepeshahlawat <deepeshahlawat001@gmail.com>
Date: Wed, 12 Feb 2025 12:57:47 +0530
Subject: [PATCH 2/2] Fixed a issue

---
 src/components/Feedback/Feedback.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Feedback/Feedback.jsx b/src/components/Feedback/Feedback.jsx
index 4ed8232..964efd1 100644
--- a/src/components/Feedback/Feedback.jsx
+++ b/src/components/Feedback/Feedback.jsx
@@ -1,6 +1,6 @@
 import { useState,useEffect } from "react";
 import { Star } from "lucide-react";
-import "./feedback.css";
+import "./Feedback.css";
 import RentNavbar from "../Header-section/RentNavbar";
 import Footer from "../Footer-section/Footer";