1 files changed, 83 insertions, 0 deletions
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