Merge https://github.com/gauravsingh1281/Rentalog.in--Frontend into n…

…ew-FAQ-section

index.html

@@ -67,15 +67,15 @@
     <!-- Chatbot Configuration --> 
     <script>
       window.embeddedChatbotConfig = {
-        chatbotId: "wQJs3fix9gu515zxNshBF",
+        chatbotId: "1LDI5LXRNDrWd6VZO4J1f",
         domain: "www.chatbase.co"
       };
     </script>
 
     <!-- Chatbot Script -->
     <script
       src="https://www.chatbase.co/embed.min.js"
-      chatbotId="wQJs3fix9gu515zxNshBF"
+      chatbotId="1LDI5LXRNDrWd6VZO4J1f"
       domain="www.chatbase.co"
       defer
     ></script>

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/react-accordion": "^1.2.1",
     "@shadcn/ui": "^0.0.4",
     "aos": "^2.3.4",

src/App.jsx

@@ -1,6 +1,6 @@
 // App.js
-import React, { useEffect, useState } from 'react';
-import './App.css';
+import React, { useEffect, useState } from "react";
+import "./App.css";
 import { Route, Routes } from "react-router-dom";
 import { Home, Login, Registration, Dashboard, ComingSoon } from "./pages";
 import AddNewRental from "./components/dashboard-components/AddNewRental/AddNewRental";
@@ -16,6 +16,7 @@ import ForgotPassword from "./pages/ForgotPassword";
 import AdminDashboard from "./components/Admin-Dashboard/AdminDashboard";
 import PrivacyPolicy from "./components/Privacy-Policy/PrivacyPolicy";
 import TermsConditions from "./components/Terms-Conditions/TermsConditions";
+import Feedback from "./components/Feedback/Feedback";
 
 const App = () => {
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
@@ -30,8 +31,8 @@ const App = () => {
   };
 
   useEffect(() => {
-    window.addEventListener('mousemove', updateCursor);
-    return () => window.removeEventListener('mousemove', updateCursor);
+    window.addEventListener("mousemove", updateCursor);
+    return () => window.removeEventListener("mousemove", updateCursor);
   }, [trail]);
 
   return (
@@ -67,18 +68,28 @@ const App = () => {
         <Route path="/register" element={<Registration />} />
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/dashboard/searchrenter" element={<SearchRental />} />
-        <Route path="/dashboard/createnewrenter" element={<CreateNewRental />} />
+        <Route
+          path="/dashboard/createnewrenter"
+          element={<CreateNewRental />}
+        />
         <Route path="/dashboard/addnewrenter" element={<AddNewRental />} />
         <Route path="/dashboard/renterdetails" element={<RenterDetails />} />
         <Route path="/dashboard/paymentsrecord" element={<PaymentsRecord />} />
         <Route path="/Contributors" element={<Contributors />} />
-        <Route path="/dashboard/totalrentcollected" element={<TotalRentCollected />} />
-        <Route path="/dashboard/propertylisting" element={<PropertyListing />} />
+        <Route
+          path="/dashboard/totalrentcollected"
+          element={<TotalRentCollected />}
+        />
+        <Route
+          path="/dashboard/propertylisting"
+          element={<PropertyListing />}
+        />
         <Route path="/dashboard/listedproperty" element={<ListedProperty />} />
         <Route path="/admin-dashboard" element={<AdminDashboard />} />
         <Route path="/Privacy-Policy" element={<PrivacyPolicy />} />
         <Route path="/Terms-Conditions" element={<TermsConditions />} />
         <Route path="/comingsoon" element={<ComingSoon />} />
+        <Route path="/Feedback" element={<Feedback />} />
       </Routes>
     </>
   );

src/components/Contact-section/Contact-section.css

@@ -8,8 +8,10 @@ main {
     padding-top: 0; /* Remove extra padding if present */
     margin-bottom: 5rem;
 
-    background-color: #b4f8f8; /* Light cyan background */
-    border: 2px solid #020202; /* Border color */
+
+
+    background: linear-gradient(to right,#4bc2f5, #8c8cb2, #ee9898,#ef0381); /* Gradient from blue to red */
+    border: 2px solid #000000; /* Border color */
     border-radius: 8px; /* Rounded corners */
     padding: 10px; /* Spacing inside the section */
     padding: 10px 5px; /* Top and bottom padding: 10px, left and right padding: 5px */

src/components/Feedback/Feedback.css

@@ -0,0 +1,128 @@
+/* Container for feedback form */
+.feedback-form-container {
+  background-color: #ccdada;
+  border: 3px solid rgb(164, 2, 19);
+  border-radius: 10px;
+  padding: 50px;
+  width: 600px; /* Slightly increased width for a spacious feel */
+  margin: 50px auto;
+  color: rgb(10, 10, 10);
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(6, 4, 4, 0.4);
+  margin-top: 130px;
+}
+
+/* Form headings */
+.title {
+  margin-bottom: 30px; /* Increased spacing below heading */
+  font-size: 48px; /* Increased font size for the heading */
+  color: #d20808;
+}
+
+/* Input fields styling */
+.name,
+.email,
+.message {
+  margin-top: 30px; /* Increased top margin for space between inputs */
+  width: 100%;
+  padding: 10px; /* Increased padding for larger inputs */
+  background-color: #faf5f5;
+  border: 2px solid rgb(9, 9, 8);
+  border-radius: 5px;
+  color: rgb(21, 20, 20);
+  font-size: 18px; /* Slightly increased font size for input text */
+  box-sizing: border-box;
+}
+
+textarea {
+  height: 100px; /* Increased height of the textarea */
+  resize: none;
+}
+
+/* Star rating styling */
+.stars {
+  margin-top: 30px; /* Ensure consistent spacing */
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+  gap: 20px;
+}
+
+.star,
+.star-filled {
+  font-size: 35px; /* Slightly larger stars for better visibility */
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.star {
+  color: rgb(108, 106, 106);
+}
+
+.star-filled {
+  color: gold;
+}
+
+/* Submit button */
+.post-button {
+  margin-top: 40px; /* More space between the last input and button */
+  background-color: #000504;
+  color: #fdfafa;
+  border: 2px solid rgb(205, 6, 6);
+  padding: 15px 30px; /* Bigger button for easier clicking */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.post-button:hover {
+  background-color: #cbd3f5;
+  border: 2px solid rgb(8, 7, 7);
+  color: black;
+}
+
+/* Pop-up overlay styling */
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup {
+  background-color: #faf9fc;
+  padding: 28px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
+  color: black;
+  border: 1px solid rgb(4, 4, 4);
+}
+
+.popup h3 {
+  margin-bottom: 10px;
+  color: #0d0d0d;
+}
+
+.popup p {
+  margin-bottom: 20px;
+  color: #0f0e0e;
+}
+
+.close-popup-button {
+  background-color: #0a0370;
+  color: #fdfbfb;
+  border: 2px solid rgb(245, 242, 242);
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+/* .close-popup-button:hover {
+    background-color: #e3e4e5;
+  } */