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 Button from './Button'
import LinkLeft from './LinkLeft' import LinkLeft from './LinkLeft'
//import GradientText from "./GradientText" import GradientText from './GradientText'
const ContentSectionRedeem = () => { const ContentSectionRedeem = () => {
return ( return (
<> <>
{/* Section 2 */} {/* 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="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-7xl mx-auto py-16">
<div className="max-w-4xl mb-24 mx-auto text-center"> <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"> <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> </h2>
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70"> <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> </p>
</div> </div>
<section className=""> <section className="">
<div className="grid grid-cols-3 gap-6 mb-6"> <div className="grid grid-cols-3 gap-6 mb-24 pb-16">
<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="col-span-3 lg:col-span-1"> <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="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"> <div className="py-4 px-8 mt-3">
@ -50,79 +28,128 @@ const ContentSectionRedeem = () => {
Life is cool in the Raydium pool. Life is cool in the Raydium pool.
</h2> </h2>
<p className="mb-2 text-white text-opacity-70 text-base"> <p className="mb-2 text-white text-opacity-70 text-base">
The plan is to launch Mango v3 with MNGO as one of the We want MNGO to be traded on Mango v3. So MNGO needs
tradable assets. To do this, we need the liquidity for decent liquidity on serum&apos;s order book.
MNGO to be somewhere close to other assets traded on <br />
Serum DEX. <br />
</p> It will be up to us MNGO holders to provide that
<p className="text-white text-opacity-70 text-base"> liquidity on day one. Let&apos;s start with a Raydium
As no deals were done with market makers to provide pool until more sophisticated traders step in on their
liquidity, it will be up to MNGO holders to jump in own.
the Raydium pool and create liquidity for MNGO.
</p> </p>
{/*
<a
rel="noreferrer"
target="_blank"
href="#"
>
<LinkLeft>Jump in Now</LinkLeft>
</a>
*/}
</div> </div>
</div> </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="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="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="py-4 px-8 mt-3">
<div className="flex flex-col mb-8"> <div className="flex flex-col mb-8">
<h2 className="text-white font-semibold text-xl tracking-wide mb-2"> <h2 className="text-white font-semibold text-xl tracking-wide mb-2">
Mango Market Makers United. Become a Mango market maker.
</h2> </h2>
<p className="mb-2 text-white text-opacity-70 text-base"> <p className="mb-2 text-white text-opacity-70 text-base">
Become a market maker and provide liquidity on the Provide liquidity on the upcoming Perpetual Futures.
Mango v3 perp markets (coming soon). Get started with Start today on devnet with our example bot and get
our example market making bot. Bonus points if you can ready for launch day.
deploy it on-chain. <br />
<br />
Liquidity incentives for market making are built in
and instantly awarded.
</p> </p>
<p className="mb-4 text-white text-opacity-70 text-base"> <a
There&apos;ll be a DAO proposal to decide on liquidity rel="noreferrer"
incentives for market making on Mango v3. target="_blank"
</p> href="https://docs.mango.markets/mango-v3/market-making-bot-python"
<LinkLeft className="mb-2">link to SDK</LinkLeft> >
<LinkLeft>link to docs with devnet tutorial</LinkLeft> <LinkLeft>Learn more</LinkLeft>
</a>
</div> </div>
</div> </div>
</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="py-4 px-8 mt-3">
<div className="flex flex-col mb-8"> <div className="flex flex-col mb-8">
<h2 className="text-white font-semibold text-xl tracking-wide mb-2"> <h2 className="text-white font-semibold text-xl tracking-wide mb-2">
The road to full decentralization Build the best Mango.
</h2> </h2>
<p className="text-white text-opacity-70 text-base mb-4"> <p className="mb-2 text-white text-opacity-70 text-base">
Starts off with the feeling (heres what we&apos;ve This is by far the hardest and most rewarding method.
done to keep mango decentralized) ends with the CTA of Launch a project that builds on top of Mango, help
(heres how you can help, heres what we need) grow the protocol.
</p> <br />
<p className="text-white text-opacity-70 text-base mb-4"> <br />
rough tech roadmap with link to trello The bar is high and quality is of the utmost
</p> importance. We believe that the reward given out by
<p className="text-white text-opacity-70 text-base mb-4"> the DAO should be equally high.
if you can help us build it, send us proposals the DAO
will vote on grants
</p> </p>
{/* <a rel="noreferrer" target="_blank" href="#">
<LinkLeft>Learn More</LinkLeft>
</a> */}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </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>
<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 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"> <div className="lg:self-center">
<h2 className="text-3xl font-extrabold text-white sm:text-4xl"> <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> </h2>
<p className="mt-4 text-xl leading-6 text-white text-opacity-50"> <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> </p>
<div className="py-8"> <div className="py-8">
<a <a
@ -137,15 +164,15 @@ const ContentSectionRedeem = () => {
</div> </div>
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1"> <div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
<img <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" src="../img/redeem5.png"
alt="mango markets" alt="mango markets"
/> />
</div> </div>
</div>
</div> </div>
</div> */}
</div>
</div>
</> </>
) )
} }

View File

@ -1,9 +1,9 @@
import GradientText from './GradientText' import GradientText from './GradientText'
import usePool from '../hooks/usePool' //import usePool from '../hooks/usePool'
import moment from 'moment-timezone' //import moment from 'moment-timezone'
const HeroSectionLead = () => { const HeroSectionLead = () => {
const { startIdo } = usePool() // const { startIdo } = usePool()
return ( return (
<section className="flex"> <section className="flex">
@ -14,9 +14,11 @@ const HeroSectionLead = () => {
<GradientText>WEN</GradientText> TOKEN? <GradientText>WEN</GradientText> TOKEN?
</h2> </h2>
<p className="mb-8 text-2xl"> <p className="mb-8 text-2xl">
{/*
{startIdo {startIdo
?.tz(moment.tz.guess()) ?.tz(moment.tz.guess())
?.format('dddd, MMMM Do YYYY, h:mm:ss A z')} ?.format('dddd, MMMM Do YYYY, h:mm:ss A z')}
*/}
</p> </p>
</div> </div>
</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 flex-col md:flex-row lg:flex-row m-10 mx-auto gap-6 items-center">
<div className="flex-1 px-4"> <div className="flex-1 px-4">
<h2 className="mb-4 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading"> <h2 className="mb-4 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
That&apos;s a wrap. That&apos;s a wrap! Your <GradientText>MNGO</GradientText> is ready.
<br />
<GradientText>MNGO</GradientText> is ready.
</h2> </h2>
<p className="mb-2 text-xl text-white text-opacity-70"> <p className="mb-2 text-xl text-white text-opacity-70">
Thank you to everyone who participated in the sale. Thank you to everyone who participated in the sale, you are now
</p> valued members of the Mango DAO. Let&apos;s shape the future of
<p className="text-xl text-white text-opacity-70"> Mango together.
You are now valued members of the Mango DAO. Let&apos;s shape the
future of Mango together.
</p> </p>
</div> </div>
<div className="flex-1 my-5 z-10"> <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