Added actual logo to navbar, changed a few colors to match it too.

Cargo.lock

@@ -715,6 +715,7 @@ dependencies = [
  "serde_json",
  "stdweb",
  "stylist",
+ "thousands",
  "uuid",
  "wasm-bindgen",
  "wasm-bindgen-futures",
@@ -1442,6 +1443,12 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "thousands"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3bf63baf9f5039dadc247375c29eb13706706cfde997d0330d05aa63a77d8820"
+
 [[package]]
 name = "time"
 version = "0.1.45"

Cargo.toml

@@ -28,7 +28,7 @@ log = "0.4"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0.88"
 err = { git = "https://git.franklinblanco.dev/franklinblanco/err.git" }
-
+thousands = "0.2.0"
 
 # Core
 jl-types = { path = "../jl-types", features = ["wasm"] }

css/body.css

@@ -3,7 +3,7 @@ body {
 }
 
 .page-container {
-    padding-top: 75.5px;
+    padding-top: 80px;
     display: flex;
     flex-direction: column;
     justify-content: center;

css/navbar.css

@@ -1,5 +1,6 @@
 /* Mobile View */
 .navbar-background {
+    border-top: 3px solid #04B2D9;
     position: fixed;
     width: 100%;
     display: flex;
@@ -80,7 +81,8 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    max-width: 250px;
+    gap: 10px;
+    max-width: 350px;
 }
 
 .navbar-brand-container:hover {
@@ -89,8 +91,9 @@
 
 .navbar-title {
     color: white;
-    font-size: 23pt;
+    font-size: 18pt;
-    font-family: Sacramento;
+    font-weight: 100;
+    font-family: 'Gill Sans';
 }
 
 .navbar-image {

css/project_card.css

@@ -1,4 +1,85 @@
 
+
 .project-listing-card {
-    border-radius: 10px;
+    background-color: white;
+    height: 495px;
+    width: 390px;
+    min-width: 80%;
+
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: start;
+
+    border-bottom: 6px solid #04B2D9;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    gap: 6px;
+}
+
+@media only screen and (max-width: 400px) {
+    .project-listing-card {
+       width: 90%;
+    }
+}
+
+.project-listing-card:hover {
+    cursor: pointer;
+    /*border: 3px solid #04B2D9;*/
+    transition-duration: 0.1s;
+}
+
+.project-search-result-card-picture {
+    border-radius: 6px 6px 0px 0px;
+    width: 100%;
+    height: 390px;
+    background-color: rgba(0, 0, 0, 0.3);
+    object-fit: cover;
+}
+
+.project-search-result-card-title {
+    font-size: 14px;
+    font-family: Inter;
+    font-weight: normal;
+    text-transform: uppercase;
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    overflow: hidden;
+    height: 20px;
+    color: rgb(79, 79, 79);
+}
+
+.project-search-result-card-price {
+    padding-left: 10px;
+    padding-right: 10px;
+    max-lines: 1;
+    font-size: 21px;
+    font-family: Inter;
+    font-weight: bold;
+    color: rgb(29, 29, 29);
+}
+
+.project-search-result-card-details-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    gap: 75px;
+
+    width: 100%;
+    padding-top: 6px;
+    padding-left: 13px;
+    padding-right: 15px;
+}
+
+.project-search-result-card-details-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    color: rgba(0, 0, 0, 0.527);
+    font-size: 16px;
+    gap: 10px;
 }

css/search.css

@@ -60,15 +60,22 @@
 .project-search-button {
     margin-top: 20px;
     height: 50px;
-    background-color: #252631;
+    background-color: #5D6A73;
     color: white;
     border: 0px;
     border-radius: 5px;
-    font-size: large;
+    font-size: 20px;
     font-family: Source Sans Pro;
     font-weight: lighter;
 }
 
+.project-search-button:hover {
+    cursor: pointer;
+    font-size: 24px;
+    transition-duration: 0.3s;
+    background-color: #252631;
+}
+
 /* Results */
 
 .project-search-results-container {
@@ -79,79 +86,3 @@
     margin-bottom: 50px;
     gap: 30px;
 }
-
-.project-search-result-card {
-    background-color: white;
-    height: 530px;
-    width: 390px;
-    min-width: 80%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: center;
-
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    gap: 6px;
-}
-
-@media only screen and (max-width: 400px) {
-    .project-search-result-card {
-       width: 90%;
-    }
-}
-
-.project-search-result-card:hover {
-    cursor: pointer;
-    border: 2px solid #252631;
-    transition-duration: 0.3s;
-}
-
-.project-search-result-card-picture {
-    width: 100%;
-    height: 390px;
-    background-color: rgba(0, 0, 0, 0.3);
-    object-fit: cover;
-}
-
-.project-search-result-card-title {
-    font-size: 18px;
-    font-family: Inter;
-    font-weight: 50;
-    text-transform: uppercase;
-    padding-top: 5px;
-}
-
-.project-search-result-card-location {
-    font-size: 14px;
-    font-family: Inter;
-    font-weight: 50;
-    text-transform: uppercase;
-}
-
-.project-search-result-card-price {
-    font-size: 21px;
-    font-family: Inter;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-.project-search-result-card-details-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    width: 100%;
-    padding-top: 4px;
-}
-
-.project-search-result-card-details-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    color: rgba(0, 0, 0, 0.3);
-    font-size: 14px;
-    gap: 3px;
-}

src/api/backend/mod.rs

@@ -1,6 +1,6 @@
 use std::collections::HashSet;
 
-use jl_types::{dto::{filters::Filter, listing::Listing}, domain::project::Project};
+use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}};
 use reqwest::Method;
 use uuid::Uuid;
 
