Added about us section

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;
+    }
+}

index.html

@@ -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>
 

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
 

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! {
-
+        <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>
     }
 }