diff options
Diffstat (limited to 'deps/npm/docs/src/components/home/Features.js')
-rw-r--r-- | deps/npm/docs/src/components/home/Features.js | 83 |
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 |