v4 splash page

2022-11-18 13:53:42 +11:00 · 2022-11-18 13:53:42 +11:00 · 8534a283aa
parent 82c21d338e
commit 8534a283aa
12 changed files with 1315 additions and 1148 deletions
--- a/.github/workflows/codeql-scan.yml
+++ b/.github/workflows/codeql-scan.yml
@ -1,13 +1,13 @@
 # GitHub SAST (static application security testing) tool that scans code for security bugs and unsafe coding practices

-name: "CodeQL Scan"
+name: 'CodeQL Scan'

 # Events that triggers CodeQL to run
 on:
  push:
-    branches: [ main ]
+    branches: [main]
  pull_request:
-    branches: [ main ]
+    branches: [main]

 # Option to configure as a scheduled action to monitor for drift in code
 #  schedule:
@ -28,23 +28,23 @@ jobs:
      fail-fast: false
      matrix:
        # Add more languages if relevnt to the project
-        language: [ 'javascript' ]
+        language: ['javascript']
        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]

    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2

-    # Initialises the CodeQL tools for scanning (sorry Americans)
-    - name: Initialise CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initialises the CodeQL tools for scanning (sorry Americans)
+      - name: Initialise CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main

-    # Run the analysis and upload results to the security tab
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      # Run the analysis and upload results to the security tab
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
--- a/.github/workflows/trivy-scan.yml
+++ b/.github/workflows/trivy-scan.yml
@ -5,9 +5,9 @@ name: Trivy Scan
 # Events that triggers Trivy to run
 on:
  push:
-    branches: [ main ]
+    branches: [main]
  pull_request:
-    branches: [ main ]
+    branches: [main]

 jobs:
  build:
