From 49e7712407551c30c29dc0a75db92c308f1a94cc Mon Sep 17 00:00:00 2001
From: Franklin <franklinblanco@tutanota.com>
Date: Fri, 14 Apr 2023 14:31:28 -0400
Subject: [PATCH] Contact page

---
 Readme.md            |   5 +-
 css/contact.css      | 112 +++++++++++++++++++++++++++++++++++++++++++
 index.html           |   1 +
 src/pages/contact.rs |  42 ++++++++++++++--
 4 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 css/contact.css

diff --git a/Readme.md b/Readme.md
index 1f472ef..bc12489 100644
--- a/Readme.md
+++ b/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
-- [ ]
\ No newline at end of file
+- [ ] If someone enters the page from an agent, make anything that appears on the website reference them.
+- [ ] Contact us Functionality
\ No newline at end of file
diff --git a/css/contact.css b/css/contact.css
new file mode 100644
index 0000000..15df9e6
--- /dev/null
+++ b/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;}
\ No newline at end of file
diff --git a/index.html b/index.html
index a30ffa7..a323c05 100644
--- a/index.html
+++ b/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" />
diff --git a/src/pages/contact.rs b/src/pages/contact.rs
index a1165ed..950aad8 100644
--- a/src/pages/contact.rs
+++ b/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
-                {"Contact Page"}
+            <div class={"page-container"} style={"margin-bottom: 15vh"}> //TODO: remove this margin when landing page done
+                <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/>
         </>