Enhanced About Page

Pages/About-Us/index.html

@@ -103,34 +103,80 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
   </header>
 
   <!-- About Us -->
-  <div class="container1">
-  <div class="w-[80vw] text-center mx-auto my-0 info-text">
-    <p class=" wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para1">
-      Welcome to Virtuo Learn, a leading online education platform that offers a range of cutting-edge tools and
-      resources designed to enhance the learning experience of students of all ages and backgrounds.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para2">
-      At Virtuo Learn, we believe that every student deserves access to quality education that is personalized, fun,
-      interactive, and easy. That's why we have developed a comprehensive range of features that are tailored to the
-      unique needs and learning styles of each student.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para3">
-      Our platform offers a vast library of video lectures, interactive simulations, 3D visualizations, and quizzes that
-      provide instant feedback to help students track their progress and identify their areas of strengths and
-      weaknesses. Our doubt engine is designed to resolve any doubts that students may have, providing a seamless
-      learning experience.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para4">
-      We are passionate about technology and its ability to empower students to achieve their full potential. Our team
-      of experienced educators and technologists work tirelessly to develop innovative tools and resources that enable
-      students to learn and grow at their own pace.
-    </p>
-    <p class="wrap text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl para5">
-      Thank you for choosing Virtuo Learn as your partner in learning. We look forward to helping you achieve your goals
-      and unlock your full potential.</p>
-    </p>
-  </div>
+  <div id="about-us">
+    <div class="about-us-block">
+        <div class="about-us-community">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="community-img" src="./assets/video.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Extensive Video Library</div>
+            </div>
+            <p class="about-us-blk-para">Virtuo Learn offers a vast library of video lectures covering a wide range of subjects. These high-quality videos are designed to cater to different learning styles, providing clear and engaging explanations to help students understand complex topics at their own pace.</p>
+        </div>
+        <div class="about-us-product">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="product-img" src="./assets/3d.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">3D Visualisations</div>
+            </div>
+            <p class="about-us-blk-para">The platform features interactive simulations and 3D visualizations that make learning more immersive and fun. These tools help students grasp difficult concepts by visualizing them in a dynamic and interactive environment, enhancing their overall learning experience.</p>
+        </div>
+    </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="./assets/quiz.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Personalized Quizzes</div>
+            </div>
+            <p class="about-us-blk-para">Virtuo Learn provides personalized quizzes that offer instant feedback. This feature allows students to track their progress, identify their strengths and weaknesses, and receive immediate guidance on areas that need improvement, ensuring a more tailored and effective learning process.</p>
+        </div>
+        <div class="about-us-event">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <img id="event-img" src="./assets/doubt.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+                <div class="about-us-blk-text">Doubt Resolution</div>
+            </div>
+            <p class="about-us-blk-para">The platform includes a sophisticated doubt engine designed to resolve students' queries efficiently. This tool ensures that learners can quickly get answers to their questions, maintaining a seamless learning experience without prolonged interruptions.</p>
+        </div>
+    </div>
 </div>
+
+<script>
+  document.querySelectorAll('.about-us-community').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/videohover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/video.png';
+});
+});
+
+document.querySelectorAll('.about-us-event').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/doubthover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/doubt.png';
+});
+});
+
+document.querySelectorAll('.about-us-product').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/3dhover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/3d.png';
+});
+});
+
+document.querySelectorAll('.about-us-location').forEach(function(element) {
+element.addEventListener('mouseover', function() {
+  element.querySelector('img').src = './assets/quizhover.png';
+});
+element.addEventListener('mouseleave', function() {
+  element.querySelector('img').src = './assets/quiz.png';
+});
+});
+</script>
+
+<!-- About U section ends -->
   <!-- footer -->
   <!-- <a class="no-underline inline-block" href="#" class="company-logo">
         <img src="./assets/asset 41.png" alt="company logo">

Pages/About-Us/style.css

@@ -110,4 +110,126 @@ nav {
     nav a {
       font-weight: normal;
       font-size: .90em;
-    }
+    }
+
+
+/* About Us CSS */
+
+.about-us {
+  display: block;
+  margin: auto;
+  width: 52.5rem;
+  height: 100%;
+  background-color: white;
+}
+
+.about-us-heading {
+  text-align: center;
+  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: 16rem;
+  border: 1px solid rgba(206, 212, 218, 1);
+  border-radius: 8px;
+  margin-bottom: 21px;
+}
+
+.about-us-community {
+  border: 2px solid #183b56;
+}
+
+.about-us-community:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-location {
+  border: 2px solid #183b56;
+}
+
+.about-us-location:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-product {
+  border: 2px solid #183b56;
+}
+
+.about-us-product:hover {
+  background: #183b56;
+  color: white;
+}
+
+.about-us-event {
+  border: 2px solid #183b56;
+}
+
+.about-us-event:hover {
+  background: #183b56;
+  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%;
+  }
+}