Merge pull request #31 from blockworks-foundation/landing-page

Landing page
blockworks-foundation · Aug 13, 2024 · 4a75487 · 4a75487
2 parents 1f9aee8 + dea9b81
commit 4a75487
Show file tree

Hide file tree

Showing 35 changed files with 1,201 additions and 326 deletions.
diff --git a/components/HomePage.tsx → components/DashboardPage.tsx b/components/HomePage.tsx → components/DashboardPage.tsx
@@ -10,7 +10,7 @@ import { BOOST_ACCOUNT_PREFIX } from 'utils/constants'
 
 const set = mangoStore.getState().set
 
-const HomePage = () => {
+const DashboardPage = () => {
   const activeTab = mangoStore((s) => s.activeTab)
   const selectedToken = mangoStore((s) => s.selectedToken)
   const { positions } = usePositions()
@@ -60,7 +60,7 @@ const HomePage = () => {
   )
 }
 
-export default HomePage
+export default DashboardPage
 
 const TabContent = ({
   activeTab,

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -2,59 +2,99 @@ import Link from 'next/link'
 import DiscordIcon from './icons/DiscordIcon'
 import { XIcon } from './icons/XIcon'
 import MangoMade from './icons/MangoMade'
+import Image from 'next/image'
+import { ZigZagRepeatLine } from './Stake'
 
 const Footer = () => {
   return (
-    <>
-      <div className="my-6 flex items-center justify-between rounded-xl border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
-        <a
-          className="text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-2"
-          href="https://mango.markets"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <MangoMade className="h-4 w-auto" />
-        </a>
-        <div className="flex items-center space-x-4">
-          <a
-            className="text-th-fgd-1 md:hover:text-th-fgd-3"
-            href="https://discord.gg/2uwjsBc5yw"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <DiscordIcon className="h-5 w-5" />
-          </a>
+    <div className="bg-th-bkg-1">
+      <div className="mx-auto max-w-[1440px]">
+        <div className="grid grid-cols-4 gap-4 p-8">
+          <div className="col-span-4 md:col-span-1">
+            <Link className="mb-3 block focus:outline-none" href="/">
+              <Image
+                src="/logos/yieldfan.png"
+                alt="Logo"
+                height={48}
+                width={48}
+              />
+            </Link>
+            <p className="mb-4 text-th-fgd-4">
+              Multiply your yield on
+              <br />
+              Solana&apos;s best yield farm.
+            </p>
+            <div className="flex items-center space-x-4">
+              <a
+                className="text-th-fgd-1 md:hover:text-th-fgd-3"
+                href="https://discord.gg/2uwjsBc5yw"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <DiscordIcon className="h-5 w-5" />
+              </a>
+              <a
+                className="text-th-fgd-1 md:hover:text-th-fgd-3"
+                href="https://x.com/yieldfan"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <XIcon className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+          <div className="col-span-4 space-y-3 md:col-span-1">
+            <h4>Get started</h4>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/dashboard"
+            >
+              Dashboard
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/stats"
+            >
+              Stats
+            </Link>
+          </div>
+          <div className="col-span-4 space-y-3 md:col-span-1">
+            <h4>Important Info</h4>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/risks"
+            >
+              Risks
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/terms-of-use"
+            >
+              Terms of Use
+            </Link>
+            <Link
+              className="block text-th-fgd-1 md:hover:text-th-fgd-3"
+              href="/privacy-policy"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+        <div className="px-6">
+          <ZigZagRepeatLine />
+        </div>
+        <div className="flex justify-center px-6 py-4">
           <a
-            className="text-th-fgd-1 md:hover:text-th-fgd-3"
-            href="https://x.com/yieldfan"
+            className="text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-2"
+            href="https://mango.markets"
+            rel="noreferrer noopener"
             target="_blank"
-            rel="noopener noreferrer"
           >
-            <XIcon className="h-5 w-5" />
+            <MangoMade className="h-4 w-auto" />
           </a>
         </div>
       </div>
-      <div className="flex items-center justify-center space-x-4">
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/risks"
-        >
-          Risks
-        </Link>
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/terms-of-use"
-        >
-          Terms of Use
-        </Link>
-        <Link
-          className="font-bold text-th-fgd-1 md:hover:text-th-fgd-3"
-          href="/privacy-policy"
-        >
-          Privacy Policy
-        </Link>
-      </div>
-    </>
+    </div>
   )
 }
 

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -3,11 +3,7 @@ import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import TopBar from './TopBar'
 import useLocalStorageState from '../hooks/useLocalStorageState'
-import {
-  ACCEPT_TERMS_KEY,
-  SECONDS,
-  YIELD_FANS_INTRO_KEY,
-} from '../utils/constants'
+import { ACCEPT_TERMS_KEY, SECONDS } from '../utils/constants'
 import useInterval from './shared/useInterval'
 import { Transition } from '@headlessui/react'
 import { useTranslation } from 'next-i18next'
@@ -17,9 +13,10 @@ import Footer from './Footer'
 import useIpAddress from 'hooks/useIpAddress'
 import RestrictedCountryModal from './shared/RestrictedCountryModal'
 import { useRouter } from 'next/router'
-import Modal from './shared/Modal'
-import Button from './shared/Button'
 import Image from 'next/image'
+import ThemeToggle from './ThemeToggle'
+import ButtonLink from './shared/ButtonLink'
+import Link from 'next/link'
 
 export const NON_RESTRICTED_JURISDICTION_KEY = 'non-restricted-jurisdiction-0.1'
 
@@ -29,10 +26,14 @@ const termsLastUpdated = 1679441610978
 const Layout = ({ children }: { children: ReactNode }) => {
   const { ipCountry, loadingIpCountry } = useIpAddress()
   const themeData = mangoStore((s) => s.themeData)
+  const { asPath } = useRouter()
+
+  const isDashboardLayout = useMemo(() => {
+    return asPath === '/dashboard' || asPath === '/stats'
+  }, [asPath])
 
   const [mounted, setMounted] = useState(false)
   useEffect(() => setMounted(true), [])
-  if (!mounted) return null
 
   return (
     <main
@@ -42,14 +43,37 @@ const Layout = ({ children }: { children: ReactNode }) => {
       <div className={`relative min-h-screen`}>
         {/* <div className="border-th-primary-4 from-th-primary-3 to-th-primary-2 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" /> */}
         <div className="relative z-10">
-          <TopBar />
-          <div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
-            {children}
-            <Footer />
-          </div>
+          {isDashboardLayout ? (
+            <>
+              <TopBar />
+              <div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
+                {children}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="mx-auto flex max-w-[1440px] items-center justify-between px-4 py-3 md:px-6 md:py-4">
+                <Link href="/" shallow={true}>
+                  <Image
+                    src="/logos/yieldfan.png"
+                    alt="Logo"
+                    height={48}
+                    width={48}
+                  />
+                </Link>
+                <div className="flex items-center space-x-4">
+                  <ThemeToggle />
+                  <ButtonLink path="/dashboard" size="small">
+                    Launch App
+                  </ButtonLink>
+                </div>
+              </div>
+              {children}
+            </>
+          )}
+          <Footer />
           <DeployRefreshManager />
-          <TermsOfUse />
-          <YieldFansIntro />
+          {isDashboardLayout && mounted ? <TermsOfUse /> : null}
           <RestrictedCountryCheck
             ipCountry={ipCountry}
             loadingIpCountry={loadingIpCountry}
@@ -68,17 +92,17 @@ const TermsOfUse = () => {
     ACCEPT_TERMS_KEY,
     '',
   )
-  const [yieldFansIntro] = useLocalStorageState(YIELD_FANS_INTRO_KEY, false)
+  // const [yieldFansIntro] = useLocalStorageState(YIELD_FANS_INTRO_KEY, false)
 
   const showTermsOfUse = useMemo(() => {
     return (
       (!acceptTerms || acceptTerms < termsLastUpdated) &&
       asPath !== '/risks' &&
       asPath !== '/terms-of-use' &&
-      asPath !== '/privacy-policy' &&
-      yieldFansIntro
+      asPath !== '/privacy-policy'
+      // && yieldFansIntro
     )
-  }, [acceptTerms, asPath, yieldFansIntro])
+  }, [acceptTerms, asPath])
 
   const handleClose = () => {
     setAcceptTerms(Date.now())
@@ -93,37 +117,41 @@ const TermsOfUse = () => {
   )
 }
 
-const YieldFansIntro = () => {
-  const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
-    YIELD_FANS_INTRO_KEY,
-    false,
-  )
-
-  return !yieldFansIntro ? (
-    <Modal isOpen={!yieldFansIntro} onClose={() => setYieldFansIntro(true)}>
-      <div className="flex flex-col items-center">
-        <Image
-          className="mb-3"
-          src="/logos/yieldfan.png"
-          alt="Logo"
-          height={48}
-          width={48}
-        />
-        <h2 className="mb-1 text-center">New name. Same APYs.</h2>
-        <p className="text-center">
-          Are you a fan of epic yields? Boost! is now yield.fan
-        </p>
-        <Button
-          className="mt-6"
-          onClick={() => setYieldFansIntro(true)}
-          size="medium"
-        >
-          Let&apos;s Go
-        </Button>
-      </div>
-    </Modal>
-  ) : null
-}
+// const YieldFansIntro = () => {
+//   const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
+//     YIELD_FANS_INTRO_KEY,
+//     false,
+//   )
+
+//   const [mounted, setMounted] = useState(false)
+//   useEffect(() => setMounted(true), [])
+//   if (!mounted) return null
+
+//   return !yieldFansIntro ? (
+//     <Modal isOpen={!yieldFansIntro} onClose={() => setYieldFansIntro(true)}>
+//       <div className="flex flex-col items-center">
+//         <Image
+//           className="mb-3"
+//           src="/logos/yieldfan.png"
+//           alt="Logo"
+//           height={48}
+//           width={48}
+//         />
+//         <h2 className="mb-1 text-center">New name. Same APYs.</h2>
+//         <p className="text-center">
+//           Are you a fan of epic yields? Boost! is now yield.fan
+//         </p>
+//         <Button
+//           className="mt-6"
+//           onClick={() => setYieldFansIntro(true)}
+//           size="medium"
+//         >
+//           Let&apos;s Go
+//         </Button>
+//       </div>
+//     </Modal>
+//   ) : null
+// }
 
 function DeployRefreshManager(): JSX.Element | null {
   const { t } = useTranslation('common')

diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
 
 type Values = string | number
 
@@ -52,12 +53,25 @@ const NavTabs = <T extends Values>({
 
 export default NavTabs
 
-const ZigZagLine = ({ className }: { className?: string }) => {
+export const ZigZagLine = ({
+  className,
+  reverse,
+}: {
+  className?: string
+  reverse?: boolean
+}) => {
   const { theme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
   return (
     <div
       className={`h-2 ${
         theme === 'Light'
+          ? reverse
+            ? `bg-[url('/images/zigzag-dark.svg')]`
+            : `bg-[url('/images/zigzag.svg')]`
+          : reverse
           ? `bg-[url('/images/zigzag.svg')]`
           : `bg-[url('/images/zigzag-dark.svg')]`
       } bg-contain  bg-no-repeat ${className}`}