--- a/components/FeatureSection.tsx
+++ b/components/FeatureSection.tsx
@ -52,7 +52,9 @@ const FeatureSection = () => {
                          Completely permissionless.
                        </h2>
                        <p className="mt-4 text-xl text-gray-400">
-                          Open source, all data is on-chain. Trade spot margined markets and leveraged perpetual futures all cross-collateralized with up to 10x leverage.
+                          Open source, all data is on-chain. Trade spot margined
+                          markets and leveraged perpetual futures all
+                          cross-collateralized with up to 10x leverage.
                        </p>
                        <div className="mt-6">
                          <a
--- a/components/HeroSectionHome
+++ b/components/HeroSectionHome
@ -0,0 +1,132 @@
+import { useRef, useEffect } from 'react'
+import Button from './Button'
+import Link from './Link'
+import { gsap, Power3 } from 'gsap'
+
+const HeroSectionHome = () => {
+  const sideImage = useRef(null)
+  //let heroText = useRef(null)
+
+  const tl = gsap.timeline()
+  //let App = useRef(null)
+
+  useEffect(() => {
+    //gsap.to(App.current, 0, {css: {visibility:'visible'}})
+
+    /*
+      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.to(sideImage.current, 0.7, {
+      opacity: 1,
+      y: 0,
+      ease: Power3.easeOut,
+    })
+  }, [])
+
+  return (
+    <div className="App">
+      <div className="relative bg-th-bkg-1 overflow-hidden">
+        <div className="relative pt-6 pb-16 sm:pb-24">
+          <main className="mt-16 sm:mt-16">
+            <div className="mx-auto max-w-7xl">
+              <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+                <div className="px-2 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 z-10">
+                  <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>
+
+                    <p className="mb-8 text-white text-opacity-50 lg:text-2xl md:text-2xl sm:text-2xl xs:text-lg">
+                      Lightning fast{' '}
+                      <span className="text-yellow-300 font-bold">·</span>{' '}
+                      Near-zero fees{' '}
+                      <span className="text-yellow-300 font-bold">·</span>{' '}
+                      Permissionless
+                    </p>
+
+                    <div className="flex lg:flex-row md:flex-row lg:justify-start md:justify-center sm:justify-center">
+                      <a
+                        rel="noreferrer"
+                        target="_blank"
+                        href="https://trade.mango.markets"
+                      >
+                        <Button>Start trading</Button>
+                      </a>
+                      <a
+                        rel="noreferrer"
+                        target="_blank"
+                        href="https://docs.mango.markets/"
+                      >
+                        <Link>Explore the docs</Link>
+                      </a>
+                    </div>
+
+                    <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-white text-opacity-50 uppercase tracking-wide font-semibold sm:mt-16">
+                        Powered by
+                      </p>
+                      <div className="flex">
+                        <div className="flex justify-center">
+                          <a
+                            className="hover:opacity-70 transition duration-200 ease-in-out"
+                            href="https://solana.com/"
+                          >
+                            <img
+                              className="h-8 sm:h-8"
+                              src="../logo_solana.svg"
+                              alt="Solana"
+                            />
+                          </a>
+                        </div>
+                        <div className="flex justify-center -my-1 mx-10">
+                          <a
+                            className="hover:opacity-70 transition duration-200 ease-in-out"
+                            href="https://projectserum.com/#/"
+                          >
+                            <img
+                              className="h-9 sm:h-10"
+                              src="../logo_serum.svg"
+                              alt="Serum"
+                            />
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <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={sideImage}
+                      className="lg:h-750 lg:w-auto lg:max-w-none opacity-0 transform translate-y-40"
+                      src="../img/herp_image_main_flat.png"
+                      alt=""
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="z-0 absolute -bottom-4 left-20 lg:-bottom-4 lg:left-96">
+                <div className="absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-10 animate-blob"></div>
+                <div className="absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-30 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-20 animate-blob animation-delay-2000"></div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HeroSectionHome
--- a/components/HeroSectionHome.tsx
+++ b/components/HeroSectionHome.tsx
@ -5,26 +5,10 @@ import { gsap, Power3 } from 'gsap'

 const HeroSectionHome = () => {
  const sideImage = useRef(null)
-  //let heroText = useRef(null)

  const tl = gsap.timeline()
-  //let App = useRef(null)

  useEffect(() => {
-    //gsap.to(App.current, 0, {css: {visibility:'visible'}})
-
-    /*
-      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.to(sideImage.current, 0.7, {
      opacity: 1,
@ -34,96 +18,71 @@ const HeroSectionHome = () => {
  }, [])

  return (
-    <div className="App">
-      <div className="relative bg-th-bkg-1 overflow-hidden">
-        <div className="relative pt-6 pb-16 sm:pb-24">
-          <main className="mt-16 sm:mt-16">
-            <div className="mx-auto max-w-7xl">
-              <div className="lg:grid lg:grid-cols-12 lg:gap-8">
-                <div className="px-2 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 z-10">
-                  <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>
+    <div className="relative" style={{ height: 'calc(100vh - 160px)' }}>
+      <div className="lg:px-20 xs:px-6 max-w-xl lg:max-w-3xl h-full pb-20 flex flex-col justify-center w-full">
+        <div>
+          <h1 className="mb-3 lg:text-6xl text-5xl text-white font-bold font-heading">
+            A New Dawn.{' '}
+          </h1>

-                    <p className="mb-8 text-white text-opacity-50 lg:text-2xl md:text-2xl sm:text-2xl xs:text-lg">
-                      Lightning fast{' '}
-                      <span className="text-yellow-300 font-bold">·</span>{' '}
-                      Near-zero fees{' '}
-                      <span className="text-yellow-300 font-bold">·</span>{' '}
-                      Permissionless
-                    </p>
+          <p className="mb-3 opacity-80 text-lg">
+            The next generation of Mango is on the horizon. With exciting new
+            features and risk mitigation strategies, Mango v4 is your one-stop
+            DeFi shop.
+          </p>
+          <p className="mb-8 opacity-80 text-lg">
+            Join our communtiy and stay up-to-date on Discord.
+          </p>

-                    <div className="flex lg:flex-row md:flex-row lg:justify-start md:justify-center sm:justify-center">
-                      <a
-                        rel="noreferrer"
-                        target="_blank"
-                        href="https://trade.mango.markets"
-                      >
-                        <Button>Start trading</Button>
-                      </a>
-                      <a
-                        rel="noreferrer"
-                        target="_blank"
-                        href="https://docs.mango.markets/"
-                      >
-                        <Link>Explore the docs</Link>
-                      </a>
-                    </div>
-
-                    <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-white text-opacity-50 uppercase tracking-wide font-semibold sm:mt-16">
-                        Powered by
-                      </p>
-                      <div className="flex">
-                        <div className="flex justify-center">
-                          <a
-                            className="hover:opacity-70 transition duration-200 ease-in-out"
-                            href="https://solana.com/"
-                          >
-                            <img
-                              className="h-8 sm:h-8"
-                              src="../logo_solana.svg"
-                              alt="Solana"
-                            />
-                          </a>
-                        </div>
-                        <div className="flex justify-center -my-1 mx-10">
-                          <a
-                            className="hover:opacity-70 transition duration-200 ease-in-out"
-                            href="https://projectserum.com/#/"
-                          >
-                            <img
-                              className="h-9 sm:h-10"
-                              src="../logo_serum.svg"
-                              alt="Serum"
-                            />
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <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={sideImage}
-                      className="lg:h-750 lg:w-auto lg:max-w-none opacity-0 transform translate-y-40"
-                      src="../img/herp_image_main_flat.png"
-                      alt=""
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="z-0 absolute -bottom-4 left-20 lg:-bottom-4 lg:left-96">
-                <div className="absolute bottom-4 left-8 w-450 h-450 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-10 animate-blob"></div>
-                <div className="absolute bottom-4 w-450 h-450 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-30 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-20 animate-blob animation-delay-2000"></div>
-              </div>
-            </div>
-          </main>
+          <div className="flex justify-start">
+            <a
+              href="https://discord.gg/2uwjsBc5yw"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button className="flex items-center">
+                <img
+                  className="h-4 w-auto mr-2"
+                  src="socials/discord-white.svg"
+                />
+                <span>Join Discord</span>
+              </Button>
+            </a>
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href="https://jup.ag/swap/USDC-MNGO"
+            >
+              <Link>Buy MNGO</Link>
+            </a>
+          </div>
        </div>
+        <div>
+          <p className="mt-16 py-4 text-xs text-white text-opacity-50 uppercase tracking-wide font-normal sm:mt-16">
+            Powered by
+          </p>
+          <div className="flex">
+            <div className="flex justify-center">
+              <a
+                className="hover:opacity-70 transition duration-200 ease-in-out"
+                href="https://solana.com/"
+              >
+                <img className="h-6" src="../logo_solana.svg" alt="Solana" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img
+        ref={sideImage}
+        className="hidden md:block absolute -bottom-20 z-10 right-0 w-full md:w-2/3 lg:w-3/5 h-auto opacity-0 transform translate-y-40"
+        src="../img/trade.png"
+        alt=""
+      />
+      <div className="w-450 h-450 relative">
+        <div className="absolute w-full h-full bottom-4 right-0 bg-mango-yellow mix-blend-screen rounded-full filter blur-3xl opacity-10 animate-blob"></div>
+        <div className="absolute w-full h-full bottom-4 right-0 bg-mango-red mix-blend-screen rounded-full filter blur-2xl opacity-30 animate-blob animation-delay-4000"></div>
+        <div className="absolute w-full h-full bottom-4 right-0 bg-mango-green mix-blend-screen rounded-full filter blur-2xl opacity-20 animate-blob animation-delay-2000"></div>
      </div>
    </div>
  )
--- a/components/NavBarBeta
+++ b/components/NavBarBeta
--- a/components/NavBarBeta.tsx
+++ b/components/NavBarBeta.tsx
--- a/pages/index
+++ b/pages/index
@ -0,0 +1,23 @@
+import NavBarBeta from '../components/NavBarBeta'
+import HeroSectionHome from '../components/HeroSectionHome'
+import TradeSection from '../components/TradeSection'
+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="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
+      <NavBarBeta />
+      <HeroSectionHome />
+      <TradeSection />
+      <LendSection />
+      <CommunitySection />
+      <FooterSection />
+      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
+    </div>
+  )
+}
+
+export default Index
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,21 +1,14 @@
 import NavBarBeta from '../components/NavBarBeta'
 import HeroSectionHome from '../components/HeroSectionHome'
-import TradeSection from '../components/TradeSection'
-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={`radial-gradient-bg text-th-fgd-1 transition-all h-screen overflow-hidden`}
+    >
      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
      <NavBarBeta />
      <HeroSectionHome />
-      <TradeSection />
-      <LendSection />
-      <CommunitySection />
-      <FooterSection />
-      <div className="w-screen h-2 bg-gradient-to-r from-mango-red via-mango-yellow to-mango-green"></div>
    </div>
  )
 }
--- a/public/img/trade.png
+++ b/public/img/trade.png
--- a/public/socials/discord-white.svg
+++ b/public/socials/discord-white.svg
@ -0,0 +1,3 @@
+<svg width="28" height="20" viewBox="0 0 28 20" 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="#fff"/>
+</svg>
--- a/styles/index.css
+++ b/styles/index.css
@ -57,3 +57,8 @@
    animation-delay: 4s;
  }
 }
+
+.radial-gradient-bg {
+  background-image: radial-gradient(at 300% 100%, #5b48ad 0, transparent 75%);
+  @apply bg-th-bkg-1;
+}