add v4 product images

2023-03-01 13:48:30 +11:00 · 2023-03-01 13:48:30 +11:00 · 9b59e71dbb
parent 9bd727c431
commit 9b59e71dbb
15 changed files with 188 additions and 136 deletions
--- a/components/dao/DaoPage.tsx
+++ b/components/dao/DaoPage.tsx
@ -7,6 +7,7 @@ import {
 import { TFunction, useTranslation } from 'next-i18next'
 import { LinkButton } from '../shared/Button'
 import ChildPageTopSection from '../shared/ChildPageTopSection'
+import ColorBlur from '../shared/ColorBlur'
 import HeadingTagline from '../shared/HeadingTagline'
 import IconWithText from '../shared/IconWithText'
 import InlineImageWithText from '../shared/InlineImageWithText'
@ -131,6 +132,11 @@ const DaoPage = () => {
            title={t('dao:fees-accrue')}
          />
        </div>
+        <ColorBlur
+          className="top-0 left-0 opacity-10"
+          height="360px"
+          width="50%"
+        />
      </SectionWrapper>
      <SectionWrapper noPaddingX>
        <h2 className="mb-8 md:mb-16 page-x-padding">
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@ -1,110 +1,128 @@
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 import { ReactNode } from 'react'
+import ColorBlur from '../shared/ColorBlur'

 const Footer = () => {
  const { t } = useTranslation(['footer', 'navigation'])
  return (
-    <div className="lg:px-20 lg:pt-10 pb-4 px-6 pt-8 bg-th-bkg-1 z-20 relative">
-      <div className="flex flex-col-reverse lg:flex-row">
-        <div className="w-full lg:w-1/4 flex flex-col items-center lg:items-start">
-          <Link href="/" shallow>
-            <div className="flex flex-shrink-0 cursor-pointer items-center">
-              <img
-                className={`h-8 w-8 flex-shrink-0`}
-                src="/logos/logo-mark.svg"
-                alt="Mango"
-              />
-              <span className="ml-2 font-display text-xl text-th-fgd-1">
-                Mango
-              </span>
+    <div className="relative">
+      <div className="lg:px-20 lg:pt-10 pb-4 px-6 pt-8 bg-th-bkg-1 z-20 relative">
+        <div className="flex flex-col-reverse lg:flex-row">
+          <div className="w-full lg:w-1/4 flex flex-col items-center lg:items-start">
+            <Link href="/" shallow>
+              <div className="flex flex-shrink-0 cursor-pointer items-center">
+                <img
+                  className={`h-8 w-8 flex-shrink-0`}
+                  src="/logos/logo-mark.svg"
+                  alt="Mango"
+                />
+                <span className="ml-2 font-display text-xl text-th-fgd-1">
+                  Mango
+                </span>
+              </div>
+            </Link>
+            <p className="mt-3 mb-4 max-w-[420px] text-sm text-center lg:text-left">
+              {t('footer:footer-mission')}
+            </p>
+            <div className="flex space-x-3">
+              <a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
+                {t('footer:terms-of-service')}
+              </a>
+              <div className="border-r border-th-bkg-4" />
+              <a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
+                {t('footer:privacy-policy')}
+              </a>
            </div>
-          </Link>
-          <p className="mt-3 mb-4 max-w-[420px] text-sm text-center lg:text-left">
-            {t('footer:footer-mission')}
-          </p>
-          <div className="flex space-x-3">
-            <a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
-              {t('footer:terms-of-service')}
-            </a>
-            <div className="border-r border-th-bkg-4" />
-            <a className="text-th-fgd-4 text-sm whitespace-nowrap" href="#">
-              {t('footer:privacy-policy')}
-            </a>
+          </div>
+          <div className="w-full lg:w-3/4 flex flex-col sm:flex-row items-start justify-end sm:space-x-8 mb-8 lg:mb-0 border-b border-th-bkg-3 lg:border-b-0 pb-6 lg:pb-0">
+            <FooterLinkColumn title={t('navigation:about')}>
+              <FooterLink path="/mango-dao" title={t('navigation:mango-dao')} />
+              <FooterLink path="/mngo" title={t('navigation:mngo-token')} />
+              <FooterLink
+                path="#"
+                isExternal
+                title={t('navigation:v4-stats')}
+              />
+              <FooterLink path="/brand" title={t('navigation:brand')} />
+            </FooterLinkColumn>
+            <FooterLinkColumn title={t('navigation:products')}>
+              <FooterLink
+                path="https://trade.mango.markets"
+                isExternal
+                title={t('navigation:mango-v4')}
+              />
+              <FooterLink
+                path="/mobile-app"
+                title={t('navigation:mobile-app')}
+              />
+            </FooterLinkColumn>
+            <FooterLinkColumn title={t('navigation:developers')}>
+              <FooterLink
+                path="https://docs.mango.markets"
+                isExternal
+                title={t('navigation:docs')}
+              />
+              <FooterLink
+                path="https://github.com/blockworks-foundation"
+                isExternal
+                title={t('navigation:github')}
+              />
+              <FooterLink
+                path="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
+                isExternal
+                title={t('navigation:market-maker')}
+              />
+              <FooterLink
+                path="https://github.com/blockworks-foundation"
+                isExternal
+                title={t('navigation:liquidator')}
+              />
+              <FooterLink
+                path="https://github.com/blockworks-foundation"
+                isExternal
+                title={t('navigation:contribute')}
+              />
+            </FooterLinkColumn>
+            <FooterLinkColumn title={t('navigation:community')}>
+              <FooterLink
+                path="https://dao.mango.markets"
+                isExternal
+                title={t('navigation:governance')}
+              />
+              <FooterLink
+                path="https://discord.gg/2uwjsBc5yw"
+                isExternal
+                title={t('navigation:discord')}
+              />
+              <FooterLink
+                path="https://twitter.com/mangomarkets"
+                isExternal
+                title={t('navigation:twitter')}
+              />
+              <FooterLink
+                path="https://forum.mango.markets"
+                isExternal
+                title={t('navigation:forum')}
+              />
+            </FooterLinkColumn>
+            <FooterLinkColumn title={t('navigation:careers')}>
+              <FooterLink
+                path="/careers"
+                title={t('navigation:work-with-us')}
+              />
+            </FooterLinkColumn>
          </div>
        </div>
-        <div className="w-full lg:w-3/4 flex flex-col sm:flex-row items-start justify-end sm:space-x-8 mb-8 lg:mb-0 border-b border-th-bkg-3 lg:border-b-0 pb-6 lg:pb-0">
-          <FooterLinkColumn title={t('navigation:about')}>
-            <FooterLink path="/mango-dao" title={t('navigation:mango-dao')} />
-            <FooterLink path="/mngo" title={t('navigation:mngo-token')} />
-            <FooterLink path="#" isExternal title={t('navigation:v4-stats')} />
-            <FooterLink path="/brand" title={t('navigation:brand')} />
-          </FooterLinkColumn>
-          <FooterLinkColumn title={t('navigation:products')}>
-            <FooterLink
-              path="https://trade.mango.markets"
-              isExternal
-              title={t('navigation:mango-v4')}
-            />
-            <FooterLink path="/mobile-app" title={t('navigation:mobile-app')} />
-          </FooterLinkColumn>
-          <FooterLinkColumn title={t('navigation:developers')}>
-            <FooterLink
-              path="https://docs.mango.markets"
-              isExternal
-              title={t('navigation:docs')}
-            />
-            <FooterLink
-              path="https://github.com/blockworks-foundation"
-              isExternal
-              title={t('navigation:github')}
-            />
-            <FooterLink
-              path="https://github.com/blockworks-foundation/mango-v4/tree/dev/ts/client/scripts/mm"
-              isExternal
-              title={t('navigation:market-maker')}
-            />
-            <FooterLink
-              path="https://github.com/blockworks-foundation"
-              isExternal
-              title={t('navigation:liquidator')}
-            />
-            <FooterLink
-              path="https://github.com/blockworks-foundation"
-              isExternal
-              title={t('navigation:contribute')}
-            />
-          </FooterLinkColumn>
-          <FooterLinkColumn title={t('navigation:community')}>
-            <FooterLink
-              path="https://dao.mango.markets"
-              isExternal
-              title={t('navigation:governance')}
-            />
-            <FooterLink
-              path="https://discord.gg/2uwjsBc5yw"
-              isExternal
-              title={t('navigation:discord')}
-            />
-            <FooterLink
-              path="https://twitter.com/mangomarkets"
-              isExternal
-              title={t('navigation:twitter')}
-            />
-            <FooterLink
-              path="https://forum.mango.markets"
-              isExternal
-              title={t('navigation:forum')}
-            />
-          </FooterLinkColumn>
-          <FooterLinkColumn title={t('navigation:careers')}>
-            <FooterLink path="/careers" title={t('navigation:work-with-us')} />
-          </FooterLinkColumn>
-        </div>
+        <p className="flex justify-center mt-3 lg:mt-6 font-mono text-xs text-th-fgd-4">
+          {t('footer:copyright')}
+        </p>
      </div>
-      <p className="flex justify-center mt-3 lg:mt-6 font-mono text-xs text-th-fgd-4">
-        {t('footer:copyright')}
-      </p>
+      <ColorBlur
+        className="bg-th-down bottom-0 right-0 opacity-10"
+        height="300px"
+        width="80%"
+      />
    </div>
  )
 }
--- a/components/home/HomePage.tsx
+++ b/components/home/HomePage.tsx
@ -6,6 +6,7 @@ import {
  DevicePhoneMobileIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
+import { useTheme } from 'next-themes'
 import BotOne from '../icons/BotOne'
 import BotThree from '../icons/BotThree'
 import BotTwo from '../icons/BotTwo'
@ -18,7 +19,6 @@ import InlineImageWithText from '../shared/InlineImageWithText'
 import SectionWrapper from '../shared/SectionWrapper'
 import Steps from '../shared/Steps'
 import HomeTopSection from './HomeTopSection'
-import Testimonials from './Testimonials'

 const STEPS = [
  {
@ -45,6 +45,7 @@ const STEPS = [

 const HomePage = () => {
  const { t } = useTranslation(['common', 'home'])
+  const { theme } = useTheme()
  return (
    <>
      <HomeTopSection />
@ -86,14 +87,18 @@ const HomePage = () => {
      </SectionWrapper>
      <SectionWrapper>
        <div className="grid grid-cols-12 gap-6 md:gap-8">
-          <div className="col-span-4 md:col-span-7 h-96 flex justify-center relative">
+          <div className="hidden md:col-span-6 h-96 md:flex justify-center relative">
            <img
-              className="absolute z-10 w-full h-auto max-w-[440px]"
-              src="/images/swap-mobile.png"
+              className="absolute z-10 w-auto h-auto md:h-[480px] lg:h-[640px]"
+              src={
+                theme === 'Light'
+                  ? '/images/@1x-swap-light.png'
+                  : '/images/@1x-swap-dark.png'
+              }
              alt=""
            />
          </div>
-          <div className="col-span-8 md:col-span-5">
+          <div className="col-span-12 md:col-span-6">
            <h2 className="mb-4">{t('home:swap-heading')}</h2>
            <p className="intro-p mb-8">{t('home:swap-desc')}</p>
            <h3 className="mb-3">{t('home:swap-highlight-1-heading')}</h3>
@ -108,12 +113,12 @@ const HomePage = () => {
          </div>
        </div>
        <ColorBlur
-          className="animate-blob bg-th-down -top-20 left-0 opacity-20"
+          className="animate-blob -top-20 left-0 opacity-10"
          height="200px"
          width="50%"
        />
        <ColorBlur
-          className="animate-blob -bottom-20 right-0 opacity-10"
+          className="animate-blob bg-th-down -bottom-20 right-0 opacity-10"
          height="200px"
          width="66%"
        />
@ -185,6 +190,11 @@ const HomePage = () => {
            title={t('home:build-your-own')}
          />
        </div>
+        <ColorBlur
+          className="animate-blob top-0 left-0 opacity-10"
+          height="300px"
+          width="75%"
+        />
      </SectionWrapper>
      <SectionWrapper noPaddingX>
        <div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-12">
@ -197,7 +207,8 @@ const HomePage = () => {
        </div>
        <Steps steps={STEPS} />
      </SectionWrapper>
-      <SectionWrapper>
+      {/* add the below when we have some textimonials */}
+      {/* <SectionWrapper>
        <div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row sm:items-end mb-12 md:mb-16">
          <div className="col-span-12 order-2 sm:order-1 sm:col-span-6">
            <h2>{t('home:crypto-loves-mango')}</h2>
@ -207,7 +218,7 @@ const HomePage = () => {
          </div>
        </div>
        <Testimonials />
-      </SectionWrapper>
+      </SectionWrapper> */}
    </>
  )
 }
--- a/components/home/HomeTopSection.tsx
+++ b/components/home/HomeTopSection.tsx
@ -4,9 +4,11 @@ import { useTranslation } from 'next-i18next'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import SectionWrapper from '../shared/SectionWrapper'
 import ColorBlur from '../shared/ColorBlur'
+import { useTheme } from 'next-themes'

 const HomeTopSection = () => {
  const { t } = useTranslation(['common', 'home'])
+  const { theme } = useTheme()
  // const sideImage = useRef(null)
  // const tl = gsap.timeline()

@ -21,29 +23,41 @@ const HomeTopSection = () => {

  return (
    <SectionWrapper>
-      <div className="w-full md:w-1/2 lg:w-2/5">
-        <h1 className="mb-6">{t('home:long-short-everything')}</h1>
-        <CheckBullet>{t('home:bullet-1')}</CheckBullet>
-        <CheckBullet showNewBadge>{t('home:bullet-2')}</CheckBullet>
-        <CheckBullet>{t('home:bullet-3')}</CheckBullet>
-        <CheckBullet>{t('home:bullet-4')}</CheckBullet>
-        {/* <CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
-        <div className="mt-8">
-          <a
-            href="https://trade.mango.markets"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Button size="large">{t('trade-now')}</Button>
-          </a>
+      <div className="grid grid-cols-12">
+        <div className="col-span-12 lg:col-span-5">
+          <h1 className="mb-6">{t('home:long-short-everything')}</h1>
+          <CheckBullet>{t('home:bullet-1')}</CheckBullet>
+          <CheckBullet showNewBadge>{t('home:bullet-2')}</CheckBullet>
+          <CheckBullet>{t('home:bullet-3')}</CheckBullet>
+          <CheckBullet>{t('home:bullet-4')}</CheckBullet>
+          {/* <CheckBullet showNewBadge>{t('home:bullet-5')}</CheckBullet> */}
+          <div className="mt-8">
+            <a
+              href="https://trade.mango.markets"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button size="large">{t('trade-now')}</Button>
+            </a>
+          </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"
+        <div className="col-span-12 lg:col-span-7 relative h-48 sm:h-56 md:h-80 lg:h-full">
+          <img
+            className="w-full mt-10 lg:mt-0 absolute h-auto -bottom-50 lg:-right-40 z-10 lg:top-1/2 lg:transform lg:-translate-y-1/2"
+            src={
+              theme === 'Light'
+                ? '/images/@1x-home-hero-desktop-light.png'
+                : '/images/@1x-home-hero-desktop-dark.png'
+            }
+            alt=""
+          />
+        </div>
+        {/* <img
+        className="w-auto absolute h-1/2 left-0 z-10 -bottom-4"
+        src="/images/@1x-home-hero-mobile-dark.png"
        alt=""
      /> */}
+      </div>
      <ColorBlur
        className="right-0 top-40 animate-blob"
        height="100%"
--- a/components/mngo/Distribution.tsx
+++ b/components/mngo/Distribution.tsx
@ -2,8 +2,6 @@ import { useTranslation } from 'next-i18next'
 import { useTheme } from 'next-themes'
 import { FunctionComponent, useState } from 'react'
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts'
-import ColorBlur from '../shared/ColorBlur'
-// import { COLORS } from '../../styles/colors'
 import SectionWrapper from '../shared/SectionWrapper'

 const CHART_DATA = [
@ -99,11 +97,6 @@ const Distribution: FunctionComponent = () => {
          </ResponsiveContainer>
        </div>
      </div>
-      <ColorBlur
-        className="bottom-0 right-0 opacity-20"
-        height="360px"
-        width="50%"
-      />
    </SectionWrapper>
  )
 }
--- a/components/mngo/MngoPage.tsx
+++ b/components/mngo/MngoPage.tsx
@ -6,6 +6,7 @@ import {
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import ChildPageTopSection from '../shared/ChildPageTopSection'
+import ColorBlur from '../shared/ColorBlur'
 import HeadingTagline from '../shared/HeadingTagline'
 import IconWithText from '../shared/IconWithText'
 import InlineImageWithText from '../shared/InlineImageWithText'
@ -52,6 +53,11 @@ const MngoPage = () => {
            title={t('mngo:dao-controlled-supply')}
          />
        </div>
+        <ColorBlur
+          className="bottom-0 left-0 opacity-10"
+          height="360px"
+          width="50%"
+        />
      </SectionWrapper>
      <Distribution />
      <SectionWrapper>
--- a/components/shared/SectionWrapper.tsx
+++ b/components/shared/SectionWrapper.tsx
@ -15,7 +15,7 @@ const SectionWrapper = ({
    <div
      className={`bg-th-bkg-1 ${
        noPaddingX ? '' : 'page-x-padding'
-      } py-16 md:py-24 relative overflow-hidden ${className} ${
+      } py-16 lg:py-24 relative overflow-hidden ${className} ${
        theme === 'Light' ? 'border-b border-th-bkg-3' : ''
      }`}
    >
--- a/components/shared/Steps.tsx
+++ b/components/shared/Steps.tsx
@ -94,7 +94,11 @@ const StepItem = ({
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
-        <ColorBlur className="left-0 top-0" height="280px" width="66%" />
+        <ColorBlur
+          className="left-0 top-0 bg-th-down"
+          height="280px"
+          width="66%"
+        />
      </Transition>
    </div>
  )
--- a/public/images/@1x-home-hero-desktop-dark.png
+++ b/public/images/@1x-home-hero-desktop-dark.png
--- a/public/images/@1x-home-hero-desktop-light.png
+++ b/public/images/@1x-home-hero-desktop-light.png
--- a/public/images/@1x-swap-dark.png
+++ b/public/images/@1x-swap-dark.png
--- a/public/images/@1x-swap-light.png
+++ b/public/images/@1x-swap-light.png
--- a/public/images/swap-mobile.png
+++ b/public/images/swap-mobile.png
--- a/styles/index.css
+++ b/styles/index.css
@ -179,7 +179,7 @@ svg {
 }

 .page-x-padding {
-  @apply lg:px-20 px-6;
+  @apply px-6 md:px-12 lg:px-20;
 }

 /* Type */
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo