Finished project card inside search

css/body.css

@@ -8,4 +8,6 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: stretch;
+    background-color: rgb(0, 0, 0, 0.02);
+
 }

css/search.css

@@ -4,7 +4,8 @@
     flex-direction: column;
     justify-content: stretch;
     align-items: center;
-    padding: 30px 30px;
+    padding: 0px 30px;
+    margin-top: 30px;
 }
 
 .project-search-filters-container {
@@ -51,21 +52,94 @@
 
 .project-search-divider {
     width: 100%;
-    margin: 35px 30px;
+    margin: 35px 20px;
     height: 1px;
     background-color:rgba(0, 0, 0, 0.1);
 }
 
+/* Results */
 
 .project-search-results-container {
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
-
+    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;
+}

index.html

@@ -13,6 +13,7 @@
 
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
 
         <base data-trunk-public-url />

src/components/project_card.rs

@@ -1,10 +1,44 @@
-use jl_types::domain::project::Project;
+use uuid::Uuid;
 use yew::prelude::*;
+use yew_router::prelude::use_navigator;
+
+use crate::routes::main_router::Route;
+
 
 #[function_component(ProjectCard)]
-pub fn project_card(_props: &Project) -> Html {
+pub fn project_card() -> Html {
+    let navigator = use_navigator().unwrap();
 
+    let project_view_cb = Callback::from(move |_|{
+        navigator.push(&Route::Details { property_id: Uuid::default() });
+    });
     html!{
-        <div class={"project-listing-card"}></div>
+        <div class={"project-search-result-card"} onclick={project_view_cb}>
+            <img src={"https://refa.com.do/uploads/posiv.jpg"} alt={"project image"} class={"project-search-result-card-picture"}/>
+            
+            <div class={"project-search-result-card-title"}>
+                {"Suites by refa Piantini"}
+            </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"}
+            </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>
+                <div class={"project-search-result-card-details-item"}>
+                    <i class="fa-regular fa-calendar-check"></i>
+                    <div>{"8/2025"}</div>
+                </div>
+            </div>
+        </div>
     }
 }

src/pages/details.rs

@@ -1,8 +1,15 @@
 use yew::prelude::*;
 
+use crate::components::nav_bar::NavigationBar;
+
 #[function_component(DetailsPage)]
 pub fn details_page() -> Html {
     html!{
-        <div class={"page-container"}>{"Details Page"}</div>
+        <>
+            <NavigationBar/>
+            <div class={"page-container"}>
+                
+            </div>
+        </>
     }
 }

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;
+use crate::components::{nav_bar::NavigationBar, project_card::ProjectCard};
 
 
 #[function_component(SearchPage)]
@@ -136,8 +136,11 @@ pub fn search_page(_props: &SearchPageProperties) -> Html {
                     <div class={"project-search-divider"}/>
                 </div>
 
-                <div class={"property-search-results-container"}> // Search Results Content
+                <div class={"project-search-results-container"}> // Search Results Content
-                    <div class={"property-search-result-card"}></div>
+                    <ProjectCard/>
+                    <ProjectCard/>
+                    <ProjectCard/>
+                    <ProjectCard/>
                 </div>
             </div>
         </>