From 6d55c8412eb26c60fe41637a02d0219ee399ae5a Mon Sep 17 00:00:00 2001 From: leksansilva Date: Sun, 28 May 2023 20:51:53 -0300 Subject: [PATCH] :recycle: modified button sendMessage --- package-lock.json | 3 +- package.json | 1 - src/App.jsx | 53 +----------------- src/components/AboutMe.jsx | 61 ++++++++++++++++++++ src/components/Contact.jsx | 104 ++++++++++++++++++++++++++++++----- src/components/Intro.jsx | 6 +- src/components/TopButton.jsx | 9 +-- src/index.css | 2 +- yarn.lock | 2 +- 9 files changed, 162 insertions(+), 79 deletions(-) create mode 100644 src/components/AboutMe.jsx diff --git a/package-lock.json b/package-lock.json index 6f2e6aa..390bf37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", - "react-dom": "^17.0.2", "react-icons": "^4.8.0", "react-responsive-carousel": "^3.2.23", "react-scripts": "5.0.0", @@ -13850,6 +13849,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -14485,6 +14485,7 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index 19f9930..3f78d3e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", - "react-dom": "^17.0.2", "react-icons": "^4.8.0", "react-responsive-carousel": "^3.2.23", "react-scripts": "5.0.0", diff --git a/src/App.jsx b/src/App.jsx index 59570bf..aa9a47a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,6 +4,7 @@ import styled, { css, ThemeProvider } from "styled-components"; import theme from "./styles/theme"; import About from "./components/About"; +import AboutMe from "./components/AboutMe"; import Contact from "./components/Contact"; import Intro from "./components/Intro"; import Navbar from "./components/Navbar"; @@ -40,34 +41,6 @@ const IntroShape = styled.div` background-color: ${({ theme }) => theme.color.shadow.secondary}; `; -const IntroShapeContainer = styled.div` - display: flex; - justify-content: center; - height: 100%; - padding: 20px; - font-size: 24px; - width: 50%; - gap: 10px; - .quote { - margin-top: 20px; - font-style: italic; - font-weight: 300; - } - .click-me { - margin-top: 20px; - span { - border: solid 1px white; - padding: 10px 15px; - background-color: #4da6ff; - font-weight: bold; - border-radius: 10px; - color: white; - } - } - flex-direction: column; - color: white; -`; - const AboutShape = styled.div` ${Shape} clip-path: polygon(0 0, 48% 0, 30% 100%, 0 100%); @@ -114,17 +87,6 @@ const App = () => { element.scrollIntoView(); setActiveMenuItem(id); }; - const yearsOld = () => { - if (new Date().getMonth() < new Date("2000-06-15T03:24:00").getMonth()) - return ( - new Date().getFullYear() - - new Date("2000-06-15T03:24:00").getFullYear() - - 1 - ); - return ( - new Date().getFullYear() - new Date("2000-06-15T03:24:00").getFullYear() - ); - }; window.addEventListener("scroll", toggleVisible); @@ -138,18 +100,7 @@ const App = () => { /> - -

Alex Santos da Silva, {yearsOld()} anos

-

Salvador-BA

-
- "Pensamentos levam a sentimentos, sentimentos levam a ações e - ações levam a resultados" - - T. Harv Eker -
-
- Clique no botão e saiba MAIS SOBRE MIM -
- + diff --git a/src/components/AboutMe.jsx b/src/components/AboutMe.jsx new file mode 100644 index 0000000..c9e1d43 --- /dev/null +++ b/src/components/AboutMe.jsx @@ -0,0 +1,61 @@ +import styled from "styled-components"; + +const Container = styled.div` + display: flex; + justify-content: center; + height: 100%; + padding: 20px; + font-size: 24px; + width: 50%; + gap: 10px; + .quote { + margin-top: 20px; + font-style: italic; + font-weight: 300; + } + .click-me { + margin-top: 20px; + span { + border: solid 1px white; + padding: 10px 15px; + background-color: #4da6ff; + font-weight: bold; + border-radius: 10px; + color: white; + } + } + flex-direction: column; + color: white; +`; +const yearsOld = () => { + if (new Date().getMonth() < new Date("2000-06-15T03:24:00").getMonth()) + return ( + new Date().getFullYear() - + new Date("2000-06-15T03:24:00").getFullYear() - + 1 + ); + return ( + new Date().getFullYear() - new Date("2000-06-15T03:24:00").getFullYear() + ); +}; + +const age = yearsOld(); + +const AboutMe = () => { + return ( + +

Alex Santos da Silva, {age} anos

+

Salvador-BA

+
+ "Pensamentos levam a sentimentos, sentimentos levam a ações e ações + levam a resultados" + - T. Harv Eker +
+
+ Clique no botão e saiba MAIS SOBRE MIM +
+ + ); +}; + +export default AboutMe; diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx index e3e0ede..878c750 100644 --- a/src/components/Contact.jsx +++ b/src/components/Contact.jsx @@ -1,6 +1,9 @@ import { useState } from "react"; +import { AiOutlineLoading } from "react-icons/ai"; +import { BsCheckLg } from "react-icons/bs"; +import { IoMdSend } from "react-icons/io"; import Reaptcha from "reaptcha"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Business from "../assets/img/Business.png"; const Container = styled.div` @@ -32,7 +35,7 @@ const Title = styled.h1``; const Card = styled.div` height: max-content; margin: 20px auto; - width: 500px; + width: 550px; display: flex; flex-direction: column; align-items: center; @@ -88,8 +91,9 @@ const FormControl = styled.div` color: ${({ theme }) => theme.color.main}; top: -2px; font-size: 12px; - padding: 4px; + padding: 2px 4px; z-index: 2; + border-radius: 10px; } } } @@ -99,14 +103,27 @@ const Button = styled.button` margin-top: auto; margin-left: auto; letter-spacing: 1.5px; - padding: 15px 25px; - background-color: #0059b3; + padding: 15px 30px; + width: 160px; + height: 50px; + background-color: ${({ theme }) => theme.color.main}; font-weight: bold; border-radius: 10px; - color: white; + display: flex; + align-items: center; + justify-content: space-between; + color: ${({ theme }) => theme.color.text.secondary}; border: none; cursor: pointer; outline: none; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + ${({ theme, isValid }) => + !isValid && + css` + background-color: ${theme.color.text.secondary}; + color: ${theme.color.main}; + outline: 1px solid ${({ theme }) => theme.color.main}; + `} `; const WrapperButtons = styled.div` @@ -117,6 +134,44 @@ const WrapperButtons = styled.div` justify-content: space-between; `; +const Loading = styled.div` + position: relative; + .step-1 { + animation: rotation 1s infinite linear; + position: relative; + } + .step-2 { + animation: rotation 1.5s infinite linear; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + .step-3 { + animation: rotation 2s infinite linear; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + @keyframes rotation { + 0% { + transform: rotate(0); + } + 50% { + opacity: 0.5; + } + 100% { + transform: rotate(360deg); + opacity: 1; + } + } +`; + const initialValues = { name: { label: "Nome", @@ -130,31 +185,39 @@ const initialValues = { w: 1 / 2, Input: (props) => , }, - phoneNumber: { + tel: { label: "Telefone", value: "", w: 1 / 2, Input: (props) => , }, - tel: { + description: { label: "Me diz o que você quer desenvolver", value: "", w: 1, - Input: (props) =>