landing mockup

src/components/Home/Clients.tsx

@@ -1,5 +1,6 @@
 import { Card, CardBody, CardHeader, Grid, Image, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
 import barca from '/assets/barca.png'
 import bellpuig from '/assets/bellpuig.svg.png'
 import berga from '/assets/berga.svg.png'
@@ -15,16 +16,9 @@ const Clients = () => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <Text
-        variant='home-description-color'
-        textAlign='center'
-        mb='52px'
-        mt='100px'
-        fontFamily='basier'
-        fontSize='23px'
-      >
-        {t('home.clients_title')}
+    <Wrapper as='section' display='block' py={10}>
+      <Text textAlign='center' mb={20}>
+        {t('clients', { defaultValue: 'Trusted by leading organizations' })}
       </Text>
       <Grid
         as='section'
@@ -38,7 +32,6 @@ const Clients = () => {
         maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '900px' }}
         flexDirection={{ base: 'column', sm: 'row' }}
         justifyContent='center'
-        mb={{ base: '60px' }}
         gridTemplateColumns='repeat(5, 1fr)'
         gridRowGap='50px'
       >
@@ -123,7 +116,7 @@ const Clients = () => {
           </CardBody>
         </Card>
       </Grid>
-    </>
+    </Wrapper>
   )
 }
 export default Clients

src/components/Home/CreateProcess.tsx

