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