From e1157182712f16de70eb90f4e387c1f24def04e7 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Fri, 17 Jul 2020 15:51:37 +0530
Subject: [PATCH 1/8] testimonial component

---
 src/views/pages/HomeView/HomeViewData.js      |  9 ++++
 .../HomeView/Testimonials/TestimonialCard.js  | 51 +++++++++++++++++++
 src/views/pages/HomeView/index.js             |  3 ++
 3 files changed, 63 insertions(+)
 create mode 100644 src/views/pages/HomeView/Testimonials/TestimonialCard.js

diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 56233e10..872dfb5a 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -153,3 +153,12 @@ export const whatWeStandForDescription = ' We aim to provide a real world practi
   + '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: 'CFC Testimonial msg',
+      img: '/static/images.icons/os3.svg',
+      name: 'Name1'
+    }
+  ]
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
new file mode 100644
index 00000000..487810e2
--- /dev/null
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+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';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& > *': {
+      margin: theme.spacing(1),
+      width: theme.spacing(16),
+      height: theme.spacing(16)
+    }
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3)
+  }
+}));
+
+function TestimonialCard() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Box style={{ margin: '40px' }}>
+        <Paper elevation={3} style={{ padding: '40px 0px' }}>
+          <FormatQuoteIcon
+            fontSize="large"
+            style={{ margin: '0px 50px', color: 'purple' }}
+          />
+          <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
+            Some review
+          </Typography>
+        </Paper>
+        <Box style={{ margin: '10px 47px' }}>
+          <Avatar alt="Student 1" src="./quote.png" className={classes.small} />
+        </Box>
+        <Typography variant="h6" align="center">
+          Name
+        </Typography>
+      </Box>
+    </div>
+  );
+}
+
+export default TestimonialCard;
diff --git a/src/views/pages/HomeView/index.js b/src/views/pages/HomeView/index.js
index a273e20b..275216d4 100755
--- a/src/views/pages/HomeView/index.js
+++ b/src/views/pages/HomeView/index.js
@@ -12,6 +12,8 @@ import MentorExperience from './MentorExperience';
 import WatchOurVideoView from './WatchVideos';
 import { experience, mentors } from './HomeViewData';
 
+import TestimonialCard from './Testimonials/TestimonialCard';
+
 const useStyles = makeStyles(() => ({
   root: {}
 }));
