From fae3529e7e11ddbfdd09ebd4cba7dc2660bd7aa9 Mon Sep 17 00:00:00 2001
From: Tina <tinaborundia23@gmail.com>
Date: Sun, 20 Oct 2024 14:11:39 +0530
Subject: [PATCH 1/6] Added feedback Form

---
 package-lock.json                        |  45 ++++++
 package.json                             |   2 +
 src/components/Footer-section/Footer.jsx | 180 +++++++++++++++++++++--
 3 files changed, 217 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 84dfd852..0fb5774e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "rentalog",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "aos": "^2.3.4",
         "axios": "^1.7.7",
         "gsap": "^3.12.5",
@@ -567,6 +569,49 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "dev": true,
diff --git a/package.json b/package.json
index 3351ce57..be4bd20f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "aos": "^2.3.4",
     "axios": "^1.7.7",
     "gsap": "^3.12.5",
diff --git a/src/components/Footer-section/Footer.jsx b/src/components/Footer-section/Footer.jsx
index a27168c4..6374a30f 100644
--- a/src/components/Footer-section/Footer.jsx
+++ b/src/components/Footer-section/Footer.jsx
@@ -4,12 +4,26 @@ import { FaGithub, FaInstagram } from "react-icons/fa";
 import { LuSendHorizonal } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { RiTwitterXFill } from "react-icons/ri";
