Merge pull request Anjaliavv51#112 from Daveless/Fix-mobile-layout

Fix mobile layout

src/components/Header-section/Header-section.css

@@ -45,7 +45,6 @@
 
 .header-text {
   position: relative;
-  top: 23%;
   left: 4%;
   width: 68%;
 }
@@ -82,7 +81,6 @@
 
   .header-text {
     position: relative;
-    top: 23%;
     left: 4%;
     width: 74%;
   }

src/components/Header-section/Header.jsx

@@ -1,24 +1,27 @@
-import '../Header-section/Header-section.css'
+import "../Header-section/Header-section.css";
 import { Link } from "react-router-dom";
-import Navbar from './Navbar';
+import Navbar from "./Navbar";
 const Header = () => {
-
-
-
-    return (
-        <>
-            <div className="header-section mb-[80px]">
-                <Navbar />
-                <div id='home'></div>
-                <div className="header-text">
-                    <h1>Welcome to <span>Rentalog</span></h1>
-                    <p>Rentalog is the ultimate solution for landlords looking to simplify their rent management process. Keep track of your renters personal details, their payment history, and much more with ease.</p>
-                    <Link to="/register">
-                        <button className='btn'>Get Started</button>
-                    </Link>
-                </div>
-            </div>
-        </>
-    )
-}
+  return (
+    <>
+      <div className="header-section mb-[80px]">
+        <Navbar />
+        <div id="home"></div>
+        <div className="header-text top-[15%] sm:top-[23%]">
+          <h1>
+            Welcome to <span>Rentalog</span>
+          </h1>
+          <p>
+            Rentalog is the ultimate solution for landlords looking to simplify
+            their rent management process. Keep track of your renters personal
+            details, their payment history, and much more with ease.
+          </p>
+          <Link to="/register">
+            <button className="btn">Get Started</button>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
 export default Header;

src/components/Services-section/Services-section.jsx

@@ -2,33 +2,43 @@ import ServicesCard from "./ServicesCard";
 import ourServices from "./services";
 import ServicesAvailableIn from "./ServicesAvailableIn";
 import placeName from "./placeName";
-import './Services-section.css'
+import "./Services-section.css";
 
 const Services = () => {
   return (
     <>
-    <div id="Service"></div>
+      <div id="Service"></div>
       <h1 className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
-        Our Services Includes
+        Our Services Include
       </h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 md:mx-36 sm:mx-24 mx-16">
-        {
-          ourServices.map(({ id, bgColor, title, description, icon, alt }) => {
-            return <ServicesCard title={title} key={id} bgColor={bgColor} icon={icon} alt={alt} description={description} />
-          })
-        }
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 md:mx-24 lg:mx-36 sm:mx-24 mx-8">
+        {ourServices.map(({ id, bgColor, title, description, icon, alt }) => {
+          return (
+            <ServicesCard
+              title={title}
+              key={id}
+              bgColor={bgColor}
+              icon={icon}
+              alt={alt}
+              description={description}
+            />
+          );
+        })}
       </div>
       <div className="bg-[#D1F2EB] my-20 mb-0">
         <h1 className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center py-10">
           Our Services are available in
         </h1>
         <div className="flex justify-center items-center flex-col pb-14 gap-16 px-10 md:flex-row">
-          {
-            placeName.map(({ id, name, image }) => {
-              return <ServicesAvailableIn placeName={name} key={id} placeImage={image} />
-            })
-          }
-
+          {placeName.map(({ id, name, image }) => {
+            return (
+              <ServicesAvailableIn
+                placeName={name}
+                key={id}
+                placeImage={image}
+              />
+            );
+          })}
         </div>
       </div>
     </>

src/components/Services-section/ServicesCard.jsx

@@ -1,28 +1,31 @@
 import PropTypes from "prop-types";
 const ServicesCard = (props) => {
-    return (
-        <div className={props.bgColor + " rounded-xl cursor-pointer hover:scale-105 hover:shadow-lg transition duration-300"} >
-            <div className="flex gap-4 p-8 ">
-                <img
-                    className="w-10 h-10 mt-1.5"
-                    src={props.icon}
-                    alt={props.alt}
-                ></img>
-                <h1 className="text-[#312F2F] font-bold md:text-2xl text-xl">
-                    {props.title}
-                </h1>
-            </div>
-            <p className="px-8 pb-20">
-                {props.description}
-            </p>
-        </div>
-    )
-}
+  return (
+    <div
+      className={
+        props.bgColor +
+        " rounded-xl cursor-pointer hover:scale-105 hover:shadow-lg transition duration-300"
+      }
+    >
+      <div className="flex gap-4 p-8 ">
+        <img
+          className="w-10 h-10 mt-1.5"
+          src={props.icon}
+          alt={props.alt}
+        ></img>
+        <h1 className="text-[#312F2F] font-bold md:text-2xl text-xl">
+          {props.title}
+        </h1>
+      </div>
+      <p className="px-8 pb-20">{props.description}</p>
+    </div>
+  );
+};
 ServicesCard.propTypes = {
-    bgColor: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+  bgColor: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
 };
-export default ServicesCard;
+export default ServicesCard;

src/components/dashboard-components/Header-section/Header.jsx

@@ -1,19 +1,24 @@
-import { Link } from "react-router-dom";
-import banner from '../../../assets/Images/dashboardbanner.png'
+import banner from "../../../assets/Images/dashboardbanner.png";
 const Header = () => {
   return (
     <>
       <div className="w-full mt-20">
-        <section className="h-[90vh] flex justify-around p-6 flex-col lg:flex-row">
+        <section className="min-h-[80vh] flex justify-around items-start md:items-center p-6 flex-col md:flex-row max-w-[1000px] mx-auto">
           <div className="mt-10 flex flex-col justify-center items-start">
             <h1 className="mb-4 text-4xl font-extrabold text-gray-900 md:text-5xl lg:text-6xl">
               Dashboard
             </h1>
             <p className="mb-8 text-lg font-medium text-gray-500 lg:text-xl">
-                Hello <span className="text-customRed">name</span>, Welcome to your Dashboard
+              Hello <span className="text-customRed">name</span>, Welcome to
+              your Dashboard
             </p>
           </div>
-          <img src={banner}></img>
+          <div className="w-full flex justify-center">
+            <img
+              src={banner}
+              className="aspect-square max-w-[500px] justify-self-start max-h-[500px] w-full"
+            ></img>
+          </div>
         </section>
       </div>
     </>

src/components/dashboard-components/Widget-section/Widget-section.jsx

@@ -1,51 +1,47 @@
 import { Link } from "react-router-dom";
-
+import WidgetCard from "./WidgetCard";
 
 const WidgetSection = () => {
-    return(
-        <div className="w-full bg-light-blue md:px-20 md:py-10 p-2">
-            <div className="flex flex-row justify-between items-center md:mt-10 md:px-10 py-8 px-4">
-                <h1 className="font-bold md:text-4xl text-2xl">Widgets</h1>
-                <Link to="/dashboard/createnewrenter">
-                <div className="bg-textWhite p-4 font-semibold rounded-md hover:shadow-widget">Create new Rental</div>
-                </Link>
-            </div>
-            <div className="flex flex-col md:flex-row gap-10 justify-around items-center my-10 md:my-8 mx-2">
-            <Link to="/dashboard/renterdetails">
-                <section className="md:w-80 md:h-60 w-40 h-40  bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                    Rental's Details
-                </section>
-                </Link>
-                <Link to="/dashboard/paymentsrecord">
-                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                    Rent Payment Record
-                </section>
-                </Link>
-                <Link to="/dashboard/searchrenter">
-                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                Search Renter
-                </section>
-                </Link>
-            </div>
-            <div className="flex flex-col md:flex-row gap-10 justify-around items-center my-5 md:my-8 mx-2">
-            <Link to="/dashboard/totalrentcollected">
-                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                Total Rent collected
-                </section>
-                </Link>
-                <Link to="/dashboard/propertylisting">
-                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                Property Listing
-                </section>
-                </Link>
-                <Link to="/dashboard/addnewrenter">
-                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
-                Add New Rental
-                </section>
-                </Link>
-            </div>
-        </div>
-    )
-}
+  return (
+    <div className="w-full bg-light-blue m-auto p-2">
+      <div className="flex flex-row justify-between gap-2 items-center md:mt-10 md:px-10 py-8 px-4">
+        <h1 className="font-bold md:text-4xl text-2xl">Widgets</h1>
+
+        <Link to="/dashboard/createnewrenter">
+          <div className="bg-textWhite p-4 font-semibold rounded-md hover:shadow-widget">
+            Create new Rental
+          </div>
+        </Link>
+      </div>
+
+      <div className="w-9/12 sm:w-10/12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 justify-center items-center max-w-[1000px] my-5 mx-auto">
+        <WidgetCard
+          route={"/dashboard/renterdetails"}
+          widgetName={"Rental's Details"}
+        />
+        <WidgetCard
+          route={"/dashboard/paymentsrecord"}
+          widgetName={"Rent Payment Record"}
+        />
+        <WidgetCard
+          route={"/dashboard/searchrenter"}
+          widgetName={"Total Rent collected"}
+        />
+        <WidgetCard
+          route={"/dashboard/totalrentcollected"}
+          widgetName={"Property Listing"}
+        />
+        <WidgetCard
+          route={"/dashboard/propertylisting"}
+          widgetName={"Rental's Details"}
+        />
+        <WidgetCard
+          route={"/dashboard/addnewrenter"}
+          widgetName={"Rental's Details"}
+        />
+      </div>
+    </div>
+  );
+};
 
-export default WidgetSection;
+export default WidgetSection;

src/components/dashboard-components/Widget-section/WidgetCard.jsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom";
+
+const WidgetCard = ({ route, widgetName }) => {
+  return (
+    <Link to={route}>
+      <section className="w-full m-auto aspect-square bg-textWhite p-4 font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+        <span>{widgetName}</span>
+      </section>
+    </Link>
+  );
+};
+export default WidgetCard;