@@ -16,8 +16,8 @@ pub async fn get_all_districts_in_city(city: &String) -> Result<HashSet<String>,
     perform_request_without_client::<String, HashSet<String>>(BASE_URL.into(), Method::GET, format!("read/locations/{city}"), None, 200, Vec::new(), None).await
 }
 
-pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter>) -> Result<Vec<Project>, err::Error> {
+pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter>) -> Result<Vec<ProjectCardDto>, err::Error> {
-    perform_request_without_client::<String, Vec<Project>>(BASE_URL.into(), Method::GET, format!("read/projects/{page}"), None, 200, Vec::new(), Some(filters.into_iter().map(|filter| filter.to_param()).collect())).await
+    perform_request_without_client::<String, Vec<ProjectCardDto>>(BASE_URL.into(), Method::GET, format!("read/projects/{page}"), None, 200, Vec::new(), Some(filters.into_iter().map(|filter| filter.to_param()).collect())).await
 }
 
 pub async fn get_project_listing(project_id: &Uuid) -> Result<Listing, err::Error> {

src/components/nav_bar.rs

@@ -25,7 +25,7 @@ pub fn navigation_bar() -> Html {
         <div class={"navbar-background"}>
             <div class={"navbar-container"}>
                 <div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
-                    <img class={"navbar-image"} src="images/remax-logo.png" alt=""/>
+                    <img class={"navbar-image"} src="images/proyectosenconstruccion_logo_transparent_bg.png" alt=""/>
                     <div class={"navbar-title"}>
                         {NAVBAR_TITLE}
                     </div>

src/components/project_card.rs

@@ -1,4 +1,6 @@
-use jl_types::domain::{project::Project, media::Media};
+use jl_types::{domain::{media::Media}, dto::project_card::ProjectCardDto};
+use stylist::css;
+use thousands::Separable;
 use yew::prelude::*;
 use yew_router::prelude::use_navigator;
 
@@ -12,6 +14,8 @@ pub fn project_card(props: &ProjectCardProps) -> Html {
     let project_view_cb = Callback::from(move |_|{
         navigator.push(&Route::Details { project_id });
     });
+
+    // Card properties
     let cover_image_url;
     if let Some(first_media) = props.project.media.media_list.get(0) {
         cover_image_url = match first_media {
@@ -21,38 +25,52 @@ pub fn project_card(props: &ProjectCardProps) -> Html {
     } else {
         cover_image_url = String::new()
     }
+
+    let project_title = format!("{} en {}, {}", props.project.project_type, props.project.district, props.project.city);
+    
+    let project_price = format!("Desde ${} USD", match props.project.starts_from {
+        Some(price) => {
+            let price_separated = price.separate_with_commas();
+            if price_separated.contains(".") {
+                price_separated
+            } else {
+                format!("{price_separated}.00")
+            }
+        },
+        None => "N/A".into()
+    });
+
+    let project_condition = props.project.project_condition.to_string();
+
+    let project_est_finish_date = props.project.finish_date.format("%m/%Y");
+    //let project_location_written;
+    
+
     html!{
-        <div class={"project-search-result-card"} onclick={project_view_cb}>
+        <div class={"project-listing-card"} onclick={project_view_cb}>
             <img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
             
             <div class={"project-search-result-card-title"}>
-                {"Suites by refa Piantini"}
+                {project_title}
-            </div>
-            <div class={"project-search-result-card-location"}>
-                {"Apartamento en Piantini, Santo Domingo"}
             </div>
             <div class={"project-search-result-card-price"}>
-                {"Desde RD$1,000,000.00"}
+                {project_price}
             </div>
             <div class={"project-search-result-card-details-container"}>
-                <div class={"project-search-result-card-details-item"}>
-                    <i class="fa-solid fa-ruler-vertical"></i>
-                    <div>{"80-300m²"}</div>
-                </div>
                 <div class={"project-search-result-card-details-item"}>
                     <i class="fa-solid fa-hand-holding-hand"></i>
-                    <div>{"Nuevo"}</div>
+                    <div>{project_condition}</div>
                 </div>
                 <div class={"project-search-result-card-details-item"}>
                     <i class="fa-regular fa-calendar-check"></i>
-                    <div>{"8/2025"}</div>
+                    <div>{format!("Entrega Est: {}", project_est_finish_date)}</div>
                 </div>
             </div>
         </div>
     }
 }
 
-#[derive(Properties, PartialEq, Eq, PartialOrd, Ord)]
+#[derive(Properties, PartialEq, PartialOrd)]
 pub struct ProjectCardProps {
-    pub project: Project
+    pub project: ProjectCardDto
 }

src/constants/mod.rs

@@ -1,5 +1,8 @@
-pub const NAVBAR_TITLE: &str = "Jorge Ledesma";
+pub const NAVBAR_TITLE: &str = "Proyectos en Construcción";
 pub const NAVBAR_COL_LANDING: &str = "Inicio";
 pub const NAVBAR_COL_PROYECTOS_ACABADOS: &str = "Listos para entrega";
 pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción";
 pub const NAVBAR_COL_CONTACTO: &str = "Contacto";
+
+pub const PRIMARY_COLOR: &str = "#41BDD9";
+pub const SECONDARY_COLOR: &str = "#5D6A73";

src/main.rs

@@ -1,14 +1,14 @@
 pub mod api;
 pub mod components;
-pub mod routes;
-pub mod pages;
 pub mod constants;
+pub mod pages;
+pub mod routes;
 pub mod utils;
 
 use yew::prelude::*;
 use yew_router::{BrowserRouter, Switch};
 
-use crate::routes::main_router::{Route, switch};
+use crate::routes::main_router::{switch, Route};
 
 #[function_component]
 fn App() -> Html {

src/pages/search.rs

@@ -1,4 +1,4 @@
-use jl_types::{domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition, project::Project}, dto::filters::Filter};
+use jl_types::{domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition, project::Project}, dto::{filters::Filter, project_card::ProjectCardDto}};
 use log::info;
 use yew::prelude::*;
 use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
@@ -12,7 +12,7 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
     // let force_update_trigger = use_force_update();
     let cities_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
     let districts_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
-    let search_results_handle: UseStateHandle<Vec<Project>> = use_state(|| Vec::new());
+    let search_results_handle: UseStateHandle<Vec<ProjectCardDto>> = use_state(|| Vec::new());
     let page_counter: UseStateHandle<i64> = use_state(|| 1);
     
     let mut filters = Vec::new();