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..b03826d9 --- /dev/null +++ b/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 ( + <> + + {t('web3cards.title')} + + + {cards.map((card, i) => { + return ( + + + + + + + + {card.title} + + , + br:
, + }} + /> + + + + {typeof card.buttonAction === 'string' ? ( + + ) : ( + + )} + + + ) + })} + + + ) +} + +export default Governance diff --git a/src/components/Home/Roadmap.tsx b/src/components/Home/Roadmap.tsx deleted file mode 100644 index 0dc3cfde..00000000 --- a/src/components/Home/Roadmap.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { Box, Checkbox, Flex, Text } from '@chakra-ui/react' -import { Trans, useTranslation } from 'react-i18next' - -const Roadmap = () => { - const { t } = useTranslation() - return ( - - - ), - p2: ( - - ), - }} - /> - - - - - {t('roadmap.milestone1')} - - - - - - {t('roadmap.complex_startegies_title')} - - - {t('roadmap.complex_startegies_description')} - - - - - - - - {t('roadmap.social_census_title')} - - - {t('roadmap.social_census_desciption')} - - - - - - - - {t('roadmap.versatil_title')} - - - {t('roadmap.versatil_description')} - - - - - - - - {t('roadmap.private_title')} - - - {t('roadmap.private_description')} - - - - - - - - {t('roadmap.chainlink_title')} - - - {t('roadmap.chainlink_description')} - - - - - - - {t('roadmap.milestone2')} - - - - - - - {t('roadmap.registry_title')} - - - {t('roadmap.registry_description')} - - - - - - - - {t('roadmap.census_title')} - - - {t('roadmap.census_description')} - - - - - - - - {t('roadmap.voting_title')} - - - {t('roadmap.voting_description')} - - - - - - - - {t('roadmap.rollup_title')} - - {t('roadmap.rollup_description')} - - - - - - - {t('roadmap.execution_title')} - - {t('roadmap.execution_description')} - - - - - - ) -} - -export default Roadmap diff --git a/src/components/Home/Voting.tsx b/src/components/Home/Voting.tsx index 2bf9aa64..6b9c9964 100644 --- a/src/components/Home/Voting.tsx +++ b/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 ( - <> - - - - - {t('banner_voting_types.anonymous_title')} - - - {t('banner_voting_types.anonymous_description')} - - - - - - {t('banner_voting_types.token_title')} - - - {t('banner_voting_types.token_description')} - - - - - - {t('banner_voting_types.flexible_title')} - - - {t('banner_voting_types.flexible_description')} - - - - + + + + + {t('banner_voting_types.anonymous_title')} + + + {t('banner_voting_types.anonymous_description', { app })} + + + + + + {t('banner_voting_types.token_title')} + + + {t('banner_voting_types.token_description', { app })} + + + + + + {t('banner_voting_types.flexible_title')} + + + {t('banner_voting_types.flexible_description', { app })} + + + ) } export default VotingTypesBanner diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json index 17ff4e98..6f70c48d 100644 --- a/src/i18n/locales/ca.json +++ b/src/i18n/locales/ca.json @@ -538,31 +538,6 @@ "recovery": "Recuperar compte" }, "retry": "Reintenta", - "roadmap": { - "census_description": "Crear un cens descentralitzat fora de la cadena i compatible amb zk a partir d'una instantània de blocs d'Ethereum, amb verificació a la cadena.", - "census_title": "zkCensus:", - "chainlink_description": "Habilitar l'execució automàtica amb suport optimista.", - "chainlink_title": "Integració de Chainlink:", - "complex_startegies_description": "Integrar qualsevol token de qualsevol cadena de blocs utilitzant una combinació de lògica i operacions algebraiques, directament. Per exemple,", - "complex_startegies_title": "Estratègies complexes:", - "execution_description": "Enviar la prova final a la cadena per a una execució vinculant.", - "execution_title": "Execució:", - "milestone1": "Fita 1: Governança flexible sense gasos", - "milestone2": "Fita 2: zkRollup per a votacions vinculants segures i anònimes", - "private_description": "Mostrar el contingut de la proposta de votació només als membres de la comunitat.", - "private_title": "Metadades de votació privada:", - "registry_description": "Un registre global a la cadena per a identitats zk (coneixement zero).", - "registry_title": "zkRegistry:", - "rollup_description": "Consolidar tots els vots en una única prova zk segura mitjançant la tecnologia de zkRollup personalitzada.", - "rollup_title": "zkRollup:", - "social_census_desciption": "Millora el teu cens amb identitats socials de plataformes com ara Github o Twitter. Inclou mecanismes de resistència a Sybil com Holonym o Proof-of-Humanity.", - "social_census_title": "Cens social:", - "title": "Pla d'acció 2024 Què ve després?", - "versatil_description": "Ja sigui votació simple, escalonada o quadràtica, Onvote admet diversos mètodes de votació per adaptar-se a les diverses necessitats de la comunitat.", - "versatil_title": "Mètodes de votació versàtils:", - "voting_description": "Facilitar la votació anònima, fora de la cadena (sense gasos) per a qualsevol votant eligible mitjançant la xarxa p2p de Vocdoni.", - "voting_title": "zkVoting:" - }, "share": { "copy": "Copia", "election_share_btn_text": "Comparteix", @@ -579,6 +554,29 @@ "read_less": "Llegeix menys", "read_more": "Llegeix més" }, + "web3cards": { + "farcaster": { + "btn": "Ves a Farcaster.vote", + "description": "Amb \"Farcaster.vote\" permetem una manera simple i social de votar. Els teus membres només han de votar a través de Farcaster en 2 simples clics. Prova a crear una votació amb Farcaster frame", + "title": "Farcaster" + }, + "onvote": { + "btn": "Crear", + "description": "Sistema Web3 de votació segur, sense taxes i transparent. Permet crear cens de tokens, cens multichain, votació anònima i cens sybil-resistant amb un tipus de votació flexible.", + "title": "Onvote" + }, + "others": { + "btn": "Contacta'ns", + "description": "Hem construït un conjunt de votacions que permet una integració fàcil amb la nostra Blockchain dedicada a votacions a través del nostre SDK &; Components UI.

Comença a integrar-ho ara!", + "title": "Altres" + }, + "plugins": { + "btn": "Prova la Aragon App", + "description": "Hem implementat una solució de votació sense taxes personalitzada per a la DAO d'Aragon, i podem fer el mateix per a tu!

Comença amb votació sense taxes!", + "title": "DAO Plugins" + }, + "title": "Les nostres solucions de governança Web3" + }, "welcome": { "description": "Per començar, has de registrar el teu compte i el teu SIK (clau d'identitat segura) firmant dues transaccions (és segur i gratuït).", "intro": "Amb aquesta dApp pots crear votacions anònimes, segures i verificables.", diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index a30b0b3e..d5da6fda 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -18,12 +18,12 @@ "title": "Secure, verifiable and flexible digital voting" }, "banner_voting_types": { - "anonymous_description": "Say goodbye to the high expenses of traditional voting methods. Vocdoni App brings you a more affordable way to conduct elections, cutting down on logistical and administrative costs while maintaining the highest standards of quality and security.", + "anonymous_description": "Say goodbye to the high expenses of traditional voting methods. {{app}} brings you a more affordable way to conduct elections, cutting down on logistical and administrative costs while maintaining the highest standards of quality and security.", "anonymous_title": "Cost-Effective Voting Solutions", "bottom_text": "Privacy should be normal", - "flexible_description": "Engagement is key in democratic processes, and our platform is designed to maximize it. With its user-friendly interface and accessibility, Vocdoni App encourages higher participation rates, ensuring a more representative and inclusive voting experience.", + "flexible_description": "Engagement is key in democratic processes, and our platform is designed to maximize it. With its user-friendly interface and accessibility, {{app}} encourages higher participation rates, ensuring a more representative and inclusive voting experience.", "flexible_title": "Boosted Participation Rates", - "token_description": "At the heart of Vocdoni App is our commitment to security. Leveraging cutting-edge cryptographic methods, we ensure that every vote cast is not only secure but fully verifiable. This transparency builds unparalleled trust among participants, crucial for the legitimacy of any election.", + "token_description": "At the heart of {{app}} is our commitment to security. Leveraging cutting-edge cryptographic methods, we ensure that every vote cast is not only secure but fully verifiable. This transparency builds unparalleled trust among participants, crucial for the legitimacy of any election.", "token_title": "Enhanced Security and Trust" }, "cc": { @@ -529,31 +529,6 @@ "recovery": "Account recovery" }, "retry": "Retry", - "roadmap": { - "census_description": "Create a trust-less off-chain zk-friendly census from an Ethereum block snapshot, with on-chain verification.", - "census_title": "zkCensus:", - "chainlink_description": "Enable automatic execution with optimistic support.", - "chainlink_title": "Chainlink Integration:", - "complex_startegies_description": "Integrate any token from any blockchain using a blend of logic and algebraic operations, out of the box. I.e.", - "complex_startegies_title": "Complex Strategies:", - "execution_description": "Submit the final proof on-chain for binding execution.", - "execution_title": "Execution:", - "milestone1": "Milestone 1: Flexible Gasless Governance", - "milestone2": "Milestone 2: Anonymous voting with binding execution", - "private_description": "Only display voting proposal content to your community members.", - "private_title": "Private Election Metadata:", - "registry_description": "A global on-chain registry for zk (zero-knowledge) identities.", - "registry_title": "zkRegistry:", - "rollup_description": "Consolidate all votes into a single, secure zkProof using custom zkRollup technology", - "rollup_title": "zkRollup:", - "social_census_desciption": "Enhance your census with social identities from platforms like Github or Twitter. Include Sybil resistance mechanisms such as Holonym or Proof-of-Humanity.", - "social_census_title": "Social Census:", - "title": "Roadmap 2024 What's next?", - "versatil_description": "Whether it’s simple, ranged, or quadratic voting, Onvote supports multiple voting methods to adapt to diverse community needs.", - "versatil_title": "Versatile Voting Methods:", - "voting_description": "Facilitate anonymous, off-chain (gasless) voting for any eligible voter using the Vocdoni p2p network.", - "voting_title": "zkVoting:" - }, "share": { "copy": "Copy", "election_share_btn_text": "Share", @@ -570,6 +545,29 @@ "read_less": "Read less", "read_more": "Read more" }, + "web3cards": { + "farcaster": { + "btn": "Go to Farcaster.vote", + "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. Try creating your farcaster vote frame.", + "title": "Farcaster" + }, + "onvote": { + "btn": "Create", + "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" + }, + "others": { + "btn": "Contact Us", + "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" + }, + "plugins": { + "btn": "Try Aragon App", + "description": "We implemented a custom DAO gasless voting solution for Aragon DAO, and we can do the same for you!

Check gasless DAO voting!", + "title": "DAO Plugins" + }, + "title": "Our Web3 governance solutions" + }, "welcome": { "description": "To access all its features, including anonymous voting, you must create an account on the Vocdoni Protocol and register your Secret Identity Key (SIK) by signing two transactions. It's secure and free.", "intro": "This is your first time using {{ sitename }}.", diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json index 042a0df3..6eda50b5 100644 --- a/src/i18n/locales/es.json +++ b/src/i18n/locales/es.json @@ -538,31 +538,6 @@ "recovery": "Recuperar cuenta" }, "retry": "Reintentar", - "roadmap": { - "census_description": "Crear un censo descentralizado fuera de la cadena y compatible con zk a partir de una instantánea de bloques de Ethereum, con verificación en cadena.", - "census_title": "zkCensus:", - "chainlink_description": "Habilitar la ejecución automática con soporte optimista.", - "chainlink_title": "Integración de Chainlink:", - "complex_startegies_description": "Integrar cualquier token de cualquier cadena de bloques utilizando una combinación de lógica y operaciones algebraicas, directamente. Por ejemplo,", - "complex_startegies_title": "Estrategias complejas:", - "execution_description": "Enviar la prueba final a la cadena para una ejecución vinculante.", - "execution_title": "Ejecución:", - "milestone1": "Hitos 1: Gobernanza flexible sin gas", - "milestone2": "Hitos 2: zkRollup para votaciones vinculantes seguras y anónimas", - "private_description": "Mostrar el contenido de la propuesta de votación solo a los miembros de la comunidad.", - "private_title": "Metadatos de elección privada:", - "registry_description": "Un registro global en cadena para identidades zk (conocimiento cero).", - "registry_title": "zkRegistry:", - "rollup_description": "Consolidar todos los votos en una única prueba zk segura mediante la tecnología de zkRollup personalizada.", - "rollup_title": "zkRollup:", - "social_census_desciption": "Mejora tu censo con identidades sociales de plataformas como Github o Twitter. Incluye mecanismos de resistencia a Sybil como Holonym o Proof-of-Humanity.", - "social_census_title": "Censo social:", - "title": "Hoja de ruta 2024 ¿Qué viene después?", - "versatil_description": "Ya sea votación simple, escalonada o cuadrática, Onvote admite múltiples métodos de votación para adaptarse a las diversas necesidades de la comunidad.", - "versatil_title": "Métodos de votación versátiles:", - "voting_description": "Facilitar la votación anónima, fuera de la cadena (sin gas) para cualquier votante elegible utilizando la red p2p de Vocdoni.", - "voting_title": "zkVoting:" - }, "share": { "copy": "Copiar", "election_share_btn_text": "Comparte", @@ -579,6 +554,29 @@ "read_less": "Leer menos", "read_more": "Leer más" }, + "web3cards": { + "farcaster": { + "btn": "Ir a Farcaster.vote", + "description": "Con \"Farcaster.vote\" ofrecemos una manera simple y social de votar. Tus miembros solo tienen que votar a través de Farcaster en 2 simples clics. Prueba creando una votación con Farcaster frame", + "title": "Farcaster" + }, + "onvote": { + "btn": "Crear", + "description": "Sistema Web3 de votación segura, sin tasas y transparente. Permite crear censo de tokens, censo multichain, votación anónima y censo sybil-resistant con un tipo de votación flexible.", + "title": "Onvote" + }, + "others": { + "btn": "Contáctanos", + "description": "Hemos construido un conjunto de votaciones que permite una integración fácil con nuestra Blockchain dedicada a votaciones a través de nuestro SDK &; Componentes UI.

¡Empieza a integrarlo ahora!", + "title": "Otros" + }, + "plugins": { + "btn": "Prueba la Aragon App", + "description": "Hemos implementado una solución de votación sin tasas personalizada para la DAO de Aragon, ¡y podemos hacer lo mismo por ti!

Empieza con votación sin tasas!", + "title": "Complementos DAO" + }, + "title": "Nuestras soluciones de gobernanza Web3" + }, "welcome": { "description": "Para empezar, debes registrar tu cuenta y tu SIK (clave de identidad segura) firmando dos transacciones (es seguro y gratuito).", "intro": "Con esta dApp puedes crear votaciones anónimas, seguras y verificables.", 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..9ac12736 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,88 @@ const aside = definePartsStyle({ }, }) +const imageCard = definePartsStyle({ + container: { + ...cardCommonStyles.container, + w: '300px', + height: '480px', + display: 'flex', + flexDirection: 'column', + position: 'relative', + justify: 'center', + alignItems: 'center', + bgColor: 'transparent', + }, + + 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: 6, + textAlign: { base: 'start' }, + fontFamily: 'pixeloidsans, monospace', + }, + + '& p:nth-of-type(2)': { + fontSize: { base: '16px' }, + }, + }, + + footer: { + ...cardCommonStyles.footer, + pb: 3, + '& a': { + fontWeight: '600', + }, + }, +}) + 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 1a7c6075..b29ce56f 100644 --- a/src/themes/onvote/components/Home.tsx +++ b/src/themes/onvote/components/Home.tsx @@ -1,9 +1,9 @@ import { Box } from '@chakra-ui/react' import Banner from '~components/Home/BannerOnVote' import Features from '~components/Home/Features' -import Roadmap from '~components/Home/Roadmap' import VotingTypesBanner from '~components/Home/Voting' import homeBg from '/assets/home-bg.png' +import Governance from '~components/Home/Governance' const Home = () => { return ( @@ -19,12 +19,12 @@ const Home = () => { > - + - + )