Merge pull request #453 from aslams2020/dev

Added a Feedback Form/Page to the Website

package.json

@@ -37,7 +37,7 @@
     "react-phone-input-2": "^2.15.1",
     "react-range-slider-input": "^3.0.7",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "react-scroll-to-top": "^3.0.0",
     "react-slick": "^0.29.0",

src/App.js

@@ -5,6 +5,7 @@ import './toastify-custom.css';
 import { getDatabase, onValue, ref } from 'firebase/database';
 import React, { createContext, useEffect, useState } from 'react';
 import FAQ from './components/faq/FAQ';
+import Feedback from './pages/FeedbackForm/Feedback';
 import {
   createBrowserRouter,
   HashRouter,
@@ -45,6 +46,7 @@ import { Account } from './components/AccountDetails/Account';
 import Contactus from './pages/Contactus/Contactus';
 import Blog from './pages/blog/blog';
 
+
 const MyContext = createContext();
 
 function App() {
@@ -349,6 +351,10 @@ function App() {
           path: '/faq',
           element: <FAQ />
         },
+        {
+          path: '/feedback',
+          element: <Feedback />
+        },
         {
           path: '/contact',
           element: <Contactus />

src/components/footer/footer.js

@@ -66,7 +66,7 @@ const Footer = () => {
         { link: '/termsandconditions', text: 'Terms & Conditions' },
         { link: '#', text: 'Contact Us' },
         { link: '/faq', text: 'FAQ' },
-        { link: '#', text: 'Careers' },
+        { link: '/feedback', text: 'Feedback' },
         { link: '#', text: 'Contributors' }
       ]
     },

src/pages/FeedbackForm/Feedback.jsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import './feedback.css';
+
+
+function FeedbackPage() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const [rating, setRating] = useState(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [feedback, setFeedback] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const getEmojis = () => {
+    switch (rating) {
+      case 1:
+        return '😡 😶 😶 😶 😶';
+      case 2:
+        return '😒 😒 😶 😶 😶';
+      case 3:
+        return '😐 😐 😐 😶 😶';
+      case 4:
+        return '😊 😊 😊 😊 😶';
+      case 5:
+        return '😁 😁 😁 😁 😁';
+      default:
+        return '😶 😶 😶 😶 😶';
+    }
+  };
+
+  const handleRatingChange = (value) => {
+    setRating(value);
+  };
+
+  const handleNameChange = (e) => {
+    setName(e.target.value);
+  };
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  const handleFeedbackChange = (e) => {
+    setFeedback(e.target.value);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+
+    // Simulate API call or form submission delay (remove in actual implementation)
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    // Simulated success
+    setSubmitting(false);
+
+    alert('Your feedback has been submitted successfully!');
+
+    // Reset form fields
+    setRating(null);
+    setName('');
+    setEmail('');
+    setFeedback('');
+  };
+
+  return (
+    <div className="feedback-container">
+      <div className="feedback-form">
+        <h2>Your Feedback Matters!</h2>
+        <p> Help Us Improve Your Experience.</p>
+        <div>
+          <label htmlFor="rating">Rate Your Experience:</label>
+          <div className="rating-container">
+            {[1, 2, 3, 4, 5].map((value) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => handleRatingChange(value)}
+                className={rating === value ? 'selected' : ''}
+              >
+                {getEmojis().split(' ')[value - 1]}
+              </button>
+            ))}
+          </div>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="name">Name</label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={handleNameChange}
+              placeholder="Enter your name"
+              required
+              className="form-control"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={handleEmailChange}
+              placeholder="Enter your email address"
+              required
+              className="form-control"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="feedback">Feedback</label>
+            <textarea
+              id="feedback"
+              rows="5"
+              value={feedback}
+              onChange={handleFeedbackChange}
+              placeholder="Share your thoughts with us..."
+              required
+              className="form-control"
+            ></textarea>
+          </div>
+          <button type="submit" className="btn-submit" disabled={submitting}>
+            {submitting ? 'Submitting...' : 'Submit Feedback'}
+          </button>
+        </form>
+
+      </div>
+    </div>
+  );
+}
+
+export default FeedbackPage;

src/pages/FeedbackForm/feedback.css

@@ -0,0 +1,154 @@
+.feedback-container {
+  display: flex;
+  justify-content: center;
+  height: 135vh;
+  width: 80vw;
+  margin: auto;
+}
+
+.feedback-form {
+  background: linear-gradient(to top, #3bb76b85, #0000);
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 75%; 
+  padding: 30px;
+  text-align: center;
+
+}
+
+.feedback-form h2 {
+  color: #207132;
+  font-size: 45px;
+  font-weight: 900;
+  margin-bottom: 20px;
+}
+
+.feedback-form p {
+  color: #666;
+  font-size: 26px;
+  margin-bottom: 20px;
+}
+
+.feedback-form .rating-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.feedback-form button {
+  font-size: 28px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 32px;
+  /* transition: transform 0.2s ease; */
+}
+
+.feedback-form form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.feedback-form .form-group {
+  margin-bottom: 22px;
+  text-align: left;
+  margin-left: 30px;
+}
+
+.feedback-form label {
+  font-size: 25px;
+  margin-bottom: 12px;
+  color: #333;
+  font-weight: 450;
+}
+
+.feedback-form .form-control {
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 22px;
+  width: 90%;
+  box-sizing: border-box;
+}
+
+.feedback-form .form-control:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+.feedback-form textarea {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: vertical; 
+}
+.feedback-form textarea:focus {
+  outline: none; 
+  border-color: #007bff; 
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+.feedback-form .btn-submit {
+  background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 14px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 70%;
+    margin-left: 100px;
+    text-align: center;
+    font-size: 22px;
+    transition: background-color 0.3s ease;
+    display: flex;
+    justify-content: center;
+}
+
+.feedback-form .btn-submit:hover {
+  background-color: #218838;
+}
+
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.submitted-message {
+  font-size: 18px;
+  color: #333;
+}
+
+.close-button {
+  background-color: #28a745;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+  transition: background-color 0.3s ease;
+}
+
+.close-button:hover {
+  background-color: #218838;
+}