new navbar implemented (#144)

gatsby-config.js

@@ -55,6 +55,7 @@ module.exports = {
       resolve: `gatsby-plugin-google-fonts`,
       options: {
         fonts: [
+          `Mulish\:400,700,800,900`,
           `Roboto\:400,500,700`,
           `Inconsolata\:400,700`,
           'Open Sans:400,700',

package.json

@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "",
   "dependencies": {
+    "@babel/compat-data": "^7.9.0",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@material-ui/icons": "^4.11.2",

src/components/NavBar/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Theme from 'src/assets/theme.svg';
+
+function NavLink({ to, children }) {
+  console.log(children);
+  return (
+    <Link className={`text-white text-lg font-bold`} to={to}>
+      {children}
+    </Link>
+  );
+}
+
+function NavButton({ children }) {
+  return (
+    <button className={`bg-primary-600 px-6 py-2 rounded`}>{children}</button>
+  );
+}
+
+function NavBar(props) {
+  return (
+    <nav
+      className={`bg-base-900 px-30 py-8 flex justify-between items-center font-mulish`}
+    >
+      <Theme className={`h-18 w-auto`} />
+      <ul className={`flex items-center space-x-12`}>
+        <li>
+          <NavLink to={'/overview'}>Academy</NavLink>
+        </li>
+        <li>
+          <NavLink to={'/overview'}>Marketplace</NavLink>
+        </li>
+        <li>
+          <NavButton>
+            <NavLink to={'/auth'}>Sign in</NavLink>
+          </NavButton>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default NavBar;

src/pages/tezos/index.js

@@ -25,6 +25,7 @@ import SEO from 'src/components/Seo';
 import landingPage from 'src/images/landing_page.jpg';
 import StyledLink from 'src/components/StyledLink';
 import { RightArrow } from 'src/components/IconSet';
+import NavBar from '../../components/NavBar';
 
 const HomePage = () => {
   useEffect(() => {
@@ -58,39 +59,7 @@ const HomePage = () => {
             height: 300,
           }}
         />
-        <HomepageHeroImage>
-          <RightCloud />
-          <LeftCloud />
-          <HeroContainer>
-            <div>
-              <Logo />
-            </div>
-            <h1 className={`text-error-600`}>
-              Learn to code Tezos blockchain DApps in SmartPy <br />
-            </h1>
-            <HeroSubheading>
-              "Cryptobots vs Aliens" is an interactive code school that teaches
-              you to write smart contracts in SmartPy. Assemble your own
-              cryptobot that unleashes hell on the incoming alien invasion!
-            </HeroSubheading>
-            <StyledLink style={{ margin: '0.67em 0' }} to="/tezos/overview">
-              Start Learning
-            </StyledLink>
-            <InnerContainer>
-              <div>
-                <Plant />
-              </div>
-              <div>
-                {/* <Link to="/tezos/overview">
-                  <StartLearning />
-                </Link> */}
-              </div>
-              <div>
-                <Zombie />
-              </div>
-            </InnerContainer>
-          </HeroContainer>
-        </HomepageHeroImage>
+        <NavBar></NavBar>
         <div
           style={{
             background: 'linear-gradient(180deg, #05323D 0%, #05323D 100%)',

tailwind.config.js

@@ -65,6 +65,7 @@ module.exports = {
         code: '#030D18',
         console: '061B2F',
       },
+      white: '#ffffff',
     },
     spacing: {
       px: '1px',
@@ -87,9 +88,11 @@ module.exports = {
       12: '3rem',
       14: '3.5rem',
       16: '4rem',
+      18: '4.5rem',
       20: '5rem',
       24: '6rem',
       28: '7rem',
+      30: '7.5rem',
       32: '8rem',
       36: '9rem',
       40: '10rem',
@@ -209,7 +212,9 @@ module.exports = {
       DEFAULT: '1',
     },
     fontFamily: {
+      mulish: ['Mulish', 'ui-sans-serif'],
       sans: [
+        'Mulish',
         'ui-sans-serif',
         'system-ui',
         '-apple-system',