Enhance the feedback section

src/pages/Feedback.css

@@ -80,3 +80,48 @@
   text-align: center;
   font-size: 14px;
 }
+
+.feedback-subtitle {
+  font-size: 0.9rem;
+  color: #aaa;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.feedback-select {
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  background: #111;
+  color: #fff;
+}
+
+.feedback-rating {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0;
+  color: #ccc;
+}
+
+.star {
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #555;
+  transition: 0.3s;
+}
+
+.star:hover,
+.star.active {
+  color: #facc15;
+  transform: scale(1.2);
+}
+
+.feedback-success {
+  background: rgba(0, 255, 150, 0.1);
+  color: #00ffae;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  text-align: center;
+}

src/pages/Feedback.jsx

@@ -1,80 +1,204 @@
 import React, { useState } from "react";
-import "./Feedback.css"; // reuse existing theme styling
+import { motion } from "framer-motion";
+import "./Feedback.css";
 
 const Feedback = () => {
   const [formData, setFormData] = useState({
     name: "",
     email: "",
+    category: "general",
+    rating: 0,
     message: "",
+    anonymous: false,
   });
 
+  const [errors, setErrors] = useState({});
+  const [hoverRating, setHoverRating] = useState(0);
   const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+
     setFormData({
       ...formData,
-      [e.target.name]: e.target.value,
+      [name]: type === "checkbox" ? checked : value,
     });
   };
 
+  const handleRating = (value) => {
+    setFormData({ ...formData, rating: value });
+  };
+
+  const validate = () => {
+    let newErrors = {};
+
+    if (!formData.message.trim()) {
+      newErrors.message = "Feedback message is required";
+    }
+
+    if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Enter a valid email";
+    }
+
+    if (formData.rating === 0) {
+      newErrors.rating = "Please rate your experience";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    if (!formData.message.trim()) return;
+    if (!validate()) return;
 
-    setSubmitted(true);
+    setLoading(true);
 
-    setFormData({
-      name: "",
-      email: "",
-      message: "",
-    });
+    setTimeout(() => {
+      setSubmitted(true);
+      setLoading(false);
+
+      setFormData({
+        name: "",
+        email: "",
+        category: "general",
+        rating: 0,
+        message: "",
+        anonymous: false,
+      });
+
+      setTimeout(() => setSubmitted(false), 3000);
+    }, 1200);
   };
 
   return (
-  <div className="feedback-container">
-    <div className="feedback-card">
-      <h2 className="feedback-title">Share Your Feedback</h2>
-
-      {submitted && (
-        <div className="feedback-success">
-          ✅ Thank you! Your feedback has been submitted.
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="feedback-form">
-        <input
-          type="text"
-          name="name"
-          placeholder="Your Name (Optional)"
-          value={formData.name}
-          onChange={handleChange}
-        />
-
-        <input
-          type="email"
-          name="email"
-          placeholder="Your Email (Optional)"
-          value={formData.email}
-          onChange={handleChange}
-        />
-
-        <textarea
-          name="message"
-          placeholder="Your Feedback *"
-          required
-          rows="5"
-          value={formData.message}
-          onChange={handleChange}
-        />
-
-        <button type="submit" className="feedback-button">
-          Submit Feedback
-        </button>
-      </form>
+    <div className="feedback-container">
+      <motion.div
+        className="feedback-card glass-panel"
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+      >
+        <h2 className="feedback-title">💬 Share Your Feedback</h2>
+        <p className="feedback-subtitle">
+          Help us improve your crypto experience.
+        </p>
+
+        {/* SUCCESS MESSAGE */}
+        {submitted && (
+          <motion.div
+            className="feedback-success"
+            initial={{ scale: 0.8 }}
+            animate={{ scale: 1 }}
+          >
+            🎉 Thank you! Your feedback matters.
+          </motion.div>
+        )}
+
+        <form onSubmit={handleSubmit} className="feedback-form">
+
+          {/* NAME */}
+          {!formData.anonymous && (
+            <input
+              type="text"
+              name="name"
+              placeholder="Your Name"
+              value={formData.name}
+              onChange={handleChange}
+            />
+          )}
+
+          {/* EMAIL */}
+          {!formData.anonymous && (
+            <>
+              <input
+                type="email"
+                name="email"
+                placeholder="Your Email"
+                value={formData.email}
+                onChange={handleChange}
+              />
+              {errors.email && (
+                <span className="error">{errors.email}</span>
+              )}
+            </>
+          )}
+
+          {/* ANONYMOUS */}
+          <label className="checkbox">
+            <input
+              type="checkbox"
+              name="anonymous"
+              checked={formData.anonymous}
+              onChange={handleChange}
+            />
+            Submit anonymously
+          </label>
+
+          {/* CATEGORY */}
+          <select
+            name="category"
+            value={formData.category}
+            onChange={handleChange}
+          >
+            <option value="general">General</option>
+            <option value="bug">Bug Report</option>
+            <option value="feature">Feature Request</option>
+            <option value="ui">UI/UX</option>
+          </select>
+
+          {/* RATING */}
+          <div className="feedback-rating">
+            <span>Rate your experience:</span>
+            <div className="stars">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <motion.span
+                  key={star}
+                  className={`star ${
+                    (hoverRating || formData.rating) >= star ? "active" : ""
+                  }`}
+                  onMouseEnter={() => setHoverRating(star)}
+                  onMouseLeave={() => setHoverRating(0)}
+                  onClick={() => handleRating(star)}
+                  whileHover={{ scale: 1.3 }}
+                >
+                  ★
+                </motion.span>
+              ))}
+            </div>
+          </div>
+          {errors.rating && <span className="error">{errors.rating}</span>}
+
+          {/* MESSAGE */}
+          <textarea
+            name="message"
+            placeholder="Your Feedback *"
+            rows="5"
+            maxLength="300"
+            value={formData.message}
+            onChange={handleChange}
+          />
+          <div className="char-count">
+            {formData.message.length}/300
+          </div>
+          {errors.message && (
+            <span className="error">{errors.message}</span>
+          )}
+
+          {/* SUBMIT */}
+          <motion.button
+            type="submit"
+            className="feedback-button"
+            disabled={loading}
+            whileTap={{ scale: 0.95 }}
+          >
+            {loading ? "Submitting..." : "Submit Feedback"}
+          </motion.button>
+        </form>
+      </motion.div>
     </div>
-  </div>
-);
+  );
 };
 
-export default Feedback;
+export default Feedback;