vocdoni · elboletaire · Jan 24, 2025 · Jan 14, 2025 · Jan 14, 2025 · Jan 16, 2025
diff --git a/public/assets/illustrations/404.png b/public/assets/illustrations/404.png
diff --git a/public/assets/illustrations/9.png b/public/assets/illustrations/9.png
diff --git a/src/components/Account/Menu.tsx b/src/components/Account/Menu.tsx
@@ -11,6 +11,7 @@ import {
   MenuItem,
   MenuList,
   Spinner,
+  Text,
 } from '@chakra-ui/react'
 import { LogOut01, Paperclip, UserSquare } from '@untitled-ui/icons-react'
 import { Trans } from 'react-i18next'
@@ -47,13 +48,16 @@ const AccountMenu: React.FC<BoxProps> = (props) => {
                   size='sm'
                 />
               }
-              rightIcon={isOpen ? <ChevronUpIcon boxSize={7} /> : <ChevronDownIcon boxSize={7} />}
+              rightIcon={isOpen ? <ChevronUpIcon boxSize={4} /> : <ChevronDownIcon boxSize={4} />}
               aria-label='User menu'
-              sx={{ '& > span': { m: 0 } }}
               display={'flex'}
               alignItems={'center'}
               variant={'unstyled'}
-            />
+            >
+              <Text fontSize='xs' fontWeight='light'>
+                {profile.email}
+              </Text>
+            </MenuButton>
             <MenuList>
               <MenuItem as={RouterLink} to={Routes.dashboard.profile} closeOnSelect={true}>
                 <Icon as={UserSquare} />

