add icons, img

.env

@@ -0,0 +1,4 @@
+//nodemon: server
+// morgan: details requests
+// helmet: security
+// cors

containers/Header.js

@@ -1,59 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import {Button} from '../styles/index';
-
-const HeaderWrapper = styled.header`
-  width: 100%;
-  background: ${({ theme }) => theme.color.white};
-  color: ${({ theme }) => theme.color.dark};
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  ul {
-    display: flex;
-  }
-`;
-
-const Item = styled.li`
-  margin-left: 1rem;
-  a {
-    background: transparent;
-    color: #000;
-    font-size: .8rem;
-    text-transform: uppercase;
-  }
-`;
-
-const Title = styled.h1`
-  text-transform: uppercase;
-  font-size: 1.4rem;
-  letter-spacing: 5px;
-`
+// import img from '../public';
 
 const Header = () => {
-  const links = [
-    { id: 0, title: 'inicio', path: '/' },
-    { id: 1, title: 'productos', path: '/productos' },
-    { id: 2, title: 'sobre nosotros', path: '/sobre-nosotros' },
-    { id: 3, title: 'contacto', path: '/contacto' },
-    { id: 4, title: 'iniciar session', path: '/login' }
-  ];
-
   return (
-    <HeaderWrapper>
-      <Title>Caps</Title>
-      <ul>
-        {links.map(link => (
-          <Item>
-            <Link href={link.path} key={link.id}>
-              <Button className="btn">{link.title}</Button>
-            </Link>
-          </Item>
-        ))}
-      </ul>
-    </HeaderWrapper>
+    <header>
+      <img src="./cap-black.jpg" alt="girl cap" />
+    </header>
   );
 };
 

containers/Home.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Header from './Header';
+
+const Home = () => <Header />
+
+export default Home;

containers/Layout.js

@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-import Header from './Header';
+import React, { useState } from 'react';import Nav from './Nav';
 import Footer from './Footer';
 
 const Layout = (props) => {
   return (
     <>
-      <Header />
+      <Nav />
       {props.children}
       <Footer />
     </>

containers/Nav.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import { Container } from '../styled/index';
+import { FaSearch, FaUser } from 'react-icons/fa';
+
+import Button from '../utils/Button';
+
+const Nav = styled.nav`
+  width: 100%;
+  background: ${props => props.theme.color.primary};
+  color: ${props => props.theme.color.dark};
+  padding: 1rem 0;
+  @media (max-width: 720px) {
+    font-size: 14px;
+  }
+
+  div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    svg {
+      color: ${({ theme }) => theme.color.dark};
+      margin: 0 1.5rem;
+      /* font-size: .8rem; */
+    }
+  }
+`;
+
+const Links = styled.ul`
+  display: flex;
+
+  li {
+    margin-left: 1rem;
+  }
+  a {
+    background: transparent;
+    color: #000;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      color: red;
+    }
+  }
+`;
+
+const Title = styled.h1`
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  letter-spacing: 5px;
+`;
+
+const NavBar = () => {
+  const links = [
+    { id: 0, title: 'inicio', path: '/' },
+    { id: 1, title: 'productos', path: '/productos' },
+    { id: 2, title: 'sobre nosotros', path: '/sobre-nosotros' },
+    { id: 3, title: 'contacto', path: '/contacto' }
+  ];
+
+  const Item = () =>
+    links.map(link => (
+      <li key={link.id}>
+        <Link href={link.path}>
+          <a>{link.title}</a>
+        </Link>
+      </li>
+    ));
+
+  return (
+    <Nav>
+      <Container>
+        <Title>Caps <small>ooo</small></Title>
+        <Links>
+          <Item />
+        <div>
+          <FaSearch />
+          <FaUser />
+        </div>
+        </Links>
+      </Container>
+    </Nav>
+  );
+};
+
+export default NavBar;

pages/_app.js

@@ -4,8 +4,12 @@ import '../styles.css';
 
 const theme = {
   color: {
-    white: 'red',
-    dark: 'green'
+    dark: 'black',
+    primary: '#fafafa',
+    secondary: 'blue',
+    default: 'gray',
+    error: 'red',
+    success: '#909012'
   }
 };
 

pages/index.js

@@ -1,9 +1,10 @@
 import Layout from '../containers/Layout';
+import Home from '../containers/Home';
 
 export default () => {
   return (
     <Layout>
-      <h2>home</h2>
+      <Home />
     </Layout>
   );
 };

styled/index.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 90%;
+  margin: auto;
+`;

styles.css

@@ -19,3 +19,7 @@ ul {
   list-style: none;
 }
 
+img {
+  width: 100%;
+}
+

utils/Button.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+
+const ButtonWrapper = styled.a`
+  ${props =>
+    props.color === 'primary' && {
+      background: 'transparent',
+      color: props.theme.color.primary,
+      borderColor: props.theme.color.primary
+    }};
+  ${props =>
+    props.color === 'dark' && {
+      background: 'transparent',
+      color: props.theme.color.dark,
+      borderColor: props.theme.color.dark
+    }};
+  ${props =>
+    props.color === 'success' && {
+      background: 'transparent',
+      color: props.theme.color.success,
+      borderColor: props.theme.color.success
+    }};
+  border: 1.5px solid;
+  border-radius: 50px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: all .3s ease;
+  
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+
+// const invertTheme = ({ color }) => ({
+//   color: {
+//     dark: color.dark,
+//     primary: color.primary,
+//     secondary: color.secondary,
+//     default: color.default,
+//     error: color.error,
+//     success: color.success
+//   }
+// });
+
+export default function Button({ color, text }) {
+  return (
+    // <ThemeProvider theme={invertTheme}>
+    <ButtonWrapper color={color}>{text}</ButtonWrapper>
+    // <ThemeProvider>
+  );
+}