From eb39edf43f43a00c16ac6c29cfd3a9b4a5df65f8 Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 3 May 2024 19:29:28 +0200 Subject: [PATCH 1/6] Reskin home page --- public/images/icon-decent.png | Bin 0 -> 3025 bytes public/images/icon-decent.svg | 3 - public/images/icon-govern.svg | 4 - public/images/icon-operate.svg | 4 - public/images/icon-structure.svg | 4 - public/images/shutter-icon-only-logo.svg | 23 +- src/components/pages/AppHome/AppFooter.tsx | 16 +- src/components/pages/AppHome/CTABox.tsx | 29 - .../pages/AppHome/FeaturedDAOCard.tsx | 107 +-- .../pages/AppHome/ValueProposition.tsx | 33 - .../components/SettingsSection.tsx | 1 - src/components/ui/badges/Badge.tsx | 27 +- src/components/ui/containers/ActivityBox.tsx | 9 +- src/components/ui/containers/StyledBox.tsx | 12 +- src/components/ui/page/Layout/index.tsx | 6 +- src/components/ui/proposal/Icons.tsx | 620 ++++++++++++++++++ src/i18n/locales/en/home.json | 28 +- src/pages/HomePage.tsx | 268 +++----- 18 files changed, 843 insertions(+), 351 deletions(-) create mode 100644 public/images/icon-decent.png delete mode 100644 public/images/icon-decent.svg delete mode 100644 public/images/icon-govern.svg delete mode 100644 public/images/icon-operate.svg delete mode 100644 public/images/icon-structure.svg delete mode 100644 src/components/pages/AppHome/CTABox.tsx delete mode 100644 src/components/pages/AppHome/ValueProposition.tsx create mode 100644 src/components/ui/proposal/Icons.tsx diff --git a/public/images/icon-decent.png b/public/images/icon-decent.png new file mode 100644 index 0000000000000000000000000000000000000000..dd2e9e4b338c77cebce2fd3c4edfcc141acf0304 GIT binary patch literal 3025 zcmeHJ`#+T19)91~aK>%V3_{ZM8W|N$+Q$ytq<0vM%B5n9l3Q$Sq+$%mWlAm+MZ1up z4w<%FroBljxi)B@+?v?C+(O4?+-jn7X*kP2aLyla_7CgxUGI9<^RCZleV_GxzC0Hv zdsQVJB?y949azkx5Cms!47>tZ;WqB;06{T=<#8T@l+`x|4Dk!J!6JPAsJ%5L?9!Eh z58RIoM+OA_mZ|*JS03yNbYL=EIq=-z{=-|{b=pVYWh)amX{2kqU-*`ty4y^^ORBrO zXrE1$zg0Up6g&RMt#s3}eNGNf%$?*^)gm8S4&1uNf@zwgT{Db>8kQ3?iIc;Y+q(6y zFcp!B=nN;yaItiOGMpWGA2d^r9jlmi+|VN_+Y`Zb1l@c&@T5L+^#% zcvu%FJLj<+Xv@;R$!*$9kNr>@df*Mst12#fdFtYg&G>>bY2vnM8aaDT&Ei#`A*%(lU4A7-{ zv!8*DXdg&iKkpmI6fEO#R=)mW#j|tso7xUB`Ht9#zU6)P-~$~dlRx7JC%9MA%k%q2 zn|+Hc%HRI}@7~iMo*uhQQ@K6==nJkW$#;IS&^b9i{wg;)a3g0Y8xkHL?sn4RGqBRm zfu!1i_%PWN_34+H+y1}yhRfPNRekI{ShN{;>4IAkXL013^LrJqnu8iy6GWndxHhl3 zWA?De*K^V!qq{4yej#^EZEKJ?*>u#Km4G^s_g!ADw=yc${wR;ZzcWNdE9~zBm*+pe z>~nSN&=eZ$dYQd9j%K?peNH?hFVNF{XCSWS3^qj9y_7B;|1RiMeWR!58DmXtO?Y&0 z<p zq)>_@_C1TvJpv#S!N(ORumO+(EWt}5I{*RJSz=ZWV4cJXS^;DT2k(?ZZH|~HU{L`C z4%vwl*ox$W)Zk!6Da5zKJTZEke<1r8s9ilPMLkoR*I4DkeW%Du;rgSnA?E) z?n>iq$r}lx>x}6H`G?ui+or@{@19$j??eh_{fdqNLALs5lxN#-%H);tkb=XQ&P2)k zZMonjwoJL6aLc{#9g`S;N>in4v;!w#l=roNzFsM|O*a$fRCv?KVT9#K!Vrq8f-2%6 z;qTJ+USIu5E_e!sgR_M4g3ImGGB=}drgoJ4s&jg>&q;E5dgpw|xE{I33lXDUI=2&} zCXEJu=sAm6&rwULFZ#aNoG%=}UFx?`QkJ1;Z#c*-G-UW!0so&a)+2X@Fsxac&ozC% zI2$Rs_;~rTb@i<5iF;ufa9Bph@Ao7C3?L4-Fm`N)B6wR@!&352`Lq zH5WToTG2WO$YDU5g?+0Pm7ctgjxOE!Zm+!2$mX^AgqWr7)PU9B*^-|dEec=m&^i^` z5aS*sn5KSs^(FH~SH++2@81${?_;|~^-nL%{4@6_GhsH6VhhL3KFYgs{Y1>?1fK@k z=?Y!4ZjP|bs`Nor@~|z^!V0Z#EDBq%iq~kN4ZqfI*rn@+1zk;-PbpPui(X&u+KDQ# zSBK}UtMPc7W39#gskLK1E-#{UxAp{~HjycJ_-|c}2vQ#xH+p&c1c{h(M`vx|p`Xjx z%TS=ja&Wd1UO|uCX^8d;W1|#Qtm&XmmwLUr?NQ_?ltwya3ax1AS$*5&}QkBCJftI)1LrV5r6=zR8(9C zARXz{J{V2`5McH5?13G*7)hrHFdU*!mH|84Eh@( zjpUsAq5763H-->04P2(6aWAK literal 0 HcmV?d00001 diff --git a/public/images/icon-decent.svg b/public/images/icon-decent.svg deleted file mode 100644 index 7893d24e4b..0000000000 --- a/public/images/icon-decent.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/icon-govern.svg b/public/images/icon-govern.svg deleted file mode 100644 index 2e4fb85a64..0000000000 --- a/public/images/icon-govern.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/icon-operate.svg b/public/images/icon-operate.svg deleted file mode 100644 index af25b4ae7d..0000000000 --- a/public/images/icon-operate.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/icon-structure.svg b/public/images/icon-structure.svg deleted file mode 100644 index beeada2d73..0000000000 --- a/public/images/icon-structure.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/shutter-icon-only-logo.svg b/public/images/shutter-icon-only-logo.svg index 23e44bf15e..f83b579948 100644 --- a/public/images/shutter-icon-only-logo.svg +++ b/public/images/shutter-icon-only-logo.svg @@ -1,8 +1,15 @@ - - - - - - - - + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/pages/AppHome/AppFooter.tsx b/src/components/pages/AppHome/AppFooter.tsx index f5fbbfeee4..e4550e56f9 100644 --- a/src/components/pages/AppHome/AppFooter.tsx +++ b/src/components/pages/AppHome/AppFooter.tsx @@ -1,18 +1,22 @@ -import { Box, BoxProps, Flex, Link, Spacer, Text } from '@chakra-ui/react'; +import { Flex, Link, Spacer, Text } from '@chakra-ui/react'; import { Trans, useTranslation } from 'react-i18next'; import { URL_DECENT } from '../../../constants/url'; import ExternalLink from '../../ui/links/ExternalLink'; import Divider from '../../ui/utils/Divider'; -export function AppFooter({ ...rest }: BoxProps) { +export function AppFooter() { const { t } = useTranslation('home'); return ( - - + - + ); } diff --git a/src/components/pages/AppHome/CTABox.tsx b/src/components/pages/AppHome/CTABox.tsx deleted file mode 100644 index ffc98f5849..0000000000 --- a/src/components/pages/AppHome/CTABox.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { BoxProps, Center, Flex } from '@chakra-ui/react'; -import { ReactNode } from 'react'; -import { StyledBox } from '../../ui/containers/StyledBox'; - -interface Props extends BoxProps { - leftSlot: ReactNode; - rightSlot: ReactNode; -} - -export function CTABox({ leftSlot, rightSlot, ...rest }: Props) { - return ( - -
- - {leftSlot} - {rightSlot} - -
- - ); -} diff --git a/src/components/pages/AppHome/FeaturedDAOCard.tsx b/src/components/pages/AppHome/FeaturedDAOCard.tsx index 88fb5ca3ed..a249bf0f8b 100644 --- a/src/components/pages/AppHome/FeaturedDAOCard.tsx +++ b/src/components/pages/AppHome/FeaturedDAOCard.tsx @@ -1,59 +1,80 @@ -import { Text, BoxProps, Image, HStack, Spacer, Flex, Box, Link } from '@chakra-ui/react'; +import { Text, VStack, Flex, Image } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; -import { Link as RouterLink } from 'react-router-dom'; import { DAO_ROUTES } from '../../../constants/routes'; +import { Badge } from '../../ui/badges/Badge'; import { StyledBox } from '../../ui/containers/StyledBox'; -interface DAOFeatureProps extends BoxProps { + +export interface FeaturedDAO { iconSrc: string; - title: string; - desc: string; + iconBg?: string; + iconRounded?: boolean; + titleKey: string; network: string; + networkName: string; + votingStrategy: string; address: string; } +interface FeaturedDAOCardProps { + item: FeaturedDAO; +} export default function FeaturedDAOCard({ - iconSrc, - title, - desc, - network, - address, - ...rest -}: DAOFeatureProps) { + item: { + iconSrc, + iconBg = 'lilac-0', + iconRounded = false, + titleKey, + network, + address, + networkName, + votingStrategy, + }, +}: FeaturedDAOCardProps) { const { t } = useTranslation('home'); return ( - - + - - - {title} - {title} - - {desc} - - - - + {t(titleKey)} + + {t(titleKey)} + + + {networkName} + + - {t('featureLink')} - + {votingStrategy} + - - + + ); } diff --git a/src/components/pages/AppHome/ValueProposition.tsx b/src/components/pages/AppHome/ValueProposition.tsx deleted file mode 100644 index 49573a6c86..0000000000 --- a/src/components/pages/AppHome/ValueProposition.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Text, Image, Flex, FlexProps, VStack } from '@chakra-ui/react'; - -interface DAOActionProps extends FlexProps { - iconSrc: string; - title: string; - desc: string; -} - -export default function ValueProposition({ iconSrc, title, desc, ...rest }: DAOActionProps) { - return ( - - {title} - - - {title} - - {desc} - - - ); -} diff --git a/src/components/pages/DaoSettings/components/SettingsSection.tsx b/src/components/pages/DaoSettings/components/SettingsSection.tsx index 49be59d630..9c4fbb8109 100644 --- a/src/components/pages/DaoSettings/components/SettingsSection.tsx +++ b/src/components/pages/DaoSettings/components/SettingsSection.tsx @@ -29,7 +29,6 @@ export function SettingsSection({ {/* SETTINGS SECTION CONTENT */} = { [FractalProposalState.ACTIVE]: { tooltipKey: 'stateActiveTip', bg: 'lilac-0', @@ -99,19 +98,21 @@ const BADGE_MAPPING: BadgeType = { }, }; -type BadgeSize = { [key: string]: { minWidth: string; height: string } }; -const BADGE_SIZES: BadgeSize = { +type Size = 'sm' | 'base'; +type BadgeSize = { minWidth: string; height: string }; +const BADGE_SIZES: Record = { sm: { minWidth: '5rem', height: '1.375rem' }, base: { minWidth: '5.4375rem', height: '1.375rem' }, }; interface IBadge { - size: 'sm' | 'base'; - labelKey: FractalProposalState | DAOState | string; + size: Size; + labelKey: keyof typeof BADGE_MAPPING; + children?: ReactNode; proposal?: FractalProposal; } -export function Badge({ labelKey, size, proposal }: IBadge) { +export function Badge({ labelKey, children, size, proposal }: IBadge) { const { tooltipKey, ...colors } = BADGE_MAPPING[labelKey]; const sizes = BADGE_SIZES[size]; @@ -144,7 +145,7 @@ export function Badge({ labelKey, size, proposal }: IBadge) { textStyle="label-base" lineHeight="1" > - {t(labelKey)} + {children || t(labelKey)} {proposal && ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export function DocsIllustration() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json index 3f2cd52995..f9fa54858f 100644 --- a/src/i18n/locales/en/home.json +++ b/src/i18n/locales/en/home.json @@ -1,29 +1,15 @@ { - "homeTitle": "Welcome to Decent", - "homeDesc": "Are you outgrowing your Multisig? Decent extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance.", - "govern": "Govern", - "governDesc": "Choose a governance per sub-Safe. Create and authorize proposals. Decentralize on any timeline.", - "structure": "Structure", - "structureDesc": "Start with any Safe Multisig. Connect teams in flexible sub-Safe hierarchies for agile delivery.", - "operate": "Operate", - "operateDesc": "Unleash on-chain efficiency with reuseable, streamed, and permissioned transactions.", - "featuredTitle": "Featured Organizations", - "featuredDesc": "Here are some projects using Decent to convert their Safe Multisig into DAOs as they decentralize:", + "homeTitle": "Get Started", + "createCTA": "Create DAO", + "createDesc": "Govern your Safe.", + "docsCTA": "Learn More", + "docsDesc": "Read our docs to get started.", + "featuredTitle": "Explore DAOs", "decentTitle": "Decent DAO", - "decentDesc": "We are an open-source collective that unites builders toward global decentralization.", "awakeTitle": "AwakeVC", - "awakeDesc": "Awake Internet Protocols combine AI and FinTech to empower Decentralized Private Equity for the multiverse. Welcome to Awakened Value Co-creation aka AwakeVC.", "ethlizardsTitle": "Lizard DAO", - "ethlizardsDesc": "Ethlizards brings together an exceptional mix of avid gamers, visionary builders, and savvy investors, establishing itself as a highly esteemed partner in the GameFi ecosystem.", "shutterTitle": "Shutter DAO 0x36", - "shutterDesc": "Shutter is an anti-frontrunning/malicious MEV protocol using threshold encryption. Shutter DAO 0x36 is a pragmatic, step-by-step approach towards decentralization, prioritizing community involvement and learning from each phase while maintaining operational reliability and security.", "myosinTitle": "Myosin", - "myosinDesc": "The Ultimate Marketing Network. Supercharging growth for web3 companies & onboarding brands into the future of the internet.", - "featureLink": "Explore >", - "readyCTA": "Ready to start?", - "createButton": "+ Start from Scratch", "homeAttribution": "Made with 💜 by <1>Decent DAO", - "audit": "Audit", - "learnCTA": "Explore the Docs to see how Decent works", - "getStartedButton": "Get Started" + "audit": "Audit" } diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 210ec21e38..86639ace6a 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,69 +1,46 @@ -import { Center, VStack, Text, Button, Flex, Box } from '@chakra-ui/react'; - +import { VStack, Text, Flex, Box, HStack } from '@chakra-ui/react'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { mainnet, sepolia } from 'wagmi/chains'; import { AppFooter } from '../components/pages/AppHome/AppFooter'; -import { CTABox } from '../components/pages/AppHome/CTABox'; -import FeaturedDAOCard from '../components/pages/AppHome/FeaturedDAOCard'; -import ValueProposition from '../components/pages/AppHome/ValueProposition'; -import ExternalLink from '../components/ui/links/ExternalLink'; +import FeaturedDAOCard, { FeaturedDAO } from '../components/pages/AppHome/FeaturedDAOCard'; +import { CreateDAOIllustration, DocsIllustration } from '../components/ui/proposal/Icons'; import { BASE_ROUTES } from '../constants/routes'; import { URL_DOCS } from '../constants/url'; import { useFractal } from '../providers/App/AppProvider'; import { useNetworkConfig } from '../providers/NetworkConfig/NetworkConfigProvider'; -const VALUE_PROPS = [ - { - iconSrc: '/images/icon-structure.svg', - titleKey: 'structure', - descKey: 'structureDesc', - }, - { - iconSrc: '/images/icon-operate.svg', - titleKey: 'operate', - descKey: 'operateDesc', - }, - { - iconSrc: '/images/icon-govern.svg', - titleKey: 'govern', - descKey: 'governDesc', - }, -]; - -interface Feature { - iconSrc: string; - titleKey: string; - descKey: string; - network: string; - address: string; -} - // featured DAOs are dependent on the connected chain -const FEATURED_DAOS = new Map([ +const FEATURED_DAOS = new Map([ [ mainnet.id, [ { - iconSrc: '/images/shutter-icon-only-logo.svg', - titleKey: 'shutterTitle', - descKey: 'shutterDesc', + iconSrc: '/images/icon-decent.png', + iconRounded: true, + titleKey: 'decentTitle', network: 'eth', - address: '0x36bD3044ab68f600f6d3e081056F34f2a58432c4', + networkName: 'Ethereum', + votingStrategy: 'Multisig', + address: '0xD26c85D435F02DaB8B220cd4D2d398f6f646e235', }, { - iconSrc: '/images/icon-decent.svg', - titleKey: 'decentTitle', - descKey: 'decentDesc', + iconSrc: '/images/shutter-icon-only-logo.svg', + iconBg: 'neutral-3', + titleKey: 'shutterTitle', network: 'eth', - address: '0xD26c85D435F02DaB8B220cd4D2d398f6f646e235', + networkName: 'Ethereum', + votingStrategy: 'ERC-20', + address: '0x36bD3044ab68f600f6d3e081056F34f2a58432c4', }, { iconSrc: '/images/icon-awakevc.svg', titleKey: 'awakeTitle', - descKey: 'awakeDesc', + iconBg: 'neutral-3', network: 'eth', + networkName: 'Ethereum', + votingStrategy: 'Multisig', address: '0xdD6CeFA62239272f1eDf755ba6471eacb7DF2Fa5', }, ], @@ -74,8 +51,9 @@ const FEATURED_DAOS = new Map([ { iconSrc: '/images/icon-myosin.svg', titleKey: 'myosinTitle', - descKey: 'myosinDesc', network: 'sep', + networkName: 'Sepolia', + votingStrategy: 'ERC-20', address: '0xdef90A94273a1A1A72B33D39129fa41E6C08Be3a', }, ], @@ -84,10 +62,6 @@ const FEATURED_DAOS = new Map([ export default function HomePage() { const { t } = useTranslation('home'); - const navigate = useNavigate(); - const createDAO = () => { - navigate(BASE_ROUTES.create); - }; const { node: { daoAddress }, action, @@ -100,147 +74,99 @@ export default function HomePage() { }, [daoAddress, action]); const { chain } = useNetworkConfig(); - const features = FEATURED_DAOS.get(chain.id); + const featuredDaos = FEATURED_DAOS.get(chain.id); return ( -
+ - {t('homeTitle')} + - {t('homeTitle')} - -
- - {t('homeDesc')} - - + + + {t('createCTA')} + + {t('createDesc')} + + + + -
- - {VALUE_PROPS.map((daoAction, index) => { - return ( - - ); - })} - - - - - } - rightSlot={{t('learnCTA')}} - /> - {features && features.length > 0 ? ( - <> - - {t('featuredTitle')} - - + + {t('docsCTA')} + {t('docsDesc')} + + - {t('featuredDesc')} - + + + + + {featuredDaos && featuredDaos.length > 0 ? ( + + {t('featuredTitle')} - {features.map((feature, index) => { - if ( - typeof location !== 'undefined' && - location.pathname === 'app.fractalframework.xyz' - ) { - return null; - } - return ( - - ); - })} + {featuredDaos.map(dao => ( + + ))} - + ) : ( // if there are no features just show padding - + )} - {t('readyCTA')}} - rightSlot={ - - } - /> - -
+ + ); } From 0258c910cfff82925892d6efe5d057cc7a3cc83f Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 3 May 2024 19:33:16 +0200 Subject: [PATCH 2/6] Bit of cleanup --- src/pages/HomePage.tsx | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 86639ace6a..4e56bf41e4 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -75,7 +75,16 @@ export default function HomePage() { const { chain } = useNetworkConfig(); const featuredDaos = FEATURED_DAOS.get(chain.id); - + const ctaBaseProps = { + gap: '3rem', + px: '1.5rem', + w: '50%', + h: '10rem', + alignItems: 'center', + overflow: 'hidden', + borderRadius: 8, + as: Link, + }; return ( @@ -116,15 +118,9 @@ export default function HomePage() { From cd0e8776d06bdad65c9bc4640bc95de404c0dd73 Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 3 May 2024 19:52:43 +0200 Subject: [PATCH 3/6] Implement Load More logic for featured daos --- src/i18n/locales/en/home.json | 1 + src/pages/HomePage.tsx | 31 ++++++++++++++++++++++++------- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json index f9fa54858f..f1e8c25834 100644 --- a/src/i18n/locales/en/home.json +++ b/src/i18n/locales/en/home.json @@ -10,6 +10,7 @@ "ethlizardsTitle": "Lizard DAO", "shutterTitle": "Shutter DAO 0x36", "myosinTitle": "Myosin", + "textMoreDAOs": "Load More", "homeAttribution": "Made with 💜 by <1>Decent DAO", "audit": "Audit" } diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 4e56bf41e4..0882447f48 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,5 +1,5 @@ -import { VStack, Text, Flex, Box, HStack } from '@chakra-ui/react'; -import { useEffect } from 'react'; +import { VStack, Text, Flex, Box, HStack, Button } from '@chakra-ui/react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { mainnet, sepolia } from 'wagmi/chains'; @@ -61,6 +61,7 @@ const FEATURED_DAOS = new Map([ ]); export default function HomePage() { + const [shownItemsCount, setShownItemsCount] = useState(4); const { t } = useTranslation('home'); const { node: { daoAddress }, @@ -149,18 +150,34 @@ export default function HomePage() { mt="1.5rem" w="full" > - {featuredDaos.map(dao => ( + {featuredDaos.slice(0, shownItemsCount).map(dao => ( ))} + {featuredDaos.length > shownItemsCount && ( + + {/* @todo This is supposed to be themed button but it seems like this is only instance of it in the app. Either keep it as is or style properly through Chakra theming */} + + + )} - ) : ( - // if there are no features just show padding - - )} + ) : null} From bae6653ba355f2b9efae557824376a8b9666c370 Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 3 May 2024 20:00:39 +0200 Subject: [PATCH 4/6] Fix responsive width for cta sections --- src/pages/HomePage.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 0882447f48..da18489fda 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,4 +1,4 @@ -import { VStack, Text, Flex, Box, HStack, Button } from '@chakra-ui/react'; +import { VStack, Text, Flex, Box, Button } from '@chakra-ui/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -79,7 +79,7 @@ export default function HomePage() { const ctaBaseProps = { gap: '3rem', px: '1.5rem', - w: '50%', + w: { base: '100%', lg: 'calc(50% - 0.75rem)' }, h: '10rem', alignItems: 'center', overflow: 'hidden', @@ -95,10 +95,11 @@ export default function HomePage() { px="1.5rem" > {t('homeTitle')} - - + {featuredDaos && featuredDaos.length > 0 ? ( Date: Fri, 3 May 2024 20:19:57 +0200 Subject: [PATCH 5/6] Extract CTA to separate component --- src/components/pages/AppHome/CTABox.tsx | 61 ++++++++++++++++++ .../pages/AppHome/FeaturedDAOCard.tsx | 23 +++---- src/pages/HomePage.tsx | 64 ++++++------------- 3 files changed, 89 insertions(+), 59 deletions(-) create mode 100644 src/components/pages/AppHome/CTABox.tsx diff --git a/src/components/pages/AppHome/CTABox.tsx b/src/components/pages/AppHome/CTABox.tsx new file mode 100644 index 0000000000..046157fa82 --- /dev/null +++ b/src/components/pages/AppHome/CTABox.tsx @@ -0,0 +1,61 @@ +import { Box, Flex, Text } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import { ReactNode } from 'react'; + +export default function CTABox({ + Icon, + titleKey, + descKey, + titleColor = 'white-0', + descColor = 'neutral-7', + bg = 'neutral-3', + to, + target, + pr, + iconContainerJustify, +}: { + Icon: ReactNode; + titleKey: string; + descKey: string; + titleColor?: string; + descColor?: string; + bg?: string; + to: string; + target?: string; + pr?: string | number; + iconContainerJustify?: string; +}) { + const { t } = useTranslation('home'); + return ( + + + + {t(titleKey)} + + {t(descKey)} + + + {Icon} + + + ); +} diff --git a/src/components/pages/AppHome/FeaturedDAOCard.tsx b/src/components/pages/AppHome/FeaturedDAOCard.tsx index a249bf0f8b..1562d573e5 100644 --- a/src/components/pages/AppHome/FeaturedDAOCard.tsx +++ b/src/components/pages/AppHome/FeaturedDAOCard.tsx @@ -14,21 +14,18 @@ export interface FeaturedDAO { votingStrategy: string; address: string; } -interface FeaturedDAOCardProps { - item: FeaturedDAO; -} + +interface FeaturedDAOCardProps extends FeaturedDAO {} export default function FeaturedDAOCard({ - item: { - iconSrc, - iconBg = 'lilac-0', - iconRounded = false, - titleKey, - network, - address, - networkName, - votingStrategy, - }, + iconSrc, + iconBg = 'lilac-0', + iconRounded = false, + titleKey, + network, + address, + networkName, + votingStrategy, }: FeaturedDAOCardProps) { const { t } = useTranslation('home'); return ( diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index da18489fda..b838510604 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,9 +1,9 @@ -import { VStack, Text, Flex, Box, Button } from '@chakra-ui/react'; +import { VStack, Text, Flex, Button } from '@chakra-ui/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; import { mainnet, sepolia } from 'wagmi/chains'; import { AppFooter } from '../components/pages/AppHome/AppFooter'; +import CTABox from '../components/pages/AppHome/CTABox'; import FeaturedDAOCard, { FeaturedDAO } from '../components/pages/AppHome/FeaturedDAOCard'; import { CreateDAOIllustration, DocsIllustration } from '../components/ui/proposal/Icons'; import { BASE_ROUTES } from '../constants/routes'; @@ -76,16 +76,6 @@ export default function HomePage() { const { chain } = useNetworkConfig(); const featuredDaos = FEATURED_DAOS.get(chain.id); - const ctaBaseProps = { - gap: '3rem', - px: '1.5rem', - w: { base: '100%', lg: 'calc(50% - 0.75rem)' }, - h: '10rem', - alignItems: 'center', - overflow: 'hidden', - borderRadius: 8, - as: Link, - }; return ( - - - - {t('createCTA')} - - {t('createDesc')} - - - - - - } + titleColor="cosmic-nebula-0" + descColor="cosmic-nebula-0" + bg="lilac-0" + /> + - - {t('docsCTA')} - {t('docsDesc')} - - - - - + titleKey="docsCTA" + descKey="docsDesc" + Icon={} + pr={0} + iconContainerJustify="flex-end" + /> {featuredDaos && featuredDaos.length > 0 ? ( ( ))} From f7f53d9532b4f6d08c67ae187240aac1e8e292e8 Mon Sep 17 00:00:00 2001 From: Kirill Klimenko Date: Fri, 3 May 2024 20:28:14 +0200 Subject: [PATCH 6/6] Lint fix --- src/components/pages/AppHome/CTABox.tsx | 2 +- src/components/pages/DaoDashboard/Info/ParentLink.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/AppHome/CTABox.tsx b/src/components/pages/AppHome/CTABox.tsx index 046157fa82..9602b13495 100644 --- a/src/components/pages/AppHome/CTABox.tsx +++ b/src/components/pages/AppHome/CTABox.tsx @@ -1,7 +1,7 @@ import { Box, Flex, Text } from '@chakra-ui/react'; +import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { ReactNode } from 'react'; export default function CTABox({ Icon, diff --git a/src/components/pages/DaoDashboard/Info/ParentLink.tsx b/src/components/pages/DaoDashboard/Info/ParentLink.tsx index 860195c7d3..085b0ba0c9 100644 --- a/src/components/pages/DaoDashboard/Info/ParentLink.tsx +++ b/src/components/pages/DaoDashboard/Info/ParentLink.tsx @@ -1,4 +1,4 @@ -import { Link, HStack, Image, Text, Icon } from '@chakra-ui/react'; +import { Link, HStack, Text, Icon } from '@chakra-ui/react'; import { ArrowBendLeftUp } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { Link as RouterLink } from 'react-router-dom';