@@ -26,6 +28,7 @@ function HomeView() {
       <Events id="events" />
       <MentorExperience experience={experience} />
       <StandForSection id="about" />
+      <TestimonialCard />
       <Team id="team" mentors={mentors} />
       <WatchOurVideoView />
       <CTA id="actions" />

From 129418568c9c1bc5ab3c4f7ff6b96ca337524ce6 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Sun, 19 Jul 2020 01:49:36 +0530
Subject: [PATCH 2/8] Added testimonial div

---
 src/views/pages/HomeView/HomeViewData.js      | 18 +++++++
 .../HomeView/Testimonials/TestimonialCard.js  |  8 ++--
 .../pages/HomeView/Testimonials/index.js      | 48 +++++++++++++++++++
 src/views/pages/HomeView/index.js             |  6 +--
 4 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 src/views/pages/HomeView/Testimonials/index.js

diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 872dfb5a..1fd3f79d 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -160,5 +160,23 @@ export const whatWeStandForDescription = ' We aim to provide a real world practi
       msg: 'CFC Testimonial msg',
       img: '/static/images.icons/os3.svg',
       name: 'Name1'
+    },
+    {
+      id: 2,
+      msg: 'CFC Testimonial msg 2',
+      img: '/static/images.icons/os3.svg',
+      name: 'Name2'
+    },
+    {
+      id: 3,
+      msg: 'CFC Testimonial msg 3',
+      img: '/static/images.icons/os3.svg',
+      name: 'Name3'
+    },
+    {
+      id: 4,
+      msg: 'CFC Testimonial msg 4',
+      img: '/static/images.icons/os3.svg',
+      name: 'Name4'
     }
   ]
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index 487810e2..01d1e956 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -22,26 +22,26 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function TestimonialCard() {
+function TestimonialCard({ student }) {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <Box style={{ margin: '40px' }}>
+      <Box style={{ margin: '80px 10px' }}>
         <Paper elevation={3} style={{ padding: '40px 0px' }}>
           <FormatQuoteIcon
             fontSize="large"
             style={{ margin: '0px 50px', color: 'purple' }}
           />
           <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
-            Some review
+            {student.msg}
           </Typography>
         </Paper>
         <Box style={{ margin: '10px 47px' }}>
           <Avatar alt="Student 1" src="./quote.png" className={classes.small} />
         </Box>
         <Typography variant="h6" align="center">
-          Name
+          {student.name}
         </Typography>
       </Box>
     </div>
diff --git a/src/views/pages/HomeView/Testimonials/index.js b/src/views/pages/HomeView/Testimonials/index.js
new file mode 100644
index 00000000..96257ff2
--- /dev/null
+++ b/src/views/pages/HomeView/Testimonials/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Grid, Typography, makeStyles } from '@material-ui/core';
+
+import TestimonialCard from './TestimonialCard';
+
+const useStyles = makeStyles(theme=>({
+  root: {
+    backgroundColor: 'white',
+    padding: theme.spacing(10),
+    paddingLeft: 70,
+    paddingRight: 70,
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  }
+}));
+const Testimonials = ({ students }) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Container maxWidth="lg">
+        <Typography variant="h4" align="center" style={{ color: '#A60000' }}>
+          Testimonials
+        </Typography>
+        <Typography
+          style={{ marginTop: '10px' }}
+          variant="h2"
+          align="center"
+          gutterBottom
+          color="textPrimary"
+        >
+          What do our Mentees Say About Us
+        </Typography>
+        <Grid container component="dl" style={{ padding: '20px' }}>
+          {students.map((student, i) => (
+            <Grid item key={i} md={3} sm={3} xs={6}>
+              <TestimonialCard student={student} />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
+  );
+};
+
+export default Testimonials;
diff --git a/src/views/pages/HomeView/index.js b/src/views/pages/HomeView/index.js
index 275216d4..327a65fa 100755
--- a/src/views/pages/HomeView/index.js
+++ b/src/views/pages/HomeView/index.js
@@ -10,9 +10,9 @@ import Team from './Team';
 import Promoters from './Promoters';
 import MentorExperience from './MentorExperience';
 import WatchOurVideoView from './WatchVideos';
-import { experience, mentors } from './HomeViewData';
+import { experience, students, mentors } from './HomeViewData';
 
-import TestimonialCard from './Testimonials/TestimonialCard';
+import Testimonials from './Testimonials/index'
 
 const useStyles = makeStyles(() => ({
   root: {}
@@ -28,7 +28,7 @@ function HomeView() {
       <Events id="events" />
       <MentorExperience experience={experience} />
       <StandForSection id="about" />
-      <TestimonialCard />
+      <Testimonials students={students} />
       <Team id="team" mentors={mentors} />
       <WatchOurVideoView />
       <CTA id="actions" />

From 405d2fed269dc88bc0cd5f16f3daf51f23cca5fc Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Sun, 19 Jul 2020 19:45:24 +0530
Subject: [PATCH 3/8] testimonial final

---
 package-lock.json                             | 56 ++++---------------
 package.json                                  |  2 +
 .../HomeView/Testimonials/TestimonialCard.js  | 48 ++++++++++++++--
 .../pages/HomeView/Testimonials/index.js      |  9 +--
 4 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5f87cd21..b4353f0d 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1442,8 +1442,6 @@
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
       "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/sheet": "0.9.4",
         "@emotion/stylis": "0.8.5",
@@ -1455,8 +1453,6 @@
       "version": "10.0.28",
       "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
       "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/runtime": "^7.5.5",
         "@emotion/cache": "^10.0.27",
@@ -1470,8 +1466,6 @@
       "version": "10.0.27",
       "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
       "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/serialize": "^0.11.15",
         "@emotion/utils": "0.11.3",
@@ -1487,8 +1481,6 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/memoize": "0.7.4"
       }
@@ -1496,16 +1488,12 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
     "@emotion/serialize": {
       "version": "0.11.16",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
       "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/hash": "0.8.0",
         "@emotion/memoize": "0.7.4",
@@ -1517,25 +1505,19 @@
         "@emotion/hash": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-          "dev": true,
-          "optional": true
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
         }
       }
     },
     "@emotion/sheet": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
     },
     "@emotion/styled": {
       "version": "10.0.27",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
       "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/styled-base": "^10.0.27",
         "babel-plugin-emotion": "^10.0.27"
@@ -1545,8 +1527,6 @@
       "version": "10.0.31",
       "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
       "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/runtime": "^7.5.5",
         "@emotion/is-prop-valid": "0.8.8",
@@ -1557,30 +1537,22 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
     },
     "@emotion/weak-memoize": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.29",
@@ -3645,8 +3617,6 @@
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.29.tgz",
       "integrity": "sha512-7Jpi1OCxjyz0k163lKtqP+LHMg5z3S6A7vMBfHnF06l2unmtsOmFDzZBpGf0CWo1G4m8UACfVcDJiSiRuu/cSw==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/helper-module-imports": "^7.0.0",
         "@emotion/hash": "0.8.0",
@@ -3663,9 +3633,7 @@
         "@emotion/hash": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-          "dev": true,
-          "optional": true
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
         }
       }
     },
