diff --git a/public/onvote/assets/governance-daoplugins.png b/public/onvote/assets/governance-daoplugins.png new file mode 100644 index 00000000..55c8556f Binary files /dev/null and b/public/onvote/assets/governance-daoplugins.png differ diff --git a/public/onvote/assets/governance-farcaster.png b/public/onvote/assets/governance-farcaster.png new file mode 100644 index 00000000..4347c621 Binary files /dev/null and b/public/onvote/assets/governance-farcaster.png differ diff --git a/public/onvote/assets/governance-onvote.png b/public/onvote/assets/governance-onvote.png new file mode 100644 index 00000000..14b96c1d Binary files /dev/null and b/public/onvote/assets/governance-onvote.png differ diff --git a/public/onvote/assets/governance-others.png b/public/onvote/assets/governance-others.png new file mode 100644 index 00000000..76a37f5a Binary files /dev/null and b/public/onvote/assets/governance-others.png differ diff --git a/src/components/Home/Governance.tsx b/src/components/Home/Governance.tsx new file mode 100644 index 00000000..9e8001fd --- /dev/null +++ b/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 ( + + {cards.map((card, i) => { + return ( + + + + + + + + {t(card.title)} + + , + br:
, + }} + /> + + + + + + + ) + })} + + ) +} + +export default Governance diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 4be08d94..1d805398 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -569,5 +569,25 @@ "sik": "Create SIK" }, "title": "Welcome to {{ sitename }}" + }, + "web3cards": { + "onvote": { + "description": "Secure, gasless and transparent Web3 voting. Allows to create token census, multichain census, anonymous 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!
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 & UI-Components.
Start integrating with us now!", + "title": "Others" + }, + "contact": "Contact Us", + "try": "Try it now" } } diff --git a/src/themes/onvote/colors.ts b/src/themes/onvote/colors.ts index 28912a47..ba5c2844 100644 --- a/src/themes/onvote/colors.ts +++ b/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, + }, } diff --git a/src/themes/onvote/components/Button.ts b/src/themes/onvote/components/Button.ts index 6a062d7b..4927ec70 100644 --- a/src/themes/onvote/components/Button.ts +++ b/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', diff --git a/src/themes/onvote/components/Card.ts b/src/themes/onvote/components/Card.ts index e72cabc7..39c702ab 100644 --- a/src/themes/onvote/components/Card.ts +++ b/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 }) diff --git a/src/themes/onvote/components/Home.tsx b/src/themes/onvote/components/Home.tsx index 48ee8887..73c774cd 100644 --- a/src/themes/onvote/components/Home.tsx +++ b/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 = () => { + )