Created the feedbback form (#486)

Co-authored-by: Arnab Mondal <[email protected]>

src/App.jsx

@@ -24,7 +24,8 @@ import NgoProfile from './pages/ngo/ngoProfile';
 import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront';
 import requestPermission from './utils/Functions/notifyService';
 import TeamPage from './pages/shared/team';
-import NotFound from './Components/shared/PageNotfound';
+
+import Feedback from './pages/user/ReportIncidentPages/FeedbackForm/Feedback';
 import RecoveredsPage from './pages/user/RecoveredsPage/RecoveredsPage';
 import HappyRecoveriesPage from './pages/user/RecoveredsPage/HappyRecoveriesPage';
 
@@ -45,6 +46,7 @@ function App() {
     <div>
       <Router>
         <UserProvider>
+
           <NgoProvider>
             <Navbar /> {/* Renders the Navbar component */}
             <Routes>
@@ -70,8 +72,10 @@ function App() {
               <Route path="/team" element={<TeamPage />} />
               <Route path="/recovereds-page" element={<RecoveredsPage />} />
               <Route path="/happy-recoveries" element={<HappyRecoveriesPage />} />
+                    <Route path='/feedback' element={<Feedback/>}/>
             </Routes>
           </NgoProvider>
+
         </UserProvider>
       </Router>
     </div>

src/pages/user/ReportIncidentPages/FeedbackForm/Feedback.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import  { useContext, useEffect, useState } from "react";
+import InputField from "../../../../Components/shared/InputField";
+import Background from "../../../../Components/shared/Background";
+import './feedBack.css'
+import Button from '../../../../Components/shared/Button';
+
+const Feedback = () => {
+  return (
+    <div className='w-screen h-screen flex justify-center items-center border-2 '>
+        <Background/>
+        <div className='relative flex flex-col justify-center items-center w-full h-full '>
+            <h2 className='main-head font-Calistoga tracking-wide text-[#0B0553DE] '>Feedback</h2>
+        <div className='outer-main bg-opacity-15 w-[40%] h-[60%] md:w-[75%] sm:w-[80%] backdrop-blur-[6px] shadow-dashBoardCardImageShadow mb-12 flex flex-col items-center justify-evenly'>
+            {/* star rating section */}
+            <div className='rating-main w-[70%] gap-2'>
+                <div className='rating-title font-Calistoga tracking-wide text-[#0B0553DE]'>
+                   How much would you like to rate us? 
+                </div>
+                <div class="rate">
+    <input type="radio" id="star5" className="rate" value="5" />
+    <label for="star5" title="text">5 stars</label>
+    <input type="radio" id="star4" className="rate" value="4" />
+    <label for="star4" title="text">4 stars</label>
+    <input type="radio" id="star3" className="rate" value="3" />
+    <label for="star3" title="text">3 stars</label>
+    <input type="radio" id="star2" className="rate" value="2" />
+    <label for="star2" title="text">2 stars</label>
+    <input type="radio" id="star1" className="rate" value="1" />
+    <label for="star1" title="text">1 star</label>
+  </div>
+            </div>
+            <div className='suggestion w-[70%] gap-4'>
+            <div className='rating-title font-Calistoga tracking-wide text-[#0B0553DE]'>
+                   Please write your suggestions below:
+                </div>
+                <textarea
+                className="pt-3 pl-2  m-auto rounded-[10px] border-0 outline-none text-gray-800 w-[90%] h-12 "
+                name="description"
+
+                rows={4}
+                placeholder="Describe here"
+              ></textarea>
+            </div>
+            <div className='submit-button w-[70%] flex items-center justify-center'>
+            <Button text="Submit" clas="tracking-wider md:text-[23px] md:px-5 xs:text-[20px] xs:px-5 px-14 text-white bg-gradient-to-b from-blue-600 to-blue-800 shadow-buttonShadow focus:outline-none" onClick={(e) => {
+
+          }}/>
+            </div>
+        </div>
+        </div>
+        </div>
+  )
+}
+
+export default Feedback

src/pages/user/ReportIncidentPages/FeedbackForm/feedback.css

@@ -0,0 +1,107 @@
+
+.rating-title{
+    font-size: 23px;
+    font-weight: 500;
+}
+.rating-main{
+
+    position: relative;
+    padding-bottom: 16px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.suggestion{
+
+    position: relative;
+    padding-bottom: 25px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 40px;
+}
+
+.rating-main::after, .suggestion::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px; /* Height of the border */
+    background-image: linear-gradient(to left, rgba(255, 255, 255, 0),rgba(4, 22, 58, 0.148), rgba(24, 22, 58, 0.785),rgba(4, 22, 58, 0.148), rgba(255, 255, 255, 0.127));
+}
+
+
+.rate {
+
+    float: left;
+    height: 46px;
+
+}
+.rate:not(:checked) > input {
+    position:absolute;
+    top:-9999px;
+}
+.rate:not(:checked) > label {
+    float:right;
+    width:1em;
+    overflow:hidden;
+    white-space:nowrap;
+    cursor:pointer;
+    font-size:37px;
+    color:#6c6b6f85;
+}
+.rate:not(:checked) > label:before {
+    content: '★ ';
+}
+.rate > input:checked ~ label {
+    color: #ffc700;    
+}
+.rate:not(:checked) > label:hover,
+.rate:not(:checked) > label:hover ~ label {
+    color: #deb217;  
+}
+.rate > input:checked + label:hover,
+.rate > input:checked + label:hover ~ label,
+.rate > input:checked ~ label:hover,
+.rate > input:checked ~ label:hover ~ label,
+.rate > label:hover ~ input:checked ~ label {
+    color: #c59b08;
+}
+.outer-main{
+    background-image: linear-gradient(335deg,rgba(194, 193, 193, 0.168),rgba(251, 251, 251, 0.432));
+}
+.main-head{
+    font-size: 52px;
+    margin-bottom: 10px;
+    font-weight:700;
+}
+@media (max-width:1450px){
+    .main-head{
+        font-size: 50px;
+        margin-bottom: 10px;
+        font-weight:700;
+    }
+    .rating-title{
+        font-size: 17px;
+        font-weight: 500;
+    }
+}
+@media (max-width:1100px){
+    .main-head{
+        font-size: 48px;
+    }
+    .rating-title{
+        font-size: 15px;
+        font-weight: 500;
+    }
+}
+@media (max-width:500px){
+    .main-head{
+        font-size: 38px;
+    }
+    .rating-title{
+        font-size: 13px;
+        font-weight: 500;
+    }
+}

src/pages/user/ReportIncidentPages/SuccessPage.jsx

@@ -79,9 +79,16 @@ function SuccessPage() {
           </div>
           <CustomizedAccordions />
         </div>
+        <div className="text-lg">
+Give your valuable &nbsp;
+        <Link to="/feedback" className="underline underline-offset-2 font-medium active:text-blue-800">
+          feedback!
+        </Link>
+</div>
       </div>
     </div>
   );
 }
 
 export default SuccessPage;
+