Merge pull request #2 from rodmacPy/cesar

Cesar Pagina de Contacto

client/package.json

@@ -11,6 +11,7 @@
     "predeploy": "npm run build"
   },
   "dependencies": {
+    "@emailjs/browser": "^3.10.0",
     "animate.css": "^4.1.1",
     "axios": "^1.3.4",
     "query-string": "^8.1.0",

client/src/abuelos/Styles/Contact.css

@@ -0,0 +1,26 @@
+
+.contact img {
+max-width: 30%;
+height: 50%;
+margin-left: auto;
+margin-right: auto;
+}
+.contact{
+    display: flex;
+}
+.contact-title {
+color: #008080;
+text-align: center;
+padding: 8px;
+margin: 2px;
+}
+
+.icon-contact{
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+.icon-contact i {
+    margin: 5px;
+    padding: 5px;
+}

client/src/abuelos/Styles/ContactComponent.css

@@ -0,0 +1,31 @@
+.email-form{
+display: flex;
+flex-direction: column;
+flex-wrap: wrap;
+align-content: center;
+}
+.formWord{
+    color: #008080;
+}
+
+.email-form input,textarea {
+    width: 100%; /* Full width */
+    padding: 5px; /* Some padding */ 
+    border: 1px solid #ccc; /* Gray border */
+    border-radius: 4px; /* Rounded borders */
+    box-sizing: border-box; /* Make sure that padding and width stays in place */
+    margin-top: 2px; /* Add a top margin */
+    margin-bottom: 10px; /* Bottom margin */
+    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
+}
+button{
+    background-color: #008080;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.fa-brands {
+    color: #008080
+  }

client/src/abuelos/pages/Contact.jsx

@@ -1,8 +1,25 @@
 
 import React from 'react'
+import { Link } from 'react-router-dom'
+import '../Styles/Contact.css'
+import ContactComponent from './contactComponet/ContactComponent'
 
 export const Contact = () => {
     return (
-        <div>Contact</div>
+        <>
+                <div className='contact'>
+                    <img className="animate__animated animate__fadeInUp" src='../../../assets/operador-centro-asistencia-.png' alt='contactUs' />
+                </div>
+                <div className='contact-title animate__animated animate__fadeInUp'>
+                    <h1>¿Cómo te podemos ayudar?</h1>
+                </div>
+                <ContactComponent/>
+                <div className='icon-contact'>
+                <Link><i className="fa-brands fa-facebook fa-3x  animate__animated animate__fadeInDownBig "  ></i></Link>
+                <Link><i className="fa-brands fa-twitter fa-3x  animate__animated animate__fadeInUpBig "  ></i></Link>
+                <Link><i className="fa-brands fa-instagram fa-3x  animate__animated animate__fadeInDownBig "  ></i></Link>
+                <Link><i className="fa-brands fa-whatsapp fa-3x  animate__animated animate__fadeInUpBig "  ></i></Link>
+                </div>
+        </>
     )
 }

client/src/abuelos/pages/contactComponet/ContactComponent.jsx

@@ -0,0 +1,75 @@
+import React, { useRef, useState } from 'react'
+import emailjs from '@emailjs/browser';
+import '../../Styles/ContactComponent.css'
+
+const Result =()=>{
+    return(
+        <h4>Su mensaje ha sido enviado con éxito. Pronto nos pondremos en contacto con usted</h4>
+    )
+}
+
+function ContactComponent(props) {
+    const form = useRef();
+    const [result, setResult] = useState(false);
+    const sendEmail = (e) => {
+    e.preventDefault();
+
+    emailjs.sendForm('gmail', 'template_r2tg02c', form.current, 'JKVflmbsOvKbZozYI')
+        .then((result) => {
+            console.log(result.text);
+        }, (error) => {
+            console.log(error.text);
+        });
+        e.target.reset();
+        setResult(true);
+    };
+    //hide result
+    setTimeout (() =>{
+        setResult(false);
+    }, 3000);
+return (
+        <form ref={form} onSubmit={sendEmail} className='email-form'>
+            <div className='formWord animate__animated animate__fadeInUp'>
+                <h1>Envianos un correo.</h1>
+                <span>Nombre Completo</span>
+                <br/>
+                <input
+                className='input100'
+                type='text'
+                name='fullName'
+                required
+                />
+                <br/>
+                <span>Numero de Telefono</span>
+                <br/>
+                <input
+                className='input100'
+                type='text'
+                name='phone'
+                required
+                />
+                <br/>
+                <span>Email</span>
+                <br/>
+                <input
+                className='input100'
+                type='text'
+                name='email'
+                required
+                />
+                <br/>
+            </div>
+            <div className='formWord'>
+                <span>Mensaje</span>
+                <br/>
+                <textarea name='message' required></textarea>
+                <br/>
+                <button>Enviar</button>
+
+                <div className='row'>{ result ? <Result/> : null }</div>
+            </div>
+        </form>
+  )
+}
+
+export default ContactComponent

client/src/ui/components/Navbar.jsx

@@ -27,7 +27,7 @@ export const Navbar = () => {
                     <Link
                         to="/"
                     >
-                        <h2 className="animate__animated animate__backInLeft">Abuelos en Comunidad</h2>
+                        <h2 classNameName="animate__animated animate__backInLeft">Abuelos en Comunidad</h2>
                     </Link>
                 </div>
                 <ul className="links class animate__animated animate__backInLeft">