Merge branch 'gauravsingh1281:main' into enhancement/issue-59/improve…

…-login-registration-page
2004shweta · Oct 17, 2023 · 81ad28f · 81ad28f
2 parents d3c2114 + 1abd40b
commit 81ad28f
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 7,219 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/AboutUs-section/AboutUs.jsx b/src/components/AboutUs-section/AboutUs.jsx
@@ -2,7 +2,7 @@ import rentBoardImg from "../.././assets/Images/rent-board.png";
 import "./AboutUs-section.css";
 const AboutUs = () => {
   return (
-    <div className="aboutUs-section">
+    <div id="AboutUs" className="aboutUs-section">
       <span className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center pt-10">About Us</span>
       <div className=" row flex flex-col justify-center items-center md:flex-row">
         <img

diff --git a/src/components/Contact-section/Contact.jsx b/src/components/Contact-section/Contact.jsx
@@ -4,7 +4,7 @@ import GoogleMap from './GoogleMap';
 const Contact = () => {
   return (
     <>
-      <header className="flex justify-center align-middle my-20">
+      <header id="ContactUs" className="flex justify-center align-middle my-20">
         <h1 className="text-5xl font-bold tracking-wider text-text-black font-monsterrat">
           Contact Us
         </h1>

diff --git a/src/components/Contact-section/ContactForm.jsx b/src/components/Contact-section/ContactForm.jsx
@@ -25,24 +25,24 @@ const ContactForm = () => {
           <form className="gap-x-5 w-full">
             <div className="flex flex-col md:flex-row mb-6 justify-between">
               <input
-                className="bg-green rounded-lg text-black h-16 md:w-6/12 mb-6 md:mb-0 placeholder-textBlack p-2"
+                className="border-2 border-green rounded-lg text-green-dark h-16 md:w-6/12 mb-6 md:mb-0 placeholder-textBlack p-2"
                 placeholder="First name"
                 style={{marginRight: "5px"}}
               />
               <input
-                className="bg-green rounded-lg h-16 md:w-6/12  text-black  placeholder-textBlack p-2"
+                className="border-2 border-green rounded-lg h-16 md:w-6/12 text-green-dark  placeholder-textBlack p-2"
                 placeholder="Last name"
               />
             </div>
             <div className="flex flex-col md:flex-row mb-6 justify-between">
               <input
-                className="bg-green rounded-lg h-16 w-full  text-black placeholder-textBlack p-2"
+                className="border-2 border-green rounded-lg h-16 w-full text-green-dark placeholder-textBlack p-2"
                 placeholder="Email"
               />
             </div>
 
             <textarea
-              className="bg-green rounded-lg w-full h-40  text-black  placeholder-textBlack mb-6 p-2"
+              className="border-2 border-green rounded-lg w-full h-40 text-green-dark placeholder-textBlack mb-6 p-2"
               placeholder="Your message here"
             />
             <div className="flex justify-center md:justify-start ">

diff --git a/src/components/Footer-section/Footer.jsx b/src/components/Footer-section/Footer.jsx
@@ -1,6 +1,7 @@
 import logo from "../../assets/Images/logo.png";
 import { FaTwitter, FaGithub, FaInstagram } from "react-icons/fa";
-
+let date = new Date();
+let year = date.getFullYear();
 const Footer = () => {
   return (
     <footer>
@@ -40,17 +41,25 @@ const Footer = () => {
         </div>
         <div className="flex-1">
           <ul>
-            <li className="font-semibold">Home</li>
-            <li className="font-semibold">About Us</li>
-            <li className="font-semibold">Contact Us</li>
-            <li className="font-semibold">Rentals</li>
+            <li className="font-semibold">
+              <a href="/">Home</a>
+            </li>
+            <li className="font-semibold">
+              <a href="#AboutUs">About Us</a>
+            </li>
+            <li className="font-semibold">
+              <a href="#ContactUs">Contact Us</a>
+            </li>
+            <li className="font-semibold">
+              <a href="#Service">Rentals</a>
+            </li>
           </ul>
         </div>
       </div>
       <div>
         <p className="bg-black text-textWhite text-center py-2">
-          © <span>{new Date().getFullYear()}</span> || All Rights Reserved ||
-          The Virtual World Maker
+          © <span>{year}</span> || All Rights Reserved || The Virtual World
+          Maker
         </p>
       </div>
     </footer>

diff --git a/src/components/Header-section/Header.jsx b/src/components/Header-section/Header.jsx
@@ -1,4 +1,5 @@
 import '../Header-section/Header-section.css'
+import { Link } from "react-router-dom";
 import Navbar from './Navbar';
 const Header = () => {
     return (
@@ -8,7 +9,9 @@ const Header = () => {
                 <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>
-                    <button className='btn'>Get Started</button>
+                    <Link to="/register">
+                        <button className='btn'>Get Started</button>
+                    </Link>
                 </div>
             </div>
         </>

diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
@@ -45,10 +45,10 @@ const Navbar = () => {
             <div className="mt-4 h-[2px] w-600 bg-textWhite rounded-full"></div>
 
             <div className="flex flex-col gap-8 justify-center items-center mt-10">
-              <div className="text-textWhite">HOME</div>
-              <div className="text-textWhite">CONTACT</div>
-              <div className="text-textWhite">ABOUT</div>
-              <div className="text-textWhite">RENTALS</div>
+              <a href="/" aria-current="page"><div className="text-textWhite">HOME</div></a>
+              <a href="#AboutUs" aria-current="page"><div className="text-textWhite">ABOUT</div></a>
+              <a href="#ContactUs" aria-current="page"><div className="text-textWhite">CONTACT</div></a>
+              <a href="#Service" aria-current="page"><div className="text-textWhite">RENTALS</div></a>
               <div className="text-gray-dark">
                 <Link to="/login">
                   <button
@@ -117,22 +117,22 @@ const Navbar = () => {
           >
             <ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
               <li>
-                <a href="#" aria-current="page">
+                <a href="/" aria-current="page">
                   HOME
                 </a>
               </li>
               <li>
-                <a href="#" aria-current="page">
+                <a href="#AboutUs" aria-current="page">
                   ABOUT
                 </a>
               </li>
               <li>
-                <a href="#" aria-current="page">
+                <a href="#ContactUs" aria-current="page">
                   CONTACT
                 </a>
               </li>
               <li>
-                <a href="#" aria-current="page">
+                <a href="#Service" aria-current="page">
                   RENTALS
                 </a>
               </li>
@@ -170,4 +170,4 @@ const Navbar = () => {
     </>
   );
 };
-export default Navbar;
+export default Navbar;
diff --git a/src/components/Services-section/Services-section.jsx b/src/components/Services-section/Services-section.jsx
@@ -5,7 +5,7 @@ import placeName from "./placeName";
 const Services = () => {
   return (
     <>
-      <h1 className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
+      <h1 id="Service" className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
         Our Services Includes
       </h1>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 md:mx-36 sm:mx-24 mx-16">

diff --git a/src/components/Services-section/ServicesCard.jsx b/src/components/Services-section/ServicesCard.jsx
@@ -1,8 +1,8 @@
 import PropTypes from "prop-types";
 const ServicesCard = (props) => {
     return (
-        <div className={props.bgColor + " rounded-xl"} >
-            <div className="flex gap-4 p-8">
+        <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}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,6 +13,7 @@ export default {
       "primaryGreen": "#1ABC9C",
       "customRed": "#CD4347",
       "green": "#1ABC93",
+      "green-dark": "#047558",
       "textBlack": "#312F2F",
       "textWhite": "#F8F8F8",
       "black": "#000000",