Implement governance cards

src/components/Home/Governance.tsx

@@ -0,0 +1,93 @@
+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'
+
+interface IGovernanceCardProps {
+  buttonText: string
+  buttonColor: string
+  buttonLink: string
+  title: string
+  description: string
+  image: string
+}
+
+const governanceCards = (): IGovernanceCardProps[] => {
+  return [
+    {
+      buttonText: 'web3cards.try',
+      buttonColor: 'web3_cta.onvote',
+      buttonLink: 'processes/create',
+      title: 'web3cards.onvote.title',
+      description: 'web3cards.onvote.description',
+      image: onvote,
+    },
+    {
+      buttonText: 'web3cards.try',
+      buttonColor: 'web3_cta.farcaster',
+      buttonLink: 'https://farcaster.vote',
+      title: 'web3cards.farcaster.title',
+      description: 'web3cards.farcaster.description',
+      image: farcaster,
+    },
+    {
+      buttonText: 'web3cards.try',
+      buttonColor: 'web3_cta.plugins',
+      buttonLink: 'https://app.aragon.org',
+      title: 'web3cards.plugins.title',
+      description: 'web3cards.plugins.description',
+      image: daoplugins,
+    },
+    {
+      buttonText: 'web3cards.contact',
+      buttonColor: 'web3_cta.others',
+      buttonLink: 'mailto:info@vocdoni.org',
+      title: 'web3cards.others.title',
+      description: 'web3cards.others.description',
+      image: others,
+    },
+  ]
+}
+
+const Governance = () => {
+  const { t } = useTranslation()
+  const cards = useMemo(governanceCards, [])
+
+  return (
+    <Flex className='voting-type' maxW={'100%'}>
+      {cards.map((card, i) => {
+        return (
+          <Card key={i} variant='image-card'>
+            <CardHeader>
+              <Box>
+                <Img src={card.image} position='absolute' />
+              </Box>
+            </CardHeader>
+            <CardBody>
+              <Text>{t(card.title)}</Text>
+              <Text>
+                <Trans
+                  i18nKey={t(card.description)}
+                  components={{
+                    b: <strong />,
+                    br: <br />,
+                  }}
+                />
+              </Text>
+            </CardBody>
+            <CardFooter>
+              <Button variant={'try-it-now'} bgColor={card.buttonColor}>
+                {t(card.buttonText)}
+              </Button>
+            </CardFooter>
+          </Card>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default Governance

src/i18n/locales/en.json

@@ -569,5 +569,25 @@
       "sik": "Create SIK"
     },
     "title": "Welcome to {{ sitename }}"
+  },
+  "web3cards": {
+    "onvote": {
+      "description": "<b>Secure</b>, <b>gasless</b> and <b>transparent</b> Web3 voting. Allows to create <b>token census, multichain census, anonymous</b> voting, sybil-resistant census with a flexible voting type.",
+      "title": "Onvote"
+    },
+    "farcaster": {
+      "description": "With \"Farcaster.vote\" we allow a simple and social way to vote. Your members only have to vote trough Farcaster in 2 simple clicks.",
+      "title": "Farcaster"
+    },
+    "plugins": {
+      "description": "We implemented a custom DAO gasless voting solution for Aragon DAO, and we can do the same for you!<br/>Start with anonymous gasless vote!",
+      "title": "DAO Plugins"
+    },
+    "others": {
+      "description": "We've build a voting suite allowing an easy integration with our dedicated voting Blockchain via our SDK &amp; UI-Components.<br />Start integrating with us now!",
+      "title": "Others"
+    },
+    "contact": "Contact Us",
+    "try": "Try it now"
   }
 }

src/themes/onvote/colors.ts

@@ -24,6 +24,13 @@ export const colorsBase = {
     dark: '#fafafa',
     dark2: 'rgb(245, 247, 250)',
   },
+
+  cta: {
+    black: '#000000',
+    purple: 'rgb(127, 86, 214)',
+    blue: 'rgb(0, 0, 255)',
+    gray: 'rgb(194, 194, 194)',
+  },
 }
 
 export const colors = {
@@ -188,4 +195,10 @@ export const colors = {
     title: colorsBase.primary.main,
   },
   results_progressbar_bg: colorsBase.white.pure,
+  web3_cta: {
+    onvote: colorsBase.cta.black,
+    farcaster: colorsBase.cta.purple,
+    plugins: colorsBase.cta.blue,
+    others: colorsBase.cta.gray,
+  },
 }

src/themes/onvote/components/Button.ts

@@ -395,12 +395,6 @@ const closeForm = defineStyle({
 
 const goBack = defineStyle({
   p: 0,
-
-  '& img': {
-    w: 1.5,
-    mr: 1,
-    mb: '1px',
-  },
   '& span': {
     color: 'organization.go_back_btn',
     overflow: 'hidden',
@@ -410,6 +404,17 @@ const goBack = defineStyle({
   },
 })
 
+const tryItNow = defineStyle({
+  background: 'web3_cta.onvote',
+  color: 'white',
+  px: 8,
+  height: 9,
+  fontWeight: 'normal',
+  borderRadius: 'var(--chakra-radii-md)',
+  fontSize: { base: '13px' },
+  boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 10px',
+})
+
 export const Button = defineStyleConfig({
   baseStyle,
   variants: {
@@ -423,6 +428,7 @@ export const Button = defineStyleConfig({
     process,
     secondary,
     transparent,
+    'try-it-now': tryItNow,
   },
   defaultProps: {
     colorScheme: 'primary',

src/themes/onvote/components/Card.ts

@@ -213,6 +213,7 @@ const typesVoting = definePartsStyle({
     lineHeight: '24px',
   },
 })
+
 const aside = definePartsStyle({
   container: {
     direction: 'column',
@@ -232,10 +233,91 @@ const aside = definePartsStyle({
   },
 })
 
+const imageCard = definePartsStyle({
+  container: {
+    ...cardCommonStyles.container,
+    w: '300px',
+    height: 100,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    justify: 'center',
+    alignItems: 'center',
+
+    boxShadow: 'var(--box-shadow)',
+    transition: 'box-shadow .2s',
+
+    _hover: {
+      boxShadow: 'var(--box-shadow-darker)',
+      transition: 'box-shadow .2s  ',
+    },
+  },
+
+  header: {
+    ...cardCommonStyles.header,
+    height: 40,
+    width: 60,
+    minH: 40,
+    mt: 7,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    justify: 'center',
+    alignItems: 'center',
+
+    '& > div': {
+      height: 40,
+      width: 60,
+      overflow: 'hidden',
+      position: 'relative',
+      display: 'flex',
+      justify: 'center',
+      alignItems: 'center',
+      w: '100%',
+      h: '100%',
+      boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 0px',
+      borderRadius: 'var(--chakra-radii-md)',
+    },
+
+    '& img': {
+      width: '100%',
+      minH: '100%',
+    },
+  },
+
+  body: {
+    ...cardCommonStyles.header,
+
+    width: 60,
+    display: 'flex',
+    justify: 'center',
+    alignItems: 'start',
+    flexDirection: 'column',
+
+    '& > p:first-of-type': {
+      fontWeight: 'bold',
+      fontSize: { base: '18px' },
+      mt: 4,
+      mb: 2,
+      textAlign: { base: 'start' },
+    },
+
+    '& p:nth-of-type(2)': {
+      fontSize: { base: '13px' },
+    },
+  },
+
+  footer: {
+    ...cardCommonStyles.footer,
+    pb: 3,
+  },
+})
+
 const variantsCards = {
   aside,
   detailed,
   'no-elections': noElections,
   'types-voting': typesVoting,
+  'image-card': imageCard,
 }
 export const Card = defineMultiStyleConfig({ variants: variantsCards })

src/themes/onvote/components/Home.tsx

@@ -3,6 +3,7 @@ import Banner from '~components/Home/BannerOnVote'
 import Features from '~components/Home/Features'
 import VotingTypesBanner from '~components/Home/Voting'
 import homeBg from '/assets/home-bg.png'
+import Governance from '~components/Home/Governance'
 
 const Home = () => {
   return (
@@ -23,6 +24,7 @@ const Home = () => {
       </Box>
       <Box>
         <Features />
+        <Governance />
       </Box>
     </>
   )