1import React from 'react' 2import styled from 'styled-components' 3import FeatureCard from './FeatureCard' 4import { FeatureLink } from '../links' 5import { Flex } from 'rebass' 6import rectangles from '../../images/background-rectangles.svg' 7import terminalIcon from '../../images/terminal-icon.svg' 8import networkIcon from '../../images/network-icon.svg' 9import npmIcon from '../../images/npm-icon.png' 10import managerIcon from '../../images/manager-icon.svg' 11 12const ContainerInner = styled(Flex)` 13 background: linear-gradient(84deg, #fb881799, #ff4b0199, #c1212799, #e02aff99); 14` 15 16const Container = styled.div` 17 background: top / cover no-repeat url(${rectangles}); 18` 19 20const ContentWrapper = styled(Flex)` 21 max-width: 640px; 22` 23 24const featureTexts = { 25 textOne: 'Download, install, and configure.', 26 textTwo: 'All available npm commands.', 27 textThree: 'How npm things work.', 28 textFour: 'Publish your own public or private packages to the registry with a free or paid account on npmjs.com from npm, Inc.' 29} 30 31const featureTitles = { 32 titleOne: 'Getting Started', 33 titleTwo: 'Command Reference', 34 titleThree: 'Using npm', 35 titleFour: 'Publishing' 36} 37 38const aStyle = { 39 color: '#231f20', 40 textDecoration: 'none' 41} 42const productsLink = `https://www.npmjs.com/products` 43 44const Features = () => { 45 return ( 46 <Container> 47 <ContainerInner> 48 <ContentWrapper m='auto' py={5} flexDirection='column'> 49 <FeatureLink to={'/configuring-npm/install'}> 50 <FeatureCard 51 icon={terminalIcon} 52 title={featureTitles.titleOne} 53 text={featureTexts.textOne} 54 /> 55 </FeatureLink> 56 <FeatureLink to={'/cli-commands/npm'}> 57 <FeatureCard 58 icon={managerIcon} 59 title={featureTitles.titleTwo} 60 text={featureTexts.textTwo} 61 /> 62 </FeatureLink> 63 <FeatureLink to={'/using-npm/developers'}> 64 <FeatureCard 65 icon={networkIcon} 66 title={featureTitles.titleThree} 67 text={featureTexts.textThree} 68 /> 69 </FeatureLink> 70 <a href={productsLink} style={aStyle} target={'_blank'}> 71 <FeatureCard 72 icon={npmIcon} 73 title={featureTitles.titleFour} 74 text={featureTexts.textFour} 75 /> 76 </a> 77 </ContentWrapper> 78 </ContainerInner> 79 </Container> 80 ) 81} 82 83export default Features 84
