diff --git a/src/App.jsx b/src/App.jsx index ef8480d..1062920 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -32,6 +32,7 @@ import InvestorManagementPage from "./Pages/InvestorManagementPage"; import FinancialServices from './Pages/FinancialServices' import FullServiceFund from './Pages/FullServiceFund'; import { PiSelectionInverseThin } from "react-icons/pi"; +import FeedbackPage from './Pages/FeedbackForm'; import Notfound from './Components/Notfound/Notfound'; export const ThemeContext = createContext(); @@ -79,7 +80,9 @@ const App = () => { }/> }/> }/> - }/> +} /> +} /> + diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 80ec567..57fbf43 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -27,6 +27,7 @@ const Footer = () => { }; return ( +
@@ -57,6 +58,7 @@ const Footer = () => { scrollToSection("accordian")}>
  • FAQ
  • +
  • Feedback
  • diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx index 415b84f..d99c7e7 100644 --- a/src/Components/Navbar/Navbar.jsx +++ b/src/Components/Navbar/Navbar.jsx @@ -138,6 +138,13 @@ const Navbar = () => {
    +
  • +
    + + Feedback + +
    +
  • diff --git a/src/Pages/FeedbackForm.jsx b/src/Pages/FeedbackForm.jsx new file mode 100644 index 0000000..e9ff605 --- /dev/null +++ b/src/Pages/FeedbackForm.jsx @@ -0,0 +1,111 @@ +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 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 = (e) => { + e.preventDefault(); + const subject = encodeURIComponent("Feedback and Suggestions for Improvement"); + const body = encodeURIComponent( + `Name: ${name}\nEmail: ${email}\nRating: ${rating}\nFeedback: ${feedback}` + ); + window.location.href = `mailto:maheshwaribasu4@gmail.com?subject=${subject}&body=${body}`; + }; + + return ( +
    +
    +

    We'd Love Your Feedback!

    +

    Let us know how we're doing and how we can improve.
    StartConnect-Hub

    +
    + +
    + {[1, 2, 3, 4, 5].map((value) => ( + + ))} +
    +
    +
    + + + + + + + +
    +
    +
    + ); +} + +export default FeedbackPage; diff --git a/src/Pages/feedback.css b/src/Pages/feedback.css new file mode 100644 index 0000000..bf5b813 --- /dev/null +++ b/src/Pages/feedback.css @@ -0,0 +1,94 @@ +.feedback-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 600px; + margin-top: 95px; + margin-bottom: 10px; + margin-right: 500px; + margin-left: 500px; + + } + + .feedback-form h2 { + color: #0022c9; + font-size: 28px; + margin-bottom: 5px; + } + + .feedback-form p { + color: #666; + font-size: 16px; + margin-bottom: 20px; + } + + .feedback-form .rating-container { + display: flex; + gap: 10px; + margin-bottom: 20px; + } + + .feedback-form button { + background: none; + border: none; + font-size: 24px; + cursor: pointer; + transition: transform 0.2s ease; + } + + /* Form styling */ + .feedback-form form { + display: flex; + flex-direction: column; + width: 110%; + } + + .feedback-form label { + font-size: 14px; + margin-bottom: 5px; + color: #333; + } + + .feedback-form input[type="text"], + .feedback-form input[type="email"], + .feedback-form textarea { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 14px; + margin-bottom: 15px; + width: 100%; + box-sizing: border-box; + } + + .feedback-form input[type="text"]:focus, + .feedback-form input[type="email"]:focus, + .feedback-form textarea:focus { + outline: none; + border-color: #007bff; + } + + .feedback-form textarea { + resize: vertical; + } + + .feedback-form button[type="submit"] { + background-color: #2989ffec; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; + } + + .feedback-form button[type="submit"]:hover { + background-color: #04376e; + transform: none; + }