Added about us section

This commit is contained in:
Franklin 2023-04-28 15:38:34 -04:00
parent bb3aacf81c
commit f3ca2ce3d8
5 changed files with 209 additions and 5 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

153
css/about.css Normal file
View File

@ -0,0 +1,153 @@
.about-us-container {
margin-top: clamp(50px, 20vw, 150px);
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
}
.about-us-title {
font-family: Poppins;
font-size: clamp(30px, 4.5vw, 45px);
font-weight: bold;
color: #111029;
text-align: center;
}
.about-us-content-container {
margin-top: 30px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
height: 100%;
}
.about-us-content-first-column {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
height: 100%;
}
.about-us-content-first-column-picture {
object-fit: cover;
width: 330px;
height: 330px;
border-radius: 20px;
border: 0.6px solid #EDF8FF;
filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.35));
}
.about-us-content-first-column-caption {
font-family: Poppins;
font-size: 22px;
font-weight: bold;
color: #111029;
text-align: center;
margin-top: 15px;
}
.about-us-content-second-column {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.about-us-content-second-column-paragraph {
text-align: justify;
font-size: 15px;
font-family: Poppins;
font-weight: 400;
white-space: pre-line;
}
.about-us-content-second-column-value-container {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
gap: 10px;
width: calc(100% - 30px);
padding: 20px 15px;
background-color: #E3E3E3;
border-radius: 10px;
}
.about-us-content-second-column-value-check {
background-color: #6B77E5;
color: white;
width: 20px;
height: 20px;
font-size: 12px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.about-us-content-second-column-value-text-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 10px;
width: 90%;
}
.about-us-content-second-column-value-text-header {
font-family: Poppins;
font-size: 15px;
font-weight: 700;
text-align: start;
}
.about-us-content-second-column-value-text-body {
font-family: Poppins;
font-size: 12px;
font-weight: 300;
text-align: start;
color: #7D7D7D;
}
@media only screen and (min-width: 750px) {
.about-us-content-container {
flex-direction: row;
gap: 100px;
}
.about-us-content-first-column {
width: 30vw;
}
.about-us-content-second-column {
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
}
.about-us-content-first-column-picture {
width: 370px;
height: 370px;
}
}

View File

@ -13,7 +13,8 @@
<link data-trunk type="text/css" href="css/call_to_action.css" rel="css" /> <link data-trunk type="text/css" href="css/call_to_action.css" rel="css" />
<link data-trunk type="text/css" href="css/service_card.css" rel="css" /> <link data-trunk type="text/css" href="css/service_card.css" rel="css" />
<link data-trunk type="text/css" href="css/language-picker.css" rel="css" /> <link data-trunk type="text/css" href="css/language-picker.css" rel="css" />
<link data-trunk type="text/css" href="css/about.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>

View File

@ -33,13 +33,27 @@ start:
Web Design & Web Design &
Development Development
right-column-subject-2-title: Marketing & Ads right-column-subject-2-title: Marketing & Ads
about-us:
title: Get to know us a little better
picture-caption: We're Ready to Grow your Business
description: |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis elit id mauris luctus euismod. Nullam eget lectus faucibus, venenatis mauris ut, tincidunt tellus. Etiam nec malesuada quam. Proin eget sem vel augue imperdiet tristique id id odio. Sed interdum, felis vel dignissim vulputate, dolor libero sagittis odio, quis tincidunt tellus orci ut tellus. Suspendisse eu massa sem. In convallis eu augue at pellentesque.
Donec tempor eleifend nibh. Maecenas commodo dolor sit amet blandit ultricies.
Aenean eget consequat massa.
our-vision-title: Our Vision
our-mission-title: Our Mission
our-vision-description: Lorem ipsum dolor sit amet consectetur. Massa mauris etiam fames pellentesque hendrerit dictum.
our-mission-description: Lorem ipsum dolor sit amet consectetur. Massa mauris etiam fames pellentesque hendrerit dictum.
footer: footer:
brand-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. brand-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
contact-title: Contact contact-title: Contact
contact-info: | contact-info: |
Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakartaa Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakartaa
info@yourdomain.com info@blancolorenzo.pro
+62 (0) 000 0000 00 +62 (0) 000 0000 00
copyright-text: © 2023 Blanco Lorenzo - All rights reserved copyright-text: © 2023 Blanco Lorenzo - All rights reserved

View File

@ -1,3 +1,4 @@
use rust_i18n::t;
use yew::prelude::*; use yew::prelude::*;
use crate::components::language_picker::Language; use crate::components::language_picker::Language;
@ -7,9 +8,44 @@ pub struct AboutPageProps {
pub language: Language pub language: Language
} }
#[function_component(AboutPage)] #[function_component(AboutPage)]
pub fn about_page(_props: &AboutPageProps) -> Html { pub fn about_page(props: &AboutPageProps) -> Html {
let language = props.language.clone();
html! { html! {
<div class={"about-us-container"}>
<div class={"about-us-title"}>
{t!("about-us.title", locale = language.locale())}
</div>
<div class={"about-us-content-container"}>
<div class={"about-us-content-first-column"}>
<img class={"about-us-content-first-column-picture"} src={"images/subjects-picture.JPG"}/>
<div class={"about-us-content-first-column-caption"}>
{t!("about-us.picture-caption", locale = language.locale())}
</div>
</div>
<div class={"about-us-content-second-column"}>
<div class={"about-us-content-second-column-paragraph"}>
{t!("about-us.description", locale = language.locale())}
</div>
<div class={"about-us-content-second-column-value-container"}>
<div class={"about-us-content-second-column-value-check"}>
<i class="fa-solid fa-check"></i>
</div>
<div class={"about-us-content-second-column-value-text-container"}>
<div class={"about-us-content-second-column-value-text-header"}>{t!("about-us.our-vision-title", locale = language.locale())}</div>
<div class={"about-us-content-second-column-value-text-body"}>{t!("about-us.our-vision-description", locale = language.locale())}</div>
</div>
</div>
<div class={"about-us-content-second-column-value-container"}>
<div class={"about-us-content-second-column-value-check"}>
<i class="fa-solid fa-check"></i>
</div>
<div class={"about-us-content-second-column-value-text-container"}>
<div class={"about-us-content-second-column-value-text-header"}>{t!("about-us.our-mission-title", locale = language.locale())}</div>
<div class={"about-us-content-second-column-value-text-body"}>{t!("about-us.our-mission-description", locale = language.locale())}</div>
</div>
</div>
</div>
</div>
</div>
} }
} }