Display featured jobs on Jobs page, above search results

src/scenes/home/jobs/featuredJob/featuredJob.css

@@ -0,0 +1,43 @@
+/* Note: these styles are copied to match the ziprecruiter styles that are being dynamically inserted on our page (see jobs.js) */
+
+.job {
+  padding: 15px 0px;
+}
+
+.link {
+  text-decoration: none;
+  color: #1a0dab;
+  font-size: 17px;
+  float: left;
+  margin-right: 3px;
+  margin-bottom: 1px;
+}
+
+.details {
+  font-size: 13px;
+  color: #999999;
+  margin: 3px 0;
+  clear: both;
+}
+
+.detailsContainer {
+  float: left;
+  margin-right: 15px;
+}
+
+.detail {
+  margin-left: 4px;
+}
+
+.remote {
+  composes: detail;
+  font-style: italic;
+}
+
+.description {
+  clear: both;
+  font-size: 14px;
+  color: #545454;
+  line-height: 1.4;
+  word-wrap: break-word;
+}

src/scenes/home/jobs/featuredJob/featuredJob.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faMapMarkerAlt, faBuilding, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid';
+import OutboundLink from 'shared/components/outboundLink/outboundLink';
+import styles from './featuredJob.css';
+
+const FeaturedJob = ({
+  title,
+  source,
+  sourceUrl,
+  city,
+  state,
+  country,
+  description,
+  remote
+}) => (
+  <div>
+    <div className={styles.job}>
+      <div>
+        <OutboundLink href={sourceUrl} analyticsEventLabel={`[FeaturedJob] ${sourceUrl}`}>
+          <span className={styles.link}>{title}</span>
+        </OutboundLink>
+      </div>
+      <div className={styles.details}>
+        <div className={styles.detailsContainer}>
+          <FontAwesomeIcon icon={faBuilding} size="sm" style={{ color: '#afafaf' }} />
+          <span className={styles.detail}>{source}</span>
+        </div>
+        <div className={styles.detailsContainer}>
+          <FontAwesomeIcon icon={faMapMarkerAlt} size="sm" style={{ color: '#afafaf' }} />
+          {city && <span className={styles.detail}>{city},</span>}
+          {state && <span className={styles.detail}>{state},</span>}
+          {country && <span className={styles.detail}>{country}</span>}
+        </div>
+        {remote &&
+          <div className={styles.detailsContainer}>
+            <FontAwesomeIcon icon={faCloudUploadAlt} size="sm" style={{ color: '#afafaf' }} />
+            <span className={styles.remote}>Remote</span>
+          </div>
+        }
+      </div>
+      <div className={styles.description}>
+        {description}
+      </div>
+    </div>
+  </div >
+);
+
+FeaturedJob.propTypes = {
+  title: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired,
+  sourceUrl: PropTypes.string.isRequired,
+  city: PropTypes.string.isRequired,
+  state: PropTypes.string.isRequired,
+  country: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  remote: PropTypes.bool
+};
+
+FeaturedJob.defaultProps = {
+  remote: false
+};
+
+export default FeaturedJob;

src/scenes/home/jobs/featuredJobs.json

