feat(home): Complete homepage

frontend/src/components/home/HomeBody.js

@@ -1,14 +1,44 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import HomeAboutUs from "./homeBody/HomeAboutUs";
 import HomeShowcase from "./homeBody/HomeShowcase";
 import HomeNews from "./homeBody/HomeNews";
+import HomeSponsors from "./homeBody/HomeSponsors";
+import Button from "../common/Button";
 
 const HomeBody = props => {
+  const PROJECT_DESC = "We have multiple projects going on!";
+  const PROJECT_BUTTON = "View our Projects";
+  const GITHUB_DESC = "Yes, we love open source";
+  const GITHUB_BUTTON = "Start Contributing";
+  const GITHUB_IMAGE = require("../../images/github_logo.png");
   return (
     <div className="cv-home-body">
       <HomeAboutUs />
       <HomeShowcase />
       <HomeNews />
+      <div className="cv-home-projects cv-container">
+        <h4>{PROJECT_DESC}</h4>
+        <Button themeClass="cv-button-dark" extraClass="cv-button-small">
+          {PROJECT_BUTTON}
+        </Button>
+      </div>
+      <HomeSponsors />
+      <div className="cv-home-github cv-container">
+        <h1 className="cv-home-showcase-heading">{GITHUB_DESC}</h1>
+        <br />
+        <Link to="https://github.com/Cloud-CV/" target="_blank">
+          <Button themeClass="cv-button-dark">
+            {GITHUB_BUTTON}
+          </Button>
+        </Link>
+        <br />
+        <img
+          className="cv-home-gihub-image"
+          src={GITHUB_IMAGE}
+          alt="Github Logo"
+        />
+      </div>
     </div>
   );
 };

frontend/src/components/home/homeBody/HomeSponsors.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Card from "../../common/Card";
+import Button from "../../common/Button";
+
+const HomeSponsors = props => {
+  const SUPPORT_TITLE = "OUR SUPPORT";
+  const SUPPORTERS = [
+    {
+      image: require("../../../images/supporter_virginia.png"),
+      desc: "This is a project being developed at the Machine Learning and Perception Lab, led by Prof. Dhruv Batra"
+    },
+    {
+      image: require("../../../images/supporter_graph_lab.png"),
+      desc: "CloudCV uses GraphLab for implementing distributed computer vision algorithms."
+    },
+    {
+      image: require("../../../images/supporter_opencv.jpg"),
+      desc: "Some of the functionality is derived from using OpenCV with Graphlab SDK."
+    }
+  ];
+  const SPONSOR_TITLE = "SPONSORS";
+  const SPONSORS = [
+    require("../../../images/supporter_virginia.png"),
+    require("../../../images/supporter_aws.png"),
+    require("../../../images/supporter_azure.png"),
+    require("../../../images/supporter_nvidia.png")
+  ];
+  return (
+    <div className="cv-container">
+      <h1 className="cv-home-showcase-heading">
+        {SUPPORT_TITLE}
+      </h1>
+      <div className="cv-home-about-us">
+        {SUPPORTERS.map((company, index) => {
+          return (
+            <Card key={index} extraClass="cv-home-sponsor-card">
+              <img src={company.image} className="cv-home-sponsor-card-image" />
+              <span className="cv-home-sponsor-card-desc">{company.desc}</span>
+            </Card>
+          );
+        })}
+      </div>
+      <div className="right-align">
+        <h1 className="cv-home-showcase-heading">
+          {SPONSOR_TITLE}
+        </h1>
+      </div>
+      <div className="cv-home-sponsors">
+        {SPONSORS.map((company, index) => {
+          return (
+            <img key={index} src={company} className="cv-home-spon-card" />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default HomeSponsors;

frontend/src/styles/partials/_elements.scss

@@ -1,10 +1,15 @@
 /****MAIN CONTAINER*****/
 
 .cv-container {
-  padding-left: calc(50% - #{$half-max-width}) !important;
-  padding-right: calc(50% - #{$half-max-width}) !important;
-  box-sizing: content-box !important;
+  padding-left: 2*$gutter-width !important;
+  padding-right: 2*$gutter-width !important;
   max-width: $max-width !important;
+
+  @media #{$bp-lg} {
+    box-sizing: content-box !important;
+    padding-left: calc(50% - #{$half-max-width}) !important;
+    padding-right: calc(50% - #{$half-max-width}) !important;
+  }
 }
 
   .cv-main {

frontend/src/styles/partials/_home.scss

@@ -177,6 +177,97 @@
           color: $white;
         }
 
+    .cv-home-projects {
+      padding: 3 * $gutter-width 0 6 * $gutter-width 0;
+      text-align: center;
+
+      h4 {
+        color: $primary-color;
+        margin: 0 0 2 * $gutter-width 0;
+      }
+    }
+
+    .cv-home-sponsor-card {
+      box-shadow: none;
+      width: 100%;
+      position: relative;
+      margin: 5*$gutter-width 0;
+      padding: 1*$gutter-width;
+
+      @media #{$bp-sm} {
+        width: 31%;
+        margin-left: 1%;
+        margin-right: 1%;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+      .cv-home-sponsor-card-image {
+        height: 100px;
+        max-width: 100%;
+        margin: 0 auto;
+        display: block;
+      }
+
+      .cv-home-sponsor-card-desc {
+        margin: 2*$gutter-width 0;
+        display: block;
+        text-align: justify;
+      }
+
+    .cv-home-sponsors {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+      .cv-home-spon-card {
+        box-shadow: none;
+        width: 50%;
+        position: relative;
+        margin: 5*$gutter-width auto;
+        padding: 1*$gutter-width;
+
+        @media #{$bp-sm} {
+          width: 20%;
+          margin-left: 1%;
+          margin-right: 1%;
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+    .cv-home-github {
+      text-align: center;
+      padding: 2 * $gutter-width 0;
+
+      h1 {
+        display: inline-block;
+        margin: 0 0 3 * $gutter-width 0;
+      }
+    }
+
+      .cv-home-gihub-image {
+        margin: 3 * $gutter-width 0;
+        width: 10%;
+        max-width: 150px;
+        min-width: 80px;
+      }
+
   .cv-home-footer {
     margin: 0;
     padding: 15 * $gutter-width 0 0 0;

frontend/src/styles/partials/_theme.scss

@@ -27,6 +27,10 @@ a {
   user-select: none;
 }
 
+.right-align {
+  text-align: right;
+}
+
 .hidden-small {
   visibility: hidden;
   opacity: 0 !important;