Skip to content

Commit 0b04fb0

Browse files
DanKhooDanKhoo
committed
Merge pull request #22 from kohchihao/update-home-page
1 parent 1f2be96 commit 0b04fb0

File tree

27 files changed

+307
-76
lines changed

27 files changed

+307
-76
lines changed

‎src/components/NavBar.js

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,9 @@ class NavBar extends Component {
137137

138138
<NavItemMobile to="about" title="About" classes={classes} />
139139

140-
<NavItemMobile to="volunteer" title="Volunteer" classes={classes} />
140+
<NavItemMobile to="programmes" title="Programmes" classes={classes} />
141141

142-
<NavItemMobile to="young_coder" title="Young Coders" classes={classes} />
143-
144-
<NavItemMobile to="cap" title="CAP" classes={classes} />
142+
<NavItemMobile to="join_us" title="Join Us" classes={classes} />
145143
</List>
146144
</div>
147145
);
@@ -157,7 +155,7 @@ class NavBar extends Component {
157155
color="inherit"
158156
aria-label="Menu"
159157
>
160-
<MenuIcon color="primary" />
158+
<MenuIcon color="secondary" />
161159
</IconButton>
162160
</div>
163161

@@ -183,11 +181,9 @@ class NavBar extends Component {
183181

184182
<NavItem title="About" to="about" classes={classes} />
185183

186-
<NavItem title="Volunteer" to="volunteer" classes={classes} />
187-
188-
<NavBoxItem title="Young Coders" to="young_coder" classes={classes} />
184+
<NavItem title="Programmes" to="programmes" classes={classes} />
189185

190-
<NavBoxItem title="CAP" to="cap" classes={classes} />
186+
<NavBoxItem title="Join Us" to="join_us" classes={classes} />
191187
</div>
192188

193189
{/* Mobile Nav Drawer */}

‎src/components/getPageContext.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ const theme = createMuiTheme({
1313
dark: purple[700],
1414
},
1515
secondary: {
16-
light: green[300],
17-
main: green[500],
18-
dark: green[700],
19-
},
16+
main: "#000",
17+
}
2018
},
2119
typography: {
2220
useNextVariants: true,

‎src/components/home/about_us/AboutUsComponent.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const styles = theme => ({
1212
padding: '3rem 2rem 3rem 2rem', //top right bottom left
1313
textAlign: 'center',
1414
[theme.breakpoints.up('md')]: {
15-
padding: '3rem 6rem 3rem 6rem', //top right bottom left
15+
padding: '0rem 0rem 0rem 6rem', //top right bottom left
1616
},
1717
},
1818
textGrid: {
@@ -23,29 +23,28 @@ const styles = theme => ({
2323
title: {
2424
color: 'black',
2525
fontSize: '1rem',
26-
27-
// fontWeight: 700,
2826
[theme.breakpoints.up('md')]: {
2927
fontSize: '1rem',
3028
lineHeight: 1.5,
3129
},
3230
},
3331
imageGrid: {
3432
display: 'none',
33+
maxHeight: '500px',
34+
paddingLeft: '50px',
3535
[theme.breakpoints.up('md')]: {
3636
display: 'flex',
3737
flexDirection: 'column',
3838
justifyContent: 'center'
3939
},
4040
},
4141
iconImage: {
42-
maxHeight: '85%',
4342
display: 'none',
4443
[theme.breakpoints.up('md')]: {
4544
display: 'flex',
4645
},
4746
'& img': {
48-
objectFit: 'contain !important',
47+
objectFit: 'cover !important',
4948
},
5049
},
5150
});
@@ -72,7 +71,7 @@ class AboutUsComponent extends Component {
7271
</Typography>
7372
</Grid>
7473
<Grid item xs={12} sm={8} className={classes.imageGrid}>
75-
<Image filename={'macbookpro.png'} classProps={classes.iconImage} />
74+
<Image filename={'about_us.jpg'} classProps={classes.iconImage} />
7675
</Grid>
7776
</Grid>
7877
</div>

‎src/components/home/banner/BannerComponent.js

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import Button from '@material-ui/core/Button';
77
import { withStyles } from '@material-ui/core/styles';
88

99
import BannerImage from '../../commons/BannerImage';
10-
import { primary, hoverPrimary } from '../../../utils/Colors'
10+
import { primary, hoverPrimary } from '../../../utils/Colors';
11+
import ReactRotatingText from 'react-rotating-text';
12+
import '../../../css/typing.css';
1113

1214
const styles = theme => ({
1315
root: {
@@ -38,7 +40,7 @@ const styles = theme => ({
3840
fontSize: '1.75rem',
3941
[theme.breakpoints.up('md')]: {
4042
fontSize: '2.125rem',
41-
lineHeight: 1.5
43+
lineHeight: 1.5,
4244
},
4345
},
4446
description: {
@@ -57,7 +59,7 @@ const styles = theme => ({
5759
padding: '8px 15px',
5860
textTransform: 'capitalize',
5961
'&:hover': {
60-
backgroundColor: 'rgba(255, 255, 255, 0.8)'
62+
backgroundColor: 'rgba(255, 255, 255, 0.8)',
6163
},
6264
[theme.breakpoints.up('md')]: {
6365
padding: '10px 25px',
@@ -69,38 +71,44 @@ const styles = theme => ({
6971
color: 'white',
7072
marginRight: 0,
7173
'&:hover': {
72-
backgroundColor: hoverPrimary
74+
backgroundColor: hoverPrimary,
7375
},
7476
[theme.breakpoints.up('md')]: {
7577
marginRight: 15,
7678
},
7779
},
7880
links: {
7981
textDecoration: 'none',
80-
color: 'black'
82+
color: 'black',
8183
},
8284
});
8385

8486
class BannerComponent extends Component {
85-
8687
render() {
87-
const { title, description, btnOneText, btnOneLink, btnTwoText, btnTwoLink } = this.props;
88+
const { title, description, btnOneText, btnOneLink } = this.props;
8889
const { classes } = this.props;
89-
90+
9091
return (
9192
<div className={classes.root}>
9293
<BannerImage filename={'home_cover.jpg'} classProps={classes.bgImg} />
9394
<div className={classes.info}>
94-
<Typography variant="h4" className={classes.title} gutterBottom>{title}</Typography>
95-
<Typography variant="h6" className={classes.description}>{description}</Typography>
95+
<Typography variant="h4" className={classes.title} gutterBottom>
96+
{title}
97+
</Typography>
98+
{/* <Typography variant="h6" className={classes.description}>
99+
{description}
100+
</Typography> */}
101+
102+
<Typography variant="h6" className={classes.description}>
103+
{'Every '}
104+
<ReactRotatingText items={['{bids}', '10110']} />
105+
{' counts.'}
106+
</Typography>
107+
96108
<div>
97-
<Link to={"/" + btnOneLink} className={classes.links}>
109+
<Link to={'/' + btnOneLink} className={classes.links}>
98110
<Button className={classes.btn}>{btnOneText}</Button>
99111
</Link>
100-
101-
<Link to={"/" + btnTwoLink} className={classes.links}>
102-
<Button className={`${classes.btn} ${classes.btnCTA}`}>{btnTwoText}</Button>
103-
</Link>
104112
</div>
105113
</div>
106114
</div>
@@ -112,9 +120,7 @@ BannerComponent.propTypes = {
112120
title: PropTypes.string.isRequired,
113121
btnOneText: PropTypes.string.isRequired,
114122
btnOneLink: PropTypes.string.isRequired,
115-
btnTwoText: PropTypes.string.isRequired,
116-
btnTwoLink: PropTypes.string.isRequired,
117123
};
118124

119125
//make this component available to the app
120-
export default withStyles(styles)(BannerComponent);
126+
export default withStyles(styles)(BannerComponent);

‎src/components/home/footer/FooterComponent.js

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,59 @@
11
import React, { Component } from 'react';
2-
import { Link } from 'gatsby';
32

43
import Typography from '@material-ui/core/Typography';
54
import { withStyles } from '@material-ui/core/styles';
65

7-
import { grey26 } from '../../../utils/Colors';
6+
import { grey13 } from '../../../utils/Colors';
7+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8+
import { primary } from '../../../utils/Colors';
9+
import {
10+
faFacebookF,
11+
faTelegramPlane,
12+
faInstagram,
13+
} from '@fortawesome/free-brands-svg-icons/';
14+
15+
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
816

917
const styles = theme => ({
1018
root: {
11-
backgroundColor: grey26,
12-
padding: '2rem 1.5rem 2rem 4rem',
19+
backgroundColor: grey13,
20+
padding: '2rem 2rem 2rem 2rem', //top right bottom left
21+
[theme.breakpoints.up('md')]: {
22+
//desktop
23+
padding: '5rem 6rem 5rem 6rem',
24+
},
1325
},
1426
description: {
1527
marginBottom: 10,
28+
color: '#6c757d',
29+
fontSize: '0.7rem',
30+
[theme.breakpoints.up('md')]: {
31+
fontSize: '0.9rem',
32+
},
33+
},
34+
descriptionLink: {
35+
textDecoration: 'none',
1636
color: 'white',
1737
fontSize: '0.7rem',
38+
'&:hover': {
39+
color: primary,
40+
},
1841
[theme.breakpoints.up('md')]: {
1942
fontSize: '0.9rem',
2043
},
44+
paddingRight: '20px',
2145
},
2246
links: {
2347
textDecoration: 'none',
2448
color: 'white',
2549
fontSize: '0.9rem',
2650
'&:hover': {
27-
color: 'rgba(255, 255, 255, 0.8)',
51+
color: primary,
2852
},
2953
[theme.breakpoints.up('md')]: {
3054
fontSize: '1.1rem',
3155
},
56+
paddingRight: '20px',
3257
},
3358
});
3459

@@ -39,23 +64,74 @@ class FooterComponent extends Component {
3964

4065
const buildTime = data.buildTimeZone;
4166

67+
const ExternalLinkWithIcon = ({ to, className, iconType }) => {
68+
return (
69+
<a
70+
href={to}
71+
className={classes.links}
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
>
75+
<FontAwesomeIcon icon={iconType} />
76+
</a>
77+
);
78+
};
79+
80+
const ExternalLinkWithText = ({ to, className, text }) => {
81+
return (
82+
<a
83+
href={to}
84+
className={className}
85+
target="_blank"
86+
rel="noopener noreferrer"
87+
>
88+
{text}
89+
</a>
90+
);
91+
};
92+
4293
return (
4394
<div className={classes.root}>
44-
<Link to={'/facebook'} className={classes.links}>
45-
Facebook .{' '}
46-
</Link>
47-
<Link to={'/instagram'} className={classes.links}>
48-
Instagram .{' '}
49-
</Link>
50-
<Link to={'/twitter'} className={classes.links}>
51-
Twitter
52-
</Link>
53-
<Typography variant="body1" className={classes.description}>
95+
<div>
96+
<ExternalLinkWithIcon
97+
to={'https://www.facebook.com'}
98+
className={classes.links}
99+
iconType={faFacebookF}
100+
/>
101+
102+
<ExternalLinkWithIcon
103+
to={'https://www.instagram.com'}
104+
className={classes.links}
105+
iconType={faInstagram}
106+
/>
107+
108+
<ExternalLinkWithIcon
109+
to={'https://t.me/CodeForCommunity'}
110+
className={classes.links}
111+
iconType={faTelegramPlane}
112+
/>
113+
114+
<ExternalLinkWithIcon
115+
to={'https://www.twitter.com'}
116+
className={classes.links}
117+
iconType={faEnvelope}
118+
/>
119+
</div>
120+
121+
<Typography variant="subtitle2" className={classes.description}>
54122
Updated on {buildTime}
55123
<br />
56-
Designed and built by <u>core team</u>.<br />
124+
Designed and built by{' '}
125+
<ExternalLinkWithText
126+
to={'https://github.com'}
127+
className={classes.descriptionLink}
128+
text={'core team.'}
129+
/>
130+
<br />
57131
Copyright &#169; 2019 - Present. All rights reserved.
58132
</Typography>
133+
134+
<Typography variant="subtitle2" className={classes.description} />
59135
</div>
60136
);
61137
}

‎src/css/typing.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.react-rotating-text-cursor {
2+
animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s
3+
infinite;
4+
}
5+
6+
@keyframes blinking-cursor {
7+
0% {
8+
opacity: 0;
9+
}
10+
50% {
11+
opacity: 1;
12+
}
13+
100% {
14+
opacity: 0;
15+
}
16+
}

‎src/images/about_us.jpg

166 KB
Loading

‎src/images/codeforcommunity.png

-33.1 KB
Loading

‎src/images/macbookpro.png

-158 KB
Binary file not shown.

‎src/images/testimonial/testimonial_1/20.jpg

-5.76 KB
Binary file not shown.

0 commit comments

Comments
 (0)