Merge branch 'main' into new-bugfixing-branch

Css-Files/aboutus.css

@@ -0,0 +1,119 @@
+.about-us {
+    display: block;
+    margin: auto;
+    width: 52.5rem;
+    height: 100%;
+    background-color: white;
+}
+
+.about-us-heading {
+    text-align: center;
+    font-size: 40px;
+    margin-bottom: 5rem;
+    margin-top: 5rem;
+}
+
+.about-us-block {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.about-us-community, .about-us-product, .about-us-event, .about-us-location {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 35%;
+    height: 18rem;
+    border: 1px solid rgba(206, 212, 218, 1);
+    border-radius: 8px;
+    margin-bottom: 21px;
+}
+
+.about-us-community {
+    border: 2px solid #1c413b;
+}
+
+.about-us-community:hover {
+    background: #1c413b;
+    color: white;
+}
+
+.about-us-location {
+    border: 2px solid #1c413b;
+}
+
+.about-us-location:hover {
+    background: #1c413b;
+    color: white;
+}
+
+.about-us-product {
+    border: 2px solid #1c413b;
+}
+
+.about-us-product:hover {
+    background: #1c413b;
+    color: white;
+}
+
+.about-us-event {
+    border: 2px solid #1c413b;
+}
+
+.about-us-event:hover {
+    background: #1c413b;
+    color: white;
+}
+
+.about-us-blk-text {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin-top: 1rem;
+}
+
+.about-us-blk-para {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .about-us-block {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+        width: 90%;
+        height: 100%;
+        padding: 0.5rem;
+    }
+}
+
+@media only screen and (max-width: 1020px) {
+    .about-us-block {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+        width: 90% !important;
+        height: 100%;
+        padding: 0.5rem;
+    }
+}
+
+@media only screen and (max-width: 1250px) {
+    .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+        width: 45%;
+    }
+}

index.html

@@ -192,6 +192,7 @@
      <!-- Google Fonts Link For Icons chatboxx -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+     <link rel="stylesheet" href="./Css-Files/aboutus.css" />
      <script src="chatboxx.js" defer></script>
 </head>
 
@@ -332,48 +333,82 @@ <h4 class="title"><a href="">Medicine use</a></h4>
 
 
     <section id="about" class="about">
-      <div class="container" data-aos="fade-up">
-        <div class="section-title">
-
-          <h2 style="text-align: center;">About Us</h2>
-
-          <p>RapiDoc is an online platform designed to provide comprehensive information about nearby hospitals and healthcare facilities, addressing a wide range of health-related issues. It serves as a one-stop destination for all your medical needs, offering an easy and efficient way to find essential healthcare services. Whether you're looking for the nearest hospital, specialized medical care, or urgent health services, RapiDoc simplifies the process with its user-friendly interface and extensive database. By centralizing health information, it ensures you have quick access to vital resources, enhancing your ability to make informed healthcare decisions and receive timely medical attention.
-
-          </p>
-        </div>
-
-        <div class="row">
-          <div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center
-     align-items-stretch position-relative">
-
-          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
-     justify-content-center py-5 px-lg-5">
-
-            <div class="icon-box">
-              <div class="icon"><i class="bx bx-heart"></i></div>
-              <h4 class="title"><a href="">HEALTH CHECKUPS</a></h4>
-              <p class="description">Bootcamps, personalised check-ups, newsletters, it’s all here.</p>
+      <div id="about-us">
+        <h1 class="about-us-heading">About Us</h1>
+        <div class="about-us-block">
+            <div class="about-us-community">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <img id="community-img" src="./images/checkup.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                    <div class="about-us-blk-text">Comprehensive Health Checkups</div>
+                </div>
+                <p class="about-us-blk-para">At Rapidoc, we prioritize your well-being with thorough health checkups that are designed to detect potential health issues early. Our comprehensive packages include a range of tests and screenings, providing a detailed analysis of your health status. Book your health checkup easily through our platform and receive personalized recommendations from our medical experts.</p>
             </div>
