Refactor - Header, Footer, IntroBanner, NewlyLaunched, TopLocalities,…

… TrendingPage and Property Card

client/src/App.jsx

@@ -4,8 +4,8 @@ import SimilarPlot from "./pages/plotView/_components/SimliarPlot";
 import SellerProfile from "./pages/sellerProfile/SellerProfile";
 import ViewHostel from "./pages/viewHostel/viewHostel";
 import SimilarProperties from "./pages/viewProperties/_components/SimilarProperties";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
+import Header from "./layouts/Header";
+import Footer from "./layouts/Footer";
 
 function App() {
   return (
@@ -16,7 +16,7 @@ function App() {
       {/* <DirectionClock /> */}
       {/* <SimilarProperties /> */}
       {/* <SimilarPlot /> */}
-      <ViewHostel />
+      {/* <ViewHostel /> */}
       <Footer/>
     </main>
   );

client/src/components/BuyOverlayCard.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const BuyOverlayCard = () => {
+  return (
+    <div className="fixed top-[100px] left-52  right-0 bottom-0 bg-black/40 backdrop-blur-sm w-fit h-fit z-30 flex justify-center items-center rounded-[10px] transition-all duration-1000  ">
+      <div className="flex w-[620px] justify-evenly bg-white mx-auto bg-opacity-20 backdrop-blur-lg rounded-lg p-4">
+        <div className="flex-1 w-fit ">
+          <div className="bg-white px-6 py-2 text-left mb-4 rounded-[6px] w-fit  ">
+            <h5 className="text-[#7c11f7]">Top Cities To Buy A Property</h5>
+          </div>
+          <ul className="text-white">
+            <li className="py-2 text-sm px-6">Buy Properties in Delhi</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Kolkata</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Mumbai</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Chennai</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Ahmedabad</li>
+          </ul>
+        </div>
+        <div className="flex-1 w-fit ">
+        <div className="bg-white px-6 py-2 text-left mb-4 rounded-[6px]  w-fit  ">
+            <h5 className="text-[#7c11f7]">Top Categories To Buy A Property</h5>
+          </div>
+          <ul className="text-white">
+            <li className="py-2 text-sm px-6">Flat/Apartment</li>
+            <li className="py-2 text-sm px-6">Independent Villa</li>
+            <li className="py-2 text-sm px-6">Commercial Building</li>
+            <li className="py-2 text-sm px-6">Residential Land</li>
+            <li className="py-2 text-sm px-6">Farm Land</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BuyOverlayCard;

client/src/components/PropertyCard.jsx

@@ -4,7 +4,7 @@ import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
 
 const PropertyCard = ({ property }) => {
   return (
-    <Card className="!bg-[#f3e9ff] h-[220px] w-[560px] text-black !rounded-lg flex">
+    <Card className="!bg-[#f3e9ff] h-[220px] w-[509px] text-black !rounded-lg mb-6 flex">
       <div className="p-3">
         <img className="h-48 w-52 rounded-lg" src={property.image} alt="" />
       </div>

client/src/components/RentOverlayCard.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const RentOverlayCard = () => {
+  return (
+    <div className="fixed top-[100px] left-52  right-0 bottom-0 bg-black/40 backdrop-blur-sm w-fit h-fit z-30 flex justify-center items-center rounded-[10px] transition-all duration-1000  ">
+      <div className="flex w-[620px] justify-evenly bg-white mx-auto bg-opacity-20 backdrop-blur-lg rounded-lg p-4">
+        <div className="flex-1 w-fit ">
+          <div className="bg-white px-6 py-2 text-left mb-4 rounded-[6px] w-fit  ">
+            <h5 className="text-[#7c11f7]">Top Cities To Rent A Property</h5>
+          </div>
+          <ul className="text-white">
+            <li className="py-2 text-sm px-6">Buy Properties in Noida</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Kolkata</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Mumbai</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Chennai</li>
+            <li className="py-2 text-sm px-6">Buy Properties in Ahmedabad</li>
+          </ul>
+        </div>
+        <div className="flex-1 w-fit ">
+        <div className="bg-white px-6 py-2 text-left mb-4 rounded-[6px]  w-fit  ">
+            <h5 className="text-[#7c11f7]">Top Categories To Rent A Property</h5>
+          </div>
+          <ul className="text-white">
+            <li className="py-2 text-sm px-6">Flat/Apartment</li>
+            <li className="py-2 text-sm px-6">Independent Villa</li>
+            <li className="py-2 text-sm px-6">Commercial Building</li>
+            <li className="py-2 text-sm px-6">Residential Land</li>
+            <li className="py-2 text-sm px-6">Farm Land</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RentOverlayCard;

client/src/index.css

@@ -25,6 +25,12 @@
   font-style: italic;
 }
 
+.lato-regular {
+  font-family: "Lato", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
 * {
   margin: 0;
   padding: 0;

client/src/layouts/Footer.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <section className=' bg-[#7C11F7] w-full flex justify-around p-6 '>
+            <div className='w-1/3 flex flex-col items-center  text-white '>
+                <figure >
+                    <img src="Induxlogobig.png" alt="" className='h-[110px]  block mx-auto mb-2' />
+                </figure>
+                <p>Connect with us</p>
+                <div className='flex gap-5' >
+                    <img src="facebook.svg" alt="Facebook" className='h-6' />
+                    <img src="linkedin.svg" alt="LinkedIn" className='h-6' />
+                    <img src="instagram.svg" alt="Instagram" className='h-6' />
+                </div>
+            </div>
+            <div className='w-2/3 flex justify-evenly items-start '>
+                <div >
+                    <h2 className='text-white text-lg mb-4'>QUICK LINK</h2>
+                    <ul className='flex items-start flex-col gap-4'>
+                        <li className='text-white text-[16px] '>Home</li>
+                        <li className='text-white text-[16px] '>Buy</li>
+                        <li className='text-white text-[16px] '>Sell</li>
+                        <li className='text-white text-[16px] '>Articles</li>
+                        <li className='text-white text-[16px] '>About Us</li>
+                        <li className='text-white text-[16px] '>Contact Us</li>
+                    </ul>
+                </div>
+                <div>
+                    <h2 className='text-white text-lg mb-4'>TERMS & CONDITIONS</h2>
+                    <div className='max-w-[296px] text-white'>
+                        By using Indux Groups, you agree to comply with our terms, including lawful use and accuracy of information. We are not liable for third-party content or changes to property listings.
+                    </div>
+                </div>
+                <div>
+                    <h2 className='text-white text-lg mb-4'>CONTACT </h2>
+                    <p className='mb-2 text-white'>[email protected]</p>
+                    <p className='text-white'>+91 8421538753</p>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Footer;

client/src/layouts/Header.jsx

@@ -0,0 +1,41 @@
+import React, {useState} from "react";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import BuyOverlayCard from "../components/BuyOverlayCard";
+import RentOverlayCard from "../components/RentOverlayCard";
+
+const Header = () => {
+
+    const [isbuyHovered, setisbuyHovered] = useState(false)
+    const [isrentHovered, setisrentHovered] = useState(false)
+
+    return (
+        <>
+            <header className="relative">
+                <div className=" bg-[#B0B0B0]/40 backdrop-blur-sm max-w-[97%] w-full rounded-full border-[0.5px] border-[#B0B0B0]/20 left-[25px]  mx-auto h-[70px] flex justify-between items-center pl-12 absolute z-20 top-5">
+                    <figure><img src="/Induxlogowhite.png" alt="" className="h-28" /> </figure>
+                    <div className="flex items-center w-[65%] gap-[5%] ">
+                        <div className="text-white flex hover:cursor-pointer px-3 py-2 hover:text-[#7c11f7] hover:bg-white rounded-[4px] "
+                            onMouseEnter={() => setisbuyHovered(true)}
+                            onMouseLeave={() => setisbuyHovered(false)}
+                        >Buy {isbuyHovered ? <ExpandLessIcon/> : <ExpandMoreIcon />}  </div>
+                        <div className="text-white flex hover:cursor-pointer px-3 py-2 hover:text-[#7c11f7] hover:bg-white rounded-[4px]  "
+                        onMouseEnter={() => setisrentHovered(true)}
+                        onMouseLeave={() => setisrentHovered(false)}
+                        >Rent {isrentHovered ? <ExpandLessIcon/> : <ExpandMoreIcon />}  </div>
+                        <div className="text-white flex hover:cursor-pointer ">Articles  </div>
+                        <div className="text-white flex hover:cursor-pointer ">Saved </div>
+                        <button className="text-[#7c11f7] px-5 py-2 rounded-[4px] border bg-white hover:cursor-pointer ">List Properties</button>
+                        <button className="text-white hover:cursor-pointer ">Login</button>
+                        <button className="bg-black text-white px-3 py-2 rounded-[4px] hover:cursor-pointer ">Signup</button>
+                    </div>
+                </div>
+            </header>
+            { isbuyHovered && (<BuyOverlayCard/>)}
+            { isrentHovered && (<RentOverlayCard/>)}
+        </>
+    )
+}
+
+
+export default Header;

client/src/pages/home/Home.jsx

@@ -35,7 +35,7 @@ const Home = () => {
       <Articles />
       <Elevate />
       <Testimonial animate={animate} />
-      <div className="h-40 bg-purple-400"></div>
+      {/* <div className="h-40 bg-purple-400"></div> */}
     </div>
   );
 };

client/src/pages/home/_components/IntroBanner.jsx

@@ -8,7 +8,7 @@ const IntroBanner = () => {
 return(
     <>
     <section  className="bg-[url('/homebg.png')] bg-cover bg-center h-screen w-full">
-    <div className="absolute z-10 inset-0 bg-black/20"></div>
+    <div className="absolute z-10 inset-0 bg-black/20 max-w-[1450px] block mx-auto"></div>
     <h1 className="relative z-20 max-w-[790px] text-white top-[140px] block mx-auto text-center h-52 text-[80px] leading-[100px] ">Let Our Family Bring Your Home</h1>
     <SwipeButton/>
     <SearchBox/>

client/src/pages/home/_components/NewlyLaunched.jsx

@@ -1,4 +1,6 @@
 import React, { useContext, useState } from "react";
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
@@ -34,11 +36,11 @@ const NewlyLaunched = () => {
 
   return (
     <div className="relative">
-      <div className="bg-[#e2caff] w-full h-screen py-8 px-16">
+      <div className="bg-[#e2caff] w-full h-full py-9 px-16">
         <p className="font-semibold">New launch on every seasons</p>
         <h1 className="text-3xl font-semibold">NEWLY LAUNCHED</h1>
 
-        <div className="py-4 px-28 pb-6 flex flex-wrap gap-8 items-center justify-between mt-8">
+        <div className="ml-10 py-4 px-10  flex flex-wrap justify-evenly items-center h-fit gap-4  mt-8">
           {currentPagePosts.map((item, index) => (
             <div key={index}>
               <PropertyCard property={item} />
@@ -48,23 +50,23 @@ const NewlyLaunched = () => {
 
         {/*Pagination*/}
 
-        <div className="flex items-center justify-center gap-4 absolute left-[700px] bottom-[25px]">
+        <div className="flex items-center justify-center my-7 gap-4 ">
           <button
-            className="rounded-full font-semibold text-xl text-purple-700 bg-gray-200 px-4 py-2 disabled:opacity-50"
+            className="rounded-full font-semibold text-xl text-purple-700 bg-gray-200  w-[42px] h-[42px]  disabled:opacity-50"
             onClick={handlePrev}
             disabled={currentPage === 1}
           >
-            &#60;
+            <NavigateBeforeIcon/>
           </button>
           <span>
             {currentPage}/{totalPages}
           </span>
           <button
-            className="rounded-full font-semibold text-xl text-purple-700 bg-gray-200 px-4 py-2 disabled:opacity-50"
+            className="rounded-full font-semibold text-xl text-purple-700 bg-gray-200  w-[42px] h-[42px]  disabled:opacity-50"
             onClick={handleNext}
             disabled={currentPage === totalPages}
           >
-            &#62;
+            <NavigateNextIcon/>
           </button>
         </div>
       </div>