Merge pull request #466 from MastanSayyad/new

Added "Feedback Form/Page" to "Star Connect Hub" Website

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 = () => {
  <Route path='/investormanagementpage' element={<InvestorManagementPage/>}/>
  <Route path='/financialservicesPage' element = {<FinancialServices/>}/>
  <Route path="/fullservicefund" element={<FullServiceFund/>}/>
- <Route path="*" element={<Notfound/>}/>
+<Route path="/feedback" element={<FeedbackPage />} />
+<Route path="*" element={<Notfound />} />
+
  </Routes>
  <ChatAssistant/>
  <GoToTop/>

src/Components/Footer/Footer.jsx

@@ -27,6 +27,7 @@ const Footer = () => {
  };
 
  return (
+
  <div className='footer'>
  <div className='footer-container footer-container-md'>
  <div className='footer-1'>
@@ -57,6 +58,7 @@ const Footer = () => {
  <NavLink to="/#accordian" onClick={() => scrollToSection("accordian")}>
  <li className='footer-link'>FAQ</li>
  </NavLink>
+ <NavLink to="/feedback"><li className='footer-link'>Feedback</li></NavLink>
  </ul>
  </div>
  <div className='footer-2'>

src/Components/Navbar/Navbar.jsx

@@ -138,6 +138,13 @@ const Navbar = () => {
  </NavLink>
  </div>
  </li>
+ <li>
+ <div className="nav1">
+ <NavLink to="/feedback">
+ Feedback
+ </NavLink>
+ </div>
+ </li>
  <li>
  <NavLink to="/login">
  <button className='logIn'>LOG IN</button>

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 (
+ <div className="feedback-form">
+ <div>
+ <h2>We'd Love Your Feedback!</h2>
+ <p>Let us know how we're doing and how we can improve. <br /> StartConnect-Hub</p>
+ <div>
+ <label htmlFor="rating">Rate us:</label>
+ <div className="rating-container">
+ {[1, 2, 3, 4, 5].map((value) => (
+ <button
+ key={value}
+ type="button"
+ onClick={() => handleRatingChange(value)}
+ >
+ {getEmojis().split(" ")[value - 1]} {/* Display only the selected emoji */}
+ </button>
+ ))}
+ </div>
+ </div>
+ <form onSubmit={handleSubmit}>
+ <label htmlFor="name">Your Name</label>
+ <input
+ type="text"
+ id="name"
+ value={name}
+ onChange={handleNameChange}
+ placeholder="Enter your name"
+ required
+ />
+ <label htmlFor="email">Your Email</label>
+ <input
+ type="email"
+ id="email"
+ value={email}
+ onChange={handleEmailChange}
+ placeholder="Enter your email"
+ required
+ />
+ <label htmlFor="feedback">Your Feedback</label>
+ <textarea
+ id="feedback"
+ rows="6"
+ value={feedback}
+ onChange={handleFeedbackChange}
+ placeholder="Let us know how we can improve..."
+ required
+ ></textarea>
+ <button type="submit">
+ Submit Feedback
+ </button>
+ </form>
+ </div>
+ </div>
+ );
+}
+
+export default FeedbackPage;

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; 
+ }