Mobile css and layout for hero section

css/body.css

@@ -1,4 +1,8 @@
 body { 
     margin: 0;   /* Remove body margins */
     background-color: rgb(250, 248, 248);
+}
+
+* {
+    font-family: Montserrat;
 }

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;
+}

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%;
 }

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 />

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>
     }
 }