add scroll to about section
This commit is contained in:
Maximilian Schneider
parent
16df12f757
commit
4b68635405
|
|
@ -3,245 +3,108 @@ 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
|
||||
id="about"
|
||||
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">
|
||||
<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="mt-6 lg:mt-0">
|
||||
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
||||
Why the token?
|
||||
<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-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 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>
|
||||
<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="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="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 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="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 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="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 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="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 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="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 allocated to a distributed group of early
|
||||
contributors, who worked tirelessly on this project
|
||||
over the last year. These tokens are unlocked.
|
||||
</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 allocated to a distributed group of early
|
||||
contributors, who worked tirelessly on this project over
|
||||
the last year. These tokens are unlocked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -250,7 +113,7 @@ const ContentSectionAbout = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const HeroSection = () => {
|
|||
<a className="sm:px-1" onClick={() => scrollToId('contribute')}>
|
||||
<Button>Contribute now</Button>
|
||||
</a>
|
||||
<a className="pl-2 " rel="noreferrer" target="_blank" href="#">
|
||||
<a className="pl-2 " onClick={() => scrollToId('about')}>
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue