Skip to content

Commit

Permalink
Merge pull request #2508 from tochibedford/dev
Browse files Browse the repository at this point in the history 
[ZCG_13] Fix the About page issues with the styling
  • Loading branch information
@billmal071
billmal071 authored Nov 9, 2022
2 parents 3203c62 + 5af94ac commit cb12852
Show file tree
Hide file tree
Showing 4 changed files with 473 additions and 231 deletions.
139 changes: 105 additions & 34 deletions packages/main/src/pages/static/about/About.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -13,6 +15,7 @@
}
.working_remote {
text-align: center !important;
display: none !important;
margin-top: 2%;
}

Expand Down Expand Up @@ -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%;
Expand All @@ -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%;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -238,7 +292,7 @@
display: none;
}
.carousel {
display: block;
display: none;
}
.carouselCaption {
position: relative !important;
Expand Down Expand Up @@ -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;
Expand Down
26 changes: 13 additions & 13 deletions packages/main/src/pages/static/about/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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?
Expand Down
3 changes: 2 additions & 1 deletion packages/main/src/translations/translation-dictionary/index.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand Down
Loading

0 comments on commit cb12852

Please sign in to comment.