joruney.jsx

import React from 'react'

const JourneyContainer = () => {
  return (
    <div className="journey-container">
      <div className="content-container">
        <div className="brand-3">So einfach funktioniert’s:</div>
        <div className="items-container">
          <div className="content-box">
            <div className="img-01" />
            <h3>Sie bestellen Ihre Produkte</h3>
            <div className="description">
              Natürlich steht Ihnen das gesamte Migros-Sortiment inklusive
              Produkte vom Label «Aus der Region. Für die Region.» zur
              Verfügung. Sie profitieren von denselben Aktionen wie im
              Migros-Supermarkt, können Cumulus-Punkte sammeln und Ihre
              Cumulus-Coupons einlösen. Wenn Sie bis morgens um 06:00 Uhr
              bestellen, erhalten Sie Ihren Einkauf noch am selben Tag
              geliefert.
            </div>
          </div>
          <div className="content-box middle">
            <div className="img-02" />
            <h3>myMigros erledigt Ihren Einkauf</h3>
            <div className="description">
              Ihr Einkauf wird am Liefertag sorgfältig von Migros-Mitarbeitenden
              in der Filiale Shoppyland zusammengestellt. Dabei wird auf
              Frische, Qualität und ein langes Mindesthaltbarkeitsdatum der
              Produkte geachtet. Als Verpackung dienen Papiertragetaschen und
              spezielle Kühltaschen. Das Verpackungsmaterial können Sie dem
              Kurier direkt bei der Zustellung oder bei Ihrer nächsten
              Bestellung zurückgeben.
            </div>
          </div>
          <div className="content-box">
            <div className="img-03" />
            <h3>Unser Kurier liefert zum Wunschtermin</h3>
            <div className="description">
              Sie können einen passenden Liefertermin reservieren und erhalten
              Ihre Bestellung auf eine Stunde genau per E-Cargobike oder
              Elektroauto geliefert. Sind Sie zum Zeitpunkt der Lieferung nicht
              zu Hause, wird Ihr Einkauf vor Ihrer Haustür deponiert. Ab einem
              Einkaufswert von 80 Franken ist die Lieferung kostenlos. Darunter
              kostet die Lieferung 7 Franken. Es gibt keinen Mindestbestellwert.
            </div>
          </div>
        </div>
      </div>

      {/*language=SCSS*/}
      <style jsx>{`
        .content-container {
          padding: 64px 140px;
        }
        .items-container {
          display: flex;
        }
        .content-box {
          flex: 1;
          padding-top: 48px;
        }
        .content-box.middle {
          position: relative;
          padding-right: 32px;
          padding-left: 32px;
          background: url('/static/img/illus/illu-grid-teaser.svg') left
            top/contain no-repeat;
        }
        .content-box h3 {
          padding-top: 48px;
          padding-bottom: 24px;
        }
        .content-box .description {
          line-height: 26px;
        }
        .description a {
          text-decoration: underline;
        }
        .img-01 {
          height: 264px;
          background: url('/static/img/img-shop.jpg') left/contain no-repeat;
        }
        .img-02 {
          height: 264px;
          background: url('/static/img/img-picking.jpg') left/contain no-repeat;
        }
        .img-03 {
          height: 264px;
          background: url('/static/img/img-delivery.jpg') left/contain no-repeat;
        }

        @media all and (max-width: 1440px) {
          .content-container {
            padding: 54px 40px;
          }
        }
        @media all and (max-width: 1024px) {
          .content-container {
            padding: 24px 40px;
          }
          .brand-3 {
            margin-bottom: 16px;
          }
          .img-01,
          .img-02,
          .img-03 {
            height: 200px;
          }
          .content-box h3 {
            padding-top: 16px;
          }
        }
        @media all and (max-width: 768px) {
          .brand-3 {
            font-size: 24px;
            line-height: 32px;
            padding: 0 28px;
            margin-bottom: 24px;
          }
          .content-container {
            padding: 16px 0;
          }
          .content-box {
            padding-right: 0;
          }
          .items-container {
            flex-direction: column;
          }
          .content-box.middle {
            background-size: 50%;
          }
          .img-01,
          .img-02,
          .img-03 {
            height: 234px;
            background-size: cover;
            background-position: top center;
          }
          .content-box h3 {
            padding: 32px 28px 24px 28px;
          }
          .content-box .description {
            padding: 0 28px 56px 28px;
          }
        }
      `}</style>
    </div>
  )
}

export default JourneyContainer