Navbar_Toggle_Icon

frontend/package.json

@@ -8,10 +8,6 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@mui/material": "^5.15.15",
-    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -30,6 +26,7 @@
     "react-bootstrap": "^2.10.2",
     "react-bootstrap-icons": "^1.11.3",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.8.2",
     "react-on-screen": "^2.1.1",
     "react-router-dom": "^6.22.3",
@@ -63,6 +60,8 @@
     ]
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.3"
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -15,17 +15,19 @@ import  {BlogPage6 } from './components/blog/blogpage6';
 // import { Blog } from './components/blog/blog';
 import { BlogMain } from './components/blog/blogmain';
 import {AboutUs} from './components/about/aboutus';
-import { Login } from './components/login';
-import {Service} from './components/service';
 import { Property } from './components/property/property';
 import 'bootstrap/dist/css/bootstrap.css';
+import Login from './components/login/Login';
+import {Service} from './components/service';
+// import { Footer } from './components/footer';
 function App() {
   return (
    <div className="App">
       <BrowserRouter>
       <NavBar />
       {/* <Nav /> */}
         <Routes>
+          <Route path="/login" element={<Login/>} />
           <Route path="/" element={<Layout/>} />
           <Route path="/contact" element={<Contact />} />
           {/* <Route path="/blog" element={<Blog />} /> */}
@@ -41,7 +43,7 @@ function App() {
           <Route path="/login/" element={<Login />} />
           <Route path="/about/" element={<AboutUs />} />
         </Routes>
-
+        {/* <Footer /> */}
       </BrowserRouter>
     </div>
 

frontend/src/SampleData.jsx

@@ -0,0 +1,71 @@
+import image1 from '../src/assets/image/blog/blogimage/Rectangle1.png'
+const BlogPage=[
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    },
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    },
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    },
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    },
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    },
+    {
+        title:'Mastering Rental Property Finances: Budgeting and Financial Planning Tips for the Indian Market!',
+        date:'25th July 2021',
+        author:'Akarshi Mathur',
+        image1: image1,
+        designation:'Full Stack Developer',
+        news:'News & Event',
+        des1:`In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success. For landlords in the Indian market, effective budgeting and financial planning can make all the difference in maximizing returns and minimizing risks. In this blog post, we'll delve into essential tips and strategies tailored specifically for landlords navigating the Indian rental property market.`,
+        heading1:`Understanding Your Financial Goals:`,
+        des2:`Before diving into the specifics of budgeting and financial planning, it's crucial to define your financial goals as a landlord. Whether you aim for steady rental income, long-term capital appreciation, or a combination of both, clarity on your objectives will shape your financial decisions. `
+    }
+
+]
+export { BlogPage}

frontend/src/components/about/about.jsx

@@ -18,17 +18,17 @@ export const About = () => {
               contact each other with ZERO brokerage.
             </p>
           </Col>
-          <Col md={4} className="text-center"> {/* Center image horizontally */}
+          <Col md={4} className="text-center "> {/* Center image horizontally */}
             <img src={image1} alt="image1" />
           </Col>
         </Row>
 
-        <Row className="rows-center">
-          <Col md={4} className="text-center">
+        <Row className="rows-center midc" >
+          <Col md={4} className="text-center  mcol1">
             <img src={image2} alt="image2" />
           </Col>
           <Col md={6}>
-            <h3 className="vision-heading heading-color">Our Vision</h3>
+            <h3 className="vision-heading heading-color mcol1">Our Vision</h3>
             <p>
               To make it simple for people to search for and rent homes in new
               cities while doing so from the comfort of their own homes.
@@ -38,12 +38,12 @@ export const About = () => {
 
         <Row className="rows-center">
           <Col md={6}>
-            <h3 className="heading-color">Our Mission</h3>
+            <h3 className="heading-color ">Our Mission</h3>
             <p>
               To hold "To-Let" boards at all rental properties available nearby.
             </p>
           </Col>
-          <Col md={4} className="text-center"> {/* Center image horizontally */}
+          <Col md={4} className="text-center mi"> {/* Center image horizontally */}
             <img src={image3} alt="image3" />
           </Col>
         </Row>

frontend/src/components/about/aboutus.jsx

@@ -2,6 +2,7 @@
 import { useEffect } from 'react'
 import $ from 'jquery'
 import '../../style/about/about.css'
+import '../../style/about/about-4.css'
 import {Footer} from '../footer'
 import React from 'react';
 import ceo1 from '../../assets/image/about/CEO1.png'
@@ -118,7 +119,7 @@ export const AboutUs = () => {
         <div className="timeline">
           <div className="checkpoint check1">
             <div>
-              <h2>Who are are?</h2>
+              <h2>Who we are?</h2>
               <p>
                 At To-Let, we are more than just property managers – we are
                 dedicated partners in your property management journey.