update feedback form

src/components/AddResourceModal/AddBathroomForm/AddBathroomForm.tsx

@@ -94,7 +94,7 @@ const AddBathroomForm = ({ onGoBack, onComplete }: AddBathroomFormProps) => {
                 name="bathroom.tags"
                 label="Helpful info"
                 options={tagOptions}
-                labelPlacement="start"
+                labelPlacement="end"
               />
             </Stack>
             <FormTextField<FormValues>

src/components/AddResourceModal/AddFoodForm/AddFoodForm.tsx

@@ -118,7 +118,7 @@ const AddFoodForm = ({ onGoBack, onComplete }: AddFoodFormProps) => {
                 name="food.tags"
                 label="Helpful info"
                 options={tags}
-                labelPlacement="start"
+                labelPlacement="end"
               />
             </Stack>
             <Divider />

src/components/AddResourceModal/AddForageForm/AddForageForm.tsx

@@ -107,7 +107,7 @@ const AddForageForm = ({ onGoBack, onComplete }: AddForageFormProps) => {
                 name="forage.tags"
                 label="Helpful info"
                 options={tagOptions}
-                labelPlacement="start"
+                labelPlacement="end"
               />
             </Stack>
             <FormTextField<FormValues>

src/components/AddResourceModal/AddWaterForm/AddWaterForm.tsx

@@ -107,7 +107,7 @@ const AddWaterForm = ({ onGoBack, onComplete }: AddWaterFormProps) => {
                 name="water.tags"
                 label="Helpful info"
                 options={tagOptions}
-                labelPlacement="start"
+                labelPlacement="end"
               />
             </Stack>
             <FormTextField<FormValues>

src/components/Contact/Contact.tsx

@@ -0,0 +1,48 @@
+import { Stack } from '@mui/material';
+import Page from 'components/Page/Page';
+import FeedbackForm from 'components/forms/FeedbackForm/FeedbackForm';
+import SocialLinks from 'components/SocialLinks/SocialLinks';
+import EmailConnect from 'components/EmailConnect/EmailConnect';
+import useIsMobile from 'hooks/useIsMobile';
+import FeedbackFormSuccess from 'components/forms/FeedbackFromSuccess/FeedbackFormSuccess';
+import useAddFeedbackMutation from 'hooks/mutations/useAddFeedbackMutation';
+
+const TITLE = 'Contact';
+
+const Contact = () => {
+  const isMobile = useIsMobile();
+  const {
+    mutate: addFeedbackMutate,
+    isPending,
+    isSuccess
+  } = useAddFeedbackMutation();
+
+  return (
+    <Page title={TITLE} data-cy="contact">
+      {isSuccess ? (
+        <FeedbackFormSuccess />
+      ) : (
+        <FeedbackForm
+          onSubmit={data => addFeedbackMutate(data)}
+          isPending={isPending}
+        />
+      )}
+
+      {(isMobile || isSuccess) && (
+        <Stack
+          gap={isMobile ? 2 : 8}
+          alignItems={isMobile ? 'center' : 'start'}
+          direction={isMobile ? 'column' : 'row'}
+          sx={{
+            width: '100%'
+          }}
+        >
+          <SocialLinks />
+          <EmailConnect />
+        </Stack>
+      )}
+    </Page>
+  );
+};
+
+export default Contact;

src/components/EmailConnect/EmailConnect.tsx

@@ -0,0 +1,19 @@
+import { Link, Stack, Typography } from '@mui/material';
+import useIsMobile from 'hooks/useIsMobile';
+
+function Connect() {
+  const isMobile = useIsMobile();
+  return (
+    <Stack direction={'column'} gap={1}>
+      {!isMobile && <Typography variant="h6">Connect</Typography>}
+      <Typography textAlign={isMobile ? 'center' : 'start'}>
+        For all other inquiries, {isMobile && <br />}email{' '}
+        <Link href="mailto:[email protected]">
+          [email protected]
+        </Link>
+      </Typography>
+    </Stack>
+  );
+}
+
+export default Connect;

src/components/Page/Page.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { Stack, Typography } from '@mui/material';
+import useIsMobile from 'hooks/useIsMobile';
 
 type PageProps = {
   children: ReactNode;
@@ -8,12 +9,14 @@ type PageProps = {
 };
 
 const Page = ({ children, title, 'data-cy': dataCy }: PageProps) => {
+  const isMobile = useIsMobile();
   return (
     <Stack
       sx={{
         color: '#60718c',
-        maxHeight: '55vh',
+        maxHeight: isMobile ? '85vh' : '55vh',
         overflowY: 'auto',
+        width: '100%',
         gap: '2.5rem'
       }}
     >

src/components/SocialLinks/SocialLinks.tsx

@@ -0,0 +1,44 @@
+import { Link, Stack, Typography } from '@mui/material';
+import { SocialFacebook, SocialInstagram, SocialTwitter } from 'icons';
+
+function SocialContacts() {
+  return (
+    <Stack direction={'column'} alignItems={'center'} gap={1}>
+      <Typography variant="h6">Follow PHLASK</Typography>
+      <Stack direction={'row'} gap={4}>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href="https://www.facebook.com/PHLASKecosystem/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialFacebook />
+        </Link>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href="https://www.instagram.com/phlaskecosystem/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialInstagram />
+        </Link>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href=""
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialTwitter />
+        </Link>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default SocialContacts;

src/components/forms/FeedbackForm/FeedbackForm.tsx

@@ -0,0 +1,100 @@
+import { FormProvider, useForm, type SubmitHandler } from 'react-hook-form';
+import feedbackFormSchema, {
+  type FeedbackFormValues
+} from 'schemas/feedbackFormSchema';
+import FormTextField from '../FormTextField/FormTextField';
+import { Stack, Button, Typography } from '@mui/material';
+import FormCheckboxField from '../FormCheckBoxField/FormCheckBoxField';
+import { zodResolver } from '@hookform/resolvers/zod';
+import useIsMobile from 'hooks/useIsMobile';
+
+type FormValues = FeedbackFormValues;
+
+type FeedbackFormProps = {
+  onSubmit: (data: FormValues) => void;
+  isPending: boolean;
+};
+
+const SCHEMA = feedbackFormSchema;
+
+const FeedbackForm = ({ onSubmit, isPending }: FeedbackFormProps) => {
+  const isMobile = useIsMobile();
+
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      email: '',
+      feedback: '',
+      interest: false
+    },
+    resolver: zodResolver(SCHEMA)
+  });
+
+  const handleFormSubmit: SubmitHandler<FormValues> = feedbackData => {
+    onSubmit(feedbackData);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <Typography variant="h6">Share Feedback</Typography>
+      <form onSubmit={methods.handleSubmit(handleFormSubmit)}>
+        <Stack
+          gap={2}
+          sx={{
+            mb: 4,
+            mx: isMobile ? 'auto' : 0
+          }}
+        >
+          <FormTextField<FormValues>
+            name="name"
+            label="Name"
+            placeholder="Enter Your Name"
+            required
+            sx={{ width: isMobile ? '95%' : '400px' }}
+          />
+
+          <FormTextField<FormValues>
+            name="email"
+            label="Email"
+            placeholder="[email protected]"
+            required
+            sx={{ width: isMobile ? '95%' : '400px' }}
+          />
+
+          <FormTextField<FormValues>
+            name="feedback"
+            label="Feedback"
+            placeholder="Share your feedback and thoughts"
+            multiline
+            minRows={3}
+            required
+            helperText="Please do not include any sensitive personal information."
+            sx={{ width: isMobile ? '95%' : '800px' }}
+          />
+
+          <FormCheckboxField<FormValues>
+            name="interest"
+            label="I'm interested in helping PHLASK with future research"
+            labelPlacement="end"
+          />
+
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{
+              backgroundColor: '#10B6FF',
+              width: isMobile ? '168px' : '400px',
+              borderRadius: '8px',
+              alignSelf: isMobile ? 'center' : 'flex-start'
+            }}
+            loading={isPending}
+          >
+            Submit Feedback
+          </Button>
+        </Stack>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default FeedbackForm;

src/components/forms/FeedbackFromSuccess/FeedbackFormSuccess.tsx

@@ -0,0 +1,28 @@
+import { Stack, Typography } from '@mui/material';
+import { PhillySkyline } from 'icons';
+
+const FeedbackFormSuccess = () => {
+  return (
+    <Stack
+      sx={{
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        textAlign: 'center',
+        paddingBlock: '20px'
+      }}
+    >
+      <Typography
+        variant="h2" // @ts-expect-error Need to fix theme declaration
+        sx={theme => ({ color: theme.palette.global.darkUI.darkGrey2 })}
+      >
+        Thank you for your feedback!
+      </Typography>
+      <Stack sx={{ width: '100%', paddingInline: '21px' }}>
+        <PhillySkyline width="100%" height="306.02" />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default FeedbackFormSuccess;

src/components/forms/FormCheckBoxField/FormCheckBoxField.tsx

@@ -0,0 +1,30 @@
+import { Checkbox, FormControl, FormControlLabel } from '@mui/material';
+import { useFormContext, type FieldValues, type Path } from 'react-hook-form';
+
+type FormCheckboxFieldProps<Values extends FieldValues> = {
+  name: Path<Values>;
+  label: string;
+  labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
+};
+
+const FormCheckboxField = <Values extends FieldValues>({
+  name,
+  label,
+  labelPlacement = 'end'
+}: FormCheckboxFieldProps<Values>) => {
+  const { register } = useFormContext<Values>();
+  const field = register(name);
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        {...field}
+        control={<Checkbox />}
+        label={label}
+        labelPlacement={labelPlacement}
+      />
+    </FormControl>
+  );
+};
+
+export default FormCheckboxField;

src/components/forms/FormCheckboxListField/FormCheckboxListField.tsx

@@ -44,7 +44,6 @@ const FormCheckboxListField = <Values extends FieldValues>({
             label={option.label}
             labelPlacement={labelPlacement}
             value={option.value}
-            sx={{ justifyContent: 'space-between' }}
           />
         ))}
       </FormGroup>