Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 6c2dabc

Browse files
sarthakkundrasarthakkundra
authored
Added testimonials section (#46)
* testimonial component * Added testimonial div * testimonial final * changed name * removed unused vars * eslint * reviewed changes / improved UI * fixed padding
1 parent 2bc9079 commit 6c2dabc

File tree

7 files changed

+224
-70
lines changed

7 files changed

+224
-70
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 46 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
"dependencies": {
3131
"@date-io/core": "^2.5.0",
3232
"@date-io/moment": "^1.3.13",
33+
"@emotion/core": "^10.0.28",
34+
"@emotion/styled": "^10.0.27",
3335
"@fortawesome/fontawesome-svg-core": "^1.2.29",
3436
"@fortawesome/free-brands-svg-icons": "^5.13.1",
3537
"@fortawesome/free-regular-svg-icons": "^5.13.1",

‎src/views/pages/HomeView/Events.js‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ const useStyles = makeStyles((theme) => ({
3737
height: '100%',
3838
display: 'flex',
3939
flexDirection: 'column',
40-
position: 'relative',
40+
position: 'relative'
4141
},
4242
cardMedia: {
43-
paddingTop: '55.75%', // set 61.25% for 16:9 or highresolution images--- currently set to 55.75% to fit hqquality images.
43+
paddingTop: '55.75%' // 16:9
4444
},
4545
cardContent: {
4646
flexGrow: 1
@@ -90,7 +90,7 @@ const useStyles = makeStyles((theme) => ({
9090
borderRadius: '0px 5px 5px 0px',
9191
color: 'black',
9292
backgroundColor: '#00FF75'
93-
},
93+
}
9494
}));
9595

9696
function Events({ className, ...rest }) {
@@ -116,22 +116,21 @@ function Events({ className, ...rest }) {
116116
md={4}
117117
>
118118
<Card className={classes.card}>
119-
{
120-
event.date_time ? (
121-
<div className={classes.eventdate}>
122-
<Typography
123-
variant="caption"
124-
style={{
125-
padding: '0px 12px',
126-
fontWeight: 500
127-
}}
128-
>
129-
{event.date_time}
130-
</Typography>
131-
</div>
132-
)
133-
: <></>
134-
}
119+
{event.date_time ? (
120+
<div className={classes.eventdate}>
121+
<Typography
122+
variant="caption"
123+
style={{
124+
padding: '0px 12px',
125+
fontWeight: 500
126+
}}
127+
>
128+
{event.date_time}
129+
</Typography>
130+
</div>
131+
) : (
132+
<></>
133+
)}
135134
<CardMedia
136135
className={classes.cardMedia}
137136
image={event.img}

‎src/views/pages/HomeView/HomeViewData.js‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,39 @@ export const openSourceContent = {
156156
]
157157
};
158158

159-
export const whatWeStandForDescription = ' We aim to provide a real world practical learning experience and'
160-
+ 'keep students informed about the latest trends in technology,'
161-
+ 'open-source and opportunities, so that they can keep up with the'
162-
+ 'fast-paced digital world by following a pi-shaped learning pattern.';
159+
export const whatWeStandForDescription =
160+
' We aim to provide a real world practical learning experience and' +
161+
'keep students informed about the latest trends in technology,' +
162+
'open-source and opportunities, so that they can keep up with the' +
163+
'fast-paced digital world by following a pi-shaped learning pattern.';
164+
165+
export const students = [
166+
{
167+
id: 1,
168+
msg: 'Thank you for the great ML webinars this is just a small gesture :)',
169+
img: '/static/images.icons/os3.svg',
170+
name: 'Sarthak',
171+
subName: 'Dell'
172+
},
173+
{
174+
id: 2,
175+
msg: 'CFC Testimonial msg 2',
176+
img: '/static/images.icons/os3.svg',
177+
name: 'Name2',
178+
subName: 'Dell'
179+
},
180+
{
181+
id: 3,
182+
msg: 'CFC Testimonial msg 3',
183+
img: '/static/images.icons/os3.svg',
184+
name: 'Name3',
185+
subName: 'Dell'
186+
},
187+
{
188+
id: 4,
189+
msg: 'CFC Testimonial msg 4',
190+
img: '/static/images.icons/os3.svg',
191+
name: 'Name4',
192+
subName: 'Dell'
193+
}
194+
];

‎src/views/pages/HomeView/Testimonials/TestimonialCard.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
//eslint-disable-next-line
2+
import React from 'react';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Typography from '@material-ui/core/Typography';
5+
import Avatar from '@material-ui/core/Avatar';
6+
import Box from '@material-ui/core/Box';
7+
import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
8+
9+
/** @jsx jsx */
10+
import {jsx} from '@emotion/core';
11+
import styled from '@emotion/styled';
12+
13+
const useStyles = makeStyles(theme => ({
14+
root: {
15+
display: 'flex',
16+
flexWrap: 'wrap',
17+
padding: '130px 0px',
18+
'& > *': {
19+
margin: theme.spacing(1),
20+
width: theme.spacing(16),
21+
height: theme.spacing(16)
22+
}
23+
},
24+
small: {
25+
width: theme.spacing(3),
26+
height: theme.spacing(3)
27+
}
28+
}));
29+
30+
function TestimonialCard({ student }) {
31+
const classes = useStyles();
32+
33+
return (
34+
<div className={classes.root}>
35+
<Box style={{ margin: '20px 10px'}}>
36+
<Message>
37+
<FormatQuoteIcon
38+
fontSize="large"
39+
style={{ margin: '0px 115px', color: 'purple' }}
40+
/>
41+
<Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
42+
{student.msg}
43+
</Typography>
44+
</Message>
45+
<Box style={{ margin: '2.3rem 8.2rem' }}>
46+
<Avatar
47+
alt={student.name}
48+
src="./quote.png"
49+
className={classes.large}
50+
/>
51+
52+
<Typography
53+
variant="h5"
54+
align="center"
55+
style={{ margin: '10px -5px' }}
56+
>
57+
{student.name}
58+
</Typography>
59+
<Typography
60+
variant="h7"
61+
align="center"
62+
style={{ margin: '10px' }}
63+
>
64+
{student.subName}
65+
</Typography>
66+
</Box>
67+
</Box>
68+
</div>
69+
);
70+
}
71+
72+
const Message = styled.div`
73+
position: relative;
74+
height: 200px;
75+
width: 300px;
76+
max-width: 400px;
77+
background: white;
78+
79+
padding: 40px 20px;
80+
box-sizing: box-order;
81+
&:after {
82+
position: absolute;
83+
width: 20px;
84+
height: 20px;
85+
border-top: 0px solid black;
86+
87+
top: 100%;
88+
left: 50%;
89+
margin-left: -10px;
90+
content: '';
91+
transform: rotate(45deg);
92+
margin-top: -10px;
93+
background: white;
94+
}
95+
&:hover {
96+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
97+
}
98+
`;
99+
100+
export default TestimonialCard;

0 commit comments

Comments
 (0)