Feat: update landing page

docusaurus.config.js

@@ -4,7 +4,7 @@ import math from 'remark-math'
 import katex from 'rehype-katex'
 
 export default {
-  title: 'yearn.fi',
+  title: 'Yearn Docs',
   tagline: 'DeFi made simple',
   url: 'https://docs.yearn.fi',
   baseUrl: '/',

src/components/HomepageBanners.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import styles from '../pages/index.module.css'
+import Link from '@docusaurus/Link'
+
+export default function HomepageBanners(props) {
+  return (
+    <>
+      {props.columns.map((column, index) => (
+        <div className={styles.banner} key={index}>
+          {column.rows.map((row) => (
+            <Link
+              style={{ textDecoration: 'none', color: 'white', height: '100%' }}
+              to={row.to}
+            >
+              <div
+                className={styles.card}
+                style={{ backgroundImage: `url(${row.bannerImage})` }}
+              >
+                <div className={styles.text}>
+                  <h2>{row.title}</h2>
+                  <p>{row.description}</p>
+                </div>
+                <h1 className={styles.title}>{column.title}</h1>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ))}
+    </>
+  )
+}

src/homepageFeatures.js

@@ -1,42 +1,35 @@
 export default [
   {
-    title: 'Learn',
+    title: 'User Docs',
     rows: [
       {
-        title: 'Introduction',
-        description: 'Getting started: What is Yearn?',
+        title: 'Start your Yearn journey.',
+        description: 'Everything you need to use Yearn',
         to: './getting-started/intro',
-      },
-      {
-        title: 'Vaults & Strategies',
-        description: 'An overview on how Yearn vaults and strategies work.',
-        to: './developers/v3/overview',
-      },
-      {
-        title: 'Risk Scores',
-        description: 'Learn about the Yearn risk framework for assessing DeFi yield strategies.',
-        to: './resources/risks/risk-score',
+        bannerImage: '/img/landing-page/alice-banner-2.png',
       },
     ],
   },
   {
-    title: 'Build',
+    title: 'Dev Docs',
     rows: [
       {
-        title: 'Vaults',
-        description: 'Get started building V3 vaults.',
-        to: './developers/v3/vault_management',
-      },
-      {
-        title: 'Strategies',
-        description: 'Get started building V3 strategies.',
-        to: './developers/v3/strategy_writing_guide',
+        title: 'Build the future of finance.',
+        description: 'Everything you need to build on Yearn',
+        to: './developers/building-on-yearn',
+        bannerImage: '/img/landing-page/pixie-banner-grad-flower.png',
       },
+    ],
+  },
+  {
+    title: 'DAO Docs',
+    rows: [
       {
-        title: 'veYFI',
-        description: 'Participate in Yearn governance and learn how boosted yield works.',
-        to: './getting-started/products/veyfi',
+        title: 'Tame the decentralized beast.',
+        description: 'Everything you need to govern Yearn',
+        to: './contributing/contribute',
+        bannerImage: '/img/landing-page/witchy-banner-grad2.png',
       },
     ],
-  }
+  },
 ]

src/pages/index.js

@@ -2,20 +2,20 @@ import React from 'react'
 import Layout from '@theme/Layout'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import styles from './index.module.css'
-import HomepageFeatures from '../components/HomepageFeatures'
+import HomepageBanners from '../components/HomepageBanners'
 import homepageFeatures from '../homepageFeatures'
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext()
   return (
     <Layout
-      title={`${siteConfig.title} Docs`}
+      // title={`${siteConfig.title} Docs`}
       description="Yearn Finance is a suite of products in Decentralized Finance (DeFi) that provides lending aggregation, yield generation, and insurance on the Ethereum blockchain."
     >
       <main>
         <div className={styles.container}>
           <div className={styles.row}>
-            <HomepageFeatures columns={homepageFeatures} />
+            <HomepageBanners columns={homepageFeatures} />
           </div>
         </div>
       </main>

src/pages/index.module.css

@@ -5,97 +5,115 @@
  * and scoped locally.
  */
 
-
 .container {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  height: 100%;
+  height: calc(100vh - var(--ifm-navbar-height));
   padding: 5px;
 }
 
+.banner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1.3rem;
+}
+
 .card {
+  --title-bottom: 50px;
   font-family: 'Roboto Slab', 'Roboto', serif;
   display: flex;
-  min-width: 500px;
+  min-width: 300px;
   min-height: 210px;
-  padding: 1.3rem;
-  margin: 1rem;
   flex-direction: column;
-  justify-content: top;
+  justify-content: space-between;
   cursor: pointer;
   border: 0px solid;
   border-radius: 0px;
-  background-color: #121213;
-  color: #888;
+  background-size: cover;
+  background-position: center;
+  color: white;
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
 .card h2 {
   font-family: 'Roboto Slab', 'Roboto', serif;
   font-weight: 400;
   font-size: 2rem;
   color: white;
 }
-.card:hover {
-  color: #9BBCFD;
-  background-color: #0657F9;
-}
-.card:hover h2 {
-  color: white;
-}
 .card:before {
-  content: "\27F6";
-  font-size: 1.45rem;
+  content: '\27F6';
+  font-size: 2rem;
+  font-weight: 600;
   color: white;
-  opacity:0;
-  height:0;
-  width:0;
-  position: relative;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  position: absolute;
   display: block;
-  left:82%;
+  right: 50%;
+  bottom: var(--title-bottom);
+  z-index: 1;
+}
+html[data-theme='dark'] .card:before {
+  color: black;
+}
+.card:hover .title {
+  --title-bottom: 93%;
 }
 .card:hover:before {
-  opacity:1;
-  left:94%;
+  opacity: 1;
+  right: 20%;
   transition: 0.5s ease;
 }
+.card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0);
+  transition: background-color 0.5s ease;
+}
+.card:hover::after {
+  background: rgba(0, 123, 255, 0.5);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.text {
+  padding: 1.3rem;
+  margin: 0 1rem;
+  z-index: 3;
+}
 
 .row {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 16px;
   justify-content: center;
   margin: 0 auto;
   padding: 1rem 0;
-  max-width: 960px;
+  height: 100%;
 }
 
 .title {
   font-family: 'Roboto Slab', 'Roboto', serif;
   font-weight: 900;
   position: relative;
-  text-align:left;
-  padding-left:1rem;
-  font-size: 50px;
-  color: white;
-}
-
-html[data-theme="light"] .card {
-  background-color:#ececec;
-  color:#888;
-}
-html[data-theme="light"] .card h2 {
-  color:#000;
-}
-html[data-theme="light"] .card:hover {
-  color: #9BBCFD;
-  background-color: #0657F9;
-}
-html[data-theme="light"] .card:hover h2 {
+  text-align: left;
+  padding-left: 1rem;
+  font-size: 70px;
   color: white;
+  left: -25px;
+  z-index: 3;
 }
 
-html[data-theme="light"] .title {
-  color:inherit;
+html[data-theme='dark'] .title {
+  color: var(--ifm-background-color);
 }
 
 @media screen and (max-width: 1082px) {
@@ -107,4 +125,4 @@ html[data-theme="light"] .title {
     min-width: 88%;
     margin: 0.8rem;
   }
-}
+}