@@ -1,86 +1,30 @@
-import { Box, Button, Flex, Image, Text } from '@chakra-ui/react'
+import { Box, Button, Image, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
-import { FaRegCheckCircle } from 'react-icons/fa'
 import { Link as ReactRouterLink } from 'react-router-dom'
+import Wrapper from '~components/Layout/Wrapper'
 import { Routes } from '~src/router/routes'
 import devices from '/assets/devices_vocdoni.png'
 
 const CreateProcess = () => {
   const { t } = useTranslation()
 
   return (
-    <Flex
-      as='section'
-      width='full'
-      m='0 auto'
-      maxW='1920px'
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
-      flexDirection={{ base: 'column', lg: 'row' }}
-      py={{ base: '0px', sm: '15px', md: '30px', md2: '30px', lg: '30px' }}
-      gap={{ base: '40px', lg: '60px' }}
-    >
+    <Wrapper as='section' py={10} display='flex' flexDirection={{ base: 'column', lg: 'row' }}>
       <Box flex='1 1 50%'>
-        <Text
-          fontSize={{ base: '48px', md: '52px', md2: '56px', lg2: '64px' }}
-          lineHeight={{ base: '54px', md: '58px', md2: '64px', lg2: '78px' }}
-          fontWeight='600'
-          fontFamily='basier'
-          mb='10px'
-          mt='80px'
-          textAlign={{ base: 'center', lg: 'start' }}
-        >
+        <Text fontSize='48px' mt='80px' textAlign={{ base: 'center', lg: 'start' }}>
           {t('home.create_process.title')}
         </Text>
-        <Text
-          variant='home-description-color'
-          fontSize='24px'
-          lineHeight='35px'
-          fontFamily='basier'
-          mt='52px'
-          mb='52px'
-          textAlign={{ base: 'center', lg: 'start' }}
-        >
+        <Text fontSize='18px' my={10} textAlign={{ base: 'center', lg: 'start' }}>
           {t('home.create_process.subtitle')}
         </Text>
-        <Box maxW={{ lg: '90%' }}>
-          <Button
-            as={ReactRouterLink}
-            to={Routes.auth.signIn}
-            mb='20px'
-            w={{ base: 'full', sm: 'fit-content', lg: 'full' }}
-            mx={{ base: 'auto', lg: 'start' }}
-            height='62px'
-            fontSize='20px'
-            minW='300px'
-          >
-            {t('home.create_process.btn')}
-          </Button>
-
-          <Flex
-            justifyContent='center'
-            alignItems={{ base: 'center', lg: 'start' }}
-            flexDirection={{ base: 'column', sm: 'row', lg: 'column' }}
-            gap={{ sm: 5, lg: 0 }}
-          >
-            <Text display='flex' alignItems='center' gap={1} ml='3'>
-              <FaRegCheckCircle />
-              {t('home.create_process.helper_1')}
-            </Text>
-            <Text display='none' alignItems='center' gap={1} ml='3' mt='1'>
-              <FaRegCheckCircle />
-              {t('home.create_process.helper_2')}
-            </Text>
-          </Flex>
-        </Box>
+        <Button as={ReactRouterLink} to={Routes.auth.signIn}>
+          {t('home.create_process.btn')}
+        </Button>
       </Box>
       <Box flex='1 1 50%' display={{ lg: 'flex' }} justifyContent='center' alignItems='center'>
         <Image src={devices} w={{ base: '535px', lg: '100%' }} mx='auto' />
       </Box>
-    </Flex>
+    </Wrapper>
   )
 }
 

src/components/Home/Features.tsx

@@ -1,160 +1,66 @@
-import { Box, Card, CardBody, Flex, Text } from '@chakra-ui/react'
+import { Card, CardBody, CardHeader, Grid, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
-import {
-  FaBullseye,
-  FaCubes,
-  FaLanguage,
-  FaNewspaper,
-  FaPalette,
-  FaTasks,
-  FaUserLock,
-  FaUsers,
-  FaVoteYea,
-} from 'react-icons/fa'
+import Wrapper from '~components/Layout/Wrapper'
+
+type FeaturesItem = {
+  title: string
+  description: string
+}
 
 const Features = () => {
   const { t } = useTranslation()
-
+  const featuresItems: FeaturesItem[] = [
+    {
+      title: t('features.secure_voting_title', { defaultValue: 'Secure Voting' }),
+      description: t('features.secure_voting_description', {
+        defaultValue: 'End-to-end encryption ensures the integrity and confidentiality of every vote.',
+      }),
+    },
+    {
+      title: t('features.real_time_results_title', { defaultValue: 'Real-time Results' }),
+      description: t('features.real_time_results_description', {
+        defaultValue: 'Instally vote tallying and result visualization as the election progresses.',
+      }),
+    },
+    {
+      title: t('features.customizable_ballots_title', { defaultValue: 'Customizable Ballots' }),
+      description: t('features.customizable_ballots_description', {
+        defaultValue: 'Create complex voting scenarios with our flexible ballot designer.',
+      }),
+    },
+    {
+      title: t('features.voter_authentication_title', { defaultValue: 'Voter Authentication' }),
+      description: t('features.voter_authentication_description', {
+        defaultValue: 'Multi-factor authentication options to verify voter identity.',
+      }),
+    },
+    {
+      title: t('features.audit_trail_title', { defaultValue: 'Audit Trail' }),
+      description: t('features.voter_authentication_description', {
+        defaultValue: 'Comprehensive logs and resports for full transparency and verifiability.',
+      }),
+    },
+    {
+      title: t('features.accesibility_title', { defaultValue: 'Accesibility' }),
+      description: t('features.accesibility_description', {
+        defaultValue: 'WCAG 2.1 compliant interface, ensuring voting access for all users.',
+      }),
+    },
+  ]
   return (
-    <Box
-      id='features'
-      width='full'
-      m='0 auto'
-      maxW='1920px'
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
-      py={{ base: '60px', lg: '100px' }}
-    >
-      <Box mb='80px' margin='-20px auto 125px' maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}>
-        <Text
-          fontSize={{ base: '40px', xl: '60px' }}
-          lineHeight={{ base: '36px', xl: '78px' }}
-          fontWeight='bold'
-          textAlign='center'
-          mb='25px'
-          fontFamily='basier'
-        >
-          {t('home.features.title')}
-        </Text>
-        <Text
-          variant='home-description-color'
-          mb='60px'
-          maxW={{ base: '100%', sm: '70%', sm2: '80%', lg: '840px' }}
-          mx='auto'
-          textAlign='center'
-          fontFamily='basier'
-          fontSize='20px'
-          margin='0px auto'
-        >
-          {t('home.features.subtitle_1')}
-        </Text>
-      </Box>
-
-      <Flex maxW={{ base: '100%', sm: '70%', sm2: '85%' }} margin='0px auto' flexWrap='wrap' gap={10}>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaVoteYea min='56px' />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_1.title')}</Text>
-              <Text>{t('home.features.card_1.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaPalette />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_2.title')}</Text>
-              <Text>{t('home.features.card_2.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaUsers />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_3.title')}</Text>
-              <Text>{t('home.features.card_3.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaUserLock />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_4.title')}</Text>
-              <Text>{t('home.features.card_4.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaTasks />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_5.title')}</Text>
-              <Text>{t('home.features.card_5.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaNewspaper />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_6.title')}</Text>
-              <Text>{t('home.features.card_6.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaLanguage />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_7.title')}</Text>
-              <Text>{t('home.features.card_7.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaBullseye />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_8.title')}</Text>
-              <Text>{t('home.features.card_8.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-        <Card variant='icon-card' flex={{ base: '1 0 100%', lg: '1 1 30%' }} mb='60px'>
-          <CardBody>
-            <Box>
-              <FaCubes />
-            </Box>
-            <Box>
-              <Text>{t('home.features.card_9.title')}</Text>
-              <Text>{t('home.features.card_9.description')}</Text>
-            </Box>
-          </CardBody>
-        </Card>
-      </Flex>
-    </Box>
+    <Wrapper as='section' display={'block'} py={10}>
+      <Text mx='auto' w='fit-content' mb={10}>
+        {t('features', { defaultValue: 'Key Features' })}
+      </Text>
+      <Grid gridTemplateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)', xl: 'repeat(3, 1fr)' }} gap={6}>
+        {featuresItems.map((item, index) => (
+          <Card key={index} variant={'features'}>
+            <CardHeader>{item.title}</CardHeader>
+            <CardBody>{item.description}</CardBody>
+          </Card>
+        ))}
+      </Grid>
+    </Wrapper>
   )
 }
 

src/components/Home/StartNow.tsx

@@ -0,0 +1,32 @@
+import { Button, Text } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
+
+const StartNow = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Wrapper
+      as='section'
+      display='flex'
+      flexDirection='column'
+      justifyContent={'center'}
+      alignItems={'center'}
+      gap={4}
+      py={10}
+      bgColor='home.start_now.bg_light'
+      color={'home.start_now.color_light'}
+      _dark={{ bgColor: 'home.start_now.bg_dark', color: 'home.start_now.color_dark' }}
+    >
+      <Text fontWeight='bold' fontSize={'2xl'}>
+        {t('', { defaultValue: 'Ready to revolutionize your voting process' })}
+      </Text>
+      <Text mb={4}>
+        {t('', { defaultValue: 'Join thousands of organizations making better decisions with VotingPlatform.' })}
+      </Text>
+      <Button _dark={{ bgColor: 'home.start_now.btn_bg_dark' }}> {t('', { defaultValue: 'Get Started Now' })}</Button>
+    </Wrapper>
+  )
+}
+
+export default StartNow