blockworks-foundation
/
mango-web
mirror of https://github.com/blockworks-foundation/mango-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

updated trade products page

This commit is contained in:
Steven Sarmiento 2021-07-15 23:54:21 -07:00 committed by GitHub
parent 93dab4010c
commit 52aeea9389
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/FeatureSection.tsx
View File

@ -1,3 +1,5 @@
import Button from "./Button"
const FeatureSection = () => {
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">
@ -14,29 +16,11 @@ const FeatureSection = () => {
deep liquidity and high leverage for traders, built by traders.{' '}
</p>
<div>
<button className="inline-flex items-center px-8 py-2 text-lg text-white font-bold bg-gradient-to-br from-yellow-200 via-lime-400 to-green-500 hover:bg-blue-600 rounded-full transition duration-200">
<span className="pr-4">Start trading</span>
<svg
width="9"
height="16"
viewBox="0 0 9 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1.6665L7.8963 7.99984L1 14.3332"
stroke="white"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
<Button>Start trading</Button>
</div>
</div>
</div>
</section>
<section className="py-28 px-4">
<div className="flex flex-wrap -mx-4 mb-6">
<div className="lg:w-1/3 px-4 mb-6">
@ -230,6 +214,32 @@ const FeatureSection = () => {
on-chain.
</p>
</div>
<div className="lg:w-1/3 px-4 mb-6">
<svg
width="33"
height="31"
viewBox="0 0 33 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5233 0.272298C16.8892 -0.0907658 16.1108 -0.0907658 15.4767 0.272298L1.03954 8.53896C0.0505606 9.10525 -0.293038 10.3677 0.272096 11.3587C0.652378 12.0255 1.34724 12.3996 2.06246 12.4004V26.8667C0.923393 26.8667 0 27.7919 0 28.9333C0 30.0747 0.923393 31 2.06246 31H30.9368C32.0759 31 32.9993 30.0747 32.9993 28.9333C32.9993 27.7919 32.0759 26.8667 30.9368 26.8667V12.4004C31.6523 12.3998 32.3475 12.0258 32.7279 11.3587C33.293 10.3677 32.9494 9.10525 31.9605 8.53896L17.5233 0.272298ZM8.24982 14.4667C7.11076 14.4667 6.18737 15.3919 6.18737 16.5333V22.7333C6.18737 23.8747 7.11076 24.8 8.24982 24.8C9.38889 24.8 10.3123 23.8747 10.3123 22.7333V16.5333C10.3123 15.3919 9.38889 14.4667 8.24982 14.4667ZM14.4372 16.5333C14.4372 15.3919 15.3606 14.4667 16.4996 14.4667C17.6387 14.4667 18.5621 15.3919 18.5621 16.5333V22.7333C18.5621 23.8747 17.6387 24.8 16.4996 24.8C15.3606 24.8 14.4372 23.8747 14.4372 22.7333V16.5333ZM24.7495 14.4667C23.6104 14.4667 22.687 15.3919 22.687 16.5333V22.7333C22.687 23.8747 23.6104 24.8 24.7495 24.8C25.8885 24.8 26.8119 23.8747 26.8119 22.7333V16.5333C26.8119 15.3919 25.8885 14.4667 24.7495 14.4667Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="-85.5" y1="-53.5" x2="37.5" y2="44.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#E54033"/>
<stop offset="0.494792" stop-color="#FECA1A"/>
<stop offset="1" stop-color="#AFD803"/>
</linearGradient>
</defs>
</svg>
<h3 className="text-xl my-3 font-semibold font-heading">
Spot & perpetual markets.
</h3>
<p className="text-gray-400 leading-relaxed">
Trade spot markest and derivitive assets all in one unified interface. Spot with up to 5x leverage, perpetuals with up to 10x.
</p>
</div>
<div className="lg:w-1/3 px-4 mb-6">
<svg
width="31"
@ -275,7 +285,7 @@ const FeatureSection = () => {
<section className="">
<div className="grid grid-cols-3 gap-6 mb-6">
<div>
<div className="bg-th-fgd-4 bg-feature-one bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div className="bg-th-fgd-4 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">
@ -290,7 +300,7 @@ const FeatureSection = () => {
</div>
</div>
<div className="col-span-2">
<div className="bg-th-fgd-4 bg-feature-two bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div className="bg-th-fgd-4 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">
@ -308,7 +318,7 @@ const FeatureSection = () => {
<div className="grid grid-cols-3 gap-6">
<div className="col-span-2">
<div className="bg-th-fgd-4 bg-feature-three bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div className="bg-th-fgd-4 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">
@ -323,7 +333,7 @@ const FeatureSection = () => {
</div>
</div>
<div>
<div className="bg-th-fgd-4 bg-feature-four bg-cover bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
<div className="bg-th-fgd-4 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">

2
components/HeroSection.tsx
View File

@ -6,7 +6,7 @@ const HeroSection = () => {
<div className="relative pt-12 md:pt-48 pb-32 lg:pb-48 mb-48 lg:mb-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">
Decentralized margin trading that feels right.
Trading that just feels right.
</h2>
</div>
</div>