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

added gsap 

added animations to hero component
This commit is contained in:
steven 2021-07-20 02:48:30 -07:00
parent 000e340d29
commit d32e948cb9
7 changed files with 54 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/CardSection.tsx
View File

@ -1,24 +0,0 @@
const CardSection = () => {
return (
<div className="container mx-auto px-4">
<div className="flex flex-wrap -mx-4 -mb-4 md:mb-0">
<div className="w-full md:w-1/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Small1.png" alt="" />
</div>
<div className="w-full md:w-2/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Large1.png" alt="" />
</div>
</div>
<div className="flex flex-wrap -mx-4 -mb-4 md:mb-0">
<div className="w-full md:w-2/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Large2.png" alt="" />
</div>
<div className="w-full md:w-1/3 px-4 mb-4 md:mb-0">
<img src="img/Card_Small2.png" alt="" />
</div>
</div>
</div>
)
}
export default CardSection

37
components/FeatureSection.tsx
View File

@ -1,26 +1,9 @@
import Button from './Button'
import LinkLeft from "./LinkLeft"
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">
<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-12 px-3">
<div className="flex flex-wrap items-center text-center lg:text-left -mx-2">
<div className="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
<h2 className="text-5xl mb-6 leading-tight font-semibold font-heading">
Simple, intuitive, and fast.{' '}
</h2>
<p className="mb-8 text-gray-400 leading-relaxed">
The Mango margin protocol is a fully open-source margin trading
exchange. Its best in class user interface provides access to
deep liquidity and high leverage for traders, built by traders.{' '}
</p>
<div>
<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">
@ -245,7 +228,7 @@ const FeatureSection = () => {
</svg>
<h3 className="text-xl my-3 font-semibold font-heading">
Spot & perpetual markets.
Spot &amp; perpetual markets.
</h3>
<p className="text-gray-400 leading-relaxed">
Trade spot markest and derivitive assets all in one unified
@ -289,16 +272,16 @@ const FeatureSection = () => {
Mango is a fully open-source project built by a global team of
contributors. Help build the world’s best exchange, period.
</p>
<a className="text-indigo-600 hover:underline" href="#">
Join the discord &raquo;
</a>
<LinkLeft>
Join the discord
</LinkLeft>
</div>
</div>
</section>
<section className="">
<div className="grid grid-cols-3 gap-6 mb-6">
<div>
<div className="lg:col-span-1 md:col-span-3 sm:col-span-3 xs:col-span-3">
<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">
@ -313,7 +296,7 @@ const FeatureSection = () => {
</div>
</div>
</div>
<div className="col-span-2">
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
<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">
@ -331,7 +314,7 @@ const FeatureSection = () => {
</div>
<div className="grid grid-cols-3 gap-6">
<div className="col-span-2">
<div className="lg:col-span-2 md:col-span-3 sm:col-span-3 xs:col-span-3">
<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">
@ -346,7 +329,7 @@ const FeatureSection = () => {
</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-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">

19
components/HeroSection.tsx
View File

@ -1,19 +0,0 @@
const HeroSection = () => {
return (
<div className="">
<section className="bg-hero-img bg-no-repeat bg-cover">
<div className="container px-4 mx-auto">
<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">
Trading that just feels right.
</h2>
</div>
</div>
</div>
</section>
</div>
)
}
export default HeroSection

37
components/HeroSectionHome.tsx
View File

@ -1,7 +1,36 @@
import { useRef, useEffect } from 'react'
import Button from './Button'
import Link from './Link'
import { gsap, Power3} from 'gsap'
const HeroSectionHome = () => {
let sideImage = useRef(null)
//let heroText = useRef(null)
const tl = gsap.timeline()
useEffect(() => {
/*
const tagOne = heroText.children[0];
const tagTwo = heroText.children[1];
const tagThree = heroText.children[2];
const tagFour = heroText.children[3];
//content animation
tl.from(tagOne, .7, {opacity: 0, y: 50, ease: Power3.easeOut}, 'Start')
.from(tagTwo, .7, {opacity: 0, y: 50, ease: Power3.easeOut, delay: .2}, 'Start')
.from(tagThree, .7, {opacity: 0, y: 50, ease: Power3.easeOut, delay: .4}, 'Start')
.from(tagFour, .7, {opacity: 0, y: 50, ease: Power3.easeOut, delay: .6}, 'Start')
*/
//image animation
tl.from(sideImage, .8, {opacity: 0, y: 50, ease: Power3.easeOut, delay: .4})
}, [])
return (
<div className="">
<div className="relative bg-th-bkg-1 overflow-hidden">
@ -10,7 +39,7 @@ const HeroSectionHome = () => {
<div className="mx-auto max-w-7xl">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="pl-4 ml-6 sm:pr-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:my-24">
<div>
<div /*ref={el => {heroText = el}}*/>
<h1 className="mb-3 lg:text-5xl md:text-4xl sm:text-4xl xs:text-3xl text-white font-bold font-heading">
Long &amp; short everything.
</h1>
@ -28,10 +57,11 @@ const HeroSectionHome = () => {
<Link>Explore the docs</Link>
</div>
<p className="mt-16 text-sm text-gray-400 uppercase tracking-wide font-semibold sm:mt-16">
<div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0 md:w-1/2 sm:w-1/2">
<p className="mt-16 py-4 text-sm text-gray-400 uppercase tracking-wide font-semibold sm:mt-16">
Powered by
</p>
<div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0 md:w-1/2 sm:w-1/2">
<div className="flex">
<div className="flex justify-center">
<a
@ -65,6 +95,7 @@ const HeroSectionHome = () => {
<div className="mt-16 sm:mt-24 mt- lg:-mt-20 lg:col-span-6">
<div className="z-10 relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full">
<img
ref={el => {sideImage = el}}
className="lg:h-750 lg:w-auto lg:max-w-none"
src="../img/herp_image_main_flat.png"
alt=""

1
package.json
View File

@ -28,6 +28,7 @@
"@project-serum/sol-wallet-adapter": "^0.2.0",
"@solana/spl-token": "^0.1.3",
"@solana/web3.js": "^1.5.0",
"gsap": "^3.7.1",
"immer": "^9.0.1",
"moment": "^2.29.1",
"next": "latest",

5
pages/index.tsx
View File

@ -5,9 +5,12 @@ import FooterSection from '../components/FooterSection'
import LendSection from '../components/LendSection'
import CommunitySection from '../components/CommunitySection'
const Index = () => {
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all overflow-hidden`}>
<div
className={`bg-th-bkg-1 text-th-fgd-1 transition-all overflow-hidden`}>
<div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
<NavBarBeta />
<HeroSectionHome />

5
yarn.lock
View File

@ -3411,6 +3411,11 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
gsap@^3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.7.1.tgz#1c5857f4fbcbd3f5ca0b513ef7abf828fbaa20a8"
integrity sha512-4qxuaC2yFWRjMRof5tI/7c9/+L4xMsCoqHrZAmuh+IbOokTnZyoeF0VgvcVHq3uo+/VJZCs7PTvjrFasfGl+ww==
har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"