1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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
|
