Refactor onvote landing

src/components/Home/Governance.tsx

@@ -0,0 +1,118 @@
+import { Box, Button, Card, CardBody, CardFooter, CardHeader, Flex, Icon, Img, Text, Link } from '@chakra-ui/react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
+import onvote from '/assets/governance-onvote.png'
+import farcaster from '/assets/governance-farcaster.png'
+import daoplugins from '/assets/governance-daoplugins.png'
+import others from '/assets/governance-others.png'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { TFunction } from 'i18next'
+import { useAccount } from 'wagmi'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+
+interface IGovernanceCardProps {
+  buttonText: string
+  buttonColor: string
+  buttonAction: string | (() => void)
+  title: string
+  description: string
+  image: string
+}
+
+const Governance = () => {
+  const { t } = useTranslation()
+  const { isConnected } = useAccount()
+  const { openConnectModal } = useConnectModal()
+
+  const cards: IGovernanceCardProps[] = [
+    {
+      buttonText: !isConnected ? t('menu.login') : t('web3cards.onvote.btn'),
+      buttonColor: 'web3_cta.onvote',
+      buttonAction: !isConnected
+        ? () => {
+            if (openConnectModal) openConnectModal()
+          }
+        : 'processes/create',
+      title: t('web3cards.onvote.title'),
+      description: t('web3cards.onvote.description'),
+      image: onvote,
+    },
+    {
+      buttonText: t('web3cards.farcaster.btn'),
+      buttonColor: 'web3_cta.farcaster',
+      buttonAction: 'https://farcaster.vote',
+      title: t('web3cards.farcaster.title'),
+      description: t('web3cards.farcaster.description'),
+      image: farcaster,
+    },
+    {
+      buttonText: t('web3cards.plugins.btn'),
+      buttonColor: 'web3_cta.plugins',
+      buttonAction: 'https://app.aragon.org',
+      title: t('web3cards.plugins.title'),
+      description: t('web3cards.plugins.description'),
+      image: daoplugins,
+    },
+    {
+      buttonText: t('web3cards.others.btn'),
+      buttonColor: 'web3_cta.others',
+      buttonAction: 'mailto:info@vocdoni.org',
+      title: t('web3cards.others.title'),
+      description: t('web3cards.others.description'),
+      image: others,
+    },
+  ]
+  return (
+    <>
+      <Text
+        as='h1'
+        fontSize={{ base: '25px', lg: '35px' }}
+        textAlign='center'
+        lineHeight='44px'
+        fontFamily='pixeloidsans'
+        fontWeight={'bold'}
+        mb={14}
+      >
+        {t('web3cards.title')}
+      </Text>
+      <Flex className='voting-type' maxW={'100%'} gap={8} justifyContent={'center'}>
+        {cards.map((card, i) => {
+          return (
+            <Card key={i} variant='image-card'>
+              <CardHeader>
+                <Box>
+                  <Img src={card.image} position='absolute' />
+                </Box>
+              </CardHeader>
+              <CardBody>
+                <Text>{card.title}</Text>
+                <Text>
+                  <Trans
+                    i18nKey={card.description}
+                    components={{
+                      b: <strong />,
+                      br: <br />,
+                    }}
+                  />
+                </Text>
+              </CardBody>
+              <CardFooter>
+                {typeof card.buttonAction === 'string' ? (
+                  <Button as={ReactRouterLink} variant={'try-it-now'} bgColor={card.buttonColor} to={card.buttonAction}>
+                    {card.buttonText}
+                  </Button>
+                ) : (
+                  <Button variant={'try-it-now'} bgColor={card.buttonColor} onClick={card.buttonAction}>
+                    {card.buttonText}
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </Flex>
+    </>
+  )
+}
+
+export default Governance

src/components/Home/Voting.tsx

@@ -3,40 +3,38 @@ import { useTranslation } from 'react-i18next'
 import { BsArrowUpRight, BsStars } from 'react-icons/bs'
 import { TbDiscountCheckFilled } from 'react-icons/tb'
 
-const VotingTypesBanner = () => {
+const VotingTypesBanner = ({ app = 'Vocdoni App' }: { app?: string }) => {
   const { t } = useTranslation()
   return (
-    <>
-      <Flex className='voting-type'>
-        <Card variant='types-voting'>
-          <CardBody>
-            <Icon as={TbDiscountCheckFilled} />
-            <Text>{t('banner_voting_types.anonymous_title')}</Text>
-          </CardBody>
-          <CardFooter>
-            <Text>{t('banner_voting_types.anonymous_description')}</Text>
-          </CardFooter>
-        </Card>
-        <Card variant='types-voting'>
-          <CardBody>
-            <Icon as={BsStars} />
-            <Text>{t('banner_voting_types.token_title')}</Text>
-          </CardBody>
-          <CardFooter>
-            <Text> {t('banner_voting_types.token_description')}</Text>
-          </CardFooter>
-        </Card>
-        <Card variant='types-voting'>
-          <CardBody>
-            <Icon as={BsArrowUpRight} />
-            <Text>{t('banner_voting_types.flexible_title')}</Text>
-          </CardBody>
-          <CardFooter>
-            <Text>{t('banner_voting_types.flexible_description')}</Text>
-          </CardFooter>
-        </Card>
-      </Flex>
-    </>
+    <Flex className='voting-type' maxW={'1250px'}>
+      <Card variant='types-voting'>
+        <CardBody>
+          <Icon as={TbDiscountCheckFilled} />
+          <Text>{t('banner_voting_types.anonymous_title')}</Text>
+        </CardBody>
+        <CardFooter>
+          <Text>{t('banner_voting_types.anonymous_description', { app })}</Text>
+        </CardFooter>
+      </Card>
+      <Card variant='types-voting'>
+        <CardBody>
+          <Icon as={BsStars} />
+          <Text>{t('banner_voting_types.token_title')}</Text>
+        </CardBody>
+        <CardFooter>
+          <Text> {t('banner_voting_types.token_description', { app })}</Text>
+        </CardFooter>
+      </Card>
+      <Card variant='types-voting'>
+        <CardBody>
+          <Icon as={BsArrowUpRight} />
+          <Text>{t('banner_voting_types.flexible_title')}</Text>
+        </CardBody>
+        <CardFooter>
+          <Text>{t('banner_voting_types.flexible_description', { app })}</Text>
+        </CardFooter>
+      </Card>
+    </Flex>
   )
 }
 export default VotingTypesBanner