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' }} />
+          <span className={styles.detail}>{city},</span>
+          <span className={styles.detail}>{state},</span>
+          <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,50 @@
+[
+  {
+    "title": "Software Engineer",
+    "source": "Microsoft",
+    "sourceUrl": "https://www.microsoft.com",
+    "city": "Redmond",
+    "state": "Washington",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "status": "active",
+    "remote": false,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  },
+  {
+    "title": "QA Engineer",
+    "source": "Apple",
+    "sourceUrl": "https://www.apple.com",
+    "city": "San Francisco",
+    "state": "California",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
+    "status": "active",
+    "remote": true,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  },
+  {
+    "title": "DevOps Engineeer",
+    "source": "GitHub",
+    "sourceUrl": "https://www.github.com",
+    "city": "Austin",
+    "state": "texas",
+    "country": "United States",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "status": "inactive",
+    "remote": false,
+    "tags": [
+      "C#",
+      "ASP.Net",
+      "DevOps"
+    ]
+  }
+]

src/scenes/home/jobs/jobs.css

@@ -0,0 +1,14 @@
+/* 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;
+}

src/scenes/home/jobs/jobs.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import Section from 'shared/components/section/section';
+import FeaturedJob from './featuredJob/featuredJob';
+import FeaturedJobsData from './featuredJobs.json';
+import styles from './jobs.css';
 
 const zipRecruiterScript = document.createElement('script');
 
@@ -29,11 +32,39 @@ class Jobs extends Component {
     };
     tryRunInit();
   }
+
+  featuredJobs
   render() {
+    const featuredJobs = FeaturedJobsData
+      .filter(x => x.status === 'active')
+      .map(job => (
+        <FeaturedJob
+          key={`${Math.random()} + ${job.name} + ${job.sourceUrl}`}
+          title={job.title}
+          source={job.source}
+          sourceUrl={job.sourceUrl}
+          city={job.city}
+          state={job.state}
+          country={job.country}
+          description={job.description}
+          status={job.status}
+          remote={job.remote}
+        />
+      ));
     return (
-      <Section title="Open Positions" theme="white">
-        <div id="zipsearch_container" />
-      </Section>
+      <div>
+        <Section title="Featured Jobs" theme="white">
+          <div className={styles.featuredJobsContainer}>
+            <div className={styles.featuredJobs}>
+              {featuredJobs}
+            </div>
+          </div>
+        </Section>
+        <Section title="Search All Jobs" theme="white">
+          <div id="zipsearch_container" />
+        </Section>
+      </div>
+
     );
   }
 }