feat: homepage changes (in progress)

ERC4626-Alliance · Feb 7, 2023 · 7ea32d1 · 7ea32d1
1 parent b4c2e0d
commit 7ea32d1
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 138 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -11,41 +11,25 @@ export default function About() {
           <div className="md:col-span-5 md:text-left" data-aos="fade-right">
             <AtomTitle>WHAT IS ERC-4626?</AtomTitle>
             <p className="mb-4 text-lg leading-relaxed text-slate-700">
-              <code className="mr-1  select-none rounded-lg bg-pink-100 px-2 py-1">
-                ERC-4626
-              </code>
-              is a tokenized vault standard. Vaults are smart contracts that
-              take in token deposits and do something with those tokens to
-              provide token rewards to the depositor.
+              <code className="mr-1  select-none rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
+              is a tokenized vault standard. Vaults are smart contracts that take in token deposits and do something with those tokens to provide token rewards to the depositor.
             </p>
             <p className="mb-4 text-lg leading-relaxed text-slate-700">
-              Standardizing vault implementations makes it easier for
-              applications, plugins, and tools to integrate with vaults.
+              Standardizing vault implementations makes it easier for applications, plugins, and tools to integrate with vaults.
             </p>
             <p className="mb-4 text-lg leading-relaxed text-slate-700">
-              Rather than building many custom adapters for each vault
-              implementation, applications can easily build on top of any vault
-              following the
-              <code className="mx-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">
-                ERC-4626
-              </code>
+              Rather than building many custom adapters for each vault implementation, applications can easily build on top of any vault following the
+              <code className="mx-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
               standard.
             </p>
             <p className="text-lg leading-relaxed text-slate-700">
-              <code className="mr-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">
-                ERC-4626
-              </code>
+              <code className="mr-1 select-none whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-4626</code>
               is to vaults what
-              <code className="mx-1 select-none  whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">
-                ERC-721
-              </code>
+              <code className="mx-1 select-none  whitespace-nowrap rounded-lg bg-pink-100 px-2 py-1">ERC-721</code>
               is to NFTs.
             </p>
           </div>
-          <div
-            className="relative mt-12 h-auto w-full object-scale-down md:col-span-7"
-            data-aos="fade-left"
-          >
+          <div className="relative mt-12 h-auto w-full object-scale-down md:col-span-7" data-aos="fade-left">
             <Image
               priority={false}
               unoptimized={true}
@@ -63,10 +47,7 @@ export default function About() {
         <div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 " />
         <Container>
           <div className="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-20 lg:py-32">
-            <div
-              className="relative mx-auto w-full pb-10 md:col-span-7 md:row-auto md:mx-0 md:mt-0 md:max-w-none md:pb-0"
-              data-aos="fade-right"
-            >
+            <div className="relative mx-auto w-full pb-10 md:col-span-7 md:row-auto md:mx-0 md:mt-0 md:max-w-none md:pb-0" data-aos="fade-right">
               <Image
                 priority={false}
                 width={823}
@@ -78,27 +59,15 @@ export default function About() {
                 unoptimized={true}
               />
             </div>
-            <div
-              className="col-span-full row-span-1 md:col-span-5 md:row-auto md:mx-auto md:text-left"
-              data-aos="fade-left"
-            >
+            <div className="col-span-full row-span-1 md:col-span-5 md:row-auto md:mx-auto md:text-left" data-aos="fade-left">
               <AtomTitle>WHY ERC-4626?</AtomTitle>
               <p className="mb-4 text-lg leading-relaxed text-slate-700">
-                Tokenized Vaults have a lack of standardization leading to
-                diverse implementation details.
+                A lack of standardization for tokenized vaults makes integration and composability difficult. Lending markets, aggregators, and other interest-bearing tokens all
+                might use a vault standard – without a standard implementation, each protocol needs to implement their own adapter, leading to more errors, more attack vectors, and
+                wasted development resources
               </p>
               <p className="mb-4 text-lg leading-relaxed text-slate-700">
-                Some various examples include lending markets, aggregators, and
-                intrinsically interest bearing tokens. This makes integration
-                difficult at the aggregator or plugin layer for protocols which
-                need to conform to many standards, and forces each protocol to
-                implement their own adapters which are error-prone and waste
-                development resources.
-              </p>
-              <p className="mb-4 text-lg leading-relaxed text-slate-700">
-                A standard for tokenized Vaults will lower the integration
-                effort for yield-bearing vaults, while creating more consistent
-                and robust implementation patterns.
+                A standard for tokenized vaults will lower the integration effort for yield-bearing vaults, while creating more consistent and robust implementation patterns.
               </p>
             </div>
           </div>

diff --git a/src/components/Adopters.tsx b/src/components/Adopters.tsx
@@ -166,9 +166,28 @@ export default function Adopters() {
         <div className="mx-auto grid grid-cols-1 place-content-evenly items-center xl:grid-cols-3 2xl:grid-cols-2">
           <div className="col-span-1 px-8 text-left md:mx-auto md:max-w-2xl md:px-0 lg:pr-16 xl:max-w-none xl:text-left">
             <AtomTitle alignText="left">
-              ERC-4626 <br /> EARLY ADOPTERS
+              ERC-4626 <br /> Supporters
             </AtomTitle>
-            <p className="text-lg text-pink-600">Test an actual standard implementation</p>
+            <li className="text-lg text-pink-600">Find all ERC 4626 Vaults deployed in our vault database.</li>
+            <li className="text-lg text-pink-600">If you want to submit your own vault please provide details on it here, and we will get it added as soon as possible.</li>
+            <div className="mt-4 flex flex-auto flex-col items-stretch justify-center space-y-4 md:mt-8 md:flex-row md:space-y-0 md:space-x-4">
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://eips.ethereum.org/EIPS/eip-4626"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-pink-700 bg-white px-5 py-3 text-base font-medium text-pink-700 hover:transition-all md:hover:border-transparent md:hover:bg-pink-700 md:hover:text-white md:hover:shadow-lg"
+              >
+                Explore the Vaults
+              </a>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://ethereum-magicians.org/t/eip-4626-yield-bearing-vault-standard/7900"
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-pink-700 bg-white px-5 py-3 text-base font-medium text-pink-700 hover:transition-all md:hover:border-transparent md:hover:bg-pink-700 md:hover:text-white md:hover:shadow-lg"
+              >
+                Submit a Vault
+              </a>
+            </div>
           </div>
 
           <div className="relative col-span-full mt-8 sm:mt-12 lg:col-span-2 lg:mx-auto lg:max-w-4xl xl:mt-0 xl:max-w-none 2xl:col-span-1">

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,8 +1,25 @@
 import Container from "@/components/Container";
-import { animateScroll as scroll, Link } from "react-scroll";
-import { useState } from "react";
+import {animateScroll as scroll, Link as ScrollLink} from "react-scroll";
+import {useState} from "react";
+import Link from "next/link";
+import {classNames} from "../helpers/formatters";
+import {useRouter} from "next/router";
+import {isActive} from "../helpers/utils";
+
+const navigation = [
+  {title: "Home", href: "/"},
+  {section: "adopters", title: "About Us", isScroll: true, href: "/#adopters", offset: -120},
+  {section: "supporters", title: "Supporters", href: "/#adopters", isScroll: true, offset: -120},
+  {title: "Vaults", href: "/vaults"},
+  {title: "Resources", href: "/resources"},
+  {title: "Bounties", href: "/bounties"},
+];
 
 export default function Header() {
+  const router = useRouter();
+
+  const isHome = isActive(router.pathname, "/", true);
+
   const scrollToTop = () => {
     scroll.scrollToTop();
   };
@@ -14,29 +31,16 @@ export default function Header() {
     setHeaderState(!isHeaderExpanded);
   };
 
-  const navigation = [
-    { section: "build", title: "Build", offset: -120 },
-    { section: "resources", title: "Resources", offset: -100 },
-    { section: "adopters", title: "Early Adopters", offset: -70 },
-    { section: "news", title: "News", offset: -70 },
-    { section: "vaultscan", title: "Explore Vaults", offset: -70 },
-    { section: "authors", title: "Authors", offset: -100 },
-  ];
   return (
     <header className="indexHeader md:full w-screen">
       <Container>
         <nav className="relative flex items-center justify-between">
           <div className="flex w-full items-center justify-between md:w-auto">
-            <div
-              className="h-8 w-auto sm:h-10 md:hover:cursor-pointer"
-              onClick={scrollToTop}
-            >
+            {<div className="h-8 w-auto sm:h-10 md:hover:cursor-pointer" onClick={scrollToTop}>
               <h2 className="text-4xl font-black tracking-tight text-gray-900 sm:text-4xl">
-                <span className="-mb-1 block bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent">
-                  ERC-4626
-                </span>
+                <span className="-mb-1 block bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent">ERC-4626 Alliance</span>
               </h2>
-            </div>
+            </div>}
             <div className="-mr-2 flex items-center md:hidden">
               <button
                 type="button"
@@ -45,27 +49,15 @@ export default function Header() {
                 aria-expanded={isHeaderExpanded}
               >
                 <span className="sr-only">Navigate through</span>
-                <svg
-                  className="h-6 w-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth="2"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
+                <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
                 </svg>
               </button>
             </div>
           </div>
-          <nav className="hidden md:ml-10 md:block sm:space-x-4 xl:space-x-10">
-            {navigation.map((link, index) => (
-              <Link
+          <nav className="hidden sm:space-x-4 md:ml-10 md:block xl:space-x-10">
+            {navigation.map((link, index) => (link.isScroll && isHome) ?
+              <ScrollLink
                 to={link.section}
                 key={`nav-desk-${index}`}
                 spy={true}
@@ -75,22 +67,26 @@ export default function Header() {
                 className="cursor-pointer font-medium text-pink-700 decoration-from-font underline-offset-4 hover:text-pink-700 hover:underline whitespace-nowrap"
               >
                 {link.title}
+              </ScrollLink> :
+              <Link key={link.title} href={link.href} passHref shallow aria-current={isActive(router.pathname, link.href) ? "page" : undefined}>
+                <a
+                  className={classNames(
+                    "cursor-pointer whitespace-nowrap font-medium text-pink-700 decoration-from-font underline-offset-4",
+                    isActive(router.pathname, link.href) ? "font-bold underline" : "hover:underline"
+                  )}
+                >
+                  {link.title}
+                </a>
               </Link>
-            ))}
+            )}
           </nav>
         </nav>
-        <div
-          className={`absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition ${
-            isHeaderExpanded ? "" : "hidden"
-          }`}
-        >
+        <div className={`absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition ${isHeaderExpanded ? "" : "hidden"}`}>
           <div className="rounded-lg bg-white shadow-sm ring-1 ring-black ring-opacity-5">
             <div className="flex items-center justify-between px-5 pt-4">
               <div>
                 <h2 className="text-4xl font-black tracking-tight text-gray-900 sm:text-4xl">
-                  <span className="-mb-1 block bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent">
-                    ERC-4626
-                  </span>
+                  <span className="-mb-1 block bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent">ERC-4626</span>
                 </h2>
               </div>
               <div className="-mr-2">
@@ -101,39 +97,31 @@ export default function Header() {
                   aria-expanded={isHeaderExpanded}
                 >
                   <span className="sr-only">Close main menu</span>
-                  <svg
-                    className="h-6 w-6"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth="2"
-                    stroke="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
+                  <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
                   </svg>
                 </button>
               </div>
             </div>
             <nav className="flex w-full flex-col space-y-1 px-2 pt-5 pb-3">
-              {navigation.map((link, index) => (
-                <Link
-                  key={`nav-mob-${index}`}
-                  className="px-3 py-2.5 text-lg font-medium text-pink-700 hover:text-pink-700"
-                  to={link.section}
-                  onClickCapture={expandClicked}
-                  spy={true}
-                  smooth={true}
-                  offset={link.offset}
-                  duration={500}
-                >
-                  {link.title}
-                </Link>
-              ))}
+              {navigation.map((link, index) => (link.isScroll && isHome) ? <ScrollLink
+                    key={`nav-mob-${index}`}
+                    className="px-3 py-2.5 text-lg font-medium text-pink-700 hover:text-pink-700"
+                    to={link.section}
+                    onClickCapture={expandClicked}
+                    spy={true}
+                    smooth={true}
+                    offset={link.offset}
+                    duration={500}
+                  >
+                    {link.title}
+                  </ScrollLink> :
+                  <Link key={`nav-mob-${index}`} href={link.href} passHref shallow aria-current={isActive(router.pathname, link.href) ? "page" : undefined}>
+                    <a className={classNames("px-3 py-2.5 text-lg font-medium text-pink-700", isActive(router.pathname, link.href) ? "font-bold underline" : "hover:underline")}>
+                      {link.title}
+                    </a>
+                  </Link>
+              )}
             </nav>
             <a
               href="https://vaultscan.superform.xyz"
@@ -148,4 +136,4 @@ export default function Header() {
       </Container>
     </header>
   );
-}
+}
diff --git a/src/components/HomeResources.tsx b/src/components/HomeResources.tsx
@@ -0,0 +1,16 @@
+import AtomTitle from "@/components/Atom/Title";
+import Container from "@/components/Container";
+
+export default function HomeResources() {
+  return <div
+    className="bg-gradient-to-t from-pink-50 py-16 text-center"
+    id="authors"
+  >
+    <Container>
+      <AtomTitle alignText="center">ERC-4626 AUTHORS</AtomTitle>
+      <div className="mt-8 flex flex-col items-start space-y-6 text-lg text-slate-700 md:flex-row md:flex-wrap md:items-center lg:justify-center xl:space-y-0">
+        <div className="inline-flex h-full mb-1 md:mt-6 xl:mt-0 md:mb-0">ERC-4626 was authored by:</div>
+      </div>
+    </Container>
+  </div>;
+}
diff --git a/src/helpers/formatters.tsx b/src/helpers/formatters.tsx
@@ -14,14 +14,12 @@ import { FaFileContract } from "react-icons/fa";
  * @return {string} - composed string of classes
  */
 export function classNames(...classes: Array<string | boolean | undefined>) {
-  return classes
-    .filter((item) => {
-      if (typeof item === "boolean" || item === undefined) {
-        return false;
-      }
-      return !["false", "undefined", ""].includes(item as string);
-    })
-    .join(" ");
+  return classes.filter(item => {
+    if (typeof item === "boolean" || item === undefined) {
+      return false;
+    }
+    return !["false", "undefined", ""].includes(item as string);
+  }).join(" ");
 }
 
 /**

diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -0,0 +1 @@
+export const isActive = (pathname: string, href: string, strict: boolean = false) => !strict ? pathname.startsWith(href) : pathname === href;
diff --git a/src/pages/bounties.tsx b/src/pages/bounties.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const isActive = (pathname: string, href: string, strict: boolean = false) => !strict ? pathname.startsWith(href) : pathname === href;