Add Focus Section

package.json

@@ -12,8 +12,10 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "moxios": "^0.4.0",
+    "node-sass": "^5.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-material-ui-carousel": "^2.1.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",

src/assets/placeholder.js

@@ -1,5 +1,12 @@
 import Team from './img/home/team.svg';
 import Work from './img/home/github.svg';
+import OpenSource from './img/home/open_source.svg';
+import WebDev from './img/home/web_dev.svg';
+import AppDev from './img/home/app_dev.svg';
+import Competitive from './img/home/competitive.svg';
+import Hackathon from './img/home/hackathon.svg';
+import Ai from './img/home/ai.svg';
+
 
 export const homepage = {
   about: {
@@ -20,4 +27,38 @@ export const homepage = {
       },
     ],
   },
+  focus: {
+    data: [
+      {
+        img: OpenSource,
+        caption: "Open Source",
+        background: "linear-gradient(to bottom right, #0a8270, #7cff6b)"
+      },
+      {
+        img: WebDev,
+        caption: "Web Development",
+        background: "linear-gradient(to bottom right, #5b146f, #ff009c)"
+      },
+      {
+        img: AppDev,
+        caption: "App Development",
+        background: "linear-gradient(to bottom right, #72b2e4, #92e1e2)"
+      },
+      {
+        img: Ai,
+        caption: "Machine Learning and Artificial Intelligence",
+        background: "linear-gradient(to bottom right, #fd8451, #ffbd6f)"
+      },
+      {
+        img: Hackathon,
+        caption: "Hackathon",
+        background: "linear-gradient(to bottom right, #a3c9e2, #9618f7)"
+      },
+      {
+        img: Competitive,
+        caption: "Competitive Programming",
+        background: "linear-gradient(to bottom right, #efeb77, #f6af04)"
+      },
+    ],
+  },
 };

src/components/HomePage/Focus.js

@@ -1,14 +1,60 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+import Carousel from 'react-material-ui-carousel'
 
+import { homepage } from '../../assets/placeholder';
 import SectionLayout from './SectionLayout';
 
+const data = homepage.focus.data;
+
 function Focus({ onScrollClick }) {
   const classes = useStyle();
 
   return (
     <SectionLayout onScrollClick={onScrollClick}>
-      <h1 className={classes.heading}>Focus Section</h1>
+      <div className={classes.root}>
+        <Grid container direction='row' justify='center' alignItems='center' spacing={5}>
+          {/* Section Heading */}
+          <Grid item xs={12}>
+            <h1 className={classes.heading}>Our Focus</h1>
+          </Grid>
+
+          {/* Carousel */}
+          <Grid item xs={12} sm={6} style={{margin:'0 auto'}}>
+            <Carousel 
+              className={classes.carousel} 
+              interval='10000' 
+              navButtonsAlwaysVisible
+              animation="slide"
+            >
+              {data.map((section) => (
+                <Card className={classes.card} style={{background: section.background}}>
+                  <CardActionArea>
+                    <CardMedia
+                      component="img"
+                      alt={section.caption}
+                      height="100%"
+                      image={section.img}
+                      title={section.caption}
+                    />
+                    <CardContent>
+                      <Typography gutterBottom variant="h5" component="h2">
+                        {section.caption}
+                      </Typography>
+                    </CardContent>
+                  </CardActionArea>
+                </Card> 
+              ))}
+            </Carousel>
+          </Grid>
+        </Grid>
+      </div>
     </SectionLayout>
   );
 }
@@ -20,4 +66,21 @@ const useStyle = makeStyles((theme) => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: '3em',
   },
+  root: {
+    flexGrow: 1,
+    paddingTop: theme.mixins.toolbar.minHeight,
+    textAlign: 'center',
+    width: '100%',
+    height: '95vh',
+    backgroundColor: theme.palette.background.darkgrey,
+    paddingBottom: '5rem',
+  },
+  card: {
+    width: '70%',
+    height: '70%',
+    margin: '0 auto',
+  },
+  carousel: {
+    maxwidth: 400,
+  },
 }));