diff --git a/package-lock.json b/package-lock.json
index 1a6a62e..19a79fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,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",
@@ -4719,9 +4719,9 @@
}
},
"node_modules/@remix-run/router": {
- "version": "1.9.0",
- "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
- "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.0.tgz",
+ "integrity": "sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==",
"engines": {
"node": ">=14.0.0"
}
@@ -17691,11 +17691,11 @@
}
},
"node_modules/react-router": {
- "version": "6.16.0",
- "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
- "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
+ "version": "6.24.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.0.tgz",
+ "integrity": "sha512-sQrgJ5bXk7vbcC4BxQxeNa5UmboFm35we1AFK0VvQaz9g0LzxEIuLOhHIoZ8rnu9BO21ishGeL9no1WB76W/eg==",
"dependencies": {
- "@remix-run/router": "1.9.0"
+ "@remix-run/router": "1.17.0"
},
"engines": {
"node": ">=14.0.0"
@@ -17705,12 +17705,12 @@
}
},
"node_modules/react-router-dom": {
- "version": "6.16.0",
- "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
- "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
+ "version": "6.24.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.0.tgz",
+ "integrity": "sha512-960sKuau6/yEwS8e+NVEidYQb1hNjAYM327gjEyXlc6r3Skf2vtwuJ2l7lssdegD2YjoKG5l8MsVyeTDlVeY8g==",
"dependencies": {
- "@remix-run/router": "1.9.0",
- "react-router": "6.16.0"
+ "@remix-run/router": "1.17.0",
+ "react-router": "6.24.0"
},
"engines": {
"node": ">=14.0.0"
diff --git a/package.json b/package.json
index 612145b..7ca4170 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.js b/src/App.js
index 49a0340..69b8936 100644
--- a/src/App.js
+++ b/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:
},
+ {
+ path: '/feedback',
+ element:
+ },
{
path: '/contact',
element:
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 4feba00..1c49b2f 100644
--- a/src/components/footer/footer.js
+++ b/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' }
]
},
diff --git a/src/pages/FeedbackForm/Feedback.jsx b/src/pages/FeedbackForm/Feedback.jsx
new file mode 100644
index 0000000..b1323ed
--- /dev/null
+++ b/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 (
+
+
+
Your Feedback Matters!
+
Help Us Improve Your Experience.
+
+
+
+ {[1, 2, 3, 4, 5].map((value) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+export default FeedbackPage;
diff --git a/src/pages/FeedbackForm/feedback.css b/src/pages/FeedbackForm/feedback.css
new file mode 100644
index 0000000..82def18
--- /dev/null
+++ b/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;
+}
\ No newline at end of file