Feat: update landing page

docs/developers/building-on-yearn.md

@@ -1,6 +1,6 @@
 # Building on Yearn
 
-![image](/img/intro/pixie-wide.jpg)
+![image](/img/landing-page/pixie-wide.jpg)
 
 Welcome! This is the spot to be for all things related to building products on, for, and with Yearn. If you are looking for more general information about Yearn and it's products, check out the [Getting Started](../getting-started/intro) section of the docs. If you are looking to build, read on!
 

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;
   }
-}
+}