redeem-updates (#18)

* phase 1

* Phase 2

* illustrations and styling

* styling updates

* discord card fix

* mini tweaks

* added bg to card for texture.

* CTA height change

* added text

* title change

* removed double copy

* more styling fixes and some copy edits

* text change

* text change

* comment out card, change some styling.

* illusration update and text change

* real pit vipers

* PIT VIPES

* copy changes

* reword it

* reformat

* tone it down a little

* remove empty link

Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net>
This commit is contained in:
Steven Sarmiento 2021-08-11 16:11:02 -07:00 committed by GitHub
parent 224b1925ad
commit 42a5ea9cc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 108 additions and 83 deletions

View File

@ -1,47 +1,25 @@
import Button from './Button'
import LinkLeft from './LinkLeft'
//import GradientText from "./GradientText"
import GradientText from './GradientText'
const ContentSectionRedeem = () => {
return (
<>
{/* Section 2 */}
<div className="bg-bkg-2 transform -skew-y-3 pt-16 pb-16 mb-16 -mt-32 z-0">
<div className="bg-bkg-2 transform -skew-y-3 pt-16 pb-0 mb-16 -mt-32 z-0 overflow-hidden">
<div className="px-8 pt-24 pb-16 z-0 transform skew-y-3">
<div className="max-w-7xl mx-auto py-16">
<div className="max-w-4xl mb-24 mx-auto text-center">
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
A new journey begins...
Want more <GradientText>MNGO</GradientText>?
</h2>
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
Here&apos;s what happens next.
These three steps support the protocol, we believe the DAO
should reward them.
</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-redeem-one bg-contain bg-bottom bg-no-repeat h-750 md:h-650 lg: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">
With power comes great responsibility.
</h2>
<p className="mb-2 text-white text-opacity-70 text-base">
Mango is the first DAO on solana to use on-chain
governance and as MNGO holders we all have a stake in
driving the future of Mango. The governance mechanism
is already functional and MNGO tokens are used to both
bring proposals to the DAO and vote on said proposals.
</p>
<p className="text-white text-opacity-70 text-base">
There&apos;ll be kinks to iron out as we get up and
running but as DAO members, we are all in this
together. Cementing the Mango Constitution on-chain.
</p>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-3 gap-6 mb-24 pb-16">
<div className="col-span-3 lg:col-span-1">
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-three bg-contain 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">
@ -50,79 +28,128 @@ const ContentSectionRedeem = () => {
Life is cool in the Raydium pool.
</h2>
<p className="mb-2 text-white text-opacity-70 text-base">
The plan is to launch Mango v3 with MNGO as one of the
tradable assets. To do this, we need the liquidity for
MNGO to be somewhere close to other assets traded on
Serum DEX.
</p>
<p className="text-white text-opacity-70 text-base">
As no deals were done with market makers to provide
liquidity, it will be up to MNGO holders to jump in
the Raydium pool and create liquidity for MNGO.
We want MNGO to be traded on Mango v3. So MNGO needs
decent liquidity on serum&apos;s order book.
<br />
<br />
It will be up to us MNGO holders to provide that
liquidity on day one. Let&apos;s start with a Raydium
pool until more sophisticated traders step in on their
own.
</p>
{/*
<a
rel="noreferrer"
target="_blank"
href="#"
>
<LinkLeft>Jump in Now</LinkLeft>
</a>
*/}
</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-redeem-two 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">
Mango Market Makers United.
Become a Mango market maker.
</h2>
<p className="mb-2 text-white text-opacity-70 text-base">
Become a market maker and provide liquidity on the
Mango v3 perp markets (coming soon). Get started with
our example market making bot. Bonus points if you can
deploy it on-chain.
Provide liquidity on the upcoming Perpetual Futures.
Start today on devnet with our example bot and get
ready for launch day.
<br />
<br />
Liquidity incentives for market making are built in
and instantly awarded.
</p>
<p className="mb-4 text-white text-opacity-70 text-base">
There&apos;ll be a DAO proposal to decide on liquidity
incentives for market making on Mango v3.
</p>
<LinkLeft className="mb-2">link to SDK</LinkLeft>
<LinkLeft>link to docs with devnet tutorial</LinkLeft>
<a
rel="noreferrer"
target="_blank"
href="https://docs.mango.markets/mango-v3/market-making-bot-python"
>
<LinkLeft>Learn more</LinkLeft>
</a>
</div>
</div>
</div>
</div>
<div className="col-span-3 lg:col-span-2">
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-four bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div className="col-span-3 lg:col-span-1">
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-four bg-contain bg-bottom bg-no-repeat h-750 md:h-650 lg: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 road to full decentralization
Build the best Mango.
</h2>
<p className="text-white text-opacity-70 text-base mb-4">
Starts off with the feeling (heres what we&apos;ve
done to keep mango decentralized) ends with the CTA of
(heres how you can help, heres what we need)
</p>
<p className="text-white text-opacity-70 text-base mb-4">
rough tech roadmap with link to trello
</p>
<p className="text-white text-opacity-70 text-base mb-4">
if you can help us build it, send us proposals the DAO
will vote on grants
<p className="mb-2 text-white text-opacity-70 text-base">
This is by far the hardest and most rewarding method.
Launch a project that builds on top of Mango, help
grow the protocol.
<br />
<br />
The bar is high and quality is of the utmost
importance. We believe that the reward given out by
the DAO should be equally high.
</p>
{/* <a rel="noreferrer" target="_blank" href="#">
<LinkLeft>Learn More</LinkLeft>
</a> */}
</div>
</div>
</div>
</div>
</div>
</section>
<div className="bg-bkg-3 border border-bkg-4 rounded-xl shadow-md overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4 mt-8">
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 h-350">
</div>
</div>
<div className="transform skew-y-3">
<div className="max-w-4xl mx-auto text-center -mt-24">
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
With great power comes great responsibility.
</h2>
<p className="text-lg md:text-2xl lg:text-lg text-white text-opacity-70">
Mango is the first DAO on solana to use on-chain governance.
<br /> As token holders we all have a stake in driving the future
of this project.
</p>
<br />
{/* <p className="text-lg md:text-2xl lg:text-lg text-white text-opacity-70">
The governance mechanism is already functional and MNGO tokens are
used to both bring proposals to the DAO and vote on said
proposals. There&apos;ll be kinks to iron out as we get up and
running but as DAO members, we are all in this together.
</p> */}
<div className="py-12">
<a
rel="noreferrer"
target="_blank"
href="https://discord.gg/U5XSg5P9ut"
>
<Button>Get Involved</Button>
</a>
</div>
<div className="flex relative pt-12 -mt-12 lg:top-4 md:top-4 sm:top-4 xs:top-4">
<img className="h-96" alt="modals" src="../img/redeem1.png" />
</div>
</div>
</div>
</div>
{/*
<div className="mx-auto max-w-7xl py-16 my-16">
<div className="bg-bkg-3 border border-bkg-4 rounded-xl shadow-md overflow-hidden lg:grid lg:grid-cols-2 lg:gap-2 mt-8 bg-bg-texture bg-cover bg-bottom bg-no-repeat">
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 h-350">
<div className="lg:self-center">
<h2 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Join us on Discord.</span>
<span className="block">The community that lives on Discord.</span>
</h2>
<p className="mt-4 text-xl leading-6 text-white text-opacity-50">
The official Mango community lives on Discord.
Join us in chat, we&apos;re always available and ready to answer any questions.
</p>
<div className="py-8">
<a
@ -137,15 +164,15 @@ const ContentSectionRedeem = () => {
</div>
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
<img
className="h-550 transform translate-x-2 translate-y-2 rounded-xl shadow-lg object-cover object-left-top sm:translate-x-12 lg:translate-y-16"
className="transform translate-x-2 translate-y-2 rounded-xl shadow-lg object-cover object-left-top sm:translate-x-12 lg:translate-y-16"
src="../img/redeem5.png"
alt="mango markets"
/>
</div>
</div>
</div>
</div>
</div>
</div>
*/}
</>
)
}

View File

@ -1,9 +1,9 @@
import GradientText from './GradientText'
import usePool from '../hooks/usePool'
import moment from 'moment-timezone'
//import usePool from '../hooks/usePool'
//import moment from 'moment-timezone'
const HeroSectionLead = () => {
const { startIdo } = usePool()
// const { startIdo } = usePool()
return (
<section className="flex">
@ -14,9 +14,11 @@ const HeroSectionLead = () => {
<GradientText>WEN</GradientText> TOKEN?
</h2>
<p className="mb-8 text-2xl">
{/*
{startIdo
?.tz(moment.tz.guess())
?.format('dddd, MMMM Do YYYY, h:mm:ss A z')}
*/}
</p>
</div>
</div>

View File

@ -6,16 +6,12 @@ const HeroSectionRedeem = () => {
<div className="flex flex-col md:flex-row lg:flex-row m-10 mx-auto gap-6 items-center">
<div className="flex-1 px-4">
<h2 className="mb-4 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
That&apos;s a wrap.
<br />
<GradientText>MNGO</GradientText> is ready.
That&apos;s a wrap! Your <GradientText>MNGO</GradientText> is ready.
</h2>
<p className="mb-2 text-xl text-white text-opacity-70">
Thank you to everyone who participated in the sale.
</p>
<p className="text-xl text-white text-opacity-70">
You are now valued members of the Mango DAO. Let&apos;s shape the
future of Mango together.
Thank you to everyone who participated in the sale, you are now
valued members of the Mango DAO. Let&apos;s shape the future of
Mango together.
</p>
</div>
<div className="flex-1 my-5 z-10">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 252 KiB

After

Width:  |  Height:  |  Size: 573 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 381 KiB

After

Width:  |  Height:  |  Size: 365 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 411 KiB

After

Width:  |  Height:  |  Size: 438 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 92 KiB