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) => {