diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css new file mode 100644 index 00000000..d97883d7 --- /dev/null +++ b/components/EmailSignup.module.css @@ -0,0 +1,61 @@ +.container form { + box-sizing: border-box; +} + +.container > * { + margin: 0 0 calc(21rem / 16) 0; +} + +.header { + color: var(--blue-2); + font-weight: 600; + margin: 0 0 calc(21rem / 16) 0; +} + +.form input { + display: block; + width: 100%; + margin: calc(21rem / 16) 0; + + box-sizing: border-box; + border: 0; + border-radius: calc(20rem / 16); + + background-color: var(--grey-24); +} + +.form input::placeholder { + color: var(--grey); + font-weight: 700; +} + +.form input[type="text"], +.form input[type="email"] { + padding: calc(10rem / 16) calc(31rem / 16); + font-family: Poppins; + + font-size: calc(18rem / 16); + line-height: calc(30rem / 16); + color: var(--dark-grey); +} + +.form input:is(:active, :hover, :focus) { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--blue-1); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} + +.button { + margin-top: calc(34rem / 16); +} + +/* TODO: make this only happen if the form is clicked on? */ +/* .form input:invalid { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--red); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} */ diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx new file mode 100644 index 00000000..b16d3280 --- /dev/null +++ b/components/EmailSignup.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import styles from "./EmailSignup.module.css"; +import { Button } from "./Button"; + +export function EmailSignup() { + return ( +