From c52f2f43ab5fbe17ed378fcf20d46f356f11c0fe Mon Sep 17 00:00:00 2001
From: Franklin <franklinblanco@tutanota.com>
Date: Wed, 10 May 2023 17:01:19 -0400
Subject: [PATCH] Mobile css and layout for hero section

---
 css/body.css                 |  4 ++
 css/components/page/hero.css | 76 ++++++++++++++++++++++++++++++++++++
 css/pages/main_page.css      |  2 +-
 index.html                   |  8 ++--
 src/components/page/hero.rs  | 21 +++++++++-
 5 files changed, 105 insertions(+), 6 deletions(-)

diff --git a/css/body.css b/css/body.css
index ad11c96..2f0b30b 100644
--- a/css/body.css
+++ b/css/body.css
@@ -1,4 +1,8 @@
 body { 
     margin: 0;   /* Remove body margins */
     background-color: rgb(250, 248, 248);
+}
+
+* {
+    font-family: Montserrat;
 }
\ No newline at end of file
diff --git a/css/components/page/hero.css b/css/components/page/hero.css
index e69de29..a1f746b 100644
--- a/css/components/page/hero.css
+++ b/css/components/page/hero.css
@@ -0,0 +1,76 @@
+.hero-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+
+    width: 100%;
+}
+.hero-profile-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    gap: 10px;
+
+    width: 100%;
+}
+.hero-banner-image {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+
+    background-color: rebeccapurple;
+}
+.hero-profile-picture-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    width: 130px;
+    height: 130px;
+
+    border-radius: 100%;
+    border: 3px solid white;
+
+    background-color: blue;
+
+    margin-top: -65px;
+}
+.hero-profile-picture {
+    object-fit: cover;
+}
+.hero-name {
+    font-size: 20px;
+    font-weight: 800;
+    color: #26306B;
+}
+.hero-title {
+    font-size: 14px;
+    font-weight: 200;
+    color: #26306B;
+}
+.hero-about-me-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+
+    gap: 10px;
+
+    margin: 0px 20px;
+    margin-top: 40px;
+}
+.hero-about-me-title {
+    font-size: 28px;
+    font-weight: 800;
+    color: #26306B;
+    font-family: Ubuntu;
+}
+.hero-about-me-body {
+    font-size: 13px;
+    font-weight: 300;
+    text-align: justify;
+    line-height: 15px;
+}
\ No newline at end of file
diff --git a/css/pages/main_page.css b/css/pages/main_page.css
index 905506a..d42fac0 100644
--- a/css/pages/main_page.css
+++ b/css/pages/main_page.css
@@ -1,7 +1,7 @@
 .main-page-container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: start;
     width: 100%;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 49382af..ff5b585 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
         <meta name="description" content="La mejor herramienta para posicionarte como agente inmobiliario profesional.">
 
         <link data-trunk type="text/css" href="css/body.css" rel="css" />
-        
+
         <link data-trunk type="text/css" href="css/pages/main_page.css" rel="css" />
 
         <link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
@@ -18,9 +18,9 @@
 
         <link data-trunk href="assets/text/robots.txt" rel="copy-file"/>
 
-        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css?family=Space+Grotesk" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
+        
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
 
         <base data-trunk-public-url />
diff --git a/src/components/page/hero.rs b/src/components/page/hero.rs
index 786f1a0..2d5272b 100644
--- a/src/components/page/hero.rs
+++ b/src/components/page/hero.rs
@@ -4,7 +4,26 @@ use yew::prelude::*;
 pub fn hero_section() -> Html {
     html! {
         <div class={"hero-container"}>
-            
+            <div class={"hero-profile-container"}>
+                <img class={"hero-banner-image"} src="" alt="realtor-banner-image"/>
+                <div class={"hero-profile-picture-container"}>
+                    <img class={"hero-profile-picture"} src="" alt="realtor-pfp"/>
+                </div>
+                <div class={"hero-name"}>
+                    {"Brooklyn Simmons"}
+                </div>
+                <div class={"hero-title"}>
+                    {"Agent"}
+                </div>
+            </div>
+            <div class={"hero-about-me-container"}>
+                <div class={"hero-about-me-title"}>
+                    {"About me"}
+                </div>
+                <div class={"hero-about-me-body"}>
+                    {"Lorem ipsum dolor sit amet consectetur. Mauris sapien arcu ac quis eget sed nullam. Facilisi odio leo non lectus tincidunt orci dictum sed. Id vulputate maecenas scelerisque pellentesque rhoncus at ullamcorper."}
+                </div>
+            </div>
         </div>
     }
 }
\ No newline at end of file