74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { Container, Typography, Grid } from '@material-ui/core';
|
|
import Section from '@components/Section';
|
|
import speedIcon from './speed.svg';
|
|
import responsiveIcon from './responsive.svg';
|
|
import securityIcon from './security.svg';
|
|
import intuitiveIcon from './intuitive.svg';
|
|
|
|
function MyPriorities() {
|
|
const classes = useStyles();
|
|
return (
|
|
<Section>
|
|
<Container className={classes.container}>
|
|
<Typography align="center" variant="h2" gutterBottom>
|
|
My priorities
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
<img
|
|
className={classes.icon}
|
|
src={responsiveIcon}
|
|
alt="Responsiveness"
|
|
/>
|
|
<Typography variant="h4">Responsiveness</Typography>
|
|
<Typography>
|
|
I create websites that look good on all devices.
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
<img
|
|
className={classes.icon}
|
|
src={intuitiveIcon}
|
|
alt="Intuitiveness"
|
|
/>
|
|
<Typography variant="h4">Intuitiveness</Typography>
|
|
<Typography>An easy-to-use & user-friendly interface.</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
<img className={classes.icon} src={speedIcon} alt="Szybkość" />
|
|
<Typography variant="h4">Performance</Typography>
|
|
<Typography>Fast load times & lag free interaction.</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} md={3}>
|
|
<img className={classes.icon} src={securityIcon} alt="Security" />
|
|
<Typography variant="h4">Security</Typography>
|
|
<Typography>
|
|
I use tried-and-tested tools and techniques that help me keep the
|
|
website safe.
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
icon: {
|
|
width: 128,
|
|
height: 128,
|
|
[theme.breakpoints.down('md')]: {
|
|
width: 96,
|
|
height: 96,
|
|
},
|
|
},
|
|
container: {
|
|
textAlign: 'center',
|
|
},
|
|
}));
|
|
|
|
export default MyPriorities;
|