diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.css b/src/scenes/home/jobs/featuredJob/featuredJob.css
new file mode 100644
index 000000000..9c0ca0dad
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/scenes/home/jobs/featuredJob/featuredJob.js b/src/scenes/home/jobs/featuredJob/featuredJob.js
new file mode 100644
index 000000000..7accde802
--- /dev/null
+++ b/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
+}) => (
+
+
+
+
+ {title}
+
+
+
+
+
+ {source}
+
+
+
+ {city && {city},}
+ {state && {state},}
+ {country && {country}}
+
+ {remote &&
+
+
+ Remote
+
+ }
+
+
+ {description}
+
+
+
+);
+
+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;
diff --git a/src/scenes/home/jobs/featuredJobs.json b/src/scenes/home/jobs/featuredJobs.json
new file mode 100644
index 000000000..89f673876
--- /dev/null
+++ b/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"
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/scenes/home/jobs/jobs.css b/src/scenes/home/jobs/jobs.css
new file mode 100644
index 000000000..014fafecd
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/scenes/home/jobs/jobs.js b/src/scenes/home/jobs/jobs.js
index 5168f3653..29ad0601d 100644
--- a/src/scenes/home/jobs/jobs.js
+++ b/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 => (
+
+ ));
+
return (
-
+
+
+
+
+ Are you hiring? Contact us to post your job opening with Operation Code!
+
+
+
+
+
);
}
}
diff --git a/src/shared/components/section/section.css b/src/shared/components/section/section.css
index f32327e99..4f6327537 100644
--- a/src/shared/components/section/section.css
+++ b/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;