Revamped the UI with vibrant color enhancements, refined margins, and sleek design tweaks for a more polished look and feel!

src/components/AboutUs-section/AboutUs.jsx

@@ -5,13 +5,13 @@ import rent from "./rent.json";
 
 const AboutUs = () => {
   return (
-    <div className="aboutUs-section">
+    <div className="aboutUs-section mt-5">
       <div id="AboutUs"></div>
-      <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 lg:flex-row m-[5%] bg-gradient-to-b lg:bg-gradient-to-r from-primaryGreen to-customRed rounded-3xl">
+      <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 lg:flex-row m-[5%] rounded-3xl" style={{backgroundColor:"#EBB4B6"}}>
         <Lottie className="rent-board-img text-primaryGreen w-[80%] lg:w-[50%]" animationData={rent} loop={true} />
         <div className=" w-full lg:w-[50%] p-[5%] ">
-          <p className="paragraph text-justify text-textWhite leading-6 md:leading-8">
+          <p className="paragraph text-justify text-black font-semibold leading-6 md:leading-8" style={{width:"560px",marginLeft:"-100px"}}>
             Rentalog is a web application that makes it easy for landlords to
             manage their rental properties. With Rentalog, landlords can keep
             track of important information about their renters, including their

src/components/Contact-section/Contact.jsx

@@ -10,11 +10,11 @@ const Contact = () => {
   return (
     <section className="flex flex-col w-full  px-[5%] gap-10 justify-center">
       <header id="ContactUs" className="flex justify-center align-middle mt-20">
-        <h1 className="text-5xl font-bold tracking-wider text-text-black font-monsterrat">
+        <h1 className="text-5xl font-bold tracking-wider text-text-black font-monsterrat mt-24">
           Contact Us
         </h1>
       </header>
-      <main className=" flex flex-wrap lg:gap-[5%] gap-[20px] justify-center items-center">
+      <main className=" flex flex-wrap lg:gap-[5%] gap-[20px] justify-center items-center" style={{marginTop:"-120px"}}>
         <ContactText />
         <ContactForm />
       </main>
@@ -37,6 +37,7 @@ const Contact = () => {
         </article>
       </div>
       <GoogleMap />
+
     </section>
   );
 };

src/components/Contact-section/GoogleMap.jsx

@@ -4,7 +4,8 @@ const GoogleMap = () => {
             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58265.11671813966!2d82.65743034423417!3d24.116619925848997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x398f30495517f2bd%3A0x3b90fd685599d38!2sShakti%20Nagar%2C%20Uttar%20Pradesh%20231222!5e0!3m2!1sen!2sin!4v1691494886758!5m2!1sen!2sin"
             width="100%"
             height="500"
-            style={{ border: 0 }}
+
+            style={{ border: 0, marginBottom:"50px"}}
             allowFullScreen=""
             loading="lazy"
             referrerPolicy="no-referrer-when-downgrade"

src/components/Footer-section/Footer.jsx

@@ -5,7 +5,7 @@ let year = date.getFullYear();
 const Footer = () => {
   return (
     <>
-      <div className="flex grow flex-col bg-primaryGreen text-textWhite px-10 py-[35px]">
+      <div className="flex grow flex-col text-textWhite px-10 py-[35px]" style={{backgroundColor:"black"}}>
         <div className="flex justify-center flex-wrap grow">
           <div className="flex flex-col justify-center items-center text-center lg:items-start lg:text-start basis-[300px] mx-10 my-5">
             <img

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

@@ -20,7 +20,10 @@
 .header-section li:hover {
   color: #1abc9c;
 }
-
+#rent{
+  margin-top: 50px;
+  width:500px;
+}
 .user-cta :last-child {
   justify-content: center;
   align-items: center;

src/components/Header-section/Header.jsx

@@ -8,10 +8,10 @@ const Header = () => {
         <Navbar />
         <div id="home"></div>
         <div className="header-text top-[15%] sm:top-[23%]">
-          <h1>
+          <h1 id="r">
             Welcome to <span>Rentalog</span>
           </h1>
-          <p>
+          <p id="rent">
             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.

src/components/Header-section/Navbar.jsx

@@ -117,9 +117,9 @@ const Navbar = () => {
                 <Link to="/register">
                   <button
                     type="button"
-                    className="flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md px-6 py-2 text-center bg-textWhite -mt-4"
+                    className="flex flex-row justify-center items-center gap-2 font-bold rounded-xl text-md px-6 py-2 text-center bg-[#1ABC9C] mt-4"
                   >
-                    <FiUser className="text-2xl" />
+                    <FiUser className="text-2xl bg-[#1ABC9C]" />
                     Register
                   </button>
                 </Link>
@@ -139,7 +139,7 @@ const Navbar = () => {
         <div
           className={
             doBlure
-              ? `absolute w-full h-full -z-20 bg-gray-light opacity-0`
+              ? `absolute w-full h-full -z-20 bg-gray-light opacity-60`
               : `absolute w-full h-full -z-20 bg-gray-light opacity-80`
           }
         ></div>

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

@@ -25,7 +25,7 @@ const Services = () => {
           );
         })}
       </div>
-      <div className="bg-[#D1F2EB] my-20 mb-0">
+      <div className="bg-[#b9baba] 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>

src/components/testimonial-section/Testimonial.jsx

@@ -12,19 +12,19 @@ const slides = [
     url: person01,
     name: "Deman",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "Rentalog.in is very amazing which helped me as well as many landlords to rent their homes easily and helped for people who want a home on rent.",
   },
   {
     url: person02,
     name: "Darla",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "I personally use this website to give my home on rent as it helped me to get many clients and also at their offered price.",
   },
   {
     url: person03,
     name: "Hedrik",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "I would really recommend this website to all the users who wants to sell their home on rent and to those who want to buy house on rent.",
   },
 ];
 
@@ -71,7 +71,7 @@ const Testimonial = () => {
         </div>
       </div>
       <div className="flex flex-col mx-auto w-[70%] justify-center text-center text-textWhite font-medium">
-        <small>{slides[slide].name}</small>
+        <small className="font-bold text-4xl">{slides[slide].name}</small>
         <p className="py-4">{slides[slide].paragraph}</p>
       </div>
 
@@ -94,13 +94,13 @@ const Testimonial = () => {
             onClick={() => goToSlide(slideIndex)}
             className="text-2xl cursor-pointer flex justify-center items-center w-[1.5em]"
           >
-            <RxDotFilled
+            {/* <RxDotFilled
               className={`${
                 slideIndex === slide
                   ? "text-textWhite border-dashed border-[2px] rounded-full text-4xl animate-[spin_3s_linear_infinite] delay-100"
                   : "text-black"
               }`}
-            />
+            /> */}
           </div>
         ))}
       </div>