257 lines
14 KiB
TypeScript
257 lines
14 KiB
TypeScript
//import LinkLeft from './LinkLeft'
|
|
import GradientText from './GradientText'
|
|
|
|
const ContentSectionAbout = () => {
|
|
return (
|
|
<>
|
|
<div className="bg-bkg-2 transform -skew-y-3 pt-16 pb-16 mb-16 -mt-32 z-0">
|
|
<div className="max-w-7xl mx-auto px-8 pt-24 pb-16 transform skew-y-3">
|
|
{/* Section 1
|
|
<div className="max-w-5xl mx-auto text-center">
|
|
<h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
|
It is still the early days.
|
|
</h2>
|
|
<p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
|
This is the first moment for non-developers to participate in
|
|
helping build the Mango protocol by supporting the inception of the
|
|
protocol's Insurance Fund.
|
|
</p>
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<div className="max-w-max lg:max-w-7xl mx-auto">
|
|
<div className="relative">
|
|
<div className="lg:grid lg:grid-cols-2 lg:gap-6 py-24 ">
|
|
<div className="lg:max-w-none">
|
|
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
|
What is Mango?
|
|
</h2>
|
|
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
|
Mango is a decentralized autonomous organization. Its
|
|
purpose is to improve the Mango protocol for the greater defi
|
|
ecosystem. We aim to create commercially viable decentralized trading and lending
|
|
products.
|
|
</p>
|
|
<h2 className="mt-8 text-2xl mb-6 leading-tight font-semibold font-heading">
|
|
Why the <GradientText>Insurance fund</GradientText>?
|
|
</h2>
|
|
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
|
The Mango protocol is powered by lenders providing their
|
|
capital for the community to use for trading and borrowing
|
|
purposes. The insurance fund is the last line of defense
|
|
for protecting our mango lenders in case the system fails.
|
|
</p>
|
|
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
|
What is the <GradientText>$MNGO</GradientText> token?
|
|
</h2>
|
|
<p className="mb-6 text-lg text-white text-opacity-50 leading-relaxed">
|
|
The token is the foundation of the Mango DAO and will be a pivital building block in the future of the protocol.
|
|
</p>
|
|
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
|
Mango Governance tokens ($MNGO) will serve as the
|
|
incentive for those who can prove their work is useful to
|
|
the DAO.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div className="mt-6 lg:mt-0">
|
|
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
|
Why the token?
|
|
</h2>
|
|
<p className="mb-2 text-lg text-white text-opacity-50 leading-relaxed">
|
|
The introduction of the token gives contributing members of the DAO a chance to mold the future of the protocol. The token also helps bootstrap liquidity to the platform buy offering incentives to market makers and participants in the system.
|
|
</p>
|
|
<LinkLeft>Checkout the whitepaper</LinkLeft>
|
|
|
|
<div className="mt-10 mb-8 px-5 py-2 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
|
|
<h3 className="font-bold text-lg my-2">
|
|
Token distribution
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-12 mt-4 py-1 px-1 rounded-md shadow-md bg-mango-med-dark">
|
|
<div className="col-span-8 bg-mango-green text-center rounded-l-sm py-1">
|
|
<span className="text-xs px-1 font-bold text-white">80%</span>
|
|
</div>
|
|
<div className="col-span-2 bg-mango-yellow text-center py-1">
|
|
<span className="text-xs px-1 font-bold text-white">10%</span>
|
|
</div>
|
|
<div className="col-span-1 bg-mango-red text-center py-1">
|
|
<span className="text-xs px-1 font-bold text-white">5%</span>
|
|
</div>
|
|
<div className="col-span-1 bg-blue-400 text-center rounded-r-sm py-1">
|
|
<span className="text-xs px-1 font-bold text-white">5%</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-4 mt-4">
|
|
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-green font-bold text-md my-2">
|
|
Mango DAO
|
|
</p>
|
|
<p className="text-xs text-white text-opacity-50">
|
|
A majority of the tokens will be locked in a smart contract only accessible through DAO governance votes.
|
|
</p>
|
|
</div>
|
|
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-yellow font-bold text-md my-2">
|
|
Liquidity Incentives
|
|
</p>
|
|
<p className="text-xs text-white text-opacity-50">
|
|
Bootstraping liquidity is important, market makers and other participants should be incentivized to be active in the books.
|
|
</p>
|
|
</div>
|
|
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-red font-bold text-md my-2">
|
|
Insurance Fund
|
|
</p>
|
|
<p className="text-xs text-white text-opacity-50">
|
|
MNGO will be exchange for funds commited to the insurance fund that helps protect Mango lenders.
|
|
</p>
|
|
</div>
|
|
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
|
<p className="text-blue-400 font-bold text-md my-2">
|
|
Contributor Tokens
|
|
</p>
|
|
<p className="text-xs text-white text-opacity-50">
|
|
Tokens distributed to early contributors of the protocol are unlocked and not on a vesting schedule.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
*/}
|
|
<div className="py-16 ">
|
|
<div className="mb-16 max-w-4xl mx-auto text-center">
|
|
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
|
Why release <GradientText>MNGO</GradientText> token?
|
|
</h2>
|
|
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
|
The MNGO token in its inception will serve 3 primary purposes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="overflow-hidden">
|
|
<div className="max-w-max lg:max-w-6xl mx-auto">
|
|
<div className="relative">
|
|
<div className="lg:grid lg:grid-cols-3 lg:gap-6">
|
|
<div className="lg:col-span-1">
|
|
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
|
|
Capitalize the Insurance Fund
|
|
</h2>
|
|
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
|
|
The Mango protocol relies on lenders to provide capital
|
|
for the others to use for trading and borrowing. The
|
|
capital in the Insurance Fund will be used to compensate
|
|
lenders in the unlikely event they incur losses.
|
|
</p>
|
|
</div>
|
|
<div className="lg:col-span-1">
|
|
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
|
|
Govern the Mango DAO
|
|
</h2>
|
|
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
|
|
MNGO tokens represent a direct stake in the Mango DAO.
|
|
The future direction of the Mango Protocol will be
|
|
decided by voting on proposals using MNGO tokens as the
|
|
voting mechanism.
|
|
</p>
|
|
</div>
|
|
<div className="lg:col-span-1">
|
|
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
|
|
Incentivize liquidity
|
|
</h2>
|
|
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
|
|
Bootstrapping liquidity is important in a new trading
|
|
system. Incentivizing market makers to provide it on our
|
|
order books with MNGO tokens will benefit the protocol
|
|
and its participants.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-10 py-5 px-5 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
|
|
<h3 className="font-bold text-xl my-2">
|
|
Token distribution
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-12 mt-4 py-1 px-1 rounded-md shadow-md bg-mango-med-dark">
|
|
<div className="col-span-10 bg-mango-green text-center rounded-l-sm py-1">
|
|
<span className="text-xs px-1 font-bold text-white">
|
|
90%
|
|
</span>
|
|
</div>
|
|
{/*
|
|
<div className="col-span-2 bg-mango-yellow text-center py-1">
|
|
<span className="text-xs px-1 font-bold text-white">
|
|
10%
|
|
</span>
|
|
</div>
|
|
*/}
|
|
<div className="col-span-1 bg-mango-red text-center py-1">
|
|
<span className="text-xs px-1 font-bold text-white">
|
|
5%
|
|
</span>
|
|
</div>
|
|
<div className="col-span-1 bg-blue-400 text-center rounded-r-sm py-1">
|
|
<span className="text-xs px-1 font-bold text-white">
|
|
5%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 mt-4">
|
|
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-green font-bold text-base my-2">
|
|
Mango DAO
|
|
</p>
|
|
<p className="text-white text-opacity-70">
|
|
90% of MNGO tokens will be locked in a smart contract,
|
|
only accessible via DAO governance votes.
|
|
</p>
|
|
</div>
|
|
{/*
|
|
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-yellow font-bold text-base my-2">
|
|
Liquidity incentives
|
|
</p>
|
|
<p className="text-white text-opacity-70">
|
|
10% will be used to incentivize market makers and
|
|
liquidity providers to be active in the system.
|
|
</p>
|
|
</div>
|
|
*/}
|
|
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
|
|
<p className="text-mango-red font-bold text-base my-2">
|
|
Insurance Fund
|
|
</p>
|
|
<p className="text-white text-opacity-70">
|
|
5% of MNGO tokens will be used to capitalize the
|
|
Insurance Fund that will protect lenders in the Mango
|
|
Protocol.
|
|
</p>
|
|
</div>
|
|
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
|
|
<p className="text-blue-400 font-bold text-base my-2">
|
|
Contributor tokens
|
|
</p>
|
|
<p className="text-white text-opacity-70">
|
|
5% will be distributed to the team and early
|
|
contributors. These tokens are unlocked.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ContentSectionAbout
|