Add How it works section to landing page

src/components/SectionHowItWorks/SectionHowItWorks.css

@@ -0,0 +1,98 @@
+@import '../../marketplace.css';
+
+.root {
+  padding: 0 40px;
+  background-color: var(--matterColorLight);
+
+  @media (--viewportMedium) {
+    padding: 0 30px;
+    background-color: var(--matterColorBright);
+  }
+}
+
+/* A div for specifying the area for a section specific background color */
+.section {
+  /* prevent inner div margin from collapsing and ending up outside this div */
+  overflow: auto;
+
+  background-color: var(--matterColorLight);
+
+  @media (--viewportMedium) {
+    border-radius: 4px 4px 0 0;
+  }
+}
+
+.contentWrapper {
+  @media (--viewportMedium) {
+    max-width: 1052px;
+    margin: 0 auto;
+  }
+}
+
+/* Draw the red bar on top of the section */
+.contentWrapper:before {
+  content: '';
+  display: block;
+  width: 109px;
+  height: 6px;
+  background: var(--marketplaceColor);
+
+  @media (--viewportMedium) {
+    width: 192px;
+    height: 8px;
+  }
+}
+
+.content {
+  margin-top: 37px;
+  margin-bottom: 53px;
+
+  @media (--viewportMedium) {
+    margin-top: 81px;
+    margin-bottom: 86px;
+  }
+}
+
+.title {
+  @apply --marketplaceH1FontStyles;
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+
+  @media (--viewportMedium) {
+    flex-direction: row;
+    margin-top: 0;
+  }
+}
+
+.step:nth-of-type(1) {
+  @media (--viewportMedium) {
+    margin-right: 38px;
+  }
+}
+
+.step:nth-of-type(2) {
+  @media (--viewportMedium) {
+    margin: 0 38px;
+  }
+}
+
+.step:nth-of-type(3) {
+  @media (--viewportMedium) {
+    margin-left: 38px;
+  }
+}
+
+.stepTitle {
+  @media (--viewportMedium) {
+    margin-bottom: 18px;
+  }
+}
+
+.createListingLink {
+  @media (--viewportMedium) {
+    margin-top: 52px;
+  }
+}

src/components/SectionHowItWorks/SectionHowItWorks.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
+import { NamedLink } from '../../components';
+
+import css from './SectionHowItWorks.css';
+
+const SectionHowItWorks = props => {
+  const { rootClassName, className } = props;
+
+  const classes = classNames(rootClassName || css.root, className);
+  return (
+    <div className={classes}>
+      <div className={css.section}>
+        <div className={css.contentWrapper}>
+          <div className={css.content}>
+            <div className={css.title}>
+              <FormattedMessage id="SectionHowItWorks.titleLineOne" />
+              <br />
+              <FormattedMessage id="SectionHowItWorks.titleLineTwo" />
+            </div>
+
+            <div className={css.steps}>
+              <div className={css.step}>
+                <h2 className={css.stepTitle}>
+                  <FormattedMessage id="SectionHowItWorks.partOneTitle" />
+                </h2>
+                <p>
+                  <FormattedMessage id="SectionHowItWorks.partOneText" />
+                </p>
+              </div>
+
+              <div className={css.step}>
+                <h2 className={css.stepTitle}>
+                  <FormattedMessage id="SectionHowItWorks.partTwoTitle" />
+                </h2>
+                <p>
+                  <FormattedMessage id="SectionHowItWorks.partTwoText" />
+                </p>
+              </div>
+
+              <div className={css.step}>
+                <h2 className={css.stepTitle}>
+                  <FormattedMessage id="SectionHowItWorks.partThreeTitle" />
+                </h2>
+                <p>
+                  <FormattedMessage id="SectionHowItWorks.partThreeText" />
+                </p>
+              </div>
+            </div>
+
+            <div className={css.createListingLink}>
+              <NamedLink name="NewListingPage">
+                <FormattedMessage id="SectionHowItWorks.createListingLink" />
+              </NamedLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SectionHowItWorks.defaultProps = { rootClassName: null, className: null };
+
+const { string } = PropTypes;
+
+SectionHowItWorks.propTypes = {
+  rootClassName: string,
+  className: string,
+};
+
+export default SectionHowItWorks;

src/components/index.js

@@ -85,6 +85,7 @@ export { default as SearchMapInfoCard } from './SearchMapInfoCard/SearchMapInfoC
 export { default as SearchMapPriceLabel } from './SearchMapPriceLabel/SearchMapPriceLabel';
 export { default as SearchResultsPanel } from './SearchResultsPanel/SearchResultsPanel';
 export { default as SectionHero } from './SectionHero/SectionHero';
+export { default as SectionHowItWorks } from './SectionHowItWorks/SectionHowItWorks';
 export { default as SectionLocations } from './SectionLocations/SectionLocations';
 export { default as SelectField } from './SelectField/SelectField';
 export {

src/containers/LandingPage/LandingPage.js

@@ -10,6 +10,7 @@ import config from '../../config';
 import {
   Page,
   SectionHero,
+  SectionHowItWorks,
   SectionLocations,
   LayoutSingleColumn,
   LayoutWrapperTopbar,
@@ -61,6 +62,7 @@ export const LandingPageComponent = props => {
             <SectionHero className={css.hero} history={history} location={location} />
           </div>
           <SectionLocations />
+          <SectionHowItWorks />
         </LayoutWrapperMain>
         <LayoutWrapperFooter>
           <Footer />

src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap

@@ -71,6 +71,10 @@ exports[`LandingPage matches snapshot 1`] = `
         className={null}
         rootClassName={null}
       />
+      <SectionHowItWorks
+        className={null}
+        rootClassName={null}
+      />
     </LayoutWrapperMain>
     <LayoutWrapperFooter
       className={null}

src/translations/en.json

@@ -444,6 +444,15 @@
   "SectionHero.mobileSearchButtonText": "Search saunas",
   "SectionHero.subTitle": "The largest online community to rent saunas in Finland.",
   "SectionHero.title": "Book saunas everywhere.",
+  "SectionHowItWorks.createListingLink": "Ps. You can also become a Saunatime host in few clicks.",
+  "SectionHowItWorks.partOneTitle": "1. Browse and book",
+  "SectionHowItWorks.partOneText": "Start by searching for a location. Once you find a sauna you like, simply check the availability, book it, and make a secure payment right away.",
+  "SectionHowItWorks.partTwoTitle": "2. Have a great bath",
+  "SectionHowItWorks.partTwoText": "Meet your host on the date you chose and enjoy the home sauna experience. We'll handle the payment to the host after your experience.",
+  "SectionHowItWorks.partThreeTitle": "3. Review the host",
+  "SectionHowItWorks.partThreeText": "If you enjoyed the experience, let others know by giving a review to your sauna host. This way others will know where to go.",
+  "SectionHowItWorks.titleLineOne": "The holy sauna ritual",
+  "SectionHowItWorks.titleLineTwo": "(or how does Saunatime work).",
   "SectionLocations.listingsInLocation": "Saunas in {location}",
   "SectionLocations.title": "We have wooden saunas, electric saunas and even tent saunas.",
   "SectionLocations.subtitle": "We have more than 1000 saunas around Finland. Here are some of our most popular locations.",