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>
|
@ -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'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'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's order book.
|
||||||
MNGO to be somewhere close to other assets traded on
|
<br />
|
||||||
Serum DEX.
|
<br />
|
||||||
|
It will be up to us MNGO holders to provide that
|
||||||
|
liquidity on day one. Let's start with a Raydium
|
||||||
|
pool until more sophisticated traders step in on their
|
||||||
|
own.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-white text-opacity-70 text-base">
|
{/*
|
||||||
As no deals were done with market makers to provide
|
<a
|
||||||
liquidity, it will be up to MNGO holders to jump in
|
rel="noreferrer"
|
||||||
the Raydium pool and create liquidity for MNGO.
|
target="_blank"
|
||||||
</p>
|
href="#"
|
||||||
</div>
|
>
|
||||||
|
<LinkLeft>Jump in Now</LinkLeft>
|
||||||
|
</a>
|
||||||
|
*/}
|
||||||
</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'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'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>
|
||||||
|
<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'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="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'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>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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's a wrap.
|
That'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'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'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">
|
||||||
|
|
Before Width: | Height: | Size: 252 KiB After Width: | Height: | Size: 573 KiB |
Before Width: | Height: | Size: 381 KiB After Width: | Height: | Size: 365 KiB |
Before Width: | Height: | Size: 411 KiB After Width: | Height: | Size: 438 KiB |
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 92 KiB |