8 files changed, 511 insertions, 0 deletions
diff --git a/deps/npm/docs/src/components/home/DarkBlock.js b/deps/npm/docs/src/components/home/DarkBlock.js
new file mode 100644
index 0000000000..ebe7753314
--- /dev/null
+++ b/deps/npm/docs/src/components/home/DarkBlock.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import {Flex, Box} from 'rebass'
+import {LinkButton} from '../Button'
+
+const Container = styled(Flex)`
+  background-color: ${(props) => props.theme.colors.purpleBlack};
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ContentWrapper = styled(Flex)`
+  max-width: 640px;
+  align-items: center;
+`
+
+const Text = styled.p`
+  line-height: 1.5;
+  text-align: center;
+`
+
+const aStyle = {
+  color: '#fb3b49',
+  textDecoration: 'none'
+}
+
+const DarkBlock = () => {
+  return (
+    <Container>
+      <ContentWrapper px={4} py={6} m='auto' flexDirection='column'>
+        <Text>
+          <p>The current stable version of npm is <a href={'https://github.com/npm/cli/releases/latest'} style={aStyle}>available on GitHub.</a></p>
+          <p>To upgrade, run: <code className={'language-text'} style={{color: 'white'}}>npm install npm@latest -g</code></p>
+          <p>To report bugs or submit feature requests, <a href={'#'} style={aStyle}>please XXX.</a></p>
+        </Text>
+        <Box pt={4}><LinkButton to='cli-commands/npm' w={'120px'}>read docs</LinkButton></Box>
+      </ContentWrapper>
+    </Container>
+  )
+}
+
+export default DarkBlock
diff --git a/deps/npm/docs/src/components/home/FeatureCard.js b/deps/npm/docs/src/components/home/FeatureCard.js
new file mode 100644
index 0000000000..86a93a9854
--- /dev/null
+++ b/deps/npm/docs/src/components/home/FeatureCard.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+import {Flex, Image, Text} from 'rebass'
+
+const Card = styled(Flex)`
+  background-color: #f2f2f2ab;
+  box-shadow: 5px 5px 1px 1px ${(props) => props.theme.colors.red};
+  border-radius: 2px;
+`
+
+const Desc = styled.p`
+  padding: 5px 0;
+  font-size: 16px;
+`
+
+const Title = styled(Text)`
+  font-size: 24px;
+  font-weight: 500;
+  text-shadow: 1px 2px 2px #f061df6e;
+`
+
+const Icon = styled(Image)`
+  width: 110px;
+  flex-shrink: 0;
+`
+
+const FeatureCard = ({icon, text, title}) => {
+  return (
+    <Card alignItems='center' flexDirection={['column', 'row']} p={5} m={4}>
+      <Icon src={icon} />
+      <Flex flexDirection='column' pl={[0, 4]} pt={2}>
+        <Title textAlign={['center', 'left']}>{title}</Title>
+        <Desc>{text}</Desc>
+      </Flex>
+    </Card>
+  )
+}
+
+export default FeatureCard
diff --git a/deps/npm/docs/src/components/home/Features.js b/deps/npm/docs/src/components/home/Features.js
new file mode 100644
index 0000000000..0aac994bee
--- /dev/null
+++ b/deps/npm/docs/src/components/home/Features.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import styled from 'styled-components'
+import FeatureCard from './FeatureCard'
+import { FeatureLink } from '../links'
+import { Flex } from 'rebass'
+import rectangles from '../../images/background-rectangles.svg'
+import terminalIcon from '../../images/terminal-icon.svg'
+import networkIcon from '../../images/network-icon.svg'
+import npmIcon from '../../images/npm-icon.png'
+import managerIcon from '../../images/manager-icon.svg'
+
+const ContainerInner = styled(Flex)`
+  background: linear-gradient(84deg, #fb881799, #ff4b0199, #c1212799, #e02aff99);
+`
+
+const Container = styled.div`
+  background: top / cover no-repeat url(${rectangles});
+`
+
+const ContentWrapper = styled(Flex)`
+  max-width: 640px;
+`
+
+const featureTexts = {
+  textOne: 'Download, install, and configure.',
+  textTwo: 'All available npm commands.',
+  textThree: 'How npm things work.',
+  textFour: 'Publish your own public or private packages to the registry with a free or paid account on npmjs.com from npm, Inc.'
+}
+
+const featureTitles = {
+  titleOne: 'Getting Started',
+  titleTwo: 'Command Reference',
+  titleThree: 'Using npm',
+  titleFour: 'Publishing'
+}
+
+const aStyle = {
+  color: '#231f20',
+  textDecoration: 'none'
+}
+const productsLink = `https://www.npmjs.com/products`
+
+const Features = () => {
+  return (
+    <Container>
+      <ContainerInner>
+        <ContentWrapper m='auto' py={5} flexDirection='column'>
+          <FeatureLink to={'/configuring-npm/install'}>
+            <FeatureCard
+              icon={terminalIcon}
+              title={featureTitles.titleOne}
+              text={featureTexts.textOne}
+            />
+          </FeatureLink>
+          <FeatureLink to={'/cli-commands/npm'}>
+            <FeatureCard
+              icon={managerIcon}
+              title={featureTitles.titleTwo}
+              text={featureTexts.textTwo}
+            />
+          </FeatureLink>
+          <FeatureLink to={'/using-npm/coding-style'}>
+            <FeatureCard
+              icon={networkIcon}
+              title={featureTitles.titleThree}
+              text={featureTexts.textThree}
+            />
+          </FeatureLink>
+          <a href={productsLink} style={aStyle} target={'_blank'}>
+            <FeatureCard
+              icon={npmIcon}
+              title={featureTitles.titleFour}
+              text={featureTexts.textFour}
+            />
+          </a>
+        </ContentWrapper>
+      </ContainerInner>
+    </Container>
+  )
+}
+
+export default Features
diff --git a/deps/npm/docs/src/components/home/Footer.js b/deps/npm/docs/src/components/home/Footer.js
new file mode 100644
index 0000000000..a9b70a8598
--- /dev/null
+++ b/deps/npm/docs/src/components/home/Footer.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import boxes from '../../images/background-boxes.svg'
+import styled from 'styled-components'
+import {Flex, Box} from 'rebass'
+
+const Container = styled(Flex)`
+  background: center / cover no-repeat url(${boxes});
+  height: 380px;
+  background-color: ${(props) => props.theme.colors.offWhite};
+ `
+
+const ContentWrapper = styled(Box)`
+  align-content: center;
+  width: 100%;
+  text-align: center;
+  background-color: ${(props) => props.theme.colors.white};
+`
+
+const Footer = () => {
+  return (
+    <Container>
+      <ContentWrapper py={4} mt={'auto'}>
+        Footer Text 🤪
+      </ContentWrapper>
+    </Container>
+  )
+}
+
+export default Footer
diff --git a/deps/npm/docs/src/components/home/Terminal.js b/deps/npm/docs/src/components/home/Terminal.js
new file mode 100644
index 0000000000..b0e9b9b502
--- /dev/null
+++ b/deps/npm/docs/src/components/home/Terminal.js
@@ -0,0 +1,120 @@
+import React from 'react'
+import styled, {keyframes} from 'styled-components'
+import {Flex, Box, Button as RebassButton} from 'rebass'
+import closeX from '../../images/x.svg'
+import {LinkButton} from '../Button'
+import bracket from '../../images/bracket.svg'
+
+const TerminalBody = styled(Flex)`
+  background-color: ${(props) => props.theme.colors.purpleBlack};
+  border: 2px solid ${(props) => props.theme.colors.purpleBlack};
+  color: ${(props) => props.theme.colors.white};
+  flex-direction: column;
+  max-width: 620px;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 0px 17px 1px #dc3bc180;
+  border-radius: 2px;
+  top: ${(props) => props.top};
+  left: ${(props) => props.left};
+  right: 0;
+  position: absolute;
+`
+
+const Top = styled(Flex)`
+  background-color: ${(props) => props.theme.colors.white};
+  height: 18px;
+`
+
+const SiteName = styled(Flex)`
+  font-size: 45px;
+  font-family: 'Inconsolata', sans-serif;
+  font-weight: 700;
+  letter-spacing: 5px;
+  text-shadow: 3px 2px 4px #abf1e04d;
+
+  @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) {
+    font-size: 70px;
+  }
+`
+
+const Bottom = styled(Flex)`
+  flex-direction: column;
+  padding: 30px;
+
+  @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) {
+    font-size: 70px;
+    padding: 30px 50px;
+
+  }
+`
+
+const blink = keyframes`
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+
+const Cursor = styled.span`
+  color: ${(props) => props.theme.colors.red};
+  text-shadow: none;
+  opacity: 1;
+  animation: ${blink};
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+`
+
+const Bracket = styled.span`
+  background: center / contain no-repeat url(${bracket});
+  width: 25px;
+  margin-right: 5px;
+  margin-top: 10px;
+`
+
+const Text = styled.strong`
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  line-height: 1.4;
+
+  @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) {
+    font-size: 18px;
+  }
+`
+
+const ModalButton = styled(RebassButton)`
+  cursor: pointer;
+  background: center no-repeat  url(${closeX});
+  width: 14px;
+  height: 14px;
+`
+
+const Terminal = ({onClose, top, left}) => {
+  return (
+    <TerminalBody m={'auto'} top={top} left={left}>
+      <Top alignItems='center'>
+        <ModalButton onClick={onClose} ml={1} p={1} />
+      </Top>
+      <Bottom>
+        <SiteName py={3}><Bracket />npm cli <Cursor>_</Cursor></SiteName>
+        <Text>
+          The intelligent package manager for the Node Javascript Platform. Install stuff and get coding!
+        </Text>
+        <Box mx={'auto'} my={4}>
+          <LinkButton to='/cli-commands/npm'>
+            read docs
+          </LinkButton>
+        </Box>
+      </Bottom>
+    </TerminalBody>
+  )
+}
+
+export default Terminal
diff --git a/deps/npm/docs/src/components/home/Windows.js b/deps/npm/docs/src/components/home/Windows.js
new file mode 100644
index 0000000000..fcdfd0eed0
--- /dev/null
+++ b/deps/npm/docs/src/components/home/Windows.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import Terminal from './Terminal'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  position: relative;
+  height: 350px;
+  width: 80%;
+  margin: auto;
+  left: -4%;
+
+  @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) {
+    height: 400px;
+  }
+`
+
+class Windows extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      showTopTerminal: true,
+      showMiddleTerminal: true,
+      showBottomTerminal: true,
+      counter: 0
+    }
+    this.onHide = this.onHide.bind(this)
+  }
+
+  onHide (terminal) {
+    this.setState({ [terminal]: false, counter: this.state.counter + 1 }, () => {
+      if (this.state.counter === 3) {
+        this.setState({
+          showTopTerminal: true,
+          showMiddleTerminal: true,
+          showBottomTerminal: true,
+          counter: 0
+        })
+      }
+    })
+  }
+
+  render () {
+    return (
+      <Container>
+        {this.state.showTopTerminal &&
+          <Terminal
+            onClose={() => this.onHide('showTopTerminal')}
+            top={'0%'}
+            left={'0%'}
+          />
+        }
+
+        {this.state.showMiddleTerminal &&
+          <Terminal
+            onClose={() => this.onHide('showMiddleTerminal')}
+            top={'8%'}
+            left={'5%'}
+          />
+        }
+
+        {this.state.showBottomTerminal &&
+          <Terminal
+            onClose={() => this.onHide('showBottomTerminal')}
+            top={'16%'}
+            left={'10%'}
+          />
+        }
+      </Container>
+    )
+  }
+}
+
+export default Windows
diff --git a/deps/npm/docs/src/components/home/cubes.js b/deps/npm/docs/src/components/home/cubes.js
new file mode 100644
index 0000000000..65a2b8bd95
--- /dev/null
+++ b/deps/npm/docs/src/components/home/cubes.js
@@ -0,0 +1,101 @@
+import styled, {css, keyframes} from 'styled-components'
+import purpleCube from '../../images/purple-cube.svg'
+import orangeCube from '../../images/orange-cube.svg'
+import redCube from '../../images/red-cube.svg'
+import purpleGradientCube from '../../images/purple-gradient-cube.svg'
+import pinkGradientCube from '../../images/pink-gradient-cube.svg'
+
+const commonCubeStyles = css`
+  background-position: center;
+  background-repeat: no-repeat;
+  position: absolute;
+`
+
+const wiggle = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(8deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`
+
+export const CubeTopLeft = styled.div`
+  ${commonCubeStyles};
+  background-image: url(${purpleCube});
+  height: 35px;
+  width: 35px;
+  top: 10%;
+  left: 8%;
+
+  animation-name: ${wiggle};
+  animation-duration: 2.5s;
+  animation-delay: .5s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+`
+
+export const CubeMiddleLeft = styled.span`
+  ${commonCubeStyles};
+  background-image: url(${orangeCube});
+  height: 30px;
+  width: 30px;
+  top: 40%;
+  left: 17%;
+
+  animation-name: ${wiggle};
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+`
+
+export const CubeBottomLeft = styled.span`
+  ${commonCubeStyles};
+  background-image: url(${redCube});
+  height: 45px;
+  width: 45px;
+  top: 78%;
+  left: 12%;
+
+  animation-name: ${wiggle};
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+`
+
+export const CubeBottomRight = styled.span`
+  ${commonCubeStyles};
+  background-image: url(${pinkGradientCube});
+  height: 40px;
+  width: 40px;
+  top: 70%;
+  right: 12%;
+
+  animation-name: ${wiggle};
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  animation-delay: .3s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+`
+
+export const CubeTopRight = styled.span`
+  ${commonCubeStyles};
+  background-image: url(${purpleGradientCube});
+  height: 40px;
+  width: 40px;
+  top: 14%;
+  right: 12%;
+
+  animation-name: ${wiggle};
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: backwards;
+  animation-timing-function: ease-in-out;
+`
diff --git a/deps/npm/docs/src/components/home/hero.js b/deps/npm/docs/src/components/home/hero.js
new file mode 100644
index 0000000000..eb690b290d
--- /dev/null
+++ b/deps/npm/docs/src/components/home/hero.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'styled-components'
+import Windows from './Windows'
+import {Flex} from 'rebass'
+import {CubeTopLeft, CubeMiddleLeft, CubeBottomLeft, CubeTopRight, CubeBottomRight} from './cubes'
+
+const Container = styled(Flex)`
+  background-color: ${(props) => props.theme.colors.offWhite};
+  position: relative;
+`
+
+const Hero = () => {
+  return (
+    <Container px={1} pt={[4, 5]} pb={[6, 6, '140px']}>
+      <CubeTopLeft />
+      <CubeMiddleLeft />
+      <CubeBottomLeft />
+      <CubeTopRight />
+      <CubeBottomRight />
+      <Windows />
+    </Container>
+  )
+}
+
+export default Hero