nodejs · amiller-gh · Sep 27, 2019 · Sep 15, 2019 · Sep 15, 2019 · Sep 21, 2019
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center">
   <br>
   <a href="https://nodejs.dev">
-    <img src="./src/images/nodejslogo.png" width="200"/>
+    <img src="./src/images/nodejs-logo-light-mode.svg" width="200"/>
   </a>
 </p>
 

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,47 +1,57 @@
 import { Link } from 'gatsby';
 import React from 'react';
-import { css, SerializedStyles } from '@emotion/core';
+import logoLight from '../images/logos/nodejs-logo-light-mode.svg';
+import logoDark from '../images/logos/nodejs-logo-dark-mode.svg';
 
-/* eslint-disable-next-line @typescript-eslint/no-var-requires */
-const logo = require('../images/logo.svg');
+const activeStyleTab = {
+  fontWeight: 'var(--font-weight-semibold)',
+  color: 'var(--color-text-accent)',
+  borderBottom: 'var(--space-04) inset var(--color-text-accent)',
+};
 
-const ulStyles: SerializedStyles = css`
-  @media (max-width: 380px) {
-    padding: 0;
-  }
-  margin: 0 auto;
-  padding: 0 4.8rem;
-  display: flex;
-  align-items: center;
-  list-style: none;
-`;
-
-const Header = (): JSX.Element => (
+const Header = () => (
   <nav className="nav">
-    <ul css={ulStyles}>
-      <li>
-        <Link to="/" style={{ display: 'block' }}>
-          <img src={logo} alt="Node.js" className="nav__logo" />
-        </Link>
-      </li>
-      <li className="nav__tabs">
-        <Link to="/learn">Learn</Link>
-      </li>
+    <div className="logo">
+      <Link to="/">
+        <img
+          src={logoLight}
+          alt="Node.js"
+          className="nav__logo light-mode-only"
+        />
+        <img
+          src={logoDark}
+          alt="Node.js"
+          className="nav__logo dark-mode-only"
+        />
+      </Link>
+    </div>
+
+    <ul className="nav__tabs__container">
       <li className="nav__tabs">
-        <Link to="/docs">Docs</Link>
+        <Link to="/learn" activeStyle={activeStyleTab} partiallyActive>
+          Learn
+        </Link>
       </li>
       <li className="nav__tabs">
-        <Link to="/community">Community</Link>
+        <Link to="/docs" activeStyle={activeStyleTab} partiallyActive>
+          Documentation
+        </Link>
       </li>
       <li className="nav__tabs">
-        <Link to="/download">Download</Link>
+        <Link to="/download" activeStyle={activeStyleTab} partiallyActive>
+          Download
+        </Link>
       </li>
-      <li style={{ flexGrow: 1 }} />
+    </ul>
+
+    <div style={{ flexGrow: 1 }}></div>
+
+    <ul className="right-container">
       <li className="nav__tabs nav__tabs--right">
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={(): boolean => document.body.classList.toggle('dark-mode')}
+          onClick={() => document.body.classList.toggle('dark-mode')}
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>
@@ -52,13 +62,13 @@ const Header = (): JSX.Element => (
       <li className="nav__tabs">
         <a
           target="_blank"
-          rel="noreferrer noopener"
           href="https://github.com/nodejs/nodejs.dev"
+          rel="noopener noreferrer"
         >
           <span className="sr-only">GitHub</span>
           <svg
-            width="2.0rem"
-            height="2.0rem"
+            width="2.4rem"
+            height="2.4rem"
             viewBox="0 0 438.549 438.549"
             style={{ fill: 'var(--color-text-accent)' }}
           >

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
+import { Link } from 'gatsby';
 
 interface Props {
   title: string;
+  subTitle: string;
 }
 
-const Hero = ({ title }: Props): JSX.Element => (
-  <div className="hero">
+const NodeVersion = 'Version 10.15.3';
+
+const Hero = ({ title, subTitle }: Props) => (
+  <div className="home-page-hero">
     <h1>{title}</h1>
-    <div className="diagonal-hero-bg">
-      <div className="stars">
-        <div className="small" />
-        <div className="medium" />
-        <div className="big" />
+    <h2 className="sub-title t-subheading">{subTitle}</h2>
+    <div className="btn-ctas">
+      <div className="download-lts-container">
+        <button className="download-lts-cta t-body1" type="button">
+          Download Node (LTS)
+        </button>
+        <p className="links t-caption">
+          {NodeVersion} - <Link to="/download">What’s new</Link> /{' '}
+          <Link to="/download">Get Current</Link>
+        </p>
       </div>
+      <Link to="/learn">
+        <button className="learn-cta t-body1" type="button">
+          Learn Node
+        </button>
+      </Link>
     </div>
   </div>
 );

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -12,14 +12,21 @@ interface Props {
   title?: string;
   description?: string;
   img?: string;
+  href: string;
 }
 
-const Layout = ({ children, title, description, img }: Props): JSX.Element => {
+const Layout = ({
+  children,
+  title,
+  description,
+  img,
+  location,
+}: Props): JSX.Element => {
   return (
     <React.Fragment>
       <SEO title={title} description={description} img={img} />
       <Header />
-      <main>{children}</main>
+      {children}
     </React.Fragment>
   );
 };

diff --git a/src/images/illustrations/beginners-guide-illustration.svg b/src/images/illustrations/beginners-guide-illustration.svg
diff --git a/src/images/illustrations/do-more-illustration.svg b/src/images/illustrations/do-more-illustration.svg
diff --git a/src/images/illustrations/dots.svg b/src/images/illustrations/dots.svg
diff --git a/src/images/illustrations/leafs-back.svg b/src/images/illustrations/leafs-back.svg
diff --git a/src/images/illustrations/leafs-front.svg b/src/images/illustrations/leafs-front.svg
diff --git a/src/images/illustrations/leafs-illustration.svg b/src/images/illustrations/leafs-illustration.svg