@@ -0,0 +1,47 @@
+[
+  {
+    "title": "Technical Product Marketing Manager",
+    "source": "GitLab",
+    "sourceUrl": "https://jobs.lever.co/gitlab/022890d6-549a-48fe-8891-51c13b8d1137",
+    "city": "",
+    "state": "",
+    "country": "Any",
+    "description": "As a Technical Product Marketing Manager, you will work closely with our marketing, engineering, business development and sales team, and partners to help them understand how core GitLab technical value offerings solve customer problems as well as educate them about market competitors.  You will be responsible for technical marketing content and representing GitLab as a technical evangelist at key trade shows and customer meetings.",
+    "status": "active",
+    "remote": true,
+    "tags": [
+      "Marketing",
+      "Product Management"
+    ]
+  },
+  {
+    "title": "Senior Database Engineer",
+    "source": "GitLab",
+    "sourceUrl": "https://jobs.lever.co/gitlab/8b711f1c-d378-4383-a027-bac550aeee6d",
+    "city": "",
+    "state": "",
+    "country": "Americas",
+    "description": "Our database engineer is a hybrid role: part developer, part database expert. You will spend the majority of your time making application changes to improve database performance, availability, and reliability; though you will also spend time working on the database infrastructure that powers GitLab.com. Infrastructure work involves (but is not limited to) tasks such as making configuration changes, adjusting monitoring, and upgrading the database.",
+    "status": "active",
+    "remote": true,
+    "tags": [
+      "Infrastructure",
+      "Database"
+    ]
+  },
+  {
+    "title": "Field Marketing Manager",
+    "source": "GitLab",
+    "sourceUrl": "https://jobs.lever.co/gitlab/f53275a2-bac6-43c8-9a7f-a1d3021c9521",
+    "city": "",
+    "state": "",
+    "country": "Asia Pacific",
+    "description": "GitLab is looking for a highly motivated, sales-focused field marketer who will be responsible for supporting our Asia Pacific (APAC) sales team. A successful Field Marketing Manager has strong understanding of sales-focused marketing as well as our audiences of enterprise IT leaders, IT ops practitioners, and developers. They enjoy taking charge of regional marketing programs, detailed planning, proactive communication, and flawlessly delivering memorable marketing experiences supporting our sales objectives.",
+    "status": "active",
+    "remote": true,
+    "tags": [
+      "Marketing",
+      "Sales"
+    ]
+  }
+]

src/scenes/home/jobs/jobs.css

@@ -0,0 +1,20 @@
+/* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */
+
+.featuredJobsContainer {
+  width: 100%;
+  float: left;
+  clear: both;
+}
+
+.featuredJobs {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 30px 0px 10px;
+  width: 100%;
+  max-width: 768px;
+}
+
+.contact {
+    margin: 30px 0 0 0;
+    align-self: flex-start;
+    font-size: 1rem;
+}

src/scenes/home/jobs/jobs.js

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import Section from 'shared/components/section/section';
+import OutboundLink from 'shared/components/outboundLink/outboundLink';
+import FeaturedJob from './featuredJob/featuredJob';
+import FeaturedJobsData from './featuredJobs.json';
+import styles from './jobs.css';
 
 const zipRecruiterScript = document.createElement('script');
 
@@ -29,11 +33,34 @@ class Jobs extends Component {
     };
     tryRunInit();
   }
+
   render() {
+    const featuredJobs = FeaturedJobsData
+      .filter(job => job.status === 'active')
+      .map(job => (
+        <FeaturedJob
+          key={`${Math.random()} + ${job.name} + ${job.sourceUrl}`}
+          {...job}
+        />
+      ));
+
     return (
-      <Section title="Open Positions" theme="white">
-        <div id="zipsearch_container" />
-      </Section>
+      <div>
+        <Section title="Featured Jobs" theme="whiteCondensed">
+          <div className={styles.featuredJobsContainer}>
+            <div className={styles.featuredJobs}>
+              {featuredJobs}
+            </div>
+          </div>
+          <p className={styles.contact}>
+            Are you hiring? <OutboundLink href="mailto:[email protected]" analyticsEventLabel="User clicked on Job Posting contact">Contact</OutboundLink> us to post your job opening with Operation Code!
+          </p>
+        </Section>
+        <Section title="Search All Jobs" theme="white">
+          <div id="zipsearch_container" />
+        </Section>
+      </div>
+
     );
   }
 }

src/shared/components/section/section.css

@@ -15,6 +15,15 @@
   background-color: #FFF;
 }
 
+.condensed {
+  min-height: 0;
+}
+
+.whiteCondensed {
+  composes: white;
+  composes: condensed;
+}
+
 .content {
   display: flex;
   flex-flow: column;