style front page

gatsby-config.js

@@ -1,7 +1,8 @@
 module.exports = {
     siteMetadata: {
         title: 'Ocean Protocol Documentation',
-        description: '',
+        description:
+            'Learn everything about how to develop with Ocean Prototocol',
         siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com'
     },
     plugins: [

src/components/Content.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './Content.module.scss'
 
 const Content = ({ children }) => (
-    <div className={styles.content}>{children}</div>
+    <section className={styles.content}>{children}</section>
 )
 
 Content.propTypes = {

src/components/Header.module.scss

@@ -28,8 +28,8 @@
 }
 
 .headerLogoImage {
-    width: 60px;
+    width: 4rem;
-    height: 60px;
+    height: 4rem;
     fill: #fff;
     margin: 0;
 }

src/components/HeaderHome.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
+import Content from '../components/Content'
+import styles from './HeaderHome.module.scss'
+
+const HeaderHome = () => (
+    <StaticQuery
+        query={graphql`
+            query {
+                site {
+                    siteMetadata {
+                        title
+                        description
+                    }
+                }
+            }
+        `}
+        render={data => {
+            const { title, description } = data.site.siteMetadata
+
+            return (
+                <header className={styles.header}>
+                    <Content>
+                        <Logo className={styles.headerLogo} />
+                        <h1 className={styles.headerTitle}>{title}</h1>
+                        <p className={styles.headerDescription}>
+                            {description}
+                        </p>
+                    </Content>
+                </header>
+            )
+        }}
+    />
+)
+
+export default HeaderHome

src/components/HeaderHome.module.scss

@@ -0,0 +1,51 @@
+@import 'variables';
+@import 'animations';
+
+.header {
+    background: $brand-black;
+    width: 100%;
+    padding: $spacer * 2 0;
+
+    min-height: 30rem;
+    max-height: 800px;
+    color: $brand-white;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.headerLogo,
+.headerTitle,
+.headerDescription {
+    animation: fadeInUp .8s ease-out backwards;
+}
+
+.headerLogo {
+    width: 5rem;
+    height: 5rem;
+}
+
+.headerTitle {
+    margin-bottom: $spacer;
+    font-size: $font-size-h3;
+    animation-delay: .2s;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h1;
+    }
+}
+
+.headerDescription {
+    margin-bottom: $spacer * 4;
+    max-width: $break-point--small;
+    margin-left: auto;
+    margin-right: auto;
+    animation-delay: .4s;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-large;
+    }
+}
+
+

src/components/Layout.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { StaticQuery, graphql } from 'gatsby'
-
 import Header from './Header'
 
-const Layout = ({ children }) => (
+const Layout = ({ children, header }) => (
     <StaticQuery
         query={graphql`
             query SiteTitleQuery {
@@ -16,26 +14,23 @@ const Layout = ({ children }) => (
                 }
             }
         `}
-        render={data => (
+        render={data => {
+            const { title } = data.site.siteMetadata
+            const headerElement = header || <Header siteTitle={title} />
+
+            return (
                 <>
-                <Helmet
+                    {headerElement}
-                    title={data.site.siteMetadata.title}
+                    {children}
-                    meta={[
-                        { name: 'description', content: 'Sample' },
-                        { name: 'keywords', content: 'sample, something' }
-                    ]}
-                >
-                    <html lang="en" />
-                </Helmet>
-                <Header siteTitle={data.site.siteMetadata.title} />
-                <section>{children}</section>
                 </>
-        )}
+            )
+        }}
     />
 )
 
 Layout.propTypes = {
-    children: PropTypes.node.isRequired
+    children: PropTypes.node.isRequired,
+    header: PropTypes.element
 }
 
 export default Layout

src/images/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13">
+  <polygon points="383.949 1434.201 374.999 1434.201 379.081 1430.202 378.34 1429.476 372.994 1434.714 378.34 1439.952 379.081 1439.227 374.999 1435.227 383.949 1435.227" transform="rotate(-180 192.471 720.714)"/>
+</svg>

src/pages/index.js

@@ -3,12 +3,17 @@ import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
+import HeaderHome from '../components/HeaderHome'
+import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
 const SectionLink = ({ to, title, children }) => (
     <Link to={to}>
         <h3 className={styles.sectionTitle}>{title}</h3>
         <p className={styles.sectionText}>{children}</p>
+        <span className={styles.sectionMore}>
+            Learn More <Arrow />
+        </span>
     </Link>
 )
 
@@ -19,7 +24,7 @@ SectionLink.propTypes = {
 }
 
 const IndexPage = ({ data, location }) => (
-    <Layout location={location}>
+    <Layout location={location} header={<HeaderHome />}>
         <Content>
             <ul className={styles.sections}>
                 {data.allSectionsYaml.edges.map(({ node }) => (

src/pages/index.module.scss

@@ -1,10 +1,11 @@
 @import 'variables';
+@import 'animations';
 
 .sections {
     list-style: none;
     padding: 0;
     margin: 0;
-    margin-top: $spacer * 2;
+    margin-top: -($spacer * 4);
 
     @media (min-width: $break-point--medium) {
         display: flex;
@@ -13,29 +14,62 @@
 }
 
 .section {
-    margin-bottom: $spacer;
+    margin-top: $spacer;
+    animation: fadeInUp .8s ease-out backwards;
 
     &:before { display: none; }
 
     @media (min-width: $break-point--medium) {
         flex: 0 0 30%;
-        margin-bottom: 0;
     }
 
     a {
-        display: block;
+        display: flex;
-        padding: $spacer * $line-height;
+        flex-wrap: wrap;
+        padding: $spacer $spacer * $line-height;
         border-radius: $border-radius;
-        box-shadow: rgba($brand-black, .1) 0px 9px 18px;
+        box-shadow: rgba($brand-black, .15) 0px 9px 18px;
         color: $brand-grey;
+        background: $brand-white;
         height: 100%;
+
+        &:hover,
+        &:focus {
+            box-shadow: rgba($brand-black, .15) 0px 12px 20px;
+        }
+    }
+
+    animation-delay: .4s;
+
+    &:nth-child(2) {
+        animation-delay: .6s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: .8s;
     }
 }
 
 .sectionTitle {
     margin-top: 0;
+    margin-bottom: $spacer / $line-height;
+    width: 100%;
 }
 
 .sectionText {
     margin-bottom: 0;
 }
+
+.sectionMore {
+    align-self: flex-end;
+    margin-top: $spacer / $line-height;
+    color: $brand-pink;
+    width: 100%;
+
+    svg {
+        display: inline-block;
+        width: $font-size-small;
+        height: $font-size-small;
+        fill: $brand-grey-light;
+    }
+}

src/styles/_animations.scss

@@ -0,0 +1,21 @@
+@keyframes fadeInUp {
+    0% {
+        opacity: 0.01;
+        transform: translate3d(0, 5rem, 0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0.01;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}