{"componentChunkName":"component---src-templates-page-js","path":"/projects/2021/empbank","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Empbank - FinTech startup","path":"/projects/2021/empbank","excerpt":null,"tags":null,"liveUrl":"https://empbank.com.br/","sampleCode":"true","sourceCode":null,"coverImage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHr7NoC/wD/xAAXEAADAQAAAAAAAAAAAAAAAAAQESFC/9oACAEBAAEFAq6ND//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAMAAgMAAAAAAAAAAAAAAAABESFRMXGR/9oACAEBAAE/IW6SemWjI09J0LmDcP/aAAwDAQACAAMAAAAQ18//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QHZ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAACAwEBAQAAAAAAAAAAAAABEQAhMVFBkf/aAAgBAQABPxAJAw7wYPAj2nAu2eiE2NuM/rgAElbGEp//2Q==","aspectRatio":1.6,"src":"/static/7801430e5038edfc9f044c193bef282d/14b42/empbank.jpg","srcSet":"/static/7801430e5038edfc9f044c193bef282d/f836f/empbank.jpg 200w,\n/static/7801430e5038edfc9f044c193bef282d/2244e/empbank.jpg 400w,\n/static/7801430e5038edfc9f044c193bef282d/14b42/empbank.jpg 800w,\n/static/7801430e5038edfc9f044c193bef282d/ccd76/empbank.jpg 958w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"id":"c6e47937-b494-5d5e-8e10-a5f5316dc88c","html":"
\n

Hired to build the scaffold of an ongoing project for Empbank, a Fintech startup aiming to turn every service business on a credit source provider in order to boost its sales.\nThe solution requested was to create a React App as a landing page and a partners-only section to show exclusive benefits, services and products, protected by Auth0 technology.\nThe company is within the top 10 regional survivors of Founder's Intitute seed program.

\n
\n
\n

Stack: React.js, Auth0, Scss, Antd

\n
\n

Sample Code:

\n
Contact.js\n\nimport React, { useState, useEffect } from "react"\nimport axios from "axios"\nimport MediaQueries from "../../utils/MediaQueries"\n\n// icons\nimport MapPin from "../../assets/icons/MapPin.svg"\nimport Phone from "../../assets/icons/Phone.svg"\nimport WhatsappLogo from "../../assets/icons/WhatsappLogo.svg"\nimport At from "../../assets/icons/At.svg"\n\n// components\nimport ContactForm from "./ContactForm"\nimport Button from "../../components/atoms/Button/Button"\n\nimport styles from "./Contact.module.scss"\n\nconst Contact = () => {\n\tconst [form, setForm] = useState()\n\tconst [formComplete, setFormComplete] = useState(false)\n\tconst [loading, setLoading] = useState(false)\n\tconst [formSent, setFormSent] = useState(false)\n\n\tconst { isBigScreen } = MediaQueries()\n\n  const scrollToTop = () => {\n    window.scroll(0, 0, {\n\t\t\tbehavior: "smooth",\n\t\t})\n  }\n\n\tuseEffect(() => {\n\t\tif (form) {\n\t\t\tif (form?.name && form?.message && form?.email && form?.phone) {\n\t\t\t\tsetFormComplete(true)\n\t\t\t} else {\n\t\t\t\tsetFormComplete(false)\n\t\t\t}\n\t\t}\n\t}, [form])\n\n\tconst handleFormSubmit = e => {\n\t\tconst service_id = "service_**********"\n\t\tconst template_id = "template_************"\n\t\tconst user_id = "user_**********************"\n\t\tsetLoading(true)\n\t\taxios\n\t\t\t.post("https://api.emailjs.com/api/v1.0/email/send", {\n\t\t\t\tservice_id,\n\t\t\t\ttemplate_id,\n\t\t\t\tuser_id,\n\t\t\t\ttemplate_params: {\n\t\t\t\t\tname: form.name,\n\t\t\t\t\tmessage: form.message,\n\t\t\t\t\temail: form.email,\n\t\t\t\t\tphone: form.phone,\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (response) {\n\t\t\t\tsetForm(null)\n\t\t\t\tsetLoading(false)\n\t\t\t\tscrollToTop()\n\t\t\t\tsetFormSent(true)\n\t\t\t})\n\t\t\t.catch(function (error) {\n\t\t\t\tconsole.log(error)\n\t\t\t\tsetLoading(false)\n\t\t\t\tsetForm(null)\n\t\t\t})\n\t}\n\n\tconst handleNewRequest = () => {\n\t\tscrollToTop()\n\t\tsetForm(null)\n\t\tsetFormSent(false)\n\t}\n\n\tconst content = [\n\t\t{\n\t\t\ticon: MapPin,\n\t\t\tgroups: [\n\t\t\t\t{\n\t\t\t\t\ttitle: "localização",\n\t\t\t\t\tdescription: ["Av. Higienópolis, 1601 – Térreo – Conj. 15 – Sala Paris", "Centro – Londrina – PR", "CEP: 86020-080"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ticon: Phone,\n\t\t\tgroups: [\n\t\t\t\t{\n\t\t\t\t\ttitle: "telefone",\n\t\t\t\t\tdescription: ["(43) 3024-1570"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ticon: WhatsappLogo,\n\t\t\tgroups: [\n\t\t\t\t{\n\t\t\t\t\ttitle: "whatsapp",\n\t\t\t\t\tdescription: ["(43) 99941-9203"],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: "whatsapp empresas",\n\t\t\t\t\tdescription: ["(43) 98423-6803"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ticon: At,\n\t\t\tgroups: [\n\t\t\t\t{\n\t\t\t\t\ttitle: "e-mail",\n\t\t\t\t\tdescription: ["contato@empank.com.br"],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t]\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.leftContainer} style={{ maxWidth: isBigScreen && "600px" }}>\n\t\t\t\t<div className={styles.contactsContainer}>\n\t\t\t\t\t{content.map(contact => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className={styles.contactContainer} key={contact.groups[0].title}>\n\t\t\t\t\t\t\t\t<div className={styles.iconContainer}>\n\t\t\t\t\t\t\t\t\t<img src={contact.icon} alt={contact.groups[0].title} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t{contact.groups.map(group => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<div className={styles.groupContainer} key={group.title}>\n\t\t\t\t\t\t\t\t\t\t\t\t<h1 className={styles.groupTitle}>{group.title.toUpperCase()}</h1>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className={styles.groupDescription}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{group.description.map(paragraph => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p className={styles.paragraph} key={paragraph.slice(0, 10)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{paragraph}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className={styles.break}></div>\n\t\t\t<div className={styles.rightContainer} style={{ maxWidth: isBigScreen && "600px" }}>\n\t\t\t\t{formSent ? (\n\t\t\t\t\t<div className={styles.formContainer}>\n\t\t\t\t\t\t<h1 className={styles.formTitle}>\n\t\t\t\t\t\t\tMensagem enviada!\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<p className={styles.formDescription}>Retornaremos o mais breve possível.</p>\n\t\t\t\t\t\t<Button variant="loginPrimary" onClick={handleNewRequest} className="w-100 mt-5">\n\t\t\t\t\t\t\tEnviar mais uma mensagem\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className={styles.formContainer}>\n\t\t\t\t\t\t<h1 className={styles.formTitle}>Contato</h1>\n\t\t\t\t\t\t<p className={styles.formDescription}>Responderemos o seu e-mail em até 24 horas.</p>\n\t\t\t\t\t\t<ContactForm form={form} setForm={setForm} handleFormSubmit={handleFormSubmit} id="contactForm" />\n\t\t\t\t\t\t<Button variant="buyBtn" form="contactForm" type="submit" disabled={!formComplete} style={{ width: "100%" }}>\n\t\t\t\t\t\t\t{!loading ? "Enviar" : "Carregando..."}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nexport default Contact
","excerpt":"Hired to build the scaffold of an ongoing project for Empbank, a Fintech startup aiming to turn every service business on a credit source…"}},"pageContext":{"type":"posts","next":{"frontmatter":{"path":"/projects/2019/freelance","title":"Freelance","tags":null},"fileAbsolutePath":"/Users/felipesmaniotto/my-real-portfolio/src/posts/freelance.md"},"previous":{"frontmatter":{"path":"/projects/2020/apick","title":"Apick - EdTech startup","tags":null},"fileAbsolutePath":"/Users/felipesmaniotto/my-real-portfolio/src/posts/apick.md"}}},"staticQueryHashes":["1425477374","3128451518"]}