Newer
Older
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import RoomIcon from '@material-ui/icons/Room';
const useStyles = makeStyles(() => ({
bodyIcon: {
fontSize: '90px',
paddingBottom: '10px',
paddingTop: '10px',
},
paddingBot: {
paddingBottom: '40px',
},
noShadow: {
border: 'none',
boxShadow: 'none',
backgroundColor: 'transparent',
},
}));
export const Steps: FC = () => {
const classes = useStyles();
return (
<Grid item container alignItems="stretch">
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 1
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<VpnKeyIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Log In or Register an account on the site. Fill all the fields
related to your personal information.
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} />
<Hidden lgUp>
<Grid
item
xs={12}
component={Card}
className={`${classes.paddingBot} ${classes.noShadow}`}
/>
<Grid item xs={1} />
</Hidden>
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 2
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<BookmarkIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Book in the reservation section a free ride at least 48h than your
appointment
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} />
<Hidden lgUp>
<Grid
item
xs={12}
component={Card}
className={`${classes.paddingBot} ${classes.noShadow}`}
/>
<Grid item xs={1} />
</Hidden>
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
<Typography variant="h4" align="center">
STEP 3
</Typography>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
>
<Grid item xs={12}>
<RoomIcon color="primary" className={classes.bodyIcon} />
</Grid>
</Grid>
<Typography variant="h6">
Wait your free drive compfortably at home and reach the place you
have booked in the reservation easily!
</Typography>
</CardContent>
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
);
};