solved #534 Added monthly rent calculator

src/components/Header-section/Navbar.jsx

@@ -16,7 +16,7 @@ const Navbar = () => {
   const [navLinkbgColor, setNavlinkbgColor] = useState(true);
   const [activeSection, setActiveSection] = useState("home"); // Track active section
   const [checkToken, setCheckToken] = useState(false);
-  const sectionIds = ["home", "Service", "AboutUs", "ContactUs", "FAQ"]; // Section IDs
+  const sectionIds = ["home", "Service", "AboutUs", "ContactUs", "FAQ","RentCalculator"]; // Section IDs
 
   // Toggle Dark Mode
   const toggleDarkMode = () => {

src/components/rent/RentCalculator.css

@@ -0,0 +1,58 @@
+.rent-calculator {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .rent-calculator h1 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+
+  .input-group {
+    margin-bottom: 15px;
+  }
+
+  .input-group label {
+    display: block;
+    font-size: 16px;
+    margin-bottom: 5px;
+    color: #555;
+  }
+
+  .input-group input {
+    width: 100%;
+    padding: 10px;
+    font-size: 14px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+
+  .calculate-btn {
+    width: 100%;
+    padding: 10px;
+    background-color: #2ec4b6;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .calculate-btn:hover {
+    background-color: #238e8b;
+  }
+
+  .result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #2ec4b6;
+  }

src/components/rent/RentCalculator.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import './RentCalculator.css';
+
+const RentCalculator = () => {
+  const [baseRent, setBaseRent] = useState('');
+  const [powerBill, setPowerBill] = useState('');
+  const [waterBill, setWaterBill] = useState('');
+  const [otherFees, setOtherFees] = useState('');
+  const [totalRent, setTotalRent] = useState(null);
+
+  const calculateTotalRent = () => {
+    const rent = parseFloat(baseRent) || 0;
+    const power = parseFloat(powerBill) || 0;
+    const water = parseFloat(waterBill) || 0;
+    const other = parseFloat(otherFees) || 0;
+    const total = rent + power + water + other;
+    setTotalRent(total);
+  };
+
+  return (
+
+    <div id="RentCalculator" className="rent-calculator">
+      <h1>Monthly Rent Calculator</h1>
+      <div className="input-group">
+        <label>Base Rent ($):</label>
+        <input
+          type="number"
+          value={baseRent}
+          onChange={(e) => setBaseRent(e.target.value)}
+          placeholder="Enter base rent amount"
+        />
+      </div>
+      <div className="input-group">
+        <label>Power Bill ($):</label>
+        <input
+          type="number"
+          value={powerBill}
+          onChange={(e) => setPowerBill(e.target.value)}
+          placeholder="Enter power bill amount"
+        />
+      </div>
+      <div className="input-group">
+        <label>Water Bill ($):</label>
+        <input
+          type="number"
+          value={waterBill}
+          onChange={(e) => setWaterBill(e.target.value)}
+          placeholder="Enter water bill amount"
+        />
+      </div>
+      <div className="input-group">
+        <label>Other Fees ($):</label>
+        <input
+          type="number"
+          value={otherFees}
+          onChange={(e) => setOtherFees(e.target.value)}
+          placeholder="Enter other fees"
+        />
+      </div>
+      <button onClick={calculateTotalRent} className="calculate-btn">
+        Calculate Total Rent
+      </button>
+      {totalRent !== null && (
+        <div className="result">
+          <h2>Total Monthly Rent: ${totalRent.toFixed(2)}</h2>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RentCalculator;

src/pages/Home.jsx

@@ -2,6 +2,7 @@ import AboutUs from "../components/AboutUs-section/AboutUs";
 import Contributors from "../components/Contributors-page/Contributors";
 import Contact from "../components/Contact-section/Contact";
 import FAQ from "../components/faq/FAQ";
+import RentCalculator from "../components/rent/RentCalculator";
 import Footer from "../components/Footer-section/Footer";
 import Header from "../components/Header-section/Header";
 import Services from "../components/Services-section/Services-section";
@@ -19,7 +20,7 @@ function Home() {
       <AboutUs />
       <Testimonials />
       <Contact />
-
+      <RentCalculator/>
       <FAQ/>
       <Footer />