diff --git a/src/components/Auth/SignIn.tsx b/src/components/Auth/SignIn.tsx
@@ -147,7 +147,7 @@ const SignIn = ({ email: emailProp }: { email?: string }) => {
               </Text>
             </NavLink>
           </Flex>
-          <Button type='submit' w='100%' size='xl'>
+          <Button type='submit' w='100%' size='xl' variant='primary' colorScheme='gradient'>
             {t('signin')}
           </Button>
         </Flex>
@@ -156,7 +156,7 @@ const SignIn = ({ email: emailProp }: { email?: string }) => {
       <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
         <Text fontWeight='400' fontSize='sm'>
           {t('not_registred_yet')}
-          <Link as={NavLink} to={Routes.auth.signUp} ml={1} fontWeight={500}>
+          <Link variant='primary' as={NavLink} to={Routes.auth.signUp} ml={1} fontWeight={500}>
             {t('create_account')}
           </Link>
         </Text>

diff --git a/src/components/Auth/SignUp.tsx b/src/components/Auth/SignUp.tsx
@@ -137,7 +137,7 @@ const SignUp = ({ invite }: SignupProps) => {
             <FormErrorMessage>{errors?.terms?.message.toString()}</FormErrorMessage>
           </FormControl>
 
-          <Button isLoading={isPending} type='submit' size='xl' w='100%'>
+          <Button isLoading={isPending} type='submit' size='xl' w='100%' variant='primary' colorScheme='gradient'>
             {t('signup_create_account')}
           </Button>
         </Flex>
@@ -146,7 +146,7 @@ const SignUp = ({ invite }: SignupProps) => {
       <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%'>
         <Text color='account.description' fontWeight='400' fontSize='sm'>
           {t('already_member')}
-          <Link as={NavLink} to={Routes.auth.signIn} ml={1} fontWeight={500}>
+          <Link as={NavLink} to={Routes.auth.signIn} ml={1} fontWeight={500} variant='primary'>
             {t('signin')}
           </Link>
         </Text>

diff --git a/src/components/Dashboard/Menu/index.tsx b/src/components/Dashboard/Menu/index.tsx
@@ -19,6 +19,7 @@ const DashboardMenu = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => vo
       gap={4}
       bg='dashboard.sidebar.bg.light'
       _dark={{ bg: 'dashboard.sidebar.bg.dark' }}
+      boxShadow='3px 0 5px -6px #6c6d75'
     >
       <DashboardMenuContent />
     </Box>
@@ -44,7 +45,14 @@ const DashboardMenuContent = () => (
     <HSeparator />
     <DashboardMenuOptions />
     <Flex mt={'auto'} flexDirection={'column'} alignItems={'center'}>
-      <Button as={RouterLink} to={generatePath(Routes.processes.create)} w='full' my={5} leftIcon={<AddIcon />}>
+      <Button
+        as={RouterLink}
+        to={generatePath(Routes.processes.create)}
+        w='full'
+        my={5}
+        leftIcon={<AddIcon />}
+        variant='primary'
+      >
         <Trans i18nKey='new_voting'>New voting</Trans>
       </Button>
       <LogoutBtn />

diff --git a/src/components/Home/Benefits.tsx b/src/components/Home/Benefits.tsx
@@ -61,7 +61,6 @@ const Benefits = () => {
               {t('home.benefits.title')}
             </Text>
             <Text
-              variant='home-description-color'
               mb='60px'
               maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
               mx='auto'
@@ -79,55 +78,31 @@ const Benefits = () => {
                 <CardBody>{t('home.benefits.card_1.description')}</CardBody>
               </Card>
 
-              <Card variant='benefits' bgColor='home.benefits.light_bg' color='home.benefits.bg.light_bg_color'>
+              <Card variant='benefits'>
                 <Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a7812b3fd5db1d246_card-feature-img-agile.png' />
                 <CardHeader>{t('home.benefits.card_2.title')}</CardHeader>
                 <CardBody>{t('home.benefits.card_2.description')}</CardBody>
               </Card>
 
-              <Card
-                variant='benefits'
-                bgColor={{
-                  base: 'home.benefits.dark_bg',
-                  benefits1: 'home.benefits.light_bg',
-                  benefits2: 'home.benefits.dark_bg',
-                }}
-                color={{
-                  base: 'home.benefits.dark_bg_color',
-                  benefits1: 'home.benefits.light_bg_color',
-                  benefits2: 'home.benefits.dark_bg_color',
-                }}
-              >
+              <Card variant='benefits'>
                 <Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ae37bf52a3ec72b34_card-feature-img-privacy.png' />
                 <CardHeader>{t('home.benefits.card_3.title')}</CardHeader>
                 <CardBody>{t('home.benefits.card_3.description')}</CardBody>
               </Card>
 
-              <Card
-                variant='benefits'
-                bgColor={{
-                  base: 'home.benefits.light_bg',
-                  benefits1: 'home.benefits.dark_bg',
-                  benefits2: 'home.benefits.light_bg',
-                }}
-                color={{
-                  base: 'home.benefits.light_bg_color',
-                  benefits1: 'home.benefits.dark_bg_color',
-                  benefits2: 'home.benefits.light_bg_color',
-                }}
-              >
+              <Card variant='benefits'>
                 <Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2fc101547d4ca362_card-feature-img-anonymous.png' />
                 <CardHeader>{t('home.benefits.card_4.title')}</CardHeader>
                 <CardBody>{t('home.benefits.card_4.description')}</CardBody>
               </Card>
 
-              <Card variant='benefits' bgColor='home.benefits.dark_bg' color='home.benefits.dark_bg_color'>
+              <Card variant='benefits'>
                 <Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29a2c93ed6cd6d1faf0_card-feature-img-guarantee.png' />
                 <CardHeader>{t('home.benefits.card_5.title')}</CardHeader>
                 <CardBody>{t('home.benefits.card_5.description')}</CardBody>
               </Card>
 
-              <Card variant='benefits' bgColor='home.benefits.light_bg' color='home.benefits.light_bg_color'>
+              <Card variant='benefits'>
                 <Image src='https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398f29ad60f67fa065d02bd_card-feature-img-accesible.png' />
                 <CardHeader>{t('home.benefits.card_6.title')}</CardHeader>
                 <CardBody>{t('home.benefits.card_6.description')}</CardBody>

diff --git a/src/components/Home/Clients.tsx b/src/components/Home/Clients.tsx
@@ -16,14 +16,7 @@ const Clients = () => {
 
   return (
     <>
-      <Text
-        variant='home-description-color'
-        textAlign='center'
-        mb='52px'
-        mt='100px'
-        fontFamily='basier'
-        fontSize='23px'
-      >
+      <Text textAlign='center' mb='52px' mt='100px' fontFamily='basier' fontSize='23px' fontWeight='400'>
         {t('home.clients_title')}
       </Text>
       <ClientsGrid />
@@ -34,96 +27,92 @@ const Clients = () => {
 export const ClientsGrid = (props: GridProps) => (
   <Grid
     as='section'
-    width='full'
-    m='0 auto'
+    maxWidth={'1400px'}
+    mx='auto'
     px={{
-      base: '10px',
-      sm: '20px',
-      md: '80px',
+      base: 2,
+      sm: 4,
+      lg: 6,
     }}
-    maxW={{ base: '100%', sm: '80%', lg: '900px' }}
-    flexDirection={{ base: 'column', sm: 'row' }}
-    justifyContent='center'
-    mb={{ lg: '60px' }}
-    gridTemplateColumns='repeat(5, 1fr)'
-    gridRowGap={{ base: '0px', sm: '30px', lg: '50px' }}
+    gridTemplateColumns={{ base: 'repeat(5, 1fr)', md: 'repeat(10, 1fr)' }}
+    justifyContent={'end'}
     {...props}
   >
     <Card variant='client'>
       <CardHeader>
-        <Image src={barca} h={{ base: '45.5px', sm2: '65px', lg: '70px' }} />
+        <Image src={barca} h={'40px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>F.C. Barcelona</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={omnium} h={{ base: '52.5px', sm2: '75px', lg: '87px' }} />
+        <Image src={omnium} h={'57px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Omnium Cultural</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={berga} h={{ base: '49px', sm2: '70px', lg: '81px' }} />
+        <Image src={berga} h={'41px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Ajuntament Berga</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={bisbal} h={{ base: '50px', sm2: '72px', lg: '83px' }} />
+        <Image src={bisbal} h={'33px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Ajuntament la Bisbal</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={coec} h={{ base: '24.5px', sm2: '35px', lg: '45px' }} />
+        <Image src={coec} h={'20px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>COEC</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={erc} h={{ base: '26.5px', sm2: '38px', lg: '52px' }} />
+        <Image src={erc} h={'32px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Esquerra Republicana</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={bellpuig} h={{ base: '50px', sm2: '72px', lg: '83px' }} />
+        <Image src={bellpuig} h={'33px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Ajuntament Bellpuig</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={ticanoia} h={{ base: '18px', sm2: '26px', lg: '32px' }} />
+        <Image src={ticanoia} h={'18px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>TIC Anoia</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={decidim} h={{ base: '43.5px', sm2: '62px', lg: '70px' }} />
+        <Image src={decidim} h={'30px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Decidim</Text>
       </CardBody>
     </Card>
     <Card variant='client'>
       <CardHeader>
-        <Image src={bloock} h={{ base: '24.5px', sm2: '35px', lg: '33px' }} />
+        <Image src={bloock} h={'17px'} />
       </CardHeader>
       <CardBody>
         <Text as='span'>Bloock</Text>

diff --git a/src/components/Home/ContactUs.tsx b/src/components/Home/ContactUs.tsx
@@ -87,6 +87,8 @@ const ContactUs = () => {
             mx='auto'
             as={ReactRouterLink}
             to='mailto:[email protected]'
+            colorScheme={'gradient'}
+            variant={'primary'}
             aria-label={t('home.contactus.btn')}
             title={t('home.contactus.btn')}
             target='_blank'

diff --git a/src/components/Home/CreateProcess.tsx b/src/components/Home/CreateProcess.tsx
@@ -12,7 +12,7 @@ const CreateProcess = () => {
     <Flex
       as='section'
       width='full'
-      m='0 auto'
+      m='30px auto 20px'
       maxW='1920px'
       px={{
         base: '10px',
@@ -36,7 +36,6 @@ const CreateProcess = () => {
           {t('home.create_process.title')}
         </Text>
         <Text
-          variant='home-description-color'
           fontSize='24px'
           lineHeight='35px'
           fontFamily='basier'
@@ -50,6 +49,8 @@ const CreateProcess = () => {
           <Button
             as={ReactRouterLink}
             to={Routes.auth.signIn}
+            colorScheme='gradient'
+            variant='primary'
             mb='20px'
             w={{ base: 'full', sm: 'fit-content', lg: 'full' }}
             mx={{ base: 'auto', lg: 'start' }}

diff --git a/src/components/Home/Features.tsx b/src/components/Home/Features.tsx
@@ -40,7 +40,6 @@ const Features = () => {
           {t('home.features.title')}
         </Text>
         <Text
-          variant='home-description-color'
           mb='60px'
           maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
           mx='auto'
@@ -57,7 +56,7 @@ const Features = () => {
         <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
           <CardBody>
             <Box>
-              <FaVoteYea min='56px' />
+              <FaVoteYea />
             </Box>
             <Box>
               <Text>{t('home.features.card_1.title')}</Text>

diff --git a/src/components/Home/Process.tsx b/src/components/Home/Process.tsx
@@ -35,7 +35,6 @@ const Process = () => {
         {t('home.process.title')}
       </Text>
       <Text
-        variant='home-description-color'
         mb='60px'
         maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
         mx='auto'

diff --git a/src/components/Home/Solutions.tsx b/src/components/Home/Solutions.tsx
@@ -34,7 +34,6 @@ const Solutions = () => {
               {t('home.solutions.title')}
             </Text>
             <Text
-              variant='home-description-color'
               maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
               textAlign={{ base: 'center', xl: 'left' }}
               mx='auto'

diff --git a/src/components/Home/Support.tsx b/src/components/Home/Support.tsx
@@ -9,9 +9,9 @@ const Support = () => {
   return (
     <Box
       backgroundImage='url("https://assets-global.website-files.com/6398d7c1bcc2b775ebaa4f2f/6398d7c1bcc2b75c38aa4f55_Net.svg")'
-      backgroundColor={'home.support.bg.light'}
+      background={'home.support.bg.light'}
       _dark={{
-        bgColor: 'home.support.bg.dark',
+        background: 'home.support.bg.dark',
       }}
       backgroundRepeat='no-repeat'
       backgroundPosition='right'
@@ -93,26 +93,30 @@ const Support = () => {
           <Button
             as={ReactRouterLink}
             to='mailto:[email protected]'
-            variant='secondary'
+            variant='outline'
+            colorScheme='whiteAlpha'
             aria-label={t('home.support.btn_contact')}
             title={t('home.support.btn_contact')}
             target='_blank'
             minW='280px'
             height='60px'
             mb='30px'
+            color='white'
           >
             {t('home.support.btn_contact')}
           </Button>
           <Button
             as={ReactRouterLink}
-            variant='secondary'
+            variant='primary'
+            colorScheme='whiteAlpha'
             to='https://calendly.com/vocdoni-app/30min'
             aria-label={t('home.support.btn_watch')}
             title={t('home.support.btn_watch')}
             target='_blank'
             minW='280px'
             mb='30px'
             height='60px'
+            color='white'
           >
             <FaPhoneVolume size={30} />
             <Text as='span' ml='10px'>