@@ -3807,9 +3775,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -7609,9 +7575,7 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "find-up": {
       "version": "2.1.0",
diff --git a/package.json b/package.json
index 95ae76d9..048fdc4a 100755
--- a/package.json
+++ b/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",
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index 01d1e956..eb8c428a 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -6,6 +6,10 @@ import Avatar from '@material-ui/core/Avatar';
 import Box from '@material-ui/core/Box';
 import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
 
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import styled from '@emotion/styled'
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
@@ -28,24 +32,56 @@ function TestimonialCard({ student }) {
   return (
     <div className={classes.root}>
       <Box style={{ margin: '80px 10px' }}>
-        <Paper elevation={3} style={{ padding: '40px 0px' }}>
+        <Message>
           <FormatQuoteIcon
             fontSize="large"
-            style={{ margin: '0px 50px', color: 'purple' }}
+            style={{ margin: '0px 80px', color: 'purple' }}
           />
           <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
             {student.msg}
           </Typography>
-        </Paper>
-        <Box style={{ margin: '10px 47px' }}>
+          </Message>
+        <Box style={{ margin: '2rem 7rem' }}>
           <Avatar alt="Student 1" src="./quote.png" className={classes.small} />
-        </Box>
-        <Typography variant="h6" align="center">
+      
+        <Typography variant="h6" align="center" style={{margin: '0px -10px'}}>
           {student.name}
         </Typography>
+        </Box>
       </Box>
     </div>
   );
 }
 
+const Message = styled.div`
+position: relative;
+height: 200px;
+width: 250px;
+max-width: 400px;
+background: white;
+border: 0.5px solid black;
+padding: 40px 20px;
+box-sizing: box-order;
+&:after {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-top: 0px solid black;
+  border-right: 0.5px solid black;
+  border-bottom: 0.5px solid black;
+  border-left: 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;
diff --git a/src/views/pages/HomeView/Testimonials/index.js b/src/views/pages/HomeView/Testimonials/index.js
index 96257ff2..46877d5a 100644
--- a/src/views/pages/HomeView/Testimonials/index.js
+++ b/src/views/pages/HomeView/Testimonials/index.js
@@ -4,13 +4,14 @@ import { Container, Grid, Typography, makeStyles } from '@material-ui/core';
 
 import TestimonialCard from './TestimonialCard';
 
-const useStyles = makeStyles(theme=>({
+const useStyles = makeStyles(theme => ({
   root: {
+    flexGrow: 1,
     backgroundColor: 'white',
     padding: theme.spacing(10),
     paddingLeft: 70,
     paddingRight: 70,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('xs')]: {
       paddingLeft: 15,
       paddingRight: 15
     }
@@ -33,9 +34,9 @@ const Testimonials = ({ students }) => {
         >
           What do our Mentees Say About Us
         </Typography>
-        <Grid container component="dl" style={{ padding: '20px' }}>
+        <Grid container spacing={2} component="div">
           {students.map((student, i) => (
-            <Grid item key={i} md={3} sm={3} xs={6}>
+            <Grid item key={i} md={3} sm={6} xs={12}>
               <TestimonialCard student={student} />
             </Grid>
           ))}

From 3004d196287a750d22d8cf5d9ec35345c1e5d853 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Mon, 20 Jul 2020 01:59:03 +0530
Subject: [PATCH 4/8] changed name

---
 src/views/pages/HomeView/Events.js            | 37 +++++-----
 src/views/pages/HomeView/HomeViewData.js      | 61 ++++++++--------
 .../HomeView/Testimonials/TestimonialCard.js  | 73 ++++++++++---------
 src/views/pages/HomeView/index.js             |  2 +-
 4 files changed, 88 insertions(+), 85 deletions(-)

diff --git a/src/views/pages/HomeView/Events.js b/src/views/pages/HomeView/Events.js
index dc52cb96..e9c20860 100755
--- a/src/views/pages/HomeView/Events.js
+++ b/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: '61.25%' // 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}
diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 1fd3f79d..67688eef 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -149,34 +149,35 @@ 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: 'CFC Testimonial msg',
-      img: '/static/images.icons/os3.svg',
-      name: 'Name1'
-    },
-    {
-      id: 2,
-      msg: 'CFC Testimonial msg 2',
-      img: '/static/images.icons/os3.svg',
-      name: 'Name2'
-    },
-    {
-      id: 3,
-      msg: 'CFC Testimonial msg 3',
-      img: '/static/images.icons/os3.svg',
-      name: 'Name3'
-    },
-    {
-      id: 4,
-      msg: 'CFC Testimonial msg 4',
-      img: '/static/images.icons/os3.svg',
-      name: 'Name4'
-    }
-  ]
+export const students = [
+  {
+    id: 1,
+    msg: 'CFC Testimonial msg',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name1'
+  },
+  {
+    id: 2,
+    msg: 'CFC Testimonial msg 2',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name2'
+  },
+  {
+    id: 3,
+    msg: 'CFC Testimonial msg 3',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name3'
+  },
+  {
+    id: 4,
+    msg: 'CFC Testimonial msg 4',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name4'
+  }
+];
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index eb8c428a..d636fd0c 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -8,7 +8,7 @@ import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import styled from '@emotion/styled'
+import styled from '@emotion/styled';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -40,13 +40,17 @@ function TestimonialCard({ student }) {
           <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
             {student.msg}
           </Typography>
-          </Message>
+        </Message>
         <Box style={{ margin: '2rem 7rem' }}>
-          <Avatar alt="Student 1" src="./quote.png" className={classes.small} />
-      
-        <Typography variant="h6" align="center" style={{margin: '0px -10px'}}>
-          {student.name}
-        </Typography>
+          <Avatar alt={student.name} src="./quote.png" className={classes.small} />
+
+          <Typography
+            variant="h6"
+            align="center"
+            style={{ margin: '0px -10px' }}
+          >
+            {student.name}
+          </Typography>
         </Box>
       </Box>
     </div>
@@ -54,34 +58,33 @@ function TestimonialCard({ student }) {
 }
 
 const Message = styled.div`
-position: relative;
-height: 200px;
-width: 250px;
-max-width: 400px;
-background: white;
-border: 0.5px solid black;
-padding: 40px 20px;
-box-sizing: box-order;
-&:after {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-top: 0px solid black;
-  border-right: 0.5px solid black;
-  border-bottom: 0.5px solid black;
-  border-left: 0px solid black;
-  top: 100%;
-  left: 50%;
-  margin-left: -10px;
-  content: "";
-  transform: rotate(45deg);
-  margin-top: -10px;
+  position: relative;
+  height: 200px;
+  width: 250px;
+  max-width: 400px;
   background: white;
-}
-&:hover {
-  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
-}
-`
-
+   border: 0.5px solid black;
+  padding: 40px 20px;
+  box-sizing: box-order;
+  &:after {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-top: 0px solid black;
+    border-right: 0.5px solid black;
+    border-bottom: 0.5px solid black;
+    border-left: 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;
diff --git a/src/views/pages/HomeView/index.js b/src/views/pages/HomeView/index.js
index 327a65fa..83898f63 100755
--- a/src/views/pages/HomeView/index.js
+++ b/src/views/pages/HomeView/index.js
@@ -12,7 +12,7 @@ import MentorExperience from './MentorExperience';
 import WatchOurVideoView from './WatchVideos';
 import { experience, students, mentors } from './HomeViewData';
 
-import Testimonials from './Testimonials/index'
+import Testimonials from './Testimonials/index';
 
 const useStyles = makeStyles(() => ({
   root: {}

From a89cb628b3e611a7adda22a66196aa4122b9e8e1 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Tue, 21 Jul 2020 23:31:19 +0530
Subject: [PATCH 5/8] removed unused vars

---
 .../pages/HomeView/Testimonials/TestimonialCard.js    | 11 +++++++----
 src/views/pages/HomeView/Testimonials/index.js        |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index d636fd0c..60f06084 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
 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 { css, jsx } from '@emotion/core';
+import '@emotion/core';
 import styled from '@emotion/styled';
 
 const useStyles = makeStyles(theme => ({
@@ -42,7 +41,11 @@ function TestimonialCard({ student }) {
           </Typography>
         </Message>
         <Box style={{ margin: '2rem 7rem' }}>
-          <Avatar alt={student.name} src="./quote.png" className={classes.small} />
+          <Avatar
+            alt={student.name}
+            src="./quote.png"
+            className={classes.small}
+          />
 
           <Typography
             variant="h6"
@@ -63,7 +66,7 @@ const Message = styled.div`
   width: 250px;
   max-width: 400px;
   background: white;
-   border: 0.5px solid black;
+  border: 0.5px solid black;
   padding: 40px 20px;
   box-sizing: box-order;
   &:after {
diff --git a/src/views/pages/HomeView/Testimonials/index.js b/src/views/pages/HomeView/Testimonials/index.js
index 46877d5a..c0f3e5a5 100644
--- a/src/views/pages/HomeView/Testimonials/index.js
+++ b/src/views/pages/HomeView/Testimonials/index.js
@@ -46,4 +46,8 @@ const Testimonials = ({ students }) => {
   );
 };
 
+Testimonials.propTypes = {
+  students: PropTypes.array.isRequired
+};
+
 export default Testimonials;

From f63462d47fa91ddecfbc20ee4fbb28ea18a268f0 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Tue, 21 Jul 2020 23:46:02 +0530
Subject: [PATCH 6/8] eslint

---
 src/views/pages/HomeView/Testimonials/TestimonialCard.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index 60f06084..8cec761b 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -1,3 +1,4 @@
+//eslint-disable-next-line
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -6,7 +7,7 @@ import Box from '@material-ui/core/Box';
 import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
 
 /** @jsx jsx */
-import '@emotion/core';
+import {jsx} from '@emotion/core';
 import styled from '@emotion/styled';
 
 const useStyles = makeStyles(theme => ({

From 5e5ebb8dd057b56392d876e9b2251eb74c84657c Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Wed, 22 Jul 2020 22:38:45 +0530
Subject: [PATCH 7/8] reviewed changes / improved UI

---
 src/views/pages/HomeView/Events.js            |  2 +-
 src/views/pages/HomeView/HomeViewData.js      | 14 ++++++----
 .../HomeView/Testimonials/TestimonialCard.js  | 28 +++++++++++--------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/views/pages/HomeView/Events.js b/src/views/pages/HomeView/Events.js
index e9c20860..b1decf98 100755
--- a/src/views/pages/HomeView/Events.js
+++ b/src/views/pages/HomeView/Events.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative'
   },
   cardMedia: {
-    paddingTop: '61.25%' // 16:9
+    paddingTop: '55.75%' // 16:9
   },
   cardContent: {
     flexGrow: 1
diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 67688eef..bc3aecac 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -158,26 +158,30 @@ export const whatWeStandForDescription =
 export const students = [
   {
     id: 1,
-    msg: 'CFC Testimonial msg',
+    msg: 'Thank you for the great ML webinars this is just a small gesture :)',
     img: '/static/images.icons/os3.svg',
-    name: 'Name1'
+    name: 'Sarthak',
+    subName: 'Dell'
   },
   {
     id: 2,
     msg: 'CFC Testimonial msg 2',
     img: '/static/images.icons/os3.svg',
-    name: 'Name2'
+    name: 'Name2',
+    subName: 'Dell'
   },
   {
     id: 3,
     msg: 'CFC Testimonial msg 3',
     img: '/static/images.icons/os3.svg',
-    name: 'Name3'
+    name: 'Name3',
+    subName: 'Dell'
   },
   {
     id: 4,
     msg: 'CFC Testimonial msg 4',
     img: '/static/images.icons/os3.svg',
-    name: 'Name4'
+    name: 'Name4',
+    subName: 'Dell'
   }
 ];
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
index 8cec761b..4db34627 100644
--- a/src/views/pages/HomeView/Testimonials/TestimonialCard.js
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -14,6 +14,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     flexWrap: 'wrap',
+    padding: '130px 0px',
     '& > *': {
       margin: theme.spacing(1),
       width: theme.spacing(16),
@@ -31,30 +32,37 @@ function TestimonialCard({ student }) {
 
   return (
     <div className={classes.root}>
-      <Box style={{ margin: '80px 10px' }}>
+      <Box style={{ margin: '20px 10px'}}>
         <Message>
           <FormatQuoteIcon
             fontSize="large"
-            style={{ margin: '0px 80px', color: 'purple' }}
+            style={{ margin: '0px 115px', color: 'purple' }}
           />
           <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
             {student.msg}
           </Typography>
         </Message>
-        <Box style={{ margin: '2rem 7rem' }}>
+        <Box style={{ margin: '2.3rem 8.2rem' }}>
           <Avatar
             alt={student.name}
             src="./quote.png"
-            className={classes.small}
+            className={classes.large}
           />
 
           <Typography
-            variant="h6"
+            variant="h5"
             align="center"
-            style={{ margin: '0px -10px' }}
+            style={{ margin: '10px -5px' }}
           >
             {student.name}
           </Typography>
+          <Typography
+            variant="h7"
+            align="center"
+            style={{ margin: '10px' }}
+          >
+            {student.subName}
+          </Typography>
         </Box>
       </Box>
     </div>
@@ -64,10 +72,10 @@ function TestimonialCard({ student }) {
 const Message = styled.div`
   position: relative;
   height: 200px;
-  width: 250px;
+  width: 300px;
   max-width: 400px;
   background: white;
-  border: 0.5px solid black;
+
   padding: 40px 20px;
   box-sizing: box-order;
   &:after {
@@ -75,9 +83,7 @@ const Message = styled.div`
     width: 20px;
     height: 20px;
     border-top: 0px solid black;
-    border-right: 0.5px solid black;
-    border-bottom: 0.5px solid black;
-    border-left: 0px solid black;
+   
     top: 100%;
     left: 50%;
     margin-left: -10px;

From 6c37b5d30f0f9e2cbd771fa087e3c03741e943e4 Mon Sep 17 00:00:00 2001
From: sarthakkundra <sarthakkundra21@gmail.com>
Date: Tue, 28 Jul 2020 02:17:51 +0530
Subject: [PATCH 8/8] fixed padding

---
 src/views/pages/HomeView/Testimonials/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/pages/HomeView/Testimonials/index.js b/src/views/pages/HomeView/Testimonials/index.js
index c0f3e5a5..65a92819 100644
--- a/src/views/pages/HomeView/Testimonials/index.js
+++ b/src/views/pages/HomeView/Testimonials/index.js
@@ -8,9 +8,10 @@ const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
     backgroundColor: 'white',
-    padding: theme.spacing(10),
     paddingLeft: 70,
     paddingRight: 70,
+    paddingTop: 100,
+    paddingBottom: 170,
     [theme.breakpoints.down('xs')]: {
       paddingLeft: 15,
       paddingRight: 15