Restyle get involved section

scripts/build-pug.js

@@ -34,7 +34,10 @@ function buildPage(template, target, extraData) {
   shelljs.ShellString(html).to(`${path}/index.html`);
 }
 
-buildPage(`home`, `/`, {news: JSON.parse((shelljs.cat(`source/json/temp/news.json`).toString()))});
+buildPage(`home`, `/`, {
+  news: JSON.parse((shelljs.cat(`source/json/temp/news.json`).toString())),
+  project: JSON.parse((shelljs.cat(`source/json/temp/pulse-homepage.json`).toString())),
+});
 buildPage(`people`, `/people`, JSON.parse((shelljs.cat(`source/json/temp/people.json`).toString())));
 buildPage(`support`, `/support`);
 buildPage(`upcoming`, `/programs/upcoming`, JSON.parse((shelljs.cat(`source/json/upcoming.json`).toString())));

scripts/fetch-json.js

@@ -18,6 +18,7 @@ let fetchJSON = (shortName, source) => {
   });
 };
 
+fetchJSON(`pulse-homepage`, `https://network-pulse-api-production.herokuapp.com/entries/216`);
 fetchJSON(`pulse-privacy`, `https://network-pulse-api-production.herokuapp.com/entries/?issue=Online%20Privacy%20%26%20Security&featured=True&page_size=2`);
 fetchJSON(`pulse-mozfest`, `https://network-pulse-api-production.herokuapp.com/entries/?tag=mozfest&featured=True&page_size=2`);
 fetchJSON(`pulse-innovation`, `https://network-pulse-api-production.herokuapp.com/entries/?issue=Open%20Innovation&featured=True&page_size=2`);

source/pug/views/home.pug

@@ -31,40 +31,35 @@ block content
       .col
         .mb-5.slanty-background
           h4.h2-headings-white Get Involved
-    .row.py-5
+    .row
       .col-xs-12.col-md-6.mb-5
-        .home-ihp
-          .wrapper.p-4
-            h5.h4-light-black The Internet Health Report
-            p.body-black Mozilla’s Internet Health Report is an open source initiative that combines research from multiple sources to document what’s healthy and unhealthy.
-            a.cta-link(href=`${env.virtualRoot}opportunity/internet-health-report`) Read and contribute
+        .item-featured.pb-5.px-3.px-sm-4.mt-4
+          img.mb-4(src=`${data.project.thumbnail}`)
+          h5.h4-light-black=`${data.project.title}`
+          p.body-black=`${data.project.description}`
+          a.cta-link(href=`${data.project.get_involved_url}`) Join this Project
+          .mt-5
+            a.btn.btn-ghost(href=`${env.virtualRoot}projects`) See More Projects
       .col-md-6
-        h4.h4-light-black Other Opportunities
-        h5.h5-black Fellowships that Empower Leaders
+        h5.h4-light-black Fellowships that Empower Leaders
         p.body-black We provide funding and exciting project-based opportunities to professionals doing game-changing work at the intersection of media, science, security, advocacy, and technology.
         a.cta-link(href=`${env.virtualRoot}opportunity/fellowships`) Be a fellow
         hr
-        h5.h5-black Leadership Training for Collaboration
+        h5.h4-light-black Leadership Training for Collaboration
         p.body-black Learn the basics of participation, collaboration, and sharing on community-driven projects. Discover what working open can do for your project.
         a.cta-link(href=`${env.virtualRoot}opportunity/training`) Be a leader
 
-    .row.mx-2.mb-5.cta.cta-projects
-      .col-xs-12.col-md-5.px-4.py-5.cta-box
-        h3.h4-light-black Network Projects
-        p.body-black Discover and contribute to exciting projects made by and for our Network.
-        a.btn.btn-ghost(href=`${env.virtualRoot}projects`) See Projects
-
     .row
       .col
-        .my-5.slanty-background
+        .mb-5.slanty-background
           h4.h2-headings-white Latest News
     -
       data.news = data.news.filter((item) => {
         return item.featured;
       });
     .row.mb-5
       .col-md-6.mb-3.d-flex
-        .p-5.news-item-featured
+        .p-5.item-featured
           +newsItem(data.news[0])
           - if (data.news[0].excerpt)
             p.body-black=data.news[0].excerpt

source/sass/buttons.scss

@@ -10,7 +10,7 @@
 
 .btn-ghost {
   color: $black;
-  background: $white;
+  background: transparent;
   border: 1px solid #3bb7ef;
 
   &:hover {

source/sass/views/home.scss

@@ -8,8 +8,13 @@
   }
 }
 
-.news-item-featured {
+.item-featured {
   background: $off-white;
+
+  & > img:first-child {
+    margin-top: -1.5em;
+    box-shadow: 0 4px 0 0 $gray-lighter;
+  }
 }
 
 .cta {
@@ -46,18 +51,6 @@
   }
 }
 
-.home-ihp {
-  background: url(../_images/ihp.png) no-repeat;
-  background-position-x: 50%;
-  background-size: auto 270px;
-  padding: 160px 15px 0;
-
-  .wrapper {
-    background: $white;
-    box-shadow: 0 4px 0 0 #f2f2f2;
-  }
-}
-
 .stay-connected {
   background: #f2f2f2;