Contact page
This commit is contained in:
Franklin
parent
d0cf435942
commit
49e7712407
|
|
@ -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
|
||||
|
|
@ -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;}
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue