diff --git a/assets/images/subjects-picture.JPG b/assets/images/subjects-picture.JPG new file mode 100644 index 0000000..e681e1c Binary files /dev/null and b/assets/images/subjects-picture.JPG differ diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..868fa71 --- /dev/null +++ b/css/about.css @@ -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; + } +} \ No newline at end of file diff --git a/index.html b/index.html index c483de1..c3826ec 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,8 @@ - + + diff --git a/locales/en.yml b/locales/en.yml index 63b953e..7cacd07 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -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 diff --git a/src/pages/about.rs b/src/pages/about.rs index 780c2c5..da9499c 100644 --- a/src/pages/about.rs +++ b/src/pages/about.rs @@ -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! { - +
+
+ {t!("about-us.title", locale = language.locale())} +
+
+
+ +
+ {t!("about-us.picture-caption", locale = language.locale())} +
+
+
+
+ {t!("about-us.description", locale = language.locale())} +
+
+
+ +
+
+
{t!("about-us.our-vision-title", locale = language.locale())}
+
{t!("about-us.our-vision-description", locale = language.locale())}
+
+
+
+
+ +
+
+
{t!("about-us.our-mission-title", locale = language.locale())}
+
{t!("about-us.our-mission-description", locale = language.locale())}
+
+
+
+
+
} }