Contact page

Readme.md

@@ -27,8 +27,9 @@
 - [x] Whatsapp button should direct to agent's phone number wa.me link
 
 New todo's
-- [ ] Contact us -> Sell with us
+- [x] Contact us -> Sell with us
 - [ ] Static image folder for start page
 - [ ] Admin panel with page loads & contact us clicks
 - [ ] Put JL on top of the Agents section
-- [ ]
+- [ ] If someone enters the page from an agent, make anything that appears on the website reference them.
+- [ ] Contact us Functionality

css/contact.css

@@ -0,0 +1,112 @@
+.contact-us-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    margin-top: 50px;
+}
+
+.contact-us-title-question {
+    font-size: 13px;
+    color:rgb(129, 68, 88);
+    font-family: Source Sans Pro;
+    font-weight: 100;
+    text-transform: uppercase;
+    letter-spacing: 0.2rem;
+}
+
+.contact-us-title-big {
+    font-size: 24px;
+    color: black;
+    font-family: Space Grotesk;
+    font-weight: bold;
+    margin: 15px 0px;
+}
+
+.contact-us-title-description {
+    font-size: 13px;
+    color:rgb(32, 32, 32);
+    font-family: Space Grotesk;
+    font-weight: 100;
+    text-align: center;
+    line-height: 20px;
+
+    width: 350px;
+}
+
+.contact-us-form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    width: 400px;
+}
+.contact-us-name-container {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+}
+
+.contact-us-textfield-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: start;
+    gap: 2px;
+
+    width: 100%;
+}
+.contact-us-textfield {
+    height: 50px;
+    background-color: white;
+    border: solid 0.5px #d8d8d8;
+    
+    width: 100%;
+    text-indent: 10px;
+}
+.contact-us-textfield-label {
+    font-family: Space Grotesk;
+    font-size: 16px;
+    font-weight: 900;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+}
+.contact-us-textfield-label:after {
+    color: #e32;
+    content: '*';
+    display: inline;
+}
+.contact-us-textarea {
+    height: 150px;
+    background-color: white;
+    border: solid 0.5px #d8d8d8;
+    
+    width: 385px;
+    padding: 10px;
+}
+
+.contact-us-button {
+    height: 60px;
+    width: 400px;
+    margin-top: 20px;
+
+    background-color: #02114A;
+    color: white;
+    border-radius: 5px;
+
+    font-family: Space Grotesk;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+.contact-us-button:hover { cursor: pointer;}

index.html

@@ -12,6 +12,7 @@
         <link data-trunk type="text/css" href="css/details.css" rel="css" />
         <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
         <link data-trunk type="text/css" href="css/agent.css" rel="css" />
+        <link data-trunk type="text/css" href="css/contact.css" rel="css" />
         
         <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" />

src/pages/contact.rs

@@ -5,11 +5,47 @@ use crate::components::{nav_bar::NavigationBar, footer::PageFooter};
 
 #[function_component(ContactPage)]
 pub fn contact_page() -> Html {
-    html!{
+    html! {
         <>
             <NavigationBar/>
-            <div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done
+            <div class={"page-container"} style={"margin-bottom: 15vh"}> //TODO: remove this margin when landing page done
-                {"Contact Page"}
+                <div class={"contact-us-container"}>
+                    <div class={"contact-us-title-question"}>
+                        {"¿Tienes preguntas?"}
+                    </div>
+                    <div class={"contact-us-title-big"}>
+                        {"Vende con nosotros"}
+                    </div>
+                    <div class={"contact-us-title-description"}>
+                        {"Aumenta tus ventas. Deja aquí cualquier propuesta o pregunta que tengas sobre el proceso. Estaremos felices de ayudarte! 😁"}
+                    </div>
+                    <div class={"contact-us-form-container"}>
+                        <div class={"contact-us-name-container"}>
+                            <div class={"contact-us-textfield-container"}> // First name
+                                <div class={"contact-us-textfield-label"}>{"Nombre"}</div>
+                                <input class={"contact-us-textfield"}/>
+                            </div>
+                            
+                            <div class={"contact-us-textfield-container"}> // Last name
+                                <div class={"contact-us-textfield-label"}>{"Apellido"}</div>
+                                <input class={"contact-us-textfield"}/>
+                            </div>
+                        </div>
+                        <div class={"contact-us-textfield-container"}> // Email or Phone number
+                            <div class={"contact-us-textfield-label"}>{"Número de Teléfono o Correo"}</div>
+                            <input class={"contact-us-textfield"}/>
+                        </div>
+
+                        <div class={"contact-us-textfield-container"}> // Message
+                            <div class={"contact-us-textfield-label"}>{"Mensaje"}</div>
+                            <textarea class={"contact-us-textarea"}/>
+                        </div>
+
+                        <div class={"contact-us-button"}>
+                            {"Enviar"}
+                        </div>
+                    </div>
+                </div>
             </div>
             <PageFooter/>
         </>