1
- import React from " react"
2
- import { makeStyles } from " @material-ui/core/styles"
3
- import { Grid , Typography , CardMedia , Box } from " @material-ui/core"
1
+ import React from ' react'
2
+ import { makeStyles } from ' @material-ui/core/styles'
3
+ import { Grid , Typography , CardMedia , Box } from ' @material-ui/core'
4
4
5
- import Img from " gatsby-image"
6
- import { StaticQuery , graphql } from " gatsby"
5
+ import Img from ' gatsby-image'
6
+ import { StaticQuery , graphql } from ' gatsby'
7
7
8
8
const useStyles = makeStyles ( theme => ( {
9
9
icon : {
10
10
marginRight : theme . spacing ( 2 ) ,
11
11
} ,
12
12
domainsContent : {
13
13
padding : theme . spacing ( 5 , 5 , 5 ) ,
14
- [ theme . breakpoints . down ( "md" ) ] : {
14
+ [ theme . breakpoints . down ( 'md' ) ] : {
15
15
padding : theme . spacing ( 5 , 3 , 5 ) ,
16
16
} ,
17
17
} ,
@@ -20,53 +20,53 @@ const useStyles = makeStyles(theme => ({
20
20
paddingBottom : theme . spacing ( 8 ) ,
21
21
} ,
22
22
card : {
23
- height : " 100%" ,
24
- display : " flex" ,
25
- flexDirection : " column" ,
26
- borderRadius : " 10px" ,
23
+ height : ' 100%' ,
24
+ display : ' flex' ,
25
+ flexDirection : ' column' ,
26
+ borderRadius : ' 10px' ,
27
27
} ,
28
28
cardMedia : {
29
- width : " 100%" ,
30
- height : " auto" ,
29
+ width : ' 100%' ,
30
+ height : ' auto' ,
31
31
// paddingTop: "56.25%", // 16:9
32
32
} ,
33
33
cardContent : {
34
34
flexGrow : 1 ,
35
35
} ,
36
36
chipActions : {
37
- display : " block" ,
37
+ display : ' block' ,
38
38
} ,
39
39
chip : {
40
- margin : " 8px 0 3px 8px" ,
40
+ margin : ' 8px 0 3px 8px' ,
41
41
} ,
42
42
extraMargin : {
43
- marginTop : " 15px" ,
44
- marginBottom : "0" ,
43
+ marginTop : ' 15px' ,
44
+ marginBottom : '0' ,
45
45
} ,
46
46
btn : {
47
- textTransform : " none" ,
47
+ textTransform : ' none' ,
48
48
} ,
49
49
root : {
50
50
backgroundColor : theme . palette . primary . main ,
51
51
paddingTop : theme . spacing ( 3 ) ,
52
52
paddingBottom : theme . spacing ( 3 ) ,
53
- " & dt" : {
53
+ ' & dt' : {
54
54
marginTop : theme . spacing ( 2 ) ,
55
55
} ,
56
- color : " #FFF" ,
56
+ color : ' #FFF' ,
57
57
} ,
58
58
paddingCls : {
59
- paddingLeft : " 10px" ,
60
- paddingRight : " 10px" ,
59
+ paddingLeft : ' 10px' ,
60
+ paddingRight : ' 10px' ,
61
61
} ,
62
62
paddingClsxs : {
63
63
padding : 0 ,
64
64
} ,
65
65
iconSize : {
66
- fontSize : " 32px" ,
66
+ fontSize : ' 32px' ,
67
67
} ,
68
68
text : {
69
- color : " #FFFFFF" ,
69
+ color : ' #FFFFFF' ,
70
70
} ,
71
71
avatarLarge : {
72
72
width : theme . spacing ( 16 ) ,
@@ -75,11 +75,11 @@ const useStyles = makeStyles(theme => ({
75
75
} ,
76
76
77
77
avatarGrid : {
78
- display : " flex" ,
79
- flexDirection : " column" ,
80
- alignItems : " center" ,
81
- justifyContent : " center" ,
82
- padding : " 5px" ,
78
+ display : ' flex' ,
79
+ flexDirection : ' column' ,
80
+ alignItems : ' center' ,
81
+ justifyContent : ' center' ,
82
+ padding : ' 5px' ,
83
83
} ,
84
84
} ) )
85
85
@@ -111,38 +111,40 @@ export default function Choices() {
111
111
const choiceImages = data . choiceImages
112
112
113
113
const leftImage = choiceImages . nodes . find (
114
- node => node . childImageSharp . fluid . originalName === " left.png"
114
+ node => node . childImageSharp . fluid . originalName === ' left.png'
115
115
)
116
116
117
117
const rightImage = choiceImages . nodes . find (
118
- node => node . childImageSharp . fluid . originalName === " right.png"
118
+ node => node . childImageSharp . fluid . originalName === ' right.png'
119
119
)
120
120
121
121
return (
122
122
< Grid container className = { classes . domainsContent } >
123
123
< Grid item lg = { 12 } md = { 12 } sm = { 12 } xs = { 12 } >
124
- < Typography
125
- variant = "h2"
126
- align = "center"
127
- color = "textPrimary"
128
- style = { {
129
- marginBottom : " 24px" ,
130
- } }
131
- >
132
- Make the Best Choice for Your Junior
133
- </ Typography >
124
+ < Typography
125
+ variant = "h2"
126
+ align = "center"
127
+ color = "textPrimary"
128
+ style = { {
129
+ marginBottom : ' 24px' ,
130
+ } }
131
+ >
132
+ Make the Best Choice for Your Junior
133
+ </ Typography >
134
134
135
- < Typography
136
- variant = "body1"
137
- align = "center"
138
- style = { {
139
- marginBottom : "24px" ,
140
- color : "#FF4C00" ,
141
- } }
142
- >
143
- < Box > Give your junior chance to try the best, easing the journey</ Box >
144
- < Box > to get him/her closer to their dream </ Box >
145
- </ Typography >
135
+ < Typography
136
+ variant = "body1"
137
+ align = "center"
138
+ style = { {
139
+ marginBottom : '24px' ,
140
+ color : '#FF4C00' ,
141
+ } }
142
+ >
143
+ < Box >
144
+ Give your junior chance to try the best, easing the journey
145
+ </ Box >
146
+ < Box > to get him/her closer to their dream </ Box >
147
+ </ Typography >
146
148
</ Grid >
147
149
148
150
< Grid container lg = { 12 } md = { 12 } sm = { 12 } xs = { 12 } >
0 commit comments