stling updates and some of the notion suggestions

This commit is contained in:
steven 2021-07-23 15:50:11 -07:00
parent 61f0ceb3af
commit 548add845e
5 changed files with 44 additions and 38 deletions

View File

@ -81,8 +81,7 @@ const ContentSection = () => {
How it works.
</h2>
<p className="mb-8 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
minimize randomness and luck in the distribution.
We take the view that token sales should be simple, transparent and fairly distributed.
</p>
</div>
<section className="">
@ -92,7 +91,7 @@ const ContentSection = () => {
<div className="py-4 px-8 mt-3">
<div className="flex flex-col mb-8">
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
Deposit your USDC contribution.
Deposit USDC into Vault.
</h2>
<p className="text-white text-opacity-50 text-base">
Users deposit USDC into a vault during the event period to
@ -111,8 +110,7 @@ const ContentSection = () => {
48 hour participation period.
</h2>
<p className="text-white text-opacity-50 text-base">
The event will span over a 2 day period split into two
sections,{' '}
The event will span over 2 days split into two periods,{' '}
<span className="text-mango-green italic">
Unrestricted
</span>{' '}
@ -127,9 +125,7 @@ const ContentSection = () => {
</span>
</p>
<p className="text-white text-opacity-50">
During the unrestricted period users may deposit or
withdraw their USDC from the vault. During the
unrestricted period price can fluctuate.
During the unrestricted period, you may deposit or withdraw USDC from the vault. During the unrestricted period, the $MNGO price can fluctuate.
</p>
</div>
@ -140,9 +136,7 @@ const ContentSection = () => {
</span>
</p>
<p className="text-white text-opacity-50">
After 24 hours deposits will be restricted and only
withdrawals allowed. During the restricted period
price can only go down.
After 24 hours deposits will be restricted and only withdrawals allowed. During the restricted period price can only go down.
</p>
</div>
</div>
@ -184,11 +178,10 @@ const ContentSection = () => {
<div className="py-4 px-8 mt-3">
<div className="flex flex-col mb-8">
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
MNGO unlocked and distributed.
MNGO unlocked and redeemable.
</h2>
<p className="text-white text-opacity-50 text-base">
At event conclusion $MNGO gets distributed in propotion to
a users USDC contribution.{' '}
On conclusion of the token sale, $MNGO will be distributed in proportion to your USDC contribution.{' '}
</p>
</div>
</div>

View File

@ -172,8 +172,8 @@ const ContributionModal = () => {
!editContribution &&
!(connected && toLateToDeposit) && (
<>
<h2>This time has arrived.</h2>
<p>When ready, depost your USDC</p>
<h2>The journey starts here.</h2>
<p>When your&apos;re ready, deposit your USDC</p>
</>
)}

View File

@ -1,19 +1,38 @@
import GradientText from './GradientText'
import Button from './Button'
import Link from './Link'
const HeroSection = () => {
return (
<section className="">
<div className="container px-8 mx-auto">
<div className="max-w-6xl px-8 mx-auto">
<div className="relative pt-16 md:pt-32 pb-2">
<div className="max-w-2xl mb-16 mx-auto text-left md:text-center lg:text-center">
<h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
Join the <GradientText>Mango DAO</GradientText> and help build the
ecosystem.
<div className="mb-8 mx-auto 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>.
</h2>
<p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
The Mango DAO is an experiment in self governance that aims to
build a completely decentralzied financial ecosystem.
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
The Mango Dao is a self-governance protocol building a decentralized financial ecosystem. By contributing you will have a stake in the future of the ecosystem 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="px-1"
rel="noreferrer"
target="_blank"
href="https://trade.mango.markets"
>
<Button>Take me to contribute</Button>
</a>
<a
className="px-2"
rel="noreferrer"
target="_blank"
href="https://docs.mango.markets/"
>
<Link>Learn before contributing</Link>
</a>
</div>
</div>
</div>
</section>

View File

@ -7,12 +7,10 @@ const ModalSection = () => {
<div className="pt-48 pb-48 px-4">
<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.
Ready to contribute?
</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 protocols
Insurance Fund.
Join us and become a valued stakeholder in the Mango Dao.
</p>
</div>
<div className="max-w-3xl flex flex-wrap md:flex-row lg:flex-row mx-auto">

View File

@ -23,8 +23,7 @@ const PoolInfoCards = () => {
})
return (
<div className="max-w-xl flex flex-col mx-auto px-6 mb-16 z-10">
<div className="flex flex-col lg:flex-row">
<div className="max-w-7xl flex flex-wrap mx-auto px-6 mb-16 z-10">
<Card title="Deposits closing in">
<PoolCountdown date={endDeposits} />
</Card>
@ -32,26 +31,24 @@ const PoolInfoCards = () => {
<Card title="Sale event ends in">
<PoolCountdown date={endIdo} />
</Card>
</div>
<Card title="Total contributions">
<div className="flex">
<img
alt="USDC"
width="40"
height="40"
width="25"
height="25"
src="/icons/usdc.svg"
className={`mr-4`}
/>{' '}
<div className="font-bold text-fgd-1 text-4xl">
<div className="font-bold text-fgd-1 text-xl">
{vaults.usdcBalance}
</div>
</div>
</Card>
<div className="flex flex-wrap">
<Card title="Total $MNGO for sale">
<div className="flex">
<img className="h-7 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
<div className="font-bold text-fgd-1 text-2xl">
<div className="font-bold text-fgd-1 text-xl">
{vaults.mangoBalance}
</div>
</div>
@ -65,14 +62,13 @@ const PoolInfoCards = () => {
src="/icons/usdc.svg"
className={`mr-2`}
/>{' '}
<div className="font-bold text-fgd-1 text-2xl">
<div className="font-bold text-fgd-1 text-xl">
{vaults.estimatedPrice
? numberFormat.format(vaults.estimatedPrice)
: 'N/A'}
</div>
</div>
</Card>
</div>
</div>
)
}