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 ( +
+
+
+