diff --git a/docusaurus.config.js b/docusaurus.config.js
index 69b52e4b39..f0e6c52690 100644
--- a/docusaurus.config.js
+++ b/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: '/',
diff --git a/src/components/HomepageBanners.js b/src/components/HomepageBanners.js
new file mode 100644
index 0000000000..2b4b11f137
--- /dev/null
+++ b/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) => (
+
+ {column.rows.map((row) => (
+
+
+
+
{row.title}
+
{row.description}
+
+
{column.title}
+
+
+ ))}
+
+ ))}
+ >
+ )
+}
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
deleted file mode 100644
index 6a59f9e02e..0000000000
--- a/src/components/HomepageFeatures.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import styles from '../pages/index.module.css'
-import Link from '@docusaurus/Link'
-
-export default function HomepageFeatures(props) {
- return (
- <>
- {props.columns.map((column, index) => (
-
-
{column.title}
-
- {column.rows.map((row) => (
-
-
-
{row.title}
-
{row.description}
-
-
- ))}
-
-
- ))}
- >
- )
- }
\ No newline at end of file
diff --git a/src/homepageFeatures.js b/src/homepageFeatures.js
index ac94bde294..6757106321 100644
--- a/src/homepageFeatures.js
+++ b/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',
},
],
- }
+ },
]
diff --git a/src/pages/index.js b/src/pages/index.js
index 8ea58938c8..b2045581c9 100644
--- a/src/pages/index.js
+++ b/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 (
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 13e6468177..c744cb3120 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -5,29 +5,38 @@
* 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;
@@ -35,67 +44,76 @@
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;
}
-}
\ No newline at end of file
+}
diff --git a/static/img/landing-page/alice-banner-2.png b/static/img/landing-page/alice-banner-2.png
new file mode 100644
index 0000000000..4a2cfc7faf
Binary files /dev/null and b/static/img/landing-page/alice-banner-2.png differ
diff --git a/static/img/landing-page/alice-banner-2.png:Zone.Identifier b/static/img/landing-page/alice-banner-2.png:Zone.Identifier
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/static/img/landing-page/pixie-banner-grad-flower.png b/static/img/landing-page/pixie-banner-grad-flower.png
new file mode 100644
index 0000000000..9a0b7124d0
Binary files /dev/null and b/static/img/landing-page/pixie-banner-grad-flower.png differ
diff --git a/static/img/landing-page/pixie-banner-grad-flower.png:Zone.Identifier b/static/img/landing-page/pixie-banner-grad-flower.png:Zone.Identifier
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/static/img/landing-page/witchy-banner-grad2.png b/static/img/landing-page/witchy-banner-grad2.png
new file mode 100644
index 0000000000..a9a9b509fd
Binary files /dev/null and b/static/img/landing-page/witchy-banner-grad2.png differ
diff --git a/static/img/landing-page/witchy-banner-grad2.png:Zone.Identifier b/static/img/landing-page/witchy-banner-grad2.png:Zone.Identifier
new file mode 100644
index 0000000000..e69de29bb2