2021-07-20 16:43:16 -07:00
import Button from './Button'
2021-09-21 16:40:32 -07:00
//import ButtonWhite from './ButtonWhite'
import {
ReceiptTaxIcon ,
LightningBoltIcon ,
CurrencyDollarIcon ,
LibraryIcon ,
} from '@heroicons/react/outline'
2021-07-20 06:33:13 -07:00
import LinkLeft from './LinkLeft'
2021-07-15 23:54:21 -07:00
2021-09-21 16:40:32 -07:00
const features = [
{
name : 'Maximum capital efficiency.' ,
description :
"Every market is cross-collateralized. Mango's risk engine let's you utilize all your assets and derivative contracts as collateral." ,
icon : CurrencyDollarIcon ,
} ,
{
name : 'Sub-second latency.' ,
description :
'Instant order execution at the price of less than a cent. Low latency allows market makers to post tight spreads on the books. Oh, and liquidations are instant as well, so watch your exposure.' ,
icon : LightningBoltIcon ,
} ,
{
name : 'The lowest fees.' ,
description :
'Trade with the lowest fee possible. SRM deposits are pooled for a collective discount. Mango is the first protocol to charge zero fees on margin borrowing & lending.' ,
icon : ReceiptTaxIcon ,
} ,
{
name : 'Spot & perpetual markets.' ,
description :
2021-12-27 19:53:27 -08:00
'Trade spot markets and derivitive assets all in one unified experience. Spot margin with up to 5x leverage, perpetuals futures with up to 20x.' ,
2021-09-21 16:40:32 -07:00
icon : LibraryIcon ,
} ,
]
2021-07-08 05:33:11 -07:00
const FeatureSection = ( ) = > {
return (
2021-09-21 16:40:32 -07:00
< >
< div className = "bg-th-bkg-3 transform -skew-y-3 pt-16 pb-32 lg:pb-48 mb-48 lg:mb-48 -mt-64" >
< div className = "max-w-7xl mx-auto px-4 transform skew-y-3" >
< section className = "py-16 md:py-28 px-4" >
< div className = "relative pt-16 pb-12" >
< div className = "relative" >
< div className = "lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24" >
< div className = "px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0" >
< div >
< div className = "mt-6" >
< h2 className = "lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading" >
Completely permissionless .
< / h2 >
< p className = "mt-4 text-xl text-gray-400" >
2022-11-03 08:19:21 -07:00
Open source , all data is on - chain . Trade spot margined markets and leveraged perpetual futures all cross - collateralized with up to 10 x leverage .
2021-09-21 16:40:32 -07:00
< / p >
< div className = "mt-6" >
< a
rel = "noreferrer"
target = "_blank"
href = "https://trade.mango.markets/accounts"
>
< Button > Start trading today < / Button >
< / a >
< / div >
< / div >
< / div >
< / div >
< div className = "mt-12 sm:mt-16 lg:mt-0" >
< div className = "pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-650" >
< img
className = "-mt-20 w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src = "../img/feature-cta2.png"
alt = "mango markets"
/ >
< / div >
< / div >
< / div >
< / div >
2021-07-08 05:33:11 -07:00
< / div >
2021-09-21 16:40:32 -07:00
< div className = "overflow-hidden" >
< div className = "relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" >
< svg
className = "absolute top-0 left-full transform -translate-x-1/2 -translate-y-3/4 lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4"
width = { 404 }
height = { 784 }
fill = "none"
viewBox = "0 0 404 784"
aria - hidden = "true"
>
< defs >
< pattern
id = "8b1b5f72-e944-4457-af67-0c6d15a99f38"
x = { 0 }
y = { 0 }
width = { 20 }
height = { 20 }
patternUnits = "userSpaceOnUse"
>
< rect
x = { 0 }
y = { 0 }
width = { 4 }
height = { 4 }
className = "text-th-fgd-4"
fill = "currentColor"
/ >
< / pattern >
< / defs >
< rect
width = { 404 }
height = { 784 }
fill = "url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)"
/ >
< / svg >
2021-07-08 05:33:11 -07:00
2021-09-21 16:40:32 -07:00
< div className = "relative lg:grid lg:grid-cols-3 lg:gap-x-8" >
< div className = "lg:col-span-1" >
< h2 className = "lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading" >
Love trading again .
2021-07-08 05:33:11 -07:00
< / h2 >
2021-09-21 16:40:32 -07:00
{ / *
< div className = "pt-6" >
< blockquote >
< div >
< p className = "text-base text-gray-500" >
& ldquo ; Cras velit quis eros eget rhoncus lacus
ultrices sed diam . Sit orci risus aenean curabitur
donec aliquet . Mi venenatis in euismod ut . & rdquo ;
< / p >
< / div >
< footer className = "mt-3" >
< div className = "flex items-center space-x-3" >
< div className = "flex-shrink-0" >
< img
className = "h-6 w-6 rounded-full"
src = "https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
alt = ""
/ >
< / div >
< div className = "text-base font-bold text-mango-yellow" >
@troll_arse
< / div >
< / div >
< / footer >
< / blockquote >
< / div >
* / }
2021-07-08 05:33:11 -07:00
< / div >
2021-09-21 16:40:32 -07:00
< dl className = "mt-10 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2" >
{ features . map ( ( feature ) = > (
< div key = { feature . name } >
< dt >
< div className = "flex items-center justify-center h-12 w-12 rounded-md bg-bkg-3 text-mango-yellow" >
< feature.icon
className = "h-6 w-6"
aria - hidden = "true"
/ >
< / div >
< p className = "mt-5 text-xl my-3 font-semibold font-heading" >
{ feature . name }
< / p >
< / dt >
< dd className = "mt-2 text-base text-gray-500" >
{ feature . description }
< / dd >
< / div >
) ) }
< / dl >
2021-07-08 05:33:11 -07:00
< / div >
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< / section >
< / div >
< / div >
< section className = "py-16 md:py-28 px-4" >
< div className = "relative pt-16 pb-12" >
< div className = "relative" >
< div className = "lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24" >
< div className = "px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0" >
< div >
< div className = "mt-6" >
< h2 className = "lg:text-4xl sm:text-3xl text-3xl text-white font-bold font-heading" >
More than an exchange .
2021-07-08 05:33:11 -07:00
< / h2 >
2021-09-21 16:40:32 -07:00
< p className = "mt-4 text-xl text-gray-400" >
Mango gives full control and tracking over assets right
from the account hub . Earn interest on deposits and borrow
against collateral all in one single place .
2021-07-08 05:33:11 -07:00
< / p >
2021-09-21 16:40:32 -07:00
< div className = "mt-6" >
< a
rel = "noreferrer"
target = "_blank"
href = "https://trade.mango.markets/accounts"
>
< Button > Open a 🥭 account < / Button >
< / a >
< / div >
< / div >
{ / *
< div className = "mt-8 pt-6" >
< blockquote >
< div >
< p className = "text-base text-gray-400" >
& ldquo ; Cras velit quis eros eget rhoncus lacus
ultrices sed diam . Sit orci risus aenean curabitur
donec aliquet . Mi venenatis in euismod ut . & rdquo ;
< / p >
< / div >
< div className = "z-0 relative -bottom-72 -right-96 lg:-bottom-96 " >
< div className = "absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-5 animate-blob" > < / div >
< div className = "absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-4000" > < / div >
< div className = "absolute bottom-8 left-20 w-450 h-450 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-10 animate-blob animation-delay-2000" > < / div >
< / div >
< footer className = "mt-3" >
< div className = "flex items-center space-x-3" >
< div className = "flex-shrink-0" >
< img
className = "h-6 w-6 rounded-full"
src = "https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
alt = ""
/ >
< / div >
< div className = "text-base font-bold text-mango-yellow" >
@troll_arse
< / div >
< / div >
< / footer >
< / blockquote >
< / div >
* / }
< div className = "z-0 relative -bottom-72 -right-96 lg:-bottom-96 " >
< div className = "absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-5 animate-blob" > < / div >
< div className = "absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-4000" > < / div >
< div className = "absolute bottom-8 left-20 w-450 h-450 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-10 animate-blob animation-delay-2000" > < / div >
2021-07-08 05:33:11 -07:00
< / div >
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< div className = "mt-12 sm:mt-16 lg:mt-0" >
< div className = "z-10 pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-650" >
< img
className = "-mt-12 w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src = "../img/feature-cta1.png"
alt = "Inbox user interface"
/ >
< / div >
< / div >
2021-07-08 05:33:11 -07:00
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< / div >
< / section >
2021-07-08 05:33:11 -07:00
2021-09-21 16:40:32 -07:00
< section className = "max-w-7xl mx-auto px-8" >
< 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 = "z-10 bg-th-fgd-4 border border-bkg-3 bg-product-one bg-cover 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" >
You are in control .
< / h2 >
< p className = "text-white text-opacity-50 text-lg" >
You have self - custody of your assets ; no more centralized
counter - party risk .
< / p >
2021-07-08 05:33:11 -07:00
< / div >
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< / div >
< div className = "lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3" >
< div className = "z-50 bg-th-fgd-4 border border-bkg-3 bg-product-two bg-cover 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" >
Fully customize your experience .
< / h2 >
< p className = "text-white text-opacity-50 text-lg" >
Complete control over layout , theme , and your trading view .
< / p >
2021-07-08 05:33:11 -07:00
< / div >
< / div >
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< / div >
2021-07-20 17:35:57 -07:00
2021-09-21 16:40:32 -07:00
< 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 = "z-10 bg-th-fgd-4 border border-bkg-3 bg-product-three bg-cover 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" >
Trade management simplified .
< / h2 >
< p className = "text-white text-opacity-50 text-lg" >
Track your futures positions , liabilities , create
sub - accounts and track progress overtime .
< / p >
< / div >
2021-07-20 16:43:16 -07:00
< / div >
< / div >
2021-07-20 17:35:57 -07:00
< / div >
2021-09-21 16:40:32 -07:00
< div className = "lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3" >
< div className = "z-10 bg-th-fgd-4 border border-bkg-3 bg-product-four bg-cover 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" >
Organically grown , fully opensource .
< / h2 >
< p className = "text-white text-opacity-50 text-lg" >
Mango markets are grown organically with no pesticides ,
trade and manage your assets with the best in class user
interface , built by traders for traders .
< / p >
< br / >
< a
rel = "noreferrer"
target = "_blank"
href = "https://github.com/blockworks-foundation/mango-ui-v3"
>
< LinkLeft > Run it yourself locally < / LinkLeft >
< / a >
< / div >
< / div >
< / div >
2021-07-20 17:35:57 -07:00
< / div >
< / div >
2021-09-21 16:40:32 -07:00
< / section >
< / >
2021-07-08 05:33:11 -07:00
)
}
export default FeatureSection