Added a footer to all pages

css/components/footer.css

@@ -0,0 +1,77 @@
+
+.footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 170px;
+
+    background-color: #252631;
+}
+.footer-brand-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100%;
+    margin-left: 20px;
+}
+.footer-logo {
+    object-fit: cover;
+    width: 100px;
+    height: 100px;
+}
+.footer-copyright-text {
+    font-size: 9px;
+    font-family: Inter;
+    color: white;
+    white-space: pre-line;
+}
+.footer-credit-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3px;
+}
+.footer-credit {
+    font-size: 13px;
+    font-family: Inter;
+    color: white;
+}
+
+.footer-credit-url {
+    font-size: 13px;
+    font-family: Inter;
+    color: #04B2D9;
+    border-bottom: 1px solid #04B2D9;
+}
+.footer-credit-url:hover {
+    font-size: 14px;
+    cursor: pointer;
+    transition-duration: 0.4s;
+}
+/*
+.footer-call-to-action-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20px;
+    border-bottom: 2px solid white;
+}
+.footer-call-to-action-input {
+    background-color: rgba(255, 255, 255, 0);
+    border: 0;
+    font-family: Inter;
+    color: white;
+}
+.footer-call-to-action-button{
+    font-size: 14px;
+    font-family: Inter;
+    color: white;
+    border: 2px solid white;
+}*/

css/details.css

@@ -75,7 +75,7 @@ Divide the Details page into 3 main sections:
     width: 100%;
     gap: 15px;
     margin-top: -10px;
-    margin-bottom: 100px;
+    margin-bottom: 30px;
 }
 
 .details-body-description {
@@ -225,3 +225,9 @@ Divide the Details page into 3 main sections:
     height: 200px;
     margin-bottom: 60px;
 }
+
+.details-body-disclaimer {
+    width: 100%;
+    font-size: 13px;
+    font-family: Inter;
+}

index.html

@@ -13,6 +13,7 @@
         <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
+        <link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
 
 
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

src/components/footer.rs

@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[function_component(PageFooter)]
+pub fn page_footer() -> Html {
+    html! {
+        <div class={"footer"}>
+            <div class={"footer-brand-container"}>
+                <img class={"footer-logo"} src={"images/proyectosenconstruccion_logo_transparent_bg.png"}/>
+                <div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - 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>
+            </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>
+    }
+}

src/components/mod.rs

@@ -4,3 +4,4 @@ pub mod project_card;
 pub mod media_slideshow;
 pub mod floating_widget;
 pub mod feature;
+pub mod footer;

src/pages/details.rs

@@ -4,11 +4,10 @@ use thousands::Separable;
 use uuid::Uuid;
 use yew::prelude::*;
 
-use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem}, api::backend::get_project_listing};
+use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem, footer::PageFooter}, api::backend::get_project_listing};
 
 #[function_component(DetailsPage)]
 pub fn details_page(props: &DetailsPageProps) -> Html {
-    //TODO: query backend
     let finished_loading = use_state(|| false);
     let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
     let selected_unit_handle = use_state(|| 0);
@@ -196,8 +195,14 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
 
                                                         // Features that always are shown
                                                         <FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}m²", unit.area)}/>
-                                                        
                                                     </div>
+
+                                                    <div class={"details-body-divider"}></div>
+
+                                                    <div class={"details-body-disclaimer"}>
+                                                        {"*Unidades sujetas a disponibilidad"}
+                                                    </div>
+
                                                 </div>
                                             }
                                         } else {
@@ -221,6 +226,14 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
                 
                 
             </div>
+            {
+                if *finished_loading {
+                    html! { <PageFooter/> }
+                } else {
+                    html! {}
+                }
+            }
+            
         </>
     }
 }

src/pages/search.rs

@@ -4,7 +4,7 @@ use yew::prelude::*;
 use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
 
 use jl_types::domain::option_wrapper::OptionWrapper;
-use crate::{components::{nav_bar::NavigationBar, project_card::ProjectCard}, api::backend::{get_all_cities, get_all_districts_in_city, get_all_projects_with_filters_paged}};
+use crate::{components::{nav_bar::NavigationBar, project_card::ProjectCard, footer::PageFooter}, api::backend::{get_all_cities, get_all_districts_in_city, get_all_projects_with_filters_paged}};
 
 
 #[function_component(SearchPage)]
@@ -254,6 +254,13 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
                 }
                 
             </div>
+            {
+                if *finished_loading {
+                    html! { <PageFooter/> }
+                } else {
+                    html! { }
+                }
+            }
         </>
     }
 }