[ZCG_13] Fix the About page issues with the styling

packages/main/src/pages/static/about/About.module.css

@@ -3,8 +3,10 @@
   text-align: center;
 }
 .banner {
-  padding-top: 11%;
+  padding-top: 9em;
   text-align: center;
+  width: 80%;
+  margin: 0 auto;
 }
 .banner > p {
   margin: 0 auto;
@@ -13,6 +15,7 @@
 }
 .working_remote {
   text-align: center !important;
+  display: none !important;
   margin-top: 2%;
 }
 
@@ -49,13 +52,13 @@
   font-weight: 500;
 }
 .zurichat {
-  padding: 3em 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #ffffff;
   background-color: #00b87c;
+  padding: 3rem;
 }
 .zurichat_h3 {
   padding: 3%;
@@ -66,13 +69,18 @@
 .vector {
   padding: 1rem;
   margin-left: 1.2rem;
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
 }
 .vector > h6 {
   font-size: 23px;
+  text-align: center;
 }
 .vector > p {
   font-size: 14px;
+  text-align: center;
 }
 .vector > img {
   width: 15%;
@@ -93,55 +101,58 @@
 
 .btn_sale {
   text-transform: uppercase;
-  color: black;
-  margin-top: 2rem;
+  color: #00b87c;
+  margin-top: 2em;
   font-weight: 600;
-  padding: 10px 16px;
+  padding: 0.625em 1em;
   background-color: #ffffff;
+  border: 1px solid #00b87c;
   border-radius: 0.3rem;
-  height: 3rem;
-  border: none;
 }
 .btn_sale:hover {
-  color: #00b87c;
-  background-color: rgba(255, 255, 255, 0.7);
+  color: #ffffff;
+  background-color: #00b87c;
   border: 2px solid #fff;
 }
 .signup_cta {
   text-align: center;
-  width: 100%;
-  height: 100%;
+  width: 70%;
   justify-content: center;
   align-items: center;
-  max-width: 1100px;
+  margin: 0 auto;
 }
-.signup-cta .text {
+.signup_cta .text {
   color: white;
 }
 .btn_free {
   background-color: transparent;
   color: #fff;
   border-radius: 5%;
   border: 1px solid #fff;
-  margin-left: 1%;
   text-transform: uppercase;
   margin-top: 2rem;
   box-shadow: 2px 4px 8px solid #fff;
   font-weight: 600;
 }
 .working_remote_section {
-  display: flex;
+  display: none !important;
+  flex: 1 0 0%;
   margin-top: 2%;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: st;
 }
 
 .counter > h3 {
   font-size: 55px;
   line-height: 50px;
   padding: 0;
   font-weight: 700;
+  text-align: center;
+}
+
+.counter > p {
+  text-align: center;
 }
 
 .channel {
@@ -150,37 +161,85 @@
   margin-top: 3%;
 }
 .team > img {
-  width: 30vw;
-  position: relative;
-  top: -16%;
+  width: 100%;
 }
+
+.team__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+}
+
 .span {
   text-decoration: underline;
 }
 .carousel {
+  display: none !important;
+}
+
+.special_features,
+.counter_div {
   display: none;
 }
 
+.signup_cta {
+  width: 70%;
+}
+
 @media only screen and (max-width: 1040px) {
+
   .banner {
-    padding-top: 25%;
+    padding-top: 9em;
   }
 
-  .join_us > p {
-    text-align: center;
+  .desktop_carousel,
+  .second_carousel_block {
+    flex-wrap: wrap;
+    justify-content: center;
+    display: none !important;
   }
 
-  .h3m {
+  .working_remote_section {
+    flex-basis: 30%;
+    flex-grow: 0;
+  }
+
+
+}
+
+@media only screen and (max-width: 767.98px){
+  .banner > h1 {
+    font-size: 32px;
+    line-height: 36px;
+    font-weight: 700;
+  }
+  .signup_cta {
     text-align: center;
+    width: 90%;
+    font-size: 1rem;
+  }
+
+  .desktop_carousel {
+    flex-wrap: wrap;
+  }
+
+  .working_remote_section {
+    flex-basis: 45%;
+  }
+
+  .zurichat_text {
+    font-size: clamp(25px, 4vw, 32px);
+    line-height: 1.3;
   }
 }
 
 @media only screen and (max-width: 600px) {
   .banner {
-    padding-top: 27%;
+    padding-top: 9em;
   }
   .banner > h1 {
-    font-size: 1.5rem;
+    font-size: 25px;
     line-height: revert;
     font-weight: 700;
     padding: 1em 1em 0.2em;
@@ -205,16 +264,11 @@
   .team > img {
     width: 100%;
   }
-  .join_us {
-    text-align: center;
-  }
-  .join_us > h3 {
-    font-size: 24px;
-    text-align: center;
-  }
+
   .join_us > p {
     padding: 0 4%;
     font-size: 14px;
+    text-align: center;
   }
   .span {
     text-decoration: none;
@@ -238,7 +292,7 @@
     display: none;
   }
   .carousel {
-    display: block;
+    display: none;
   }
   .carouselCaption {
     position: relative !important;
@@ -273,6 +327,23 @@
     justify-content: center;
     margin: 0 auto;
   }
+
+  .join_us > h3 {
+    font-size: 24px;
+    line-height: 28px;
+    padding: 0 4%;
+    text-align: center ;
+  }
+
+  .join_us > p {
+    text-align: center;
+  }
+
+
+  .team__container {
+    flex-direction: column;
+  }
+
   .counter > h3 {
     font-size: 35px;
     line-height: 50px;

packages/main/src/pages/static/about/index.jsx

@@ -33,7 +33,7 @@ const About = () => {
           <p>ZuriChat {t("about.banner.description")}</p>
         </div>
         <div
-          className={`row flex align-items-center justify-content-center pt-3 text-center`}
+          className={`row flex align-items-center justify-content-center pt-3 ${styles.counter_div}`}
         >
           <div className={`col-lg-4 col-md-4 col-sm-4 ${styles.counter}`}>
             <h3>100k+</h3>
@@ -62,7 +62,7 @@ const About = () => {
       {/* <Companies /> */}
       {/* Who we are and how to join us */}
       <div className={`container mb-5 ${styles.to_join}`}>
-        <div className={`row pt-3`}>
+        <div className={`${styles.team__container}`}>
           <div className={`col-lg-6  ${styles.team}`}>
             <img src={team} alt={"image of teams"} srcSet="" />
           </div>
@@ -90,25 +90,25 @@ const About = () => {
           </p>
         </div>
         {/* Carousel for mobile view  */}
-        <Carousel />
-        <div className={`row pt-3 ${styles.desktop_carousel}`}>
-          <div className={`col ${styles.working_remote_section}`}>
+        {/* <Carousel /> */}
+        <div className={`${styles.desktop_carousel}`}>
+          <div className={`${styles.working_remote_section}`}>
             <img src={channel} alt={"centralized space"} />
             <h6>{t("about.highlights.channels.title")}</h6>
             <p>
               {t("about.highlights.channels.description")} <br />
               {t("about.highlights.channels.description_")}
             </p>
           </div>
-          <div className={`col ${styles.working_remote_section}`}>
+          <div className={`${styles.working_remote_section}`}>
             <img src={holiday} alt={"image of calender"} />
             <h6>{t("about.highlights.holidayCalender.title")}</h6>
             <p>
               {t("about.highlights.holidayCalender.description")} <br />
               {t("about.highlights.holidayCalender.description_")}
             </p>
           </div>
-          <div className={`col ${styles.working_remote_section}`}>
+          <div className={`${styles.working_remote_section}`}>
             <img src={deadline} alt={"image of alarm clock"} />
             <h6> {t("about.highlights.companyDeadline.title")}</h6>
             <p>
@@ -119,7 +119,7 @@ const About = () => {
               feature.
             </p>
           </div>
-          <div className={`col ${styles.working_remote_section}`}>
+          <div className={`${styles.working_remote_section}`}>
             <img src={quick} alt={"image of quick reply app"} />
             <h6>{t("about.highlights.quickReply.title")}</h6>
             <p>
@@ -128,7 +128,7 @@ const About = () => {
               {t("about.highlights.quickReply.description_")} <br />
             </p>
           </div>
-          <div className={`col ${styles.working_remote_section}`}>
+          <div className={`${styles.working_remote_section}`}>
             <img src={todos} alt={"image to do list"} />
             <h6>{t("about.highlights.todoList.title")}</h6>
             <p>
@@ -145,11 +145,11 @@ const About = () => {
         <h3>{t("about.features.title")}</h3>
         <p>{t("about.features.description")}</p>
       </div>
-      <CarouselSecond className={styles.carouselCaption} />
+      {/* <CarouselSecond className={styles.carouselCaption} /> */}
       <div
-        className={`container-fluid ${styles.second_carousel_block} mb-5 container`}
+      // className={`container-fluid ${styles.second_carousel_block} mb-5 container`}
       >
-        <div className={`row pt-3`}>
+        <div className={`${styles.special_features}`}>
           <div className={`col ${styles.vector}`}>
             <img src={user} alt={"image of a user"} />
             <h6 className={``}>{t("about.features.avatar.title")}</h6>
@@ -185,7 +185,7 @@ const About = () => {
       <div className={`container-fluid ${styles.zurichat}`}>
         <div className={`${styles.zurichat_section}`}>
           <div className={`${styles.signup_cta}`}>
-            <h3 className="text">
+            <h3 className={`${styles.zurichat_text}`}>
               Zuri Chat is a modern world platform that makes communicating with
               your team or organization faster, easier and more fun. Want to
               explore?

packages/main/src/translations/translation-dictionary/index.js

@@ -1,5 +1,6 @@
 // Export all translations
 import Home from "./pages/Home";
+import About from "./pages/About";
 import Login from "./pages/Login";
 import SignUp from "./pages/SignUp";
 import SignOut from "./pages/SignOut";
@@ -13,13 +14,13 @@ import Plugins from "./pages/Plugins";
 
 import Footer from "./components/Footer";
 import NavBar from "./components/NavBar";
-import About from "./pages/About";
 
 const resources = {};
 
 const Translations = [
   // Pages
   ...Home,
+  ...About,
   ...Login,
   ...SignUp,
   ...whyzurichat,