Footer

css/footer.css

@@ -0,0 +1,104 @@
+.footer {
+    width: 80%;
+    height: 400px;
+    margin-top: 150px;
+
+    background-color: #00113B;
+    
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0px 10vw;
+}
+.footer-before-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+}
+.footer-before-line-first-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: start;
+    gap: 10px;
+    height: 100%;
+}
+.footer-before-line-first-column-logo {
+    object-fit: cover;
+    width: 50px;
+    height: 75px;
+}
+.footer-before-line-first-column-paragraph {
+    width: 40vw;
+    font-family: Poppins;
+    font-size: clamp(9px, 1.8vw, 16px);
+    color: white;
+    line-height: 24px;
+    opacity: 75%;
+    text-align: justify;
+}
+.footer-before-line-second-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: end;
+
+    width: 100px;
+    flex-grow: 0;
+    height: 100%;
+}
+.footer-before-line-second-column-title {
+    color: white;
+    font-family: Poppins;
+    font-size: 18px;
+    font-weight: 600;
+}
+.footer-before-line-second-column-description {
+    color: white;
+    font-family: Poppins;
+    font-size: clamp(9px, 1.8vw, 16px);
+    font-weight: 400;
+    line-height: 20px;
+    opacity: 75%;
+    white-space: pre-line;
+
+    text-align: end;
+}
+.footer-line {
+    background-color: white;
+    width: 100%;
+    height: 1px;
+
+    margin: 20px 0px;
+}
+
+.footer-after-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.footer-after-line-copyright {
+    font-family: Poppins;
+    font-size: 11px;
+    color: white;
+    opacity: 75%;
+
+    text-align: start;
+}
+
+.footer-after-line-socials {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+
+    width: 100px;
+}

locales/es.yml

@@ -17,7 +17,7 @@ services-section:
       title: Lógica de Negocios
       description: We efficientize your business critical operations and speed up your services & processes.
     fourth:
-      title: Manejo de Redes Sociales
+      title: Manejo de Redes
       description: We plan and execute effective social media strategies to increase visibility and engagement. 
     fifth:
       title: Marketing Digital

src/components/footer.rs

@@ -1,15 +1,42 @@
 use yew::prelude::*;
 
+use super::language_picker::Language;
+
+#[derive(PartialEq, Properties)]
+pub struct PageFooterProps {
+    pub language: Language,
+}
+
 #[function_component(PageFooter)]
-pub fn page_footer() -> Html {
+pub fn page_footer(props: &PageFooterProps) -> Html { //TODO: Add t!() everywhere
     html! {
         <div class={"footer"}>
-            <div class={"footer-brand-container"}>
+            <div class={"footer-before-line"}>
-                <img class={"footer-logo"} src={"images/logo-white.png"}/>
+                <div class={"footer-before-line-first-column"}>
-                <div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
+                    <img class={"footer-before-line-first-column-logo"} src={"images/blanco-lorenzo-logo-white-transparent.png"}/>
-                <div class={"footer-credit-container"}>
+                    <div class={"footer-before-line-first-column-paragraph"}>
-                    <div class={"footer-credit"}>{"Powered by"}</div>
+                        {"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."}
-                    <div class={"footer-credit-url"}>{"Blanco Studios"}</div>
+                    </div>
+                </div>
+                <div class={"footer-before-line-second-column"}>
+                    <div class={"footer-before-line-second-column-title"}>
+                        {"Contact"}
+                    </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"}
+                    </div>
+                </div>
+            </div>
+
+            <div class={"footer-line"}></div>
+
+            <div class={"footer-after-line"}>
+                <div class={"footer-after-line-copyright"}>
+                    {"© 2023 Blanco Lorenzo - Todos los derechos Reservados"}
+                </div>
+                <div class={"footer-after-line-socials"}>
+                    //TODO: Add all logos with href links
+                    {"a"}
                 </div>
             </div>
 
@@ -25,3 +52,11 @@ pub fn page_footer() -> Html {
         </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>
+ */

src/pages/about.rs

@@ -1,6 +1,15 @@
 use yew::prelude::*;
 
-#[function_component(AboutPage)]
+use crate::components::language_picker::Language;
-pub fn about_page() -> Html {
+
-    html! {}
+#[derive(PartialEq, Properties)]
+pub struct AboutPageProps {
+    pub language: Language
+}
+#[function_component(AboutPage)]
+pub fn about_page(_props: &AboutPageProps) -> Html {
+    
+    html! {
+
+    }
 }

src/pages/main_page.rs

@@ -35,10 +35,10 @@ pub fn main_page() -> Html {
             <div class={"page-container"}>
                 <StartPage language={(*language).clone()}/>
                 <ServicesPage language={(*language).clone()}/>
-                <AboutPage/>
+                <AboutPage language={(*language).clone()}/>
                 <CallToActionPage/>
             </div>
-            <PageFooter/>
+            <PageFooter language={(*language).clone()}/>
         </>
     }
 }

src/pages/not_found.rs

@@ -16,7 +16,7 @@ pub fn not_found_page() -> Html {
             <div class={"page-container"} style={"margin-bottom: 72.5vh"}>
                 {"Not found page"}
             </div>
-            <PageFooter/>
+            <PageFooter language={Language::EnUs}/>
         </>
     }
 }