adding components from mango-web repo

This commit is contained in:
Steven Sarmiento 2021-07-16 17:56:26 -07:00 committed by GitHub
parent 8bf1e8b8d9
commit d8464f6072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 800 additions and 61 deletions

View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled'
import tw from 'twin.macro'
export const idleGradient =
'bg-gradient-to-r from-secondary-2-light to-primary-dark'
'bg-gradient-to-r from-secondary-2-light to-primary-light'
export const activeGradient =
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
@ -55,7 +55,7 @@ const Button: FunctionComponent<ButtonProps> = ({
}) => {
return (
<StyledButton
className={`${className} relative z-10 py-2 rounded-full text-fgd-1 ${
className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 font-bold ${
gray ? 'bg-bkg-4' : idleGradient
}`}
gray={gray}

View File

@ -1,24 +1,22 @@
import GradientText from './GradientText'
const HeroSection = () => {
return (
<section className="bg-hero-img bg-no-repeat bg-cover">
<div className="container px-4 mx-auto">
<div className="relative pt-32 mb-32">
<div className="max-w-2xl mx-auto text-center">
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
Join the <GradientText>Mango DAO</GradientText>
</h2>
<p className="md:mx-24">
The Mango DAO is an experiment in self governance to merge the
liquidity and usability of CeFi with the permissionless innovation
of DeFi at a lower cost to the end user than both currently
provide.
</p>
<section className="">
<div className="container px-4 mx-auto">
<div className="relative pt-12 md:pt-48 pb-32 lg:pb-48">
<div className="max-w-2xl mb-16 mx-auto text-center">
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
Join the{' '}<GradientText>Mango DAO</GradientText> and help build the ecosystem.
</h2>
<p className="mb-8 text-2xl text-gray-400">
The Mango DAO is an experiment in self governance that aims to
build a completely decentralzied financial ecosystem.
</p>
</div>
</div>
</div>
</div>
</section>
</section>
)
}

View File

@ -1,80 +1,195 @@
import { ChevronRightIcon } from '@heroicons/react/solid'
import GradientText from './GradientText'
import Button from "./Button"
import PoolInfoCards from "./PoolInfoCards"
const LandingContent = () => {
return (
<div className="bg-th-bkg-3 transform -skew-y-3 pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64">
<div className="max-w-7xl mx-auto px-4 py-80 transform skew-y-3">
<div className="max-w-4xl mb-16 mx-auto text-center">
<h2 className="mb-8 text-3xl lg:text-4xl text-white font-bold font-heading">
<div className="bg-bkg-2 transform -skew-y-3 pt-12 lg:pb-48 lg:mb-48 z-0">
<div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
<div>
<PoolInfoCards />
</div>
<div className="max-w-2xl mb-16 mx-auto text-center">
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
It is still the early days.
</h2>
<p className="mb-8 text-m lg:text-l text-gray-400">
This is the first moment for non-developers to participate in the
Mango DAO.
<p className="mb-8 text-2xl text-gray-400">
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.
</p>
</div>
{/* Section 1 */}
<div className="flex flex-wrap overflow-hidden xl:-mx-4">
<div className="w-full overflow-hidden xl:my-4 xl:px-16 xl:w-1/2">
<div className="flex flex-wrap overflow-hidden mb-36 xl:-mx-4">
<div className="w-1/2 overflow-hidden xl:my-4 xl:px-4 md:w-1/2 sm:w-full xs:w-full">
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
What is Mango?
</h2>
<p className="mb-8 text-gray-400 leading-relaxed">
Mango is a decentralized autonomous organization. Its purpose is
to create a well integrated and completely decentralized financial
ecosystem for traders.
to contribute maximum value for the defi ecosystem and its
developer community to create commercially viable decentralized
trading and lending products for traders.
</p>
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
What is the Insurance Fund?
Why the{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
Insurance fund
</span>
?
</h2>
<p className="mb-8 text-gray-400 leading-relaxed">
The insurance fund will refund losses to the lenders on the Mango
smart contract in the event extreme volatility causes bankrupt
accounts and excess losses in the system. The proceeds of this
sale go directly into the DAO treasury for use as the insurance
fund.
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.
</p>
</div>
<div className="w-full overflow-hidden xl:my-4 xl:px-16 xl:w-1/2">
<div className="w-1/2 overflow-hidden xl:my-4 xl:px-4 md:w-1/2 sm:w-full xs:w-full">
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
What is the <GradientText>$MNGO</GradientText> token?
What is the{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-300 to-green-300">
$MNGO
</span>{' '}
token?
</h2>
<p className="mb-8 text-gray-400 leading-relaxed">
We believe that substantial rewards to a strong developer
community and liquidity incentives are the essential drivers for
growth and therefore the foundation of the Mango DAO. Mango
Governance tokens ($MNGO) will serve as the incentive for those
who can proove their work is useful to the DAO. So far tokens were
until now only provided to contributors who helped to build out
the protocol.
growth and therefore the foundation of the Mango DAO.
</p>
<p className="mb-8 text-gray-400 leading-relaxed">
Mango Governance tokens ($MNGO) will serve as the incentive for
those who can proove their work is useful to the DAO.
</p>
<Button>Check out the whitepaper</Button>
<p className="text-white leading-relaxed py-4">
<span className="text-yellow-300">$MNGO</span> were only provided
to developers who helped to build out the protocol.
</p>
<button
className="inline-flex items-center px-2 py-2 pr-4 text-lg text-white font-bold rounded-xl"
style={{ backgroundColor: 'rgba(44, 41, 66, 1)' }}
>
<div className="m-2 p-2 rounded-full bg-opacity-10 bg-white">
<img alt="paper" width="10" height="9" src="/icons/paper.svg" />
</div>
Check out the whitepaper &nbsp;
<ChevronRightIcon className="w-6 h-6" />
</button>
</div>
</div>
{/* Section 2 */}
<div className="max-w-4xl mb-16 mx-auto text-center">
<h2 className="mb-8 text-3xl lg:text-4xl text-white font-bold font-heading">
How does it work?
<div className="max-w-2xl mb-12 mx-auto text-center">
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
How it works.
</h2>
<p className="mb-8 text-m lg:text-l text-gray-400">
This is not a regular token sale, you are not about to invest for a
juicy ROI on day 1.
<p className="mb-8 text-2xl text-gray-400">
We take the view that token sales should be simple, transparent and
minimize randomness and luck in the distribution.
</p>
</div>
<section className="">
<div className="grid grid-cols-3 gap-6 mb-6">
<div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
<div className="bg-bkg-3 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-yellow-300 font-semibold text-xl tracking-wide mb-2">
Deposit your USDC contribution.
</h2>
<p className="text-white text-opacity-50 text-base">
Users deposit USDC into a vault during the event period to
set their contribution amount.
</p>
</div>
</div>
</div>
</div>
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
<div className="bg-bkg-3 bg-feature-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-yellow-300 font-semibold text-xl tracking-wide mb-2">
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,{' '}
<span className="text-secondary-1-light italic">Unrestricted</span>{' '}
and <span className="text-secondary-2-light italic">Restricted</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-secondary-1-light italic">
Unrestricted
</span>
</p>
<p>
During the unrestricted period users may deposit or
withdraw their USDC from the vault. During the
unrestricted period price can fluctuate.
</p>
</div>
<div className="w-full overflow-hidden lg:w-1/2">
<p>
<span className="text-secondary-2-light italic">Restricted</span>
</p>
<p>
After 24 hours deposits will be restricted and only
withdrawals allowed. During the restricted period
price can only goin down.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-3 gap-6">
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
<div className="bg-bkg-3 bg-feature-three 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-yellow-300 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">
Simple mechanisms are easier to build, explain, understand
and are harder to exploit. A transparent mechanism
increases participation because buyers are more confident
there are no hidden tricks that could harm them.
</p>
<p className="text-white text-opacity-50 text-base mb-4">
Elements of luck engineered into the mechanism distribute
value randomly to those, who are most willing to do the
arbitrary, worthless tasks to get the free value.
</p>
<p className="text-white font-bold leading-relaxed">
We believe all &quot;excess&quot; value should be captured
by token holders in the DAO.
</p>
</div>
</div>
</div>
</div>
<div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
<div className="bg-bkg-3 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-yellow-300 font-semibold text-xl tracking-wide mb-2">
MNGO unlocked and distributed.
</h2>
<p className="text-white text-opacity-50 text-base">
At event conclusion $MNGO gets distributed in propotion to
a users USDC contribution.{' '}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
)

626
components/NavBarBeta.tsx Normal file
View File

@ -0,0 +1,626 @@
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)
const [productMenuVisible, setProductMenuVisible] = useState(false)
const [supportMenuVisible, setSupportMenuVisible] = useState(false)
const toggleMobileMenu = (e) => {
setMobileMenuVisible(!mobileMenuVisible)
e.stopPropagation()
}
const toggleProducts = (e) => {
setProductMenuVisible(!productMenuVisible)
setSupportMenuVisible(false)
e.stopPropagation()
}
const toggleSupport = (e) => {
setSupportMenuVisible(!supportMenuVisible)
setProductMenuVisible(false)
e.stopPropagation()
}
const closeMenu = () => {
setMobileMenuVisible(false)
setProductMenuVisible(false)
setSupportMenuVisible(false)
}
const doNothing = (e) => {
e.stopPropagation()
}
useEffect(() => {
window.addEventListener('click', closeMenu)
return () => window.removeEventListener('click', closeMenu)
})
return (
<div className="">
{/* Main Menu */}
<div className="px-10 py-8 bg-transparent">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="https://mango.markets">
<span className="sr-only">Mango</span>
<img
className="h-8"
src="img/logoMango.png"
alt=""
width="auto"
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<button
type="button"
className=" rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-yellow-300"
onClick={toggleMobileMenu}
>
<span className="sr-only">Open menu</span>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<nav className="hidden md:flex space-x-10">
<div className="relative">
<button
type="button"
className="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300"
onClick={toggleProducts}
>
<span>Products</span>
<svg
className="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
<div
className={`${
!productMenuVisible && 'hidden'
} absolute z-50 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2`}
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-bkg-2 px-5 py-6 sm:gap-8 sm:p-8">
<h3 className="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Trading
</h3>
<a
href="https://trade.mango.markets/"
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M6 12V15M10 12V15M14 12V15M1 19H19M1 8H19M1 5L10 1L19 5M2 8H18V19H2V8Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="ml-4">
<p className="text-base font-medium text-white">
Spot Markets
</p>
<p className="mt-1 text-sm text-gray-500">
Trade BTC, ETH, SOL, and SRM, cross collateralized
with up to 5x leverage.
</p>
</div>
</a>
<a
href="#"
onClick={doNothing}
className="disabled -m-3 p-3 flex items-start rounded-lg opacity-50"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M19 10C19 14.9706 14.9706 19 10 19M19 10C19 5.02944 14.9706 1 10 1M19 10H1M10 19C5.02944 19 1 14.9706 1 10M10 19C11.6569 19 13 14.9706 13 10C13 5.02944 11.6569 1 10 1M10 19C8.34315 19 7 14.9706 7 10C7 5.02944 8.34315 1 10 1M1 10C1 5.02944 5.02944 1 10 1"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="ml-4">
<div className="text-base font-medium text-white">
Perpetual Futures <MangoPill />
</div>
<p className="mt-1 text-sm text-gray-500">
Cross-collateralized decentralized leveraged
perpetual futures markets.
</p>
</div>
</a>
<a
href="https://trade.mango.markets/borrow"
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M15 5V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V9C1 10.1046 1.89543 11 3 11H5M7 15H17C18.1046 15 19 14.1046 19 13V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="ml-4">
<p className="text-base font-medium text-white">
Decentralized Lending
</p>
<p className="mt-1 text-sm text-gray-500">
Earn interest on deposit, a take out collateralized
loans against assets
</p>
</div>
</a>
<h3 className="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Infrastructure
</h3>
<a
href="https://gitlab.com/OpinionatedGeek/mango-explorer/-/blob/master/Quickstart.md"
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M16 17H21V15C21 13.3431 19.6569 12 18 12C17.0444 12 16.1931 12.4468 15.6438 13.1429M16 17H6M16 17V15C16 14.3438 15.8736 13.717 15.6438 13.1429M6 17H1V15C1 13.3431 2.34315 12 4 12C4.95561 12 5.80686 12.4468 6.35625 13.1429M6 17V15C6 14.3438 6.12642 13.717 6.35625 13.1429M6.35625 13.1429C7.0935 11.301 8.89482 10 11 10C13.1052 10 14.9065 11.301 15.6438 13.1429M14 4C14 5.65685 12.6569 7 11 7C9.34315 7 8 5.65685 8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4ZM20 7C20 8.10457 19.1046 9 18 9C16.8954 9 16 8.10457 16 7C16 5.89543 16.8954 5 18 5C19.1046 5 20 5.89543 20 7ZM6 7C6 8.10457 5.10457 9 4 9C2.89543 9 2 8.10457 2 7C2 5.89543 2.89543 5 4 5C5.10457 5 6 5.89543 6 7Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="ml-4">
<p className="text-base font-medium text-white">
Liquidator Program
</p>
<p className="mt-1 text-sm text-gray-500">
Help safegaurd the mango protocol, become a
decentralized liquidator.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a
href="https://docs.mango.markets/"
className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300 rounded-md"
>
Docs
</a>
<div className="relative">
<button
type="button"
className="text-gray-500 group rounded-md p-1 px-2 inline-flex items-center text-base font-medium hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300"
onClick={toggleSupport}
>
<span>Support</span>
<svg
className="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
<div
className={`${
!supportMenuVisible && 'hidden'
} absolute z-50 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0`}
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-bkg-2 px-5 py-6 sm:gap-8 sm:p-8">
<h3 className="text-sm tracking-wide font-medium text-yellow-300 uppercase">
Social
</h3>
<a
href="https://discord.gg/67jySBhxrg"
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
>
{/* Heroicon name: outline/support */}
<svg
width="35"
height="35"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z"
fill="#4F4C67"
/>
</svg>
<div className="ml-4">
<p className="text-base font-medium text-white">
Discord
</p>
<p className="mt-1 text-sm text-gray-500">
Get all of your questions answered in our discrod or
contact us for developer support.
</p>
</div>
</a>
<a
href="https://twitter.com/mangomarkets"
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
>
<svg
width="25"
height="25"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.78874 23C5.55374 23 2.53817 22.0591 0 20.4356C2.15499 20.5751 5.95807 20.2411 8.32358 17.9848C4.76508 17.8215 3.16026 15.0923 2.95094 13.926C3.25329 14.0426 4.6953 14.1826 5.50934 13.856C1.4159 12.8296 0.787928 9.23732 0.927477 8.14097C1.695 8.67749 2.99745 8.8641 3.50913 8.81744C-0.305207 6.08823 1.06703 1.98276 1.74151 1.09635C4.47882 4.88867 8.5812 7.01857 13.6564 7.13704C13.5607 6.71736 13.5102 6.28042 13.5102 5.83164C13.5102 2.61092 16.1134 0 19.3247 0C21.0025 0 22.5144 0.712754 23.5757 1.85284C24.6969 1.59011 26.3843 0.975068 27.2092 0.443205C26.7934 1.93611 25.4989 3.18149 24.7159 3.64308C24.7224 3.65878 24.7095 3.62731 24.7159 3.64308C25.4037 3.53904 27.2648 3.18137 28 2.68256C27.6364 3.52125 26.264 4.91573 25.1377 5.69642C25.3473 14.9381 18.2765 23 8.78874 23Z"
fill="#4F4C67"
/>
</svg>
<div className="ml-4">
<p className="text-base font-medium text-white">
Twitter
</p>
<p className="mt-1 text-sm text-gray-500">
See what we&apos;re up to quicky, and meme with us.
</p>
</div>
</a>
</div>
<div className="px-5 py-5 bg-bkg-3 sm:px-8 sm:py-8">
<div>
<h3 className="text-sm tracking-wide font-bold text-yellow-300 uppercase">
Mango Guides
</h3>
<ul className="mt-4 space-y-4">
<li className="text-base truncate">
<a
href="https://docs.mango.markets/tutorials/transfer-funds-to-sollet-wallet"
className="font-medium text-white hover:text-gray-400"
>
Setting up a wallet
</a>
</li>
<li className="text-base truncate">
<a
href="https://docs.mango.markets/tutorials/trade-on-mango.markets"
className="font-medium text-white hover:text-gray-400"
>
Getting started with Mango Markets
</a>
</li>
</ul>
</div>
<div className="mt-5 text-sm">
<a
href="https://docs.mango.markets/margin-trading/overview"
className="font-bold text-transparent bg-clip-text bg-mango-yellow hover:bg-gradient-to-br from-mango-yellow via-mango-orange to-mango-green"
>
{' '}
Learn more about the Mango protocol{' '}
<span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a
href="https://mango-token-sale.netlify.app"
className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-yellow-300 rounded-md"
>
<div className="flex flex-row">
<p>Mango DAO</p>
<MangoSale />
</div>
</a>
</nav>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<div>
<Button>Start trading</Button>
</div>
</div>
</div>
</div>
{/* Mobile menu */}
<div
className={`${
!mobileMenuVisible && 'hidden'
} absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-10`}
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-bkg-2">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8"
src="img/logoMango.png"
alt=""
width="auto"
/>
</div>
<div className="-mr-2">
<button
type="button"
className="bg-bkg-2 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-th-bkg-4 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-300"
onClick={closeMenu}
>
<span className="sr-only">Close menu</span>
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
<a
href="https://trade.mango.markets"
className="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M6 12V15M10 12V15M14 12V15M1 19H19M1 8H19M1 5L10 1L19 5M2 8H18V19H2V8Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="ml-3 text-base font-medium text-white">
Spot Markets
</span>
</a>
<a
href="#"
onClick={doNothing}
className="disabled -m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4 opacity-50"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M19 10C19 14.9706 14.9706 19 10 19M19 10C19 5.02944 14.9706 1 10 1M19 10H1M10 19C5.02944 19 1 14.9706 1 10M10 19C11.6569 19 13 14.9706 13 10C13 5.02944 11.6569 1 10 1M10 19C8.34315 19 7 14.9706 7 10C7 5.02944 8.34315 1 10 1M1 10C1 5.02944 5.02944 1 10 1"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="ml-3 text-base font-medium text-white">
Perpetual Futures <MangoPill />
</span>
</a>
<a
href="https://trade.mango.markets/borrow"
className="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M15 5V3C15 1.89543 14.1046 1 13 1H3C1.89543 1 1 1.89543 1 3V9C1 10.1046 1.89543 11 3 11H5M7 15H17C18.1046 15 19 14.1046 19 13V7C19 5.89543 18.1046 5 17 5H7C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="ml-3 text-base font-medium text-white">
Decentralized Lending
</span>
</a>
<a
href="https://gitlab.com/OpinionatedGeek/mango-explorer/-/blob/master/Quickstart.md"
className="-m-3 p-3 flex items-center rounded-md hover:bg-th-bkg-4"
>
<svg
className="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 22 22"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M16 17H21V15C21 13.3431 19.6569 12 18 12C17.0444 12 16.1931 12.4468 15.6438 13.1429M16 17H6M16 17V15C16 14.3438 15.8736 13.717 15.6438 13.1429M6 17H1V15C1 13.3431 2.34315 12 4 12C4.95561 12 5.80686 12.4468 6.35625 13.1429M6 17V15C6 14.3438 6.12642 13.717 6.35625 13.1429M6.35625 13.1429C7.0935 11.301 8.89482 10 11 10C13.1052 10 14.9065 11.301 15.6438 13.1429M14 4C14 5.65685 12.6569 7 11 7C9.34315 7 8 5.65685 8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4ZM20 7C20 8.10457 19.1046 9 18 9C16.8954 9 16 8.10457 16 7C16 5.89543 16.8954 5 18 5C19.1046 5 20 5.89543 20 7ZM6 7C6 8.10457 5.10457 9 4 9C2.89543 9 2 8.10457 2 7C2 5.89543 2.89543 5 4 5C5.10457 5 6 5.89543 6 7Z"
stroke="#4F4C67"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="ml-3 text-base font-medium text-white">
Liquidator Program
</span>
</a>
<a
href="https://docs.mango.markets/"
className="text-base font-medium text-white hover:bg-th-bkg-4"
>
<div className="flex flex-row">
<svg
width="24"
height="24"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 0.804233C5.9428 0.289057 4.75516 0 3.5 0C2.24484 0 1.0572 0.289057 0 0.804233V10.8042C1.0572 10.2891 2.24484 10 3.5 10C5.1686 10 6.71789 10.5108 8 11.3847C9.28211 10.5108 10.8314 10 12.5 10C13.7552 10 14.9428 10.2891 16 10.8042V0.804233C14.9428 0.289057 13.7552 0 12.5 0C11.2448 0 10.0572 0.289057 9 0.804233V8C9 8.55228 8.55229 9 8 9C7.44772 9 7 8.55229 7 8V0.804233Z"
fill="#4F4C67"
/>
</svg>
<p className="mx-3 -mt-1">Explore the docs</p>
</div>
</a>
</nav>
</div>
<h3 className="py-5 text-sm tracking-wide font-medium text-yellow-300 uppercase">
Contact Us
</h3>
<div className="grid grid-cols-2 gap-y-4 gap-x-8">
<a
href="https://discord.gg/pkyK2aZjrA"
className="text-base font-medium text-white hover:bg-th-bkg-4"
>
<div className="flex flex-row">
<svg
width="18"
height="18"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z"
fill="#4F4C67"
/>
</svg>
<p className="mx-4 -mt-1">Discord</p>
</div>
</a>
<a
href="https://twitter.com/mangomarkets"
className="text-base font-medium text-white hover:bg-th-bkg-4"
>
<div className="flex flex-row">
<svg
width="18"
height="18"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.78874 23C5.55374 23 2.53817 22.0591 0 20.4356C2.15499 20.5751 5.95807 20.2411 8.32358 17.9848C4.76508 17.8215 3.16026 15.0923 2.95094 13.926C3.25329 14.0426 4.6953 14.1826 5.50934 13.856C1.4159 12.8296 0.787928 9.23732 0.927477 8.14097C1.695 8.67749 2.99745 8.8641 3.50913 8.81744C-0.305207 6.08823 1.06703 1.98276 1.74151 1.09635C4.47882 4.88867 8.5812 7.01857 13.6564 7.13704C13.5607 6.71736 13.5102 6.28042 13.5102 5.83164C13.5102 2.61092 16.1134 0 19.3247 0C21.0025 0 22.5144 0.712754 23.5757 1.85284C24.6969 1.59011 26.3843 0.975068 27.2092 0.443205C26.7934 1.93611 25.4989 3.18149 24.7159 3.64308C24.7224 3.65878 24.7095 3.62731 24.7159 3.64308C25.4037 3.53904 27.2648 3.18137 28 2.68256C27.6364 3.52125 26.264 4.91573 25.1377 5.69642C25.3473 14.9381 18.2765 23 8.78874 23Z"
fill="#4F4C67"
/>
</svg>
<p className="mx-4 -mt-1">Twitter</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default NavBarBeta

View File

@ -23,7 +23,7 @@ const PoolInfoCards = () => {
})
return (
<div className="flex flex-row justify-center mb-12">
<div className="flex flex-row justify-center mb-12 z-50">
<Card title="Deposits closing in">
<PoolCountdown date={endDeposits} />
</Card>