alternate copy and layout
This commit is contained in:
saml33
parent
b03de27e76
commit
1a6c29c111
|
|
@ -1,327 +1,345 @@
|
|||
import LinkLeft from './LinkLeft'
|
||||
import GradientText from './GradientText'
|
||||
|
||||
const ContentSection = () => {
|
||||
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-48 pb-16 transform skew-y-3">
|
||||
<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>
|
||||
|
||||
{/* Section 1 */}
|
||||
|
||||
<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-7 py-4 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="bg-bkg-2 py-24 px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-16 mx-auto text-center">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
How the token sale works
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
||||
Fairness and transparency for all participants.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Section 2 */}
|
||||
<div className="pt-16 pb-16 mb-16 -mt-16 z-0">
|
||||
<div className="max-w-7xl mx-auto px-8 py-16">
|
||||
<div className="max-w-4xl mb-24 mx-auto text-center mt-16 pt-16">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
How the sale works.
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
We take the view that token sales should be simple, transparent and
|
||||
fairly distributed.
|
||||
</p>
|
||||
</div>
|
||||
<section className="">
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-two bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
The 48 hour participation period begins.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
The event will span over 2 days split into two periods,{' '}
|
||||
<span className="text-mango-green italic">
|
||||
sale period
|
||||
</span>{' '}
|
||||
and{' '}
|
||||
<span className="text-blue-400 italic">grace period</span>.
|
||||
</p>
|
||||
<div className="flex flex-wrap overflow-hiddenm mt-8">
|
||||
<div className="w-full overflow-hidden lg:w-1/2 pr-4">
|
||||
<p>
|
||||
<span className="text-mango-green italic">
|
||||
Sale Period
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-white text-opacity-50">
|
||||
During the sale period, you may deposit or
|
||||
withdraw USDC from the vault. During the sale
|
||||
period, the $MNGO price can fluctuate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full overflow-hidden lg:w-1/2">
|
||||
<p>
|
||||
<span className="text-blue-400 italic">
|
||||
Grace Period
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-white text-opacity-50">
|
||||
After 24 hours deposits will be restricted and only
|
||||
withdrawals allowed. During the grace period
|
||||
price can only go down.
|
||||
</p>
|
||||
<section className="">
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
<div className="col-span-4">
|
||||
<div className="bg-bkg-3 border border-bkg-4 w-full shadow-md rounded-xl">
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
The token sale will span 48 hours
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
The 48 hours consists of two 24 hour periods, the{' '}
|
||||
<span className="text-mango-green text-base">
|
||||
sale period
|
||||
</span>{' '}
|
||||
and the{' '}
|
||||
<span className="text-blue-400 text-base">
|
||||
grace period
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<div className="flex flex-wrap overflow-hiddenm mt-8">
|
||||
<div className="w-full mb-4 lg:mb-0 overflow-hidden lg:w-1/2 pr-4">
|
||||
<p className="mb-2">
|
||||
<span className="font-semibold text-mango-green text-xl">
|
||||
Sale period{' '}
|
||||
<span className="font-normal text-white text-opacity-50 text-base">
|
||||
(first 24 hours)
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-base text-white text-opacity-70">
|
||||
In the first 24 hours, you may deposit or withdraw
|
||||
your USDC from the vault. During the sale period,
|
||||
the MNGO price can fluctuate.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full overflow-hidden lg:w-1/2 pr-4">
|
||||
<p className="mb-2">
|
||||
<span className="font-semibold text-blue-400 text-xl">
|
||||
Grace period{' '}
|
||||
<span className="font-normal text-white text-opacity-50 text-base">
|
||||
(second 24 hours)
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-base text-white text-opacity-70">
|
||||
After 24 hours, deposits will be restricted and only
|
||||
withdrawals allowed. During the grace period, the
|
||||
MNGO price can only go down.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-one bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
Deposit USDC into Vault.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
Users deposit their USDC into the contribution vault during the
|
||||
<span className="text-mango-green italic"> sale period</span> locking in their ticket for $MNGO redemptions on sale completion.
|
||||
</p>
|
||||
<div className="col-span-4 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 w-full shadow-md rounded-xl lg:h-56">
|
||||
<div className="flex items-start p-8">
|
||||
<img
|
||||
alt=""
|
||||
width="156"
|
||||
height="156"
|
||||
src="/img/usdc-vault.png"
|
||||
className="mr-1"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
1. Deposit your USDC
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
During the
|
||||
<span className="text-mango-green">
|
||||
{' '}
|
||||
sale period
|
||||
</span>{' '}
|
||||
you can deposit USDC into the vault. You can also change
|
||||
this amount by withdrawing or depositing additional USDC
|
||||
if you choose to.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-4 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 w-full shadow-md rounded-xl lg:h-56">
|
||||
<div className="flex items-start p-8">
|
||||
<img
|
||||
alt=""
|
||||
width="148"
|
||||
height="148"
|
||||
src="/img/mango-vault.png"
|
||||
className="mr-4"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
2. Redeem you MNGO
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
Once the{' '}
|
||||
<span className="text-blue-400">grace period</span> ends
|
||||
the MNGO tokens will be unlocked for redemption. The
|
||||
number of tokens you'll receive will be
|
||||
proportional to your USDC contribution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<div className="bg-bkg-3 border border-bkg-4 w-full shadow-md rounded-xl">
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
Why does it work this way?
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base mb-4">
|
||||
We wanted to build a mechanism that is fair and
|
||||
transparent for all participants. No private sale, no
|
||||
backroom deals with VCs, all players are on a level
|
||||
playing field.
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
The mechanism is simple but robust. This makes it easier
|
||||
to build, use, and more importantly, harder to exploit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-four bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
MNGO unlocked and redeemable.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
Once the <span className="text-blue-400 italic"> grace period</span> ends, MNGO will be unlocked for redemption from the distribution vault.
|
||||
<br />
|
||||
<br />
|
||||
Users receive a token amount
|
||||
in proportion to their USDC contribution.{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-three bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
Why does it work this way?
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base mb-4">
|
||||
We wanted to build a mechanism that is fair and transparent for all participants. No private sale, no backroom deals with VCs, all players are on a level playing field.
|
||||
</p>
|
||||
<p className="text-white text-opacity-50 text-base mb-4">
|
||||
The mechanism is simple but robust. This makes it easier to build, use, and more importantly, harder to exploit.
|
||||
</p>
|
||||
{/*<p className="text-white font-bold leading-relaxed">
|
||||
We believe all "excess" value should be captured
|
||||
by token holders in the DAO.
|
||||
</p>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-bkg-1 py-24 px-8">
|
||||
<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">
|
||||
Bootstraping liquidity is important in a new trading system.
|
||||
Incentivising market makers and other liquidity providers
|
||||
with MNGO tokens will benefit the protocol and its
|
||||
participants.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 p-8 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
|
||||
<h3 className="font-bold text-xl my-2">Token distribution</h3>
|
||||
|
||||
{/* Section 3 */}
|
||||
<div className="bg-bkg-2 transform -skew-y-3">
|
||||
<div className="max-w-7xl mx-auto px-8 py-48 my-16 transform skew-y-3">
|
||||
<div className="max-w-4xl mx-auto text-center pt-12 pb-16">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
We want to be fully transparent.
|
||||
</h2>
|
||||
<p className="mb-10 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
We feel it is important to detail current risks to the system in order to give full transparency for participants in the insurance fund sale.
|
||||
<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-base my-2">
|
||||
Mango DAO
|
||||
</p>
|
||||
<p className="text-white text-opacity-70">
|
||||
80% of MNGO tokens will be locked in a smart contract,
|
||||
only accessible via DAO governance votes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 grid-rows-2 gap-6 mb-16 mx-auto">
|
||||
<div className="col-span-3 p-5 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide my-2">
|
||||
Unaudited smart contracts.
|
||||
</h3>
|
||||
<p className="text-white text-opacity-50 text-md">
|
||||
We take great care and forethought in the way we build our smart contracts, we opensource all code once
|
||||
ready and work with many industry leading developers during creation.
|
||||
<br />
|
||||
<br />
|
||||
While this is the case we cannot guarantee they are free of potential exploits.
|
||||
Users should understand the risks when participating today and know what they are contribtuing too.
|
||||
</p>
|
||||
<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-2 md:col-span-2 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-2 md:col-span-2 lg:col-span-1 m-1 p-1">
|
||||
<p className="text-blue-400 font-bold text-base my-2">
|
||||
Team/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 className="col-span-4 row-span-2 p-5 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide my-2">
|
||||
New token sale mechanism
|
||||
</h3>
|
||||
<p className="text-white text-opacity-50 text-md">
|
||||
The Mango token sale was designed with the goal of being as fair as possible to all participants.
|
||||
However, there is a mechanism by which one or more participants with large amounts of capital could
|
||||
discourage others from participating in the token sale.
|
||||
<br />
|
||||
<br />
|
||||
During the deposit phase, these participants
|
||||
could deposit very large amounts of USDC. This would drive up the average price of the token and
|
||||
potentially discourage others from participating in the sale.
|
||||
<br />
|
||||
<br />Then, during the last minute
|
||||
of the withdrawal phase, these large participants could withdraw much of their USDC, thus
|
||||
receiving a much lower average price, depending on how successful they were at discouraging others.
|
||||
<br />
|
||||
<br />
|
||||
Therefore, all participants should be aware of this potential behaviour during the sale and
|
||||
make their best decisions accordingly.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-3 p-5 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide my-2">
|
||||
Not fully decentralzed; yet.
|
||||
</h3>
|
||||
<p className="text-white text-opacity-50 text-md">
|
||||
Whilst the path to becoming decentralized is kicking off with the token sale, at inception the team will have control over the direction of the protocol until the governance mechanism is estabilshed and tools built out.
|
||||
<br />
|
||||
<br />
|
||||
Contributers must trust the mango team until full decentralization is reached.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
We offer full transparency in during this phase of transition and will commit to creating a fair voting system for those participating in DAO votes in the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-bkg-2 px-8 py-24">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
Transparency builds trust
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
||||
There are risks in participating in the token sale. It's
|
||||
important you understand them before deciding to commit your
|
||||
funds.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 grid-rows-2 gap-6 mx-auto">
|
||||
<div className="col-span-3 p-8 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide text-2xl mb-4">
|
||||
Unaudited smart contracts
|
||||
</h3>
|
||||
<p className="mb-2 text-white text-opacity-70 text-base">
|
||||
We take great care and forethought in the way we build our smart
|
||||
contracts, we opensource all code once ready and work with many
|
||||
industry leading developers during creation.
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
While this is the case we cannot guarantee they are free of
|
||||
potential exploits. Users should understand the risks when
|
||||
participating today and know what they are contribtuing too.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-4 row-span-2 p-8 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide text-2xl mb-4">
|
||||
New token sale mechanism
|
||||
</h3>
|
||||
<p className="mb-2 text-white text-opacity-70 text-base">
|
||||
The Mango token sale was designed to be as fair as possible for
|
||||
all participants. However, it is possible that one or more
|
||||
participants with large amounts of capital could discourage
|
||||
others from participating in the token sale.
|
||||
</p>
|
||||
<p className="mb-2 text-white text-opacity-70 text-base">
|
||||
During the sale period (first 24 hours), these participants
|
||||
could deposit very large amounts of USDC. This would drive up
|
||||
the price of the token and potentially discourage others from
|
||||
participating in the sale.
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
Then, during the last minute of the withdrawal phase, these
|
||||
large participants could withdraw much of their USDC, thus
|
||||
receiving a much lower price, depending on how successful they
|
||||
were at discouraging others.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-3 p-8 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md">
|
||||
<h3 className="text-white font-semibold text-xl tracking-wide text-2xl mb-4">
|
||||
Not fully decentralzed; yet
|
||||
</h3>
|
||||
<p className="mb-2 text-white text-opacity-70 text-base">
|
||||
Whilst the path to becoming decentralized is kicking off with
|
||||
the token sale, at inception the team will have control over the
|
||||
direction of the protocol until the governance mechanism is
|
||||
estabilshed and tools built out.
|
||||
</p>
|
||||
<p className="mb-2 text-white text-opacity-70 text-base">
|
||||
Contributers must trust the mango team until full
|
||||
decentralization is reached.
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
We offer full transparency in during this phase of transition
|
||||
and will commit to creating a fair voting system for those
|
||||
participating in DAO votes in the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
|
||||
const ContentSectionLead = () => {
|
||||
return (
|
||||
<div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 -mt-32 z-0">
|
||||
<div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
|
||||
|
||||
{/* Section 2 */}
|
||||
<div className="max-w-4xl mb-12 mx-auto text-center">
|
||||
<h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
|
|
|
|||
|
|
@ -172,8 +172,8 @@ const ContributionModal = () => {
|
|||
!editContribution &&
|
||||
!(connected && toLateToDeposit) && (
|
||||
<>
|
||||
<h2>The journey starts here.</h2>
|
||||
<p>When your're ready, deposit your USDC</p>
|
||||
<h2>The journey starts here</h2>
|
||||
<p>When you're ready, deposit your USDC</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -184,7 +184,7 @@ const ContributionModal = () => {
|
|||
toLateToDeposit && (
|
||||
<>
|
||||
<h2>We're sorry, you missed it.</h2>
|
||||
<p>Deposits are already closed</p>
|
||||
<p>The sale period has ended</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -198,14 +198,14 @@ const ContributionModal = () => {
|
|||
{submitted && !submitting && (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>Thanks for contributing...</p>
|
||||
<p>Unlock to edit your contribution</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{editContribution && !submitting && (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
<p>Increase or reduce your contribution</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -317,7 +317,7 @@ const ContributionModal = () => {
|
|||
>
|
||||
<div className={`flex items-center justify-center`}>
|
||||
{dontAddMore
|
||||
? 'Sorry you can’t add anymore 🥲'
|
||||
? 'Sorry, you can’t add anymore 🥲'
|
||||
: 'Set Contribution'}
|
||||
</div>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,19 @@
|
|||
import GradientText from './GradientText'
|
||||
import Button from './Button'
|
||||
import Link from './Link'
|
||||
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<section className="">
|
||||
<div className="max-w-6xl px-8 mx-auto">
|
||||
<div className="relative pt-16 md:pt-32 pb-2">
|
||||
<div className="mb-8 mx-auto text-left md:text-center lg:text-center">
|
||||
<div className="relative pt-8 md:pt-16 pb-2">
|
||||
<div className="mx-auto pb-4 text-left md:text-center lg:text-center">
|
||||
<h2 className="mb-8 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
|
||||
Claim your stake in the <GradientText>Mango Dao</GradientText>.
|
||||
Claim your stake in the <GradientText>Mango Dao</GradientText>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
The Mango DAO is a self-governed protocol building a
|
||||
decentralized financial ecosystem; by contributing you will receive a
|
||||
stake in the DAO having control over future of the ecosystem and its products.
|
||||
<p className="font-normal text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
||||
Join us and contribute to the future direction of the Mango
|
||||
Protocol and its products.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-16 flex lg:flex-row md:flex-row lg:justify-center md:justify-center sm:justify-center">
|
||||
<a className="sm:px-1" rel="noreferrer" target="_blank" href="#">
|
||||
<Button>Contribute now</Button>
|
||||
</a>
|
||||
<a className="pl-2 " rel="noreferrer" target="_blank" href="#">
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import StatsModal from './StatsModal'
|
|||
const ModalSection = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="pt-48 pb-48 px-4">
|
||||
<div className="pb-24 px-4">
|
||||
<div className="max-w-5xl mx-auto text-center mb-12">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
{/* <h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
Ready to contribute?
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
Join us and become a valued stakeholder in the Mango Dao.
|
||||
</p>
|
||||
</p> */}
|
||||
</div>
|
||||
<div className="max-w-3xl flex flex-wrap md:flex-row lg:flex-row mx-auto">
|
||||
<ContributionModal />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import MangoPill from '../components/MangoPill'
|
||||
//import MangoSale from '../components/MangoSale'
|
||||
import Button from './Button'
|
||||
|
||||
const NavBarBeta = () => {
|
||||
const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
|
||||
|
|
@ -400,13 +399,6 @@ const NavBarBeta = () => {
|
|||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
|
||||
<div>
|
||||
<a rel="noreferrer" target="_blank" href="#">
|
||||
<Button>Contribute now</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,10 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
|
|||
return <p className="text-mango-red text-xl">{message}</p>
|
||||
} else {
|
||||
return (
|
||||
<div className={`${props.className} font-bold text-white flex `}>
|
||||
<ClockIcon className="w-7 h-7 mr-3" />
|
||||
<div
|
||||
className={`${props.className} font-bold text-white flex items-center`}
|
||||
>
|
||||
<ClockIcon className="w-5 h-5 mr-1.5 mt-0.5 text-primary-light" />
|
||||
<span className="text-xl">
|
||||
{/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
|
||||
{hours < 10 ? `0${hours}` : hours}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { ChevronUpIcon } from '@heroicons/react/solid'
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
// Show button when page is scorlled upto given distance
|
||||
const toggleVisibility = () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
setIsVisible(true)
|
||||
} else {
|
||||
setIsVisible(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Set the top cordinate to 0
|
||||
// make scrolling smooth
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', toggleVisibility)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
isVisible && (
|
||||
<div
|
||||
className="cursor-pointer default-transition fixed bottom-2 lg:bottom-8 right-2 lg:right-8 bg-bkg-4 flex items-center justify-center h-10 rounded-full w-10 hover:bg-fgd-4"
|
||||
onClick={scrollToTop}
|
||||
>
|
||||
<ChevronUpIcon className="h-6 w-6 text-primary-light" />
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
@ -19,17 +19,17 @@ const StatsModal = () => {
|
|||
<>
|
||||
<div className="flex-1 m-3 sm:-ml-8 bg-secondary-4-dark border border-bkg-3 py-6 rounded-xl shadow-md divide-y-2 divide-white divide-opacity-5 z-0">
|
||||
<div className="pb-4 text-center">
|
||||
<p className="text-fgd-3">Deposits end in:</p>
|
||||
<p className="text-fgd-3">Sale period ends in:</p>
|
||||
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
|
||||
</div>
|
||||
|
||||
<div className="py-4 text-center">
|
||||
<p className="text-fgd-3">Grace Period ends in:</p>
|
||||
<p className="text-fgd-3">Grace period ends in:</p>
|
||||
<PoolCountdown date={endIdo} className="justify-center pt-1" />
|
||||
</div>
|
||||
|
||||
<div className="py-4 text-center">
|
||||
<p className="text-fgd-3">Total USDC Deposited:</p>
|
||||
<p className="text-fgd-3">Total USDC deposited:</p>
|
||||
<div className="flex items-center justify-center pt-0.5">
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -45,7 +45,7 @@ const StatsModal = () => {
|
|||
</div>
|
||||
|
||||
<div className="py-4 text-center">
|
||||
<p className="text-fgd-3">Estimated Token Price:</p>
|
||||
<p className="text-fgd-3">Estimated token price:</p>
|
||||
<div className="flex items-center justify-center pt-0.5">
|
||||
<img
|
||||
alt=""
|
||||
|
|
@ -67,9 +67,9 @@ const StatsModal = () => {
|
|||
<div className="font-bold text-fgd-1 text-xl">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <p>
|
||||
{/* <p>
|
||||
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -80,7 +80,7 @@ const StatsModal = () => {
|
|||
</p>
|
||||
<p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
|
||||
<p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import ModalSection from '../components/ModalSection'
|
||||
import PoolInfoCards from '../components/PoolInfoCards'
|
||||
import HeroSection from '../components/HeroSection'
|
||||
import ContentSection from '../components/ContentSection'
|
||||
import FooterSection from '../components/FooterSection'
|
||||
import ScrollToTop from '../components/ScrollToTop'
|
||||
|
||||
const ContributionPage = () => {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<PoolInfoCards />
|
||||
<ContentSection />
|
||||
<ModalSection />
|
||||
<ContentSection />
|
||||
<FooterSection />
|
||||
<ScrollToTop />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
|
|
@ -38,9 +38,9 @@ export const ENDPOINTS: EndpointInfo[] = [
|
|||
programId: 'CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn', // owned by governance
|
||||
//poolKey: 'GvSyVjGwLBeWdURMLDmSffQPqA8g547A6TURbbBnDpa4', // governance test
|
||||
// poolKey: '82ndgp58GXpwuLrEc9svHFdhiEsPaZoNUEWwgc79WHqk', // already over
|
||||
poolKey: '5heMyYtJK1Us9Hx2w6s5rLDNj8RufeyCR1ZUJAVFLQL7', // long deposits
|
||||
poolKey: '5heMyYtJK1Us9Hx2w6s5rLDNj8RufeyCR1ZUJAVFLQL7', // long deposits
|
||||
// poolKey: '7Dr2Ksnz5evoT9mEUgvvkmirH8KDC99b5oVPHbqSpx4K', // short deposit
|
||||
//poolKey: 'CdKyD4Qazo72Bm6SsPBWrT1AnH1NEuoUzvQg7b67EBac', // not started yet
|
||||
//poolKey: 'CdKyD4Qazo72Bm6SsPBWrT1AnH1NEuoUzvQg7b67EBac', // not started yet
|
||||
},
|
||||
{
|
||||
name: 'localnet',
|
||||
|
|
|
|||
|
|
@ -31,3 +31,8 @@ button {
|
|||
.default-transition {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 2rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ module.exports = {
|
|||
'feature-four': "url('../public/img/feature4.png')",
|
||||
'bg-texture': "url('../public/img/bgtexture.png')",
|
||||
'bg-wave': "url('../public/img/bg-wave.png')",
|
||||
|
||||
}),
|
||||
height: {
|
||||
650: '650px',
|
||||
|
|
|
|||
Loading…
Reference in New Issue