-
-            <div class="icon-box">
-              <div class="icon"><i class="bx bx-health"></i></div>
-              <h4 class="title"><a href="">EMERGENCY WARDS</a></h4>
-              <p class="description">Avoid rush and get immediate medical assistance, know the
-                wards and vacancies.
-              </p>
+            <div class="about-us-product">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <img id="product-img" src="./images/ward.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                    <div class="about-us-blk-text">Emergency Ward Availability</div>
+                </div>
+                <p class="about-us-blk-para">In critical situations, every second counts. Rapidoc offers real-time updates on the availability of emergency wards across various hospitals. This feature ensures that you can find the nearest hospital with an open emergency ward promptly, facilitating quicker access to urgent medical care when you need it most.</p>
             </div>
-
-            <div class="icon-box">
-              <div class="icon"><i class="bx bx-help-circle"></i></div>
-              <h4 class="title"><a href="">SERVICES</a></h4>
-              <p class="description">An apple a day won’t keep RapiDoc away. We are always here at your service,
-                bringing to you the best facilities.</p>
+        </div>
+        <div class="about-us-block">
+            <div class="about-us-location">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <img id="location-img" src="./images/appointment.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                    <div class="about-us-blk-text">Seamless Appointment Booking</div>
+                </div>
+                <p class="about-us-blk-para">Say goodbye to long queues and waiting times with Rapidoc's seamless appointment booking system. Our platform allows you to prebook appointments with specialists across numerous hospitals. This ensures you receive timely consultations and reduces the hassle of waiting, making your healthcare experience more efficient and convenient.</p>
+            </div>
+            <div class="about-us-event">
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <img id="event-img" src="./images/services.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                    <div class="about-us-blk-text">Personalized Healthcare Services</div>
+                </div>
+                <p class="about-us-blk-para">Rapidoc is dedicated to offering personalized healthcare services tailored to meet your unique needs. Our platform connects you with a variety of specialists and healthcare providers, ensuring you receive the best possible care. From tailored treatment plans to ongoing health management, Rapidoc supports your journey to optimal health with expert guidance and personalized attention.</p>
             </div>
-          </div>
         </div>
+    </div>
+    </section>
 
-      </div>
-    </section><!-- End About Section -->
+    <script>
+      document.querySelectorAll('.about-us-community').forEach(function(element) {
+  element.addEventListener('mouseover', function() {
+      element.querySelector('img').src = './images/checkuphover.png';
+  });
+  element.addEventListener('mouseleave', function() {
+      element.querySelector('img').src = './images/checkup.png';
+  });
+});
+
+document.querySelectorAll('.about-us-event').forEach(function(element) {
+  element.addEventListener('mouseover', function() {
+      element.querySelector('img').src = './images/serviceshover.png';
+  });
+  element.addEventListener('mouseleave', function() {
+      element.querySelector('img').src = './images/services.png';
+  });
+});
+
+document.querySelectorAll('.about-us-product').forEach(function(element) {
+  element.addEventListener('mouseover', function() {
+      element.querySelector('img').src = './images/wardhover.png';
+  });
+  element.addEventListener('mouseleave', function() {
+      element.querySelector('img').src = './images/ward.png';
+  });
+});
+
+document.querySelectorAll('.about-us-location').forEach(function(element) {
+  element.addEventListener('mouseover', function() {
+      element.querySelector('img').src = './images/appointmenthover.png';
+  });
+  element.addEventListener('mouseleave', function() {
+      element.querySelector('img').src = './images/appointment.png';
+  });
+});
+  </script>
+
+    <!-- End About Section -->
 
 
     <!-- ################## Counts Section ################## -->
@@ -382,7 +417,7 @@ <h4 class="title"><a href="">SERVICES</a></h4>
     <section id="counts" class="counts">
       <div class="container" data-aos="fade-up">
 
-        <div class="row no-gutters">
+        <div class="row no-gutters" >
 
           <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
             <div class="count-box">
@@ -399,7 +434,7 @@ <h4 class="title"><a href="">SERVICES</a></h4>
               <i class="fas fa-bed"></i>
               <span data-purecounter-start="0" data-purecounter-end="36" data-purecounter-duration="1"
                 class="purecounter"></span>
-              <p><strong>Beds Available</strong> <br> <br>Beds available at your nearest emergency centers.</p><br>
+              <p><strong>Beds Available</strong> <br><br>Nearby emergency beds available.</p><br>
               <a href="">Find out more &raquo;</a>
             </div>
           </div>