diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.css b/src/components/SectionHowItWorks/SectionHowItWorks.css new file mode 100644 index 00000000..95b4a113 --- /dev/null +++ b/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; + } +} diff --git a/src/components/SectionHowItWorks/SectionHowItWorks.js b/src/components/SectionHowItWorks/SectionHowItWorks.js new file mode 100644 index 00000000..dcac0b32 --- /dev/null +++ b/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 ( +
+
+
+
+
+ +
+ +
+ +
+
+

+ +

+

+ +

+
+ +
+

+ +

+

+ +

+
+ +
+

+ +

+

+ +

+
+
+ +
+ + + +
+
+
+
+
+ ); +}; + +SectionHowItWorks.defaultProps = { rootClassName: null, className: null }; + +const { string } = PropTypes; + +SectionHowItWorks.propTypes = { + rootClassName: string, + className: string, +}; + +export default SectionHowItWorks; diff --git a/src/components/index.js b/src/components/index.js index d59bd8f1..493fabb7 100644 --- a/src/components/index.js +++ b/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 { diff --git a/src/containers/LandingPage/LandingPage.js b/src/containers/LandingPage/LandingPage.js index 963f1294..1301b796 100644 --- a/src/containers/LandingPage/LandingPage.js +++ b/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 => { +