Added eng translations for footer

css/footer.css

@@ -1,6 +1,6 @@
 .footer {
     width: 80%;
-    height: 400px;
+    height: 425px;
     margin-top: 150px;
 
     background-color: #00113B;
@@ -48,7 +48,9 @@
     justify-content: end;
     align-items: end;
 
-    width: 100px;
+    gap: 10px;
+
+    width: clamp(100px, 28vw, 185px);
     flex-grow: 0;
     height: 100%;
 }
@@ -57,6 +59,10 @@
     font-family: Poppins;
     font-size: 18px;
     font-weight: 600;
+    
+    width: 100%;
+
+    text-align: start;
 }
 .footer-before-line-second-column-description {
     color: white;
@@ -67,7 +73,7 @@
     opacity: 75%;
     white-space: pre-line;
 
-    text-align: end;
+    text-align: start;
 }
 .footer-line {
     background-color: white;
@@ -90,6 +96,7 @@
     font-size: 11px;
     color: white;
     opacity: 75%;
+    width: 45vw;
 
     text-align: start;
 }
@@ -97,8 +104,26 @@
 .footer-after-line-socials {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: end;
+    gap: 10px; 
     align-items: center;
 
     width: 100px;
+}
+
+.footer-after-line-social-frame {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 35px;
+    height: 35px;
+    border-radius: 100%;
+    text-decoration: none;
+
+    background-color: #4C40F7;
+    color: white
+}
+.footer-after-line-social-frame :hover {
+    cursor: pointer;
 }

css/language-picker.css

@@ -18,8 +18,9 @@
     align-items: center;
 }
 .language-picker-container:hover {
-    scale: 1.1;
+    scale: 1.2;
     cursor: pointer;
+    transition-duration: 0.5s;
 }
 
 .language-picker-selected-language-display {

css/start.css

@@ -88,6 +88,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    
+    white-space: pre-line;
 }
 
 .start-section-right-column-art-top-right-pill {
@@ -134,6 +136,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    white-space: pre-line;
 }
 
 .start-section-right-column-subject-1-title {

locales/en.yml

@@ -29,7 +29,17 @@ start:
     title-third-line: with us
   left-column-description: Our experienced team will create a tailored solution to maximize your business potential.
   left-column-button-text: Get Started >
-  right-column-subject-1-title: >
+  right-column-subject-1-title: |
     Web Design &
     Development
   right-column-subject-2-title: Marketing & Ads
+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
+    +62 (0) 000 0000 00
+  copyright-text: © 2023 Blanco Lorenzo - All rights reserved
+

locales/es.yml

@@ -35,3 +35,13 @@ start:
   right-column-subject-2-title: >
     Mercadeo &
     Publicidad
+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: Contacto
+  contact-info: >
+    Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakarta
+
+    info@blancolorenzo.pro
+    
+    +1 809 223 5564
+  copyright-text: © 2023 Blanco Lorenzo - All rights reserved

src/components/footer.rs

@@ -1,3 +1,4 @@
+use rust_i18n::t;
 use yew::prelude::*;
 
 use super::language_picker::Language;
@@ -9,21 +10,22 @@ pub struct PageFooterProps {
 
 #[function_component(PageFooter)]
 pub fn page_footer(props: &PageFooterProps) -> Html { //TODO: Add t!() everywhere
+    let language = props.language.clone();
     html! {
         <div class={"footer"}>
             <div class={"footer-before-line"}>
                 <div class={"footer-before-line-first-column"}>
                     <img class={"footer-before-line-first-column-logo"} src={"images/blanco-lorenzo-logo-white-transparent.png"}/>
                     <div class={"footer-before-line-first-column-paragraph"}>
-                        {"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."}
+                        {t!("footer.brand-description",  locale = language.locale())}
                     </div>
                 </div>
                 <div class={"footer-before-line-second-column"}>
                     <div class={"footer-before-line-second-column-title"}>
-                        {"Contact"}
+                        {t!("footer.contact-title",  locale = language.locale())}
                     </div>
                     <div class={"footer-before-line-second-column-description"}>
-                        {"Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakarta\n\ninfo@yourdomain.com\n\n+62 (0) 000 0000 00"}
+                        {t!("footer.contact-info",  locale = language.locale())}
                     </div>
                 </div>
             </div>
@@ -32,31 +34,18 @@ pub fn page_footer(props: &PageFooterProps) -> Html { //TODO: Add t!() everywher
 
             <div class={"footer-after-line"}>
                 <div class={"footer-after-line-copyright"}>
-                    {"© 2023 Blanco Lorenzo - Todos los derechos Reservados"}
+                    {t!("footer.copyright-text",  locale = language.locale())}
                 </div>
                 <div class={"footer-after-line-socials"}>
                     //TODO: Add all logos with href links
-                    {"a"}
+                    <a class="footer-after-line-social-frame" href={"https://instagram.com"}>
+                        <i class="fa-brands fa-instagram"></i>
+                    </a>
+                    <a class="footer-after-line-social-frame" href={"https://twitter.com"}>
+                        <i class="fa-brands fa-twitter"></i>
+                    </a>
                 </div>
             </div>
-
-            /*
-            <div class={"footer-call-to-action-container"}>
-                <input placeholder={"AAA"} class={"footer-call-to-action-input"}/>
-                <div class={"footer-call-to-action-button"}>
-                {"Subscríbete"}
-                </div>
-            </div>
-            */
-
         </div>
     }
-}
+}
-
-/*
-                <div class={"footer-copyright-text"}>{"© 2023 Blanco Lorenzo - Todos los derechos Reservados"}</div>
-                <div class={"footer-credit-container"}>
-                    <div class={"footer-credit"}>{"Powered by"}</div>
-                    <div class={"footer-credit-url"}>{"Blanco Studios"}</div>
-                </div>
- */