Added testimonials section

package.json

@@ -30,6 +30,8 @@
   "dependencies": {
     "@date-io/core": "^2.5.0",
     "@date-io/moment": "^1.3.13",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-brands-svg-icons": "^5.13.1",
     "@fortawesome/free-regular-svg-icons": "^5.13.1",

src/views/pages/HomeView/Events.js

@@ -38,10 +38,10 @@ const useStyles = makeStyles((theme) => ({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    position: 'relative',
+    position: 'relative'
   },
   cardMedia: {
-    paddingTop: '55.75%', // set 61.25% for 16:9 or highresolution images--- currently set to 55.75% to fit hqquality images.
+    paddingTop: '55.75%' // 16:9
   },
   cardContent: {
     flexGrow: 1
@@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '0px 5px 5px 0px',
     color: 'black',
     backgroundColor: '#00FF75'
-  },
+  }
 }));
 
 function Events({ className, ...rest }) {
@@ -113,22 +113,21 @@ function Events({ className, ...rest }) {
               md={4}
             >
               <Card className={classes.card}>
-                {
-                  event.date_time ? (
-                    <div className={classes.eventdate}>
-                      <Typography
-                        variant="caption"
-                        style={{
-                          padding: '0px 12px',
-                          fontWeight: 500
-                        }}
-                      >
-                        {event.date_time}
-                      </Typography>
-                    </div>
-                  )
-                    : <></>
-                }
+                {event.date_time ? (
+                  <div className={classes.eventdate}>
+                    <Typography
+                      variant="caption"
+                      style={{
+                        padding: '0px 12px',
+                        fontWeight: 500
+                      }}
+                    >
+                      {event.date_time}
+                    </Typography>
+                  </div>
+                ) : (
+                  <></>
+                )}
                 <CardMedia
                   className={classes.cardMedia}
                   image={event.img}

src/views/pages/HomeView/HomeViewData.js

@@ -149,7 +149,39 @@ export const openSourceContent = {
   ]
 };
 
-export const whatWeStandForDescription = ' We aim to provide a real world practical learning experience and'
-  + 'keep students informed about the latest trends in technology,'
-  + 'open-source and opportunities, so that they can keep up with the'
-  + 'fast-paced digital world by following a pi-shaped learning pattern.';
+export const whatWeStandForDescription =
+  ' We aim to provide a real world practical learning experience and' +
+  'keep students informed about the latest trends in technology,' +
+  'open-source and opportunities, so that they can keep up with the' +
+  'fast-paced digital world by following a pi-shaped learning pattern.';
+
+export const students = [
+  {
+    id: 1,
+    msg: 'Thank you for the great ML webinars this is just a small gesture :)',
+    img: '/static/images.icons/os3.svg',
+    name: 'Sarthak',
+    subName: 'Dell'
+  },
+  {
+    id: 2,
+    msg: 'CFC Testimonial msg 2',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name2',
+    subName: 'Dell'
+  },
+  {
+    id: 3,
+    msg: 'CFC Testimonial msg 3',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name3',
+    subName: 'Dell'
+  },
+  {
+    id: 4,
+    msg: 'CFC Testimonial msg 4',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name4',
+    subName: 'Dell'
+  }
+];

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

@@ -0,0 +1,100 @@
+//eslint-disable-next-line
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
+
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import styled from '@emotion/styled';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: '130px 0px',
+    '& > *': {
+      margin: theme.spacing(1),
+      width: theme.spacing(16),
+      height: theme.spacing(16)
+    }
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3)
+  }
+}));
+
+function TestimonialCard({ student }) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Box style={{ margin: '20px 10px'}}>
+        <Message>
+          <FormatQuoteIcon
+            fontSize="large"
+            style={{ margin: '0px 115px', color: 'purple' }}
+          />
+          <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
+            {student.msg}
+          </Typography>
+        </Message>
+        <Box style={{ margin: '2.3rem 8.2rem' }}>
+          <Avatar
+            alt={student.name}
+            src="./quote.png"
+            className={classes.large}
+          />
+
+          <Typography
+            variant="h5"
+            align="center"
+            style={{ margin: '10px -5px' }}
+          >
+            {student.name}
+          </Typography>
+          <Typography
+            variant="h7"
+            align="center"
+            style={{ margin: '10px' }}
+          >
+            {student.subName}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+const Message = styled.div`
+  position: relative;
+  height: 200px;
+  width: 300px;
+  max-width: 400px;
+  background: white;
+
+  padding: 40px 20px;
+  box-sizing: box-order;
+  &:after {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-top: 0px solid black;
+
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+    content: '';
+    transform: rotate(45deg);
+    margin-top: -10px;
+    background: white;
+  }
+  &:hover {
+    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export default TestimonialCard;