add dao page
This commit is contained in:
saml33
parent
d6996cd76a
commit
db943ee5ea
|
|
@ -0,0 +1,145 @@
|
|||
import {
|
||||
ArrowTrendingUpIcon,
|
||||
BookOpenIcon,
|
||||
ChevronRightIcon,
|
||||
EyeIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { TFunction, useTranslation } from 'next-i18next'
|
||||
import { LinkButton } from '../shared/Button'
|
||||
import ChildPageTopSection from '../shared/ChildPageTopSection'
|
||||
import HeadingTagline from '../shared/HeadingTagline'
|
||||
import IconWithText from '../shared/IconWithText'
|
||||
import InlineImageWithText from '../shared/InlineImageWithText'
|
||||
import SectionWrapper from '../shared/SectionWrapper'
|
||||
import Steps from '../shared/Steps'
|
||||
|
||||
const PROPOSAL_STEPS = (t: TFunction) => [
|
||||
{
|
||||
desc: 'dao:discuss-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'dao:discuss',
|
||||
children: (
|
||||
<div className="flex items-center space-x-6 mt-6">
|
||||
<a
|
||||
href="https://forum.mango.markets"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('dao:view-forum')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.gg/2uwjsBc5yw"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('dao:join-discord')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
desc: 'dao:propose-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'dao:propose',
|
||||
children: (
|
||||
<div className="mt-6">
|
||||
<a href="#" rel="noopener noreferrer" target="_blank">
|
||||
<LinkButton className="flex items-center">
|
||||
{t('dao:list-market')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
desc: 'dao:vote-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'dao:vote',
|
||||
children: (
|
||||
<div className="mt-6">
|
||||
<a
|
||||
href="https://dao.mango.markets"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<LinkButton className="flex items-center">
|
||||
{t('dao:view-current-proposals')}
|
||||
<ChevronRightIcon className="h-6 w-6 ml-1.5" />
|
||||
</LinkButton>
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
desc: 'dao:execute-desc',
|
||||
imagePath: '/images/img-placeholder.png',
|
||||
title: 'dao:execute',
|
||||
},
|
||||
]
|
||||
|
||||
const DaoPage = () => {
|
||||
const { t } = useTranslation(['common', 'dao'])
|
||||
return (
|
||||
<>
|
||||
<ChildPageTopSection
|
||||
heading={t('dao:page-heading')}
|
||||
intro={t('dao:page-intro')}
|
||||
linkPath="https://dao.mango.markets"
|
||||
buttonText={t('dao:explore-governance')}
|
||||
/>
|
||||
<SectionWrapper>
|
||||
<h2 className="mb-12">{t('dao:join-mango-dao')}</h2>
|
||||
<InlineImageWithText
|
||||
desc={t('dao:get-mngo-desc')}
|
||||
title={t('dao:get-mngo')}
|
||||
imageSrc="/images/img-placeholder.png"
|
||||
linkPath="https://trade.mango.markets/swap"
|
||||
linkText={t('dao:buy-mngo')}
|
||||
reverse
|
||||
/>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<HeadingTagline text={t('dao:power-people')} />
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h2>{t('dao:open-democracy')}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-12 mt-12">
|
||||
<IconWithText
|
||||
desc={t('dao:open-finances-desc')}
|
||||
icon={<BookOpenIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('dao:open-finances')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('dao:view-votes-desc')}
|
||||
icon={<EyeIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('dao:view-votes')}
|
||||
/>
|
||||
<IconWithText
|
||||
desc={t('dao:fees-accrue-desc')}
|
||||
icon={<ArrowTrendingUpIcon className="h-5 w-5 text-th-fgd-2" />}
|
||||
title={t('dao:fees-accrue')}
|
||||
/>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper noPaddingX>
|
||||
<h2 className="mb-8 md:mb-16 page-x-padding">
|
||||
{t('dao:proposal-life-cycle')}
|
||||
</h2>
|
||||
<Steps steps={PROPOSAL_STEPS(t)} />
|
||||
</SectionWrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DaoPage
|
||||
|
|
@ -21,15 +21,15 @@ const Footer = () => {
|
|||
</div>
|
||||
</Link>
|
||||
<p className="mt-3 mb-4 max-w-[420px] text-sm text-center lg:text-left">
|
||||
{t('footer-mission')}
|
||||
{t('footer:footer-mission')}
|
||||
</p>
|
||||
<div className="flex space-x-3">
|
||||
<a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
|
||||
{t('terms-of-service')}
|
||||
{t('footer:terms-of-service')}
|
||||
</a>
|
||||
<div className="border-r border-th-bkg-4" />
|
||||
<a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
|
||||
{t('privacy-policy')}
|
||||
{t('footer:privacy-policy')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,7 +103,7 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
<p className="flex justify-center mt-3 lg:mt-6 font-mono text-xs text-th-fgd-4">
|
||||
{t('copyright')}
|
||||
{t('footer:copyright')}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -187,11 +187,11 @@ const HomePage = () => {
|
|||
</div>
|
||||
</SectionWrapper>
|
||||
<SectionWrapper noPaddingX>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-16">
|
||||
<div className="col-span-12 sm:col-span-6 lg:px-20 px-6">
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-12">
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<HeadingTagline text={t('home:getting-started')} />
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6 lg:px-20 px-6">
|
||||
<div className="col-span-12 sm:col-span-6 page-x-padding">
|
||||
<h2>{t('home:new-to-mango')}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import {
|
|||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Button from '../shared/Button'
|
||||
import ColorBlur from '../shared/ColorBlur'
|
||||
import ChildPageTopSection from '../shared/ChildPageTopSection'
|
||||
import HeadingTagline from '../shared/HeadingTagline'
|
||||
import IconWithText from '../shared/IconWithText'
|
||||
import InlineImageWithText from '../shared/InlineImageWithText'
|
||||
|
|
@ -17,34 +16,15 @@ const Distribution = dynamic(() => import('./Distribution'), {
|
|||
})
|
||||
|
||||
const MngoPage = () => {
|
||||
const { t } = useTranslation(['common, mngo'])
|
||||
const { t } = useTranslation(['common', 'mngo'])
|
||||
return (
|
||||
<>
|
||||
<SectionWrapper>
|
||||
<div className="w-full flex flex-col items-center text-center">
|
||||
<h1 className="mb-6">{t('mngo:powered-by-mngo')}</h1>
|
||||
<p className="intro-p">{t('mngo:mngo-desc')}</p>
|
||||
<div className="mt-8">
|
||||
<a
|
||||
href="https://trade.mango.markets"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button size="large">{t('mngo:buy-mngo')}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ColorBlur
|
||||
className="top-40 -right-80 bg-th-down animate-blob"
|
||||
height="100%"
|
||||
width="66%"
|
||||
/>
|
||||
<ColorBlur
|
||||
className="top-80 left-40 delay-500 animate-blob"
|
||||
height="100%"
|
||||
width="50%"
|
||||
/>
|
||||
</SectionWrapper>
|
||||
<ChildPageTopSection
|
||||
heading={t('mngo:powered-by-mngo')}
|
||||
intro={t('mngo:mngo-desc')}
|
||||
linkPath="https://trade.mango.markets"
|
||||
buttonText={t('mngo:buy-mngo')}
|
||||
/>
|
||||
<TokenStats />
|
||||
<SectionWrapper>
|
||||
<div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-16">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import Button from './Button'
|
||||
import ColorBlur from './ColorBlur'
|
||||
import SectionWrapper from './SectionWrapper'
|
||||
|
||||
const ChildPageTopSection = ({
|
||||
heading,
|
||||
intro,
|
||||
buttonText,
|
||||
linkPath,
|
||||
}: {
|
||||
heading: string
|
||||
intro: string
|
||||
buttonText: string
|
||||
linkPath: string
|
||||
}) => {
|
||||
return (
|
||||
<SectionWrapper>
|
||||
<div className="w-full flex flex-col items-center mx-auto text-center max-w-[800px]">
|
||||
<h1 className="mb-6">{heading}</h1>
|
||||
<p className="intro-p">{intro}</p>
|
||||
<div className="mt-8">
|
||||
<a href={linkPath} target="_blank" rel="noopener noreferrer">
|
||||
<Button size="large">{buttonText}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ColorBlur
|
||||
className="top-40 -right-80 bg-th-down animate-blob"
|
||||
height="100%"
|
||||
width="66%"
|
||||
/>
|
||||
<ColorBlur
|
||||
className="top-80 left-40 delay-500 animate-blob"
|
||||
height="100%"
|
||||
width="50%"
|
||||
/>
|
||||
</SectionWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChildPageTopSection
|
||||
|
|
@ -14,7 +14,7 @@ const SectionWrapper = ({
|
|||
return (
|
||||
<div
|
||||
className={`bg-th-bkg-1 ${
|
||||
noPaddingX ? '' : 'lg:px-20 px-6'
|
||||
noPaddingX ? '' : 'page-x-padding'
|
||||
} py-24 relative overflow-hidden ${className} ${
|
||||
theme === 'Light' ? 'border-b border-th-bkg-3' : ''
|
||||
}`}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const StepItem = ({
|
|||
highlighted: number
|
||||
setHighlighted: (x: number) => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['home'])
|
||||
const { t } = useTranslation(['home', 'dao'])
|
||||
const { theme } = useTheme()
|
||||
const isHighlighted = highlighted === index
|
||||
const { children, desc, title, imagePath } = item
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { NextPage } from 'next'
|
||||
import DaoPage from '../components/dao/DaoPage'
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, [
|
||||
'common',
|
||||
'dao',
|
||||
'footer',
|
||||
'navigation',
|
||||
])),
|
||||
// Will be passed to the page component as props
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const MangoDao: NextPage = () => {
|
||||
return <DaoPage />
|
||||
}
|
||||
|
||||
export default MangoDao
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"buy-mngo": "Buy MNGO",
|
||||
"discuss": "Discuss",
|
||||
"discuss-desc": "Proposals are born in our Forum or Discord. Details are discussed and questioned by the community.",
|
||||
"drive-direction": "Drive the direction of Mango.",
|
||||
"execute": "Execute",
|
||||
"execute-desc": "If the proposal passes the vote it will be executed.",
|
||||
"explore-governance": "Explore Governace",
|
||||
"get-mngo": "Get MNGO to vote and create proposals",
|
||||
"get-mngo-desc": "Anyone can participate in DAO discussions but if you want to influence DAO outcomes you need MNGO. Voting on proposals requires holding MNGO. In voting, one unlocked MNGO is equal to one vote. Additional vote weight can be achieved by locking tokens. Creating proposals requires a minimum of 100,000 MNGO.",
|
||||
"join-discord": "Join Discord",
|
||||
"join-mango-dao": "Join Mango DAO.",
|
||||
"list-market": "Propose a new market",
|
||||
"open-democracy": "An open democracy.",
|
||||
"page-heading": "Governed by the Mango DAO.",
|
||||
"page-intro": "Mango and its assets are owned and governed by the Mango DAO. This includes all fees and revenue generated by Mango's products.",
|
||||
"power-people": "Power to the people",
|
||||
"proposal-life-cycle": "The proposal life cycle.",
|
||||
"propose": "Propose",
|
||||
"propose-desc": "If you hold at least 100,000 MNGO you can create an on-chain proposal. There's a simple interface for common activities like listing markets and token transfers.",
|
||||
"vote": "Vote",
|
||||
"vote-desc": "Mango token holders vote on-chain for or against the proposal. Votes are weighted by the amount of MNGO you have. Tokens can be locked for additional vote weight.",
|
||||
"open-finances": "Open financials",
|
||||
"open-finances-desc": "All financials are accessible and easily scrutinized. Keep an eye on treasury balances and any outgoing transactions.",
|
||||
"view-current-proposals": "View current proposals",
|
||||
"view-forum": "View Forum",
|
||||
"view-votes": "Transparent voting",
|
||||
"view-votes-desc": "See which wallets are voting, how they're voting and how much weight they have to influence outcomes.",
|
||||
"fees-accrue": "Revenue growth",
|
||||
"fees-accrue-desc": "All revenue from Mango's products accrue to the DAO. These funds can be spent on any proposal provided it's approved by vote."
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
"mango-dao": "Mango DAO",
|
||||
"mango-dao-desc": "The DAO controls the vast majority of the MNGO supply. If approved by the DAO it can be distributed for grants, airdrops or other uses.",
|
||||
"market-cap": "Market cap",
|
||||
"mngo-desc": "MNGO is the governance token of Mango DAO and represents ownership of the protocol.",
|
||||
"mngo-desc": "MNGO is the governance token of the Mango DAO and represents ownership of the protocol.",
|
||||
"mngo-stats": "MNGO stats.",
|
||||
"no-insider-deals": "No insider deals.",
|
||||
"no-insider-deals-desc": "No pre-sale. No VCs. Every participant had equal weight in the IDO.",
|
||||
|
|
|
|||
|
|
@ -178,6 +178,10 @@ svg {
|
|||
@apply transition duration-300 ease-out;
|
||||
}
|
||||
|
||||
.page-x-padding {
|
||||
@apply lg:px-20 px-6;
|
||||
}
|
||||
|
||||
/* Type */
|
||||
|
||||
h1,
|
||||
|
|
@ -192,7 +196,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
@apply text-5xl lg:text-6xl;
|
||||
@apply text-4xl lg:text-5xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue