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:[email protected]?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; 
+  }