mock up contact us, related #802

src/components/Layout/CheckboxCustom.tsx

@@ -1,4 +1,4 @@
-import { Box, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
+import { Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Text } from '@chakra-ui/react'
 import { ReactNode } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +10,13 @@ export interface CheckboxCustomProps {
   colorScheme?: string
 }
 
-const CheckboxCustom = ({ formValue, label, required = false, colorScheme = 'brandScheme' }: CheckboxCustomProps) => {
+const CheckboxCustom = ({
+  formValue,
+  label,
+  required = false,
+  colorScheme = 'brandScheme',
+  ...props
+}: CheckboxCustomProps) => {
   const { t } = useTranslation()
   const {
     register,
@@ -24,11 +30,13 @@ const CheckboxCustom = ({ formValue, label, required = false, colorScheme = 'bra
   const errorMessage = (errors[formValue]?.message as string) || ''
 
   return (
-    <FormControl isInvalid={!!errors[formValue]} isRequired={required}>
-      <Flex alignItems='center'>
+    <FormControl isInvalid={!!errors[formValue]} isRequired={required} {...props}>
+      <Flex alignItems='center' cursor='pointer'>
         <Checkbox {...register(formValue, validationRules)} colorScheme={colorScheme} me={2.5} />
-        <FormLabel display='flex' mb={0} fontWeight='normal' fontSize='sm'>
-          <Box>{label}</Box>
+        <FormLabel>
+          <Text as='span' mb={0} fontWeight='normal' fontSize='sm' _hover={{ cursor: 'pointer' }}>
+            {label}
+          </Text>
         </FormLabel>
       </Flex>
       <FormErrorMessage>{errorMessage || 'Error performing the operation'}</FormErrorMessage>

src/components/Layout/ContactUs.tsx

@@ -0,0 +1,81 @@
+import { Box, Button, Flex, FormControl, FormLabel, Text, Textarea } from '@chakra-ui/react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FiMapPin, FiPhone } from 'react-icons/fi'
+import { MdOutlineMailOutline } from 'react-icons/md'
+import CustomCheckbox from '../Layout/CheckboxCustom'
+import InputBasic from './InputBasic'
+import Wrapper from './Wrapper'
+
+const ContactUs = () => {
+  const { t } = useTranslation()
+
+  const methods = useForm({
+    defaultValues: {
+      name: '',
+      email: '',
+      message: '',
+      privacy: false,
+    },
+  })
+  return (
+    <Wrapper display='flex' flexDirection={{ base: 'column', lg: 'row' }} gap={8} py={10}>
+      <Box flex={'1 1 50%'}>
+        <Text mb={4}>{t('contact_us.title', { defaultValue: 'Contact Us' })}</Text>
+        <Text mb={6}>
+          {t('contact_us.description', { defaultValue: 'Our friendly team would love to hear from you' })}
+        </Text>
+        <Flex flexDirection={'column'} gap={2}>
+          <Flex alignItems='center' gap={2}>
+            <MdOutlineMailOutline />
+            <Text mb={0}>{t('contact_us.email', { defaultValue: '[email protected]' })}</Text>
+          </Flex>
+          <Flex alignItems='center' gap={2}>
+            <FiPhone />
+            <Text>{t('contact_us.phone', { defaultValue: '@vocdoni_community (TG)' })}</Text>
+          </Flex>
+          <Flex alignItems='center' gap={2}>
+            <FiMapPin />
+            <Text>{t('contact_us.location', { defaultValue: '@vocdoni' })}</Text>
+          </Flex>
+        </Flex>
+      </Box>
+      <FormProvider {...methods}>
+        <Flex as='form' flex={'1 1 50%'} flexDirection={'column'} gap={6}>
+          <InputBasic
+            formValue='name'
+            label={t('name', { defaultValue: 'Name' })}
+            placeholder={t('name_placeholder', { defaultValue: 'Your name' })}
+            type='text'
+            required
+          />
+          <InputBasic
+            formValue='email'
+            label={t('email')}
+            placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}
+            type='email'
+            required
+          />
+          <FormControl>
+            <FormLabel ms='4px' fontSize='sm' fontWeight='500'>
+              {t('contact_us.message.label', { defaultValue: 'Message' })}
+            </FormLabel>
+            <Textarea
+              {...methods.register('message')}
+              placeholder={t('contact_us.message.placeholder', { defaultValue: 'Type yout message' })}
+              isRequired
+            />
+          </FormControl>
+          <CustomCheckbox
+            formValue='privacy'
+            label={t('contact_us.privacy_policy', { defaultValue: 'You agree to our friendly privacy policy' })}
+          />
+
+          <Button type='submit'>{t('submit', { defaultValue: 'Submit' })}</Button>
+        </Flex>
+      </FormProvider>
+    </Wrapper>
+  )
+}
+
+export default ContactUs

src/router/Router.tsx

@@ -3,14 +3,16 @@ import { useAuthRoutes } from './routes/auth'
 import { useDashboardRoutes } from './routes/dashboard'
 import { useProcessCreateRoutes } from './routes/process-create'
 import { useRootRoutes } from './routes/root'
+import { useViewsRoutes } from './routes/views'
 
 export const RoutesProvider = () => {
   const root = useRootRoutes()
   const auth = useAuthRoutes()
   const processCreate = useProcessCreateRoutes()
   const dashboard = useDashboardRoutes()
+  const views = useViewsRoutes()
 
-  const router = createBrowserRouter([root, auth, processCreate, dashboard])
+  const router = createBrowserRouter([root, auth, processCreate, dashboard, views])
 
   return <RouterProvider router={router} />
 }

src/router/routes/index.ts

@@ -1,18 +1,14 @@
 export const Routes = {
   root: '/',
-  aboutUs: 'about-us',
-  api: '/api',
   auth: {
     signIn: '/account/signin',
     signUp: '/account/signup',
     recovery: '/account/password',
     verify: '/account/verify',
     passwordReset: '/account/password/reset',
   },
-  blog: 'https://blog.vocdoni.io/',
   calculator: '/calculator',
-  careers: '/careers',
-  compliance: '/compliance',
+  contactUs: 'contact-us',
   dashboard: {
     base: '/admin',
     organization: '/admin/organization',
@@ -21,18 +17,13 @@ export const Routes = {
     profile: '/admin/profile',
     team: '/admin/team',
   },
-  documentation: '/documentation',
   faucet: '/faucet',
-  features: '',
   organization: '/organization/:address',
-  pricing: '/pricing',
   privacy: '/privacy',
   processes: {
     create: '/admin/processes/create',
     view: '/processes/:id',
   },
-  security: '/security',
-  support: '/support',
   stripe: {
     checkout: '/stripe/checkout/:amount?',
     return: '/stripe/return/:sessionId',

src/router/routes/views.tsx

@@ -0,0 +1,33 @@
+import { lazy } from 'react'
+// These aren't lazy loaded since they are main layouts and related components
+import Layout from '~elements/Layout'
+import { Routes } from '.'
+import { SuspenseLoader } from '../SuspenseLoader'
+
+const ContactUs = lazy(() => import('~components/Layout/ContactUs'))
+
+const ViewsElements = [
+  {
+    children: [
+      {
+        children: [
+          {
+            path: Routes.contactUs,
+            element: (
+              <SuspenseLoader>
+                <ContactUs />
+              </SuspenseLoader>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+]
+
+export const useViewsRoutes = () => {
+  return {
+    element: <Layout />,
+    children: ViewsElements,
+  }
+}

src/theme/components/textarea.ts

@@ -3,8 +3,10 @@ import { defineStyleConfig } from '@chakra-ui/react'
 export const Textarea = defineStyleConfig({
   baseStyle: {
     border: '1px solid',
-    borderColor: 'input.border.light',
+    borderColor: 'input.border.light !important',
     fontSize: '15px',
+    borderRadius: 'xl',
+    bgColor: 'input.bg.light !important',
 
     _hover: {
       outline: '1px solid',
@@ -13,20 +15,28 @@ export const Textarea = defineStyleConfig({
     },
 
     _focus: {
-      outline: '2px solid',
+      outline: '1px solid',
       outlineOffset: '0px',
-      outlineColor: 'red',
+      outlineColor: 'input.outline',
       borderColor: 'transparent',
     },
 
     _placeholder: {
       color: 'input.placeholder.dark',
     },
 
+    _disabled: {
+      color: 'input.disabled',
+      bgColor: 'input.bg.light !important',
+      opacity: 1,
+    },
+
     _dark: {
       border: '0.1px solid',
       borderColor: 'input.border.dark',
       fontSize: '15px',
+      bgColor: 'input.bg.dark !important',
+
       _hover: {
         outline: '.1px solid',
         outlineColor: 'input.hover.dark',