diff --git a/package.json b/package.json index c84cc05..23d7e00 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-mailchimp-subscribe": "^2.1.3", "react-merge-refs": "^1.1.0", "react-query": "^3.35.0", + "react-select": "^5.3.2", "react-use-measure": "^2.1.1", "react-youtube": "^9.0.2", "sharp": "^0.30.4", @@ -86,6 +87,9 @@ "stylelint-prettier": "^2.0.0", "typescript": "^4.6.3" }, + "resolutions": { + "@types/react": "~17.0.43" + }, "engines": { "node": ">=14.x", "yarn": "1.x" diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml index 8501ef7..bf16db1 100644 --- a/public/sitemap-0.xml +++ b/public/sitemap-0.xml @@ -1,6 +1,2 @@ - -https://laconic.comdaily0.72022-04-05T18:49:08.426Z -https://laconic.com/blogdaily0.72022-04-05T18:49:08.426Z -https://laconic.com/communitydaily0.72022-04-05T18:49:08.426Z - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/primitives/select/select.css b/src/components/primitives/select/select.css new file mode 100644 index 0000000..3cb3151 --- /dev/null +++ b/src/components/primitives/select/select.css @@ -0,0 +1,66 @@ +.select { + height: 100%; + display: flex; + + &__control { + appearance: none; + width: 100%; + min-height: unset; + place-self: end; + font-size: tovw(24px, 'default', 18px); + padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px); + background: rgb(142 142 142 / 0.1) !important; + border: tovw(1px, 'default', 1px) solid transparent !important; + border-radius: tovw(8px, 'default', 8px) !important; + transition: unset !important; + + &:hover { + border: tovw(1px, 'default', 1px) solid transparent; + } + + &--is-focused { + border: tovw(1px, 'default', 1px) solid var(--color-accent) !important; + background: rgb(0 0 244 / 0.1) !important; + transition: all 250ms; + } + } + + &__option { + color: var(--color-grey-light) !important; + + &--is-focused { + color: white !important; + background-color: unset !important; + } + + &--is-selected { + background-color: unset !important; + color: white !important; + } + } + + [class$='-menu'] { + background: rgb(0 0 0 / 0.3); + backdrop-filter: blur(2px); + margin: 0; + } + + [class$='-indicatorContainer'] { + padding: 0 tovw(8px, 'default', 2px); + } + + [class$='-ValueContainer'], + [class$='-Input'] { + height: 100%; + padding: 0 !important; + margin: 0; + } + + &__single-value { + color: var(--color-white) !important; + } + + &__placeholder { + color: var(--color-grey-light) !important; + } +} diff --git a/src/components/sections/contact/form/form.module.scss b/src/components/sections/contact/form/form.module.scss index 8f856f3..127f69e 100644 --- a/src/components/sections/contact/form/form.module.scss +++ b/src/components/sections/contact/form/form.module.scss @@ -53,7 +53,7 @@ display: flex; flex-direction: column; - div:first-child { + > div:first-child { @include respond-to('mobile') { display: flex; flex-direction: column; @@ -98,10 +98,6 @@ opacity: 50%; border: none; color: var(--color-white); - - &:first-child { - color: red; - } } } diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx index 204b63e..d76542e 100644 --- a/src/components/sections/contact/form/index.tsx +++ b/src/components/sections/contact/form/index.tsx @@ -1,3 +1,6 @@ +import { useState } from 'react' +import Select from 'react-select' + import { Container } from '~/components/layout/container' import Section from '~/components/layout/section' import { Button } from '~/components/primitives/button' @@ -20,6 +23,16 @@ interface Props { } const Form = ({ data }: Props) => { + const selectOptions = [ + { value: 'Partnership', label: 'Partnership' }, + { value: 'Validator/Member', label: 'Validator/Member' }, + { value: 'Investor', label: 'Investor' }, + { value: 'Press', label: 'Press' }, + { value: 'Marketing', label: 'Marketing' } + ] + + const [selectedOption, setSelectedOption] = useState(null) + return (
@@ -33,7 +46,7 @@ const Form = ({ data }: Props) => {