+import {
+  faCheckCircle,
+  faTimesCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 let date = new Date();
 let year = date.getFullYear();
 
 const Footer = () => {
   const [email, setEmail] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [rating, setRating] = useState(0);
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const handleRating = (star) => {
+    setRating(star); // Ensure this is correctly setting the state
+  };
+
   const handleSubmit = (event) => {
     try {
       event.preventDefault();
@@ -20,6 +34,31 @@ const Footer = () => {
     }
   };
 
+  const handleFeedbackSubmit = async (e) => {
+    e.preventDefault();
+    if (!name || !email || !message || rating === 0) {
+      alert("All fields and a rating are required!");
+      return;
+    }
+    const formData = { name, email, message, rating };
+    try {
+      console.log("Submitting feedback", formData);
+      setSubmitStatus("success");
+    } catch (error) {
+      console.error("Error sending feedback:", error);
+      setSubmitStatus("error");
+    }
+  };
+
+  const openModal = () => {
+    setSubmitStatus(null);
+    setShowModal(true);
+    setName("");
+    setEmail("");
+    setMessage("");
+    setRating(0);
+  };
+
   return (
     <div className="flex flex-col bg-[#2ec4b6] text-textWhite px-5 py-2">
       <div className="flex justify-center flex-wrap gap-10">
@@ -28,7 +67,7 @@ const Footer = () => {
             <h3 className="font-bold mb-4">About Us</h3>
             <p className="my-2 pb-1">
               Rentalog is the ultimate solution for landlords looking to
-              simplify their rent management process.{" "}
+              simplify their rent management process.
             </p>
             <img
               className="bg-[white] hover:cursor-pointer px-1 rounded-xl mb-2 h-[40px] w-[150px] hover:shadow-l hover:scale-105 transition duration-300 ease-in-out"
@@ -43,16 +82,24 @@ const Footer = () => {
             <h3 className="font-bold mb-4">Services</h3>
             <ul>
               <Link to="/dashboard/propertylisting">
-                <li    className="hover:scale-110 transition duration-300 ease-in-out">Property Listing</li>
+                <li className="hover:scale-110 transition duration-300 ease-in-out">
+                  Property Listing
+                </li>
               </Link>
-              <Link>
-                <li className="hover:scale-110 transition duration-300 ease-in-out">Track Payment Record</li>
+              <Link to="#">
+                <li className="hover:scale-110 transition duration-300 ease-in-out">
+                  Track Payment Record
+                </li>
               </Link>
               <Link to="/dashboard/totalrentcollected">
-                <li className="hover:scale-110 transition duration-300 ease-in-out">Rent Calculation</li>
+                <li className="hover:scale-110 transition duration-300 ease-in-out">
+                  Rent Calculation
+                </li>
               </Link>
               <Link to="/dashboard/timemanagement">
-                <li className="hover:scale-110 transition duration-300 ease-in-out">Time Management</li>
+                <li className="hover:scale-110 transition duration-300 ease-in-out">
+                  Time Management
+                </li>
               </Link>
             </ul>
           </div>
@@ -77,6 +124,12 @@ const Footer = () => {
               <li className="hover:scale-110 transition duration-300 ease-in-out">
                 <Link to="/Contributors">Contributors</Link>
               </li>
+              <button
+                onClick={openModal}
+                className="hover:scale-110 transition duration-300 ease-in-out"
+              >
+                Feedback
+              </button>
             </ul>
           </div>
         </div>
@@ -86,10 +139,8 @@ const Footer = () => {
             <h3 className="text-lg font-semibold mb-4">Newsletter</h3>
             <p className="mt-4 text-sm font-[300]">
               Subscribe to our{" "}
-              <span className="font-bold text-justify">
-                Newsletter
-              </span>{" "}
-              for latest updates and offers!
+              <span className="font-bold text-justify">Newsletter</span> for
+              latest updates and offers!
             </p>
             <div className="flex flex-row items-center space-x-4 mt-4 relative">
               <input
@@ -131,6 +182,115 @@ const Footer = () => {
         {" "}
         {year} || All Rights Reserved || The Virtual World Maker
       </div>
+
+      {/* Modal */}
+      {showModal && (
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
+          <div className="bg-[#2ec4b6] p-6 rounded-lg w-full max-w-lg">
+            {submitStatus === null ? (
+              <>
+                <h2 className="text-2xl font-bold mb-4 text-black">Feedback</h2>
+                <form onSubmit={handleFeedbackSubmit} className="space-y-4">
+                  <div>
+                    <label
+                      className="block text-gray-700 text-black"
+                      text-black
+                    >
+                      Name
+                    </label>
+                    <input
+                      type="text"
+                      className="w-full px-4 py-2 border border-gray-300 rounded text-black"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-gray-700 text-black">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      className="w-full px-4 py-2 border border-gray-300 rounded text-black"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-gray-700 text-black">
+                      Message
+                    </label>
+                    <textarea
+                      className="w-full px-4 py-2 border border-gray-300 rounded text-black"
+                      value={message}
+                      onChange={(e) => setMessage(e.target.value)}
+                      required
+                    ></textarea>
+                  </div>
+                  <div>
+                    <label className="block text-gray-700 text-black">
+                      Rate Us
+                    </label>
+                    <div className="flex text-2xl text-black">
+                      {[1, 2, 3, 4, 5].map((star) => (
+                        <span
+                          key={star}
+                          className={`cursor-pointer ${
+                            rating >= star ? "text-yellow-400" : "text-gray-400"
+                          }`}
+                          onClick={() => handleRating(star)}
+                        >
+                          {rating >= star ? "★" : "☆"}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <button
+                      type="submit"
+                      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-black"
+                    >
+                      Submit Feedback
+                    </button>
+                  </div>
+                </form>
+              </>
+            ) : (
+              <div className="text-center ">
+                {submitStatus === "success" ? (
+                  <div>
+                    <FontAwesomeIcon
+                      icon={faCheckCircle}
+                      className="text-green-500 text-5xl mb-4 text-red"
+                    />
+                    <p className="text-lg font-bold text-black">
+                      Feedback Submitted
+                    </p>
+                  </div>
+                ) : (
+                  <div>
+                    <FontAwesomeIcon
+                      icon={faTimesCircle}
+                      className="text-red-500 text-5xl mb-4"
+                    />
+                    <p className="text-lg font-bold text-black">
+                      Failed to Submit
+                    </p>
+                  </div>
+                )}
+                <button
+                  onClick={() => setShowModal(false)}
+                  className="px-4 py-2 rounded mt-4 border-gray-300 rounded text-blackhover:bg-blue-600 text-black "
+                >
+                  Close
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 };

From 1ce5a93ba1b2a896132b0658eb0da214a7d24350 Mon Sep 17 00:00:00 2001
From: "Ananya .T" <135150305+Anu142004@users.noreply.github.com>
Date: Thu, 31 Oct 2024 10:34:27 +0530
Subject: [PATCH 2/6] Contact-section.css

---
 src/components/Contact-section/Contact-section.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Contact-section/Contact-section.css b/src/components/Contact-section/Contact-section.css
index 28bd9861..b1ca7784 100644
--- a/src/components/Contact-section/Contact-section.css
+++ b/src/components/Contact-section/Contact-section.css
@@ -8,8 +8,9 @@ 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, #0000FF, #FF0000); /* 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 */

From cf690884c07f7ec91d98f46056efcf6160fb7a8d Mon Sep 17 00:00:00 2001
From: Aman Verma <amanver125@gmail.com>
Date: Sat, 2 Nov 2024 16:24:24 +0530
Subject: [PATCH 3/6] fix chatbot

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 683b30e1..cad7f6f5 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
     <!-- Chatbot Configuration -->
     <script>
       window.embeddedChatbotConfig = {
-        chatbotId: "wQJs3fix9gu515zxNshBF",
+        chatbotId: "1LDI5LXRNDrWd6VZO4J1f",
         domain: "www.chatbase.co"
       };
     </script>
@@ -75,7 +75,7 @@
     <!-- Chatbot Script -->
     <script
       src="https://www.chatbase.co/embed.min.js"
-      chatbotId="wQJs3fix9gu515zxNshBF"
+      chatbotId="1LDI5LXRNDrWd6VZO4J1f"
       domain="www.chatbase.co"
       defer
     ></script>

From 00e9092b67fb02930d606777bf0665d25cd7211e Mon Sep 17 00:00:00 2001
From: haseebzaki-07 <haseebzaki13@gmail.com>
Date: Sat, 2 Nov 2024 16:39:11 +0530
Subject: [PATCH 4/6] update UI

---
 package-lock.json          |  43 ++++++-------
 src/components/faq/FAQ.css | 125 ++++++++++++++++++++++---------------
 src/components/faq/FAQ.jsx |  19 +++++-
 3 files changed, 111 insertions(+), 76 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8011023d..5161b0ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,9 +68,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
-      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -82,9 +82,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
-      "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -121,12 +121,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
-      "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.26.0",
+        "@babel/parser": "^7.26.2",
         "@babel/types": "^7.26.0",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
@@ -320,9 +320,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
-      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -493,7 +493,6 @@
       "cpu": [
         "arm64"
       ],
-
       "optional": true,
       "os": [
         "darwin"
@@ -539,7 +538,6 @@
       "cpu": [
         "x64"
       ],
-
       "optional": true,
       "os": [
         "freebsd"
@@ -555,7 +553,6 @@
       "cpu": [
         "arm"
       ],
-
       "optional": true,
       "os": [
         "linux"
@@ -1528,9 +1525,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001674",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001674.tgz",
-      "integrity": "sha512-jOsKlZVRnzfhLojb+Ykb+gyUSp9Xb57So+fAiFlLzzTKpqg8xxSav0e40c8/4F/v9N8QSvrRRaLeVzQbLqomYw==",
+      "version": "1.0.30001676",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
+      "integrity": "sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==",
       "dev": true,
       "funding": [
         {
@@ -1838,9 +1835,10 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.49",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
-      "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
+      "version": "1.5.50",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.50.tgz",
+      "integrity": "sha512-eMVObiUQ2LdgeO1F/ySTXsvqvxb6ZH2zPGaMYsWzRDdOddUa77tdmI0ltg+L16UpbWdhPmuF3wIQYyQq65WfZw==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -2011,7 +2009,6 @@
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
       "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "hasInstallScript": true,
-
       "bin": {
         "esbuild": "bin/esbuild"
       },
diff --git a/src/components/faq/FAQ.css b/src/components/faq/FAQ.css
index 318d4adb..547b6cdc 100644
--- a/src/components/faq/FAQ.css
+++ b/src/components/faq/FAQ.css
@@ -1,51 +1,76 @@
 .faq-container {
-    width: 80%;
-    margin: 2rem auto;
-    background-color: aquamarine;
-    padding: 2rem;
-    border-radius: 10px;
-  }
-  
-  .faq-title {
-    text-align: center;
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
-    color: #333;
-  }
-  
-  .faq-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .faq-item {
-    background-color: white;
-    border-radius: 8px;
-    padding: 1rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }
-  
-  .faq-item:hover {
-    background-color: #f2f2f2;
-  }
-  
-  .faq-question {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #555;
-  }
-  
-  .faq-answer {
-    margin-top: 0.5rem;
-    padding-left: 1rem;
-    font-size: 1rem;
-    color: #666;
-  }
-  
-  .active .faq-answer {
-    display: block;
-  }
-  
-  
\ No newline at end of file
+  width: 80%;
+  margin: 2rem auto;
+  padding: 2rem;
+  background: linear-gradient(135deg, #9be7ff, #b0ffd1);
+  border-radius: 15px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.faq-title {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #333;
+  font-weight: bold;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.faq-item {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.faq-item:hover {
+  background-color: #f9f9f9;
+  transform: scale(1.02);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.faq-question {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: #444;
+}
+
+.faq-icon {
+  font-size: 1.5rem;
+  color: #00aaff;
+  transition: transform 0.3s ease;
+}
+
+.faq-item.active .faq-icon {
+  transform: rotate(180deg);
+  color: #ff6347;
+}
+
+.faq-answer {
+  max-height: 0;
+  transition: max-height 0.5s ease, padding 0.5s ease;
+  padding-top: 0;
+  color: #666;
+}
+
+.faq-item.active .faq-answer {
+  padding-top: 1rem;
+  max-height: 500px;
+}
+
+.faq-answer p {
+  font-size: 1rem;
+  line-height: 1.6;
+}
diff --git a/src/components/faq/FAQ.jsx b/src/components/faq/FAQ.jsx
index a98484cc..72833be5 100644
--- a/src/components/faq/FAQ.jsx
+++ b/src/components/faq/FAQ.jsx
@@ -56,11 +56,24 @@ const FAQ = () => {
       <h2 className="faq-title">Frequently Asked Questions</h2>
       <div className="faq-list">
         {faqData.map((faq, index) => (
-          <div key={index} className={`faq-item ${activeIndex === index ? 'active' : ''}`}>
-            <div className="faq-question" onClick={() => toggleFAQ(index)}>
+          <div
+            key={index}
+            className={`faq-item ${activeIndex === index ? 'active' : ''}`}
+            onClick={() => toggleFAQ(index)}
+          >
+            <div className="faq-question">
               {faq.question}
+              <span className="faq-icon">{activeIndex === index ? '-' : '+'}</span>
+            </div>
+            <div
+              className="faq-answer"
+              style={{
+                maxHeight: activeIndex === index ? '1000px' : '0',
+                overflow: 'hidden',
+              }}
+            >
+              <p>{faq.answer}</p>
             </div>
-            {activeIndex === index && <div className="faq-answer">{faq.answer}</div>}
           </div>
         ))}
       </div>

From c7f07c7814d7814002b1d3afd3848ff54f6ca014 Mon Sep 17 00:00:00 2001
From: "Ananya .T" <135150305+Anu142004@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:34:30 +0530
Subject: [PATCH 5/6] Contact-section.css

---
 src/components/Contact-section/Contact-section.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Contact-section/Contact-section.css b/src/components/Contact-section/Contact-section.css
index b1ca7784..76463c28 100644
--- a/src/components/Contact-section/Contact-section.css
+++ b/src/components/Contact-section/Contact-section.css
@@ -9,7 +9,8 @@ main {
     margin-bottom: 5rem;
 
   
-    background: linear-gradient(to right, #0000FF, #FF0000); /* Gradient from blue to red */
+   
+    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 */

From f8464c46c736d2eb9b726a9a2d5557da4e41f706 Mon Sep 17 00:00:00 2001
From: Tina <tinaborundia23@gmail.com>
Date: Sun, 3 Nov 2024 15:16:19 +0530
Subject: [PATCH 6/6] Added Feedback Form

---
 package-lock.json                        |  43 ++++----
 src/App.jsx                              |  25 +++--
 src/components/Feedback/Feedback.css     | 128 +++++++++++++++++++++++
 src/components/Feedback/Feedback.jsx     | 122 +++++++++++++++++++++
 src/components/Footer-section/Footer.jsx |  43 ++++----
 5 files changed, 307 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Feedback/Feedback.css
 create mode 100644 src/components/Feedback/Feedback.jsx

diff --git a/package-lock.json b/package-lock.json
index af81d17a..6a3e6095 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,9 +70,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
-      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -84,9 +84,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
-      "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -123,12 +123,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
-      "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.26.0",
+        "@babel/parser": "^7.26.2",
         "@babel/types": "^7.26.0",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
@@ -322,9 +322,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
-      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -495,7 +495,6 @@
       "cpu": [
         "arm64"
       ],
-
       "optional": true,
       "os": [
         "darwin"
@@ -541,7 +540,6 @@
       "cpu": [
         "x64"
       ],
-
       "optional": true,
       "os": [
         "freebsd"
@@ -557,7 +555,6 @@
       "cpu": [
         "arm"
       ],
-
       "optional": true,
       "os": [
         "linux"
@@ -1573,9 +1570,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001674",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001674.tgz",
-      "integrity": "sha512-jOsKlZVRnzfhLojb+Ykb+gyUSp9Xb57So+fAiFlLzzTKpqg8xxSav0e40c8/4F/v9N8QSvrRRaLeVzQbLqomYw==",
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
       "dev": true,
       "funding": [
         {
@@ -1883,9 +1880,10 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.49",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
-      "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
+      "version": "1.5.50",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.50.tgz",
+      "integrity": "sha512-eMVObiUQ2LdgeO1F/ySTXsvqvxb6ZH2zPGaMYsWzRDdOddUa77tdmI0ltg+L16UpbWdhPmuF3wIQYyQq65WfZw==",
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -2056,7 +2054,6 @@
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
       "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "hasInstallScript": true,
-
       "bin": {
         "esbuild": "bin/esbuild"
       },
diff --git a/src/App.jsx b/src/App.jsx
index 5edd714b..de1f4a09 100644
--- a/src/App.jsx
+++ b/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>
     </>
   );
diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css
new file mode 100644
index 00000000..ab9b0d45
--- /dev/null
+++ b/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;
+  } */
diff --git a/src/components/Feedback/Feedback.jsx b/src/components/Feedback/Feedback.jsx
new file mode 100644
index 00000000..2f88c744
--- /dev/null
+++ b/src/components/Feedback/Feedback.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import "./Feedback.css";
+import Footer from "../Footer-section/Footer";
+import RentNavbar from "../Header-section/RentNavbar";
+
+const Feedback = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [feedback, setFeedback] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleRating = (rate) => {
+    setRating(rate);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (name && email && rating && feedback) {
+      setIsSubmitted(true);
+      // Here, handle actual submission, such as sending to a backend API
+      console.log({
+        name,
+        email,
+        rating,
+        feedback,
+      });
+      // Reset form after submission
+      setName("");
+      setEmail("");
+      setRating(0);
+      setFeedback("");
+      setHoverRating(0);
+    } else {
+      alert("Please fill out all fields");
+    }
+  };
+
+  const closePopup = () => {
+    setIsSubmitted(false);
+  };
+
+  return (
+    <>
+      <div className="feedback-form-container">
+        <RentNavbar />
+
+        <form onSubmit={handleSubmit}>
+          <h1 className="title">Feedback Form</h1>
+
+          {/* Name Input */}
+          <input
+            className="name"
+            type="text"
+            placeholder="Your Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+
+          {/* Email Input */}
+          <input
+            className="email"
+            type="email"
+            placeholder="Your Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+
+          {/* Star Rating */}
+          <div className="stars">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <span
+                key={star}
+                className={
+                  star <= (hoverRating || rating) ? "star-filled" : "star"
+                }
+                onClick={() => handleRating(star)}
+                onMouseEnter={() => setHoverRating(star)}
+                onMouseLeave={() => setHoverRating(0)}
+              >
+                ★
+              </span>
+            ))}
+          </div>
+
+          {/* Feedback Textarea */}
+          <textarea
+            className="message"
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+            placeholder="Describe your experience.."
+            required
+          />
+
+          {/* Submit Button */}
+          <button type="submit" className="post-button">
+            Submit
+          </button>
+        </form>
+
+        {/* Success Pop-up */}
+        {isSubmitted && (
+          <div className="popup-overlay">
+            <div className="popup">
+              <h3>Thank You!</h3>
+              <p>Your feedback has been successfully submitted.</p>
+              <button onClick={closePopup} className="close-popup-button">
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Feedback;
diff --git a/src/components/Footer-section/Footer.jsx b/src/components/Footer-section/Footer.jsx
index be207479..6c97f4ce 100644
--- a/src/components/Footer-section/Footer.jsx
+++ b/src/components/Footer-section/Footer.jsx
@@ -25,29 +25,25 @@ const Footer = () => {
     setRating(star); // Ensure this is correctly setting the state
   };
 
-  const handleSubmit = (event) => {
-    try {
-      event.preventDefault();
-      console.log(email);
-      setEmail("");
-    } catch (error) {
-      console.log(`Error with newsletter input: ${error}`);
-
-
+  // const handleSubmit = (event) => {
+  //   try {
+  //     event.preventDefault();
+  //     console.log(email);
+  //     setEmail("");
+  //   } catch (error) {
+  //     console.log(`Error with newsletter input: ${error}`);
 
   const validateEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Simple regex for email validation
     return emailRegex.test(email);
   };
 
-    const handleSubmit = (event) => {
-
+  const handleSubmit = (event) => {
     event.preventDefault();
-    
+
     if (!validateEmail(email)) {
       alert("❌ Please enter a valid email address."); // Alert for invalid email
       return;
-
     }
 
     console.log(email); // Log the valid email
@@ -112,10 +108,6 @@ const Footer = () => {
                 <li className="hover:scale-110 transition duration-300 ease-in-out">
                   Track Payment Record
                 </li>
-
-              <Link to= "/comingsoon">
-                <li className="hover:scale-110 transition duration-300 ease-in-out">Track Payment Record</li>
-
               </Link>
               <Link to="/dashboard/totalrentcollected">
                 <li className="hover:scale-110 transition duration-300 ease-in-out">
@@ -127,10 +119,11 @@ const Footer = () => {
                 <li className="hover:scale-110 transition duration-300 ease-in-out">
                   Time Management
                 </li>
-
+              </Link>
               <Link to="/comingsoon">
-                <li className="hover:scale-110 transition duration-300 ease-in-out">Time Management</li>
-
+                <li className="hover:scale-110 transition duration-300 ease-in-out">
+                  Coming Soon
+                </li>
               </Link>
             </ul>
           </div>
@@ -156,12 +149,12 @@ const Footer = () => {
                 <Link to="/Contributors">Contributors</Link>
               </li>
 
-              <button
+              {/* <button
                 onClick={openModal}
                 className="hover:scale-110 transition duration-300 ease-in-out"
               >
                 Feedback
-              </button>
+              </button> */}
 
               <li className="hover:scale-110 transition duration-300 ease-in-out">
                 <Link to="/Privacy-Policy">Privacy & Policy</Link>
@@ -169,7 +162,9 @@ const Footer = () => {
               <li className="hover:scale-110 transition duration-300 ease-in-out">
                 <Link to="/Terms-Conditions">Terms & Conditions</Link>
               </li>
-
+              <li className="hover:scale-110 transition duration-300 ease-in-out">
+                <Link to="/Feedback">Feedback</Link>
+              </li>
             </ul>
           </div>
         </div>
@@ -312,7 +307,7 @@ const Footer = () => {
                 ) : (
                   <div>
                     <FontAwesomeIcon
-                      icon={faTimesCircle}
+                      icoFn={faTimesCircle}
                       className="text-red-500 text-5xl mb-4"
                     />
                     <p className="text-lg font-bold text-black">