Added about us section
This commit is contained in:
Franklin
parent
bb3aacf81c
commit
f3ca2ce3d8
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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/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/about.css" rel="css" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
|
||||
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,13 +33,27 @@ start:
|
|||
Web Design &
|
||||
Development
|
||||
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:
|
||||
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-info: |
|
||||
Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakartaa
|
||||
|
||||
info@yourdomain.com
|
||||
info@blancolorenzo.pro
|
||||
|
||||
+62 (0) 000 0000 00
|
||||
copyright-text: © 2023 Blanco Lorenzo - All rights reserved
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
use rust_i18n::t;
|
||||
use yew::prelude::*;
|
||||
|
||||
use crate::components::language_picker::Language;
|
||||
|
|
@ -7,9 +8,44 @@ pub struct AboutPageProps {
|
|||
pub language: Language
|
||||
}
|
||||
#[function_component(AboutPage)]
|
||||
pub fn about_page(_props: &AboutPageProps) -> Html {
|
||||
|
||||
pub fn about_page(props: &AboutPageProps) -> Html {
|
||||
let language = props.language.clone();
|
||||
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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue