<template>
  <div id="home">
    <!-- intro section/hero -->
    <section class="section-padding-y header-section">
      <div class="container">
        <h1>
          <div class="cl-accent" data-aos="fade-right">
            Umsatzsteuerfrei liefern
          </div>
          <div data-aos="fade-right" data-aos-delay="500">
            Grenzüberschreitend B2C in 30 europäische Länder
          </div>
        </h1>
        <SfButton link="#"> Anmelden </SfButton>
      </div>
    </section>
    <!-- map -->
    <section class="map-section relative section-padding-top">
      <div class="container">
        <ul
          class="icon-list icon-list--checked icon-list--benefits medium vertical-center"
        >
          <li>Registrierungsfrei</li>
          <li>Steuerfrei</li>
          <li>Haftungsfrei</li>
        </ul>
        <div class="text-center text-sm margin-bottom-xxl">
          Onboarding einmalig 3.450 EUR zzgl. Transaktionsgebühr
        </div>
        <h2>
          <div class="medium" data-aos="fade-right">
            Stressfrei in alle EU-27
          </div>
          <div class="medium" data-aos="fade-right" data-aos-delay="500">
            + Schweiz
          </div>
          <div class="medium" data-aos="fade-right" data-aos-delay="1000">
            + Großbritannien liefern
          </div>
        </h2>
      </div>
      <div class="map-wrapper">
        <div class="map">
          <lottie-animation
            path="assets/storybook/animations/ClearVat_Variation_Micro_Big_rz_02.json"
            :loop="true"
            :auto-play="true"
          />
        </div>
      </div>
    </section>
    <!-- benefits -->
    <section class="section-padding-y">
      <div class="container">
        <h2 data-aos="fade-right">
          <span>Umsatzsteuerfrei liefern nach ganz Europa</span>
        </h2>
        <ul class="icon-list icon-list--features grid grid-gap-md">
          <li data-aos="fade-up" class="col-start-3@md col-end-10@md">
            <div>
              <p class="medium margin-bottom-0">Steuerfrei</p>
              <p>
                Deine Ausgangsrechnung zeigt in ganz Europa immer 0%
                Umsatzsteuer.
              </p>
            </div>
          </li>
          <li
            data-aos="fade-up"
            data-aos-delay="500"
            class="col-start-3@md col-end-10@md"
          >
            <div>
              <p class="medium margin-bottom-0">Haftungsfrei</p>
              <p>
                In deiner Buchhaltung gibt es 0,00 EUR ausländische
                Steuerschulden.
              </p>
            </div>
          </li>
          <li
            data-aos="fade-up"
            data-aos-delay="500"
            class="col-start-3@md col-end-10@md"
          >
            <div>
              <p class="medium margin-bottom-0">Registrierungsfrei</p>
              <p>Du musst dich in keinem EU-Land registrieren.</p>
            </div>
          </li>
          <li
            data-aos="fade-up"
            data-aos-delay="500"
            class="col-start-3@md col-end-10@md"
          >
            <div>
              <p class="medium margin-bottom-0">Betriebsprüfungsfrei</p>
              <p>
                Keine Betriebsprüfungen im Ausland. Die Haftung liegt bei
                eClear.
              </p>
            </div>
          </li>
          <li
            data-aos="fade-up"
            data-aos-delay="500"
            class="col-start-3@md col-end-10@md"
          >
            <div>
              <p class="medium margin-bottom-0">Sorgenfrei</p>
              <p>
                Mit Steuersätzen, Ausnahmen und den häufigen Änderungen
                beschäftigen wir uns. Dein Steuersatz ist immer 0% Umsatzsteuer.
              </p>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- slider -->
    <section class="bg-secondary section-padding-top">
      <div class="container">
        <h2 class="text-primary" data-aos="fade-right">
          <span>8’065 Händler sind schon angeschlossen</span>
        </h2>
        <SfHero class="hero offset-y">
          <SfHeroItem
            v-for="(img, index) in heroes"
            :key="index"
            :image="img.image"
            :title="img.title"
            :subtitle="img.subtitle"
            :button-text="img.buttonText"
            :background="img.background"
            :class="img.className"
          />
        </SfHero>
      </div>
    </section>
    <!-- easy register -->
    <section class="section-padding-y">
      <div class="container">
        <h2>
          <div class="text-primary" data-aos="fade-right">Easy register.</div>
          <div data-aos="fade-right">Einfach ganz Europa</div>
        </h2>
        <div class="steps steps--horizontal">
          <div class="step step-1">
            <div class="step__number step__number--active" data-aos="zoom-in">
              1
            </div>
            <div class="step__label">Jetzt<br />anmelden</div>
          </div>
          <div class="steps__arrow"></div>
          <div class="step step-2">
            <div class="step__number" data-aos="zoom-in" data-aos-delay="500">
              2
            </div>
            <div class="step__label">Vertrag<br />abschließen</div>
          </div>
          <div class="steps__arrow"></div>
          <div class="step step-3">
            <div class="step__number" data-aos="zoom-in" data-aos-delay="1000">
              3
            </div>
            <div class="step__label">Nach ganz<br />Europa liefern</div>
          </div>
        </div>
      </div>
    </section>
    <!-- wir schaffen die mwst ab -->
    <section class="section-padding-y bg-primary">
      <div class="container">
        <h2>
          <div>Wir schaffen die Mehrwertsteuer in Europa ab.</div>
          <div class="text-light--variant">
            Für eCommerce Händler bei grenz-überschreitenden B2C Lieferungen.
          </div>
        </h2>
        <p class="medium">Du kümmerst dich um’s Geschäft!</p>
        <SfButton link="#" class="color-light" data-aos="fade-left">
          Jetzt registrieren
        </SfButton>
      </div>
    </section>
    <!-- service -->
    <section class="section-padding-y">
      <div class="grid container">
        <h2>
          <div data-aos="fade-right" data-aos-duration="2000">
            Unser Service – Dein Vorteil
          </div>
          <div class="cl-accent" data-aos="fade-right" data-aos-duration="2000">
            Alles inbegriffen
          </div>
        </h2>
        <ul class="icon-list icon-list--checked col-start-3@md col-end-10@md">
          <li data-aos="zoom-in">
            <div class="">
              <p class="medium mt10">Steuerrückerstattung sofort</p>
              <p>
                Umgehende Erstattung von Steuerbeiträgen durch ausländische
                Steuerbehörden zum Beispiel bei Retouren.
              </p>
            </div>
          </li>
        </ul>
        <ul
          class="icon-list icon-list--checked col-start-3@md col-end-11@md grid grid-gap-md"
        >
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">Ein Ansprechpartner in deiner Sprache</p>
          </li>
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">Intrastat Berichte automatisch</p>
          </li>
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">Detaillierte Übersicht aller Orders</p>
          </li>
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">Nur ein Reconfile pro Tag</p>
          </li>
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">24/7 Service Hotline</p>
          </li>
          <li data-aos="zoom-in" data-aos-delay="500" class="col-6@md">
            <p class="medium mt10">Intuitives Dashboard</p>
          </li>
        </ul>
      </div>
    </section>
    <!-- easy integrate -->
    <section class="section-padding-y bg-light">
      <div class="grid container">
        <h2>
          <div
            class="text-primary"
            data-aos="fade-right"
            data-aos-duration="2000"
          >
            Easy integrate
          </div>
          <div data-aos="fade-right" data-aos-duration="2000">
            Unsere kostenlosen shop hosting PlugIns und APIs
          </div>
        </h2>
        <div class="col-start-2@sm col-start-3@md col-5@sm col-4@md">
          <h3 class="plugins__headline regular">Plugins and integrations</h3>
          <div class="producttiles grid grid-gap-md">
            <div class="tile col-6" data-aos="zoom-in">
              <img
                :src="
                  require('@highdigital/vuet/public/assets/storybook/images/210224_Kacheln_800x800_Ing_final112.png')
                "
                width="100%"
                height="auto"
              />
            </div>
            <div class="tile col-6" data-aos="zoom-in" data-aos-delay="500">
              <img
                :src="
                  require('@highdigital/vuet/public/assets/storybook/images/210224_Kacheln_800x800_Ing_final112.png')
                "
                width="100%"
                height="auto"
              />
            </div>
          </div>
        </div>
        <div class="col-5@sm col-start-8@sm col-start-8@md col-4@md">
          <h3 class="plugins__headline regular">
            APIs (also available as API reference)
          </h3>
          <div class="producttiles grid grid-gap-md">
            <div class="tile col-6" data-aos="zoom-in">
              <img
                src="~/@highdigital/vuet/public/assets/storybook/images/210224_Kacheln_800x800_Ing_final117.png"
                width="100%"
                height="auto"
              />
            </div>
            <div class="tile col-6" data-aos="zoom-in" data-aos-delay="500">
              <img
                src="~@highdigital/vuet/public/assets/storybook/images/210224_Kacheln_800x800_Ing_final117.png"
                width="100%"
                height="auto"
              />
            </div>
            <div class="tile col-6" data-aos="zoom-in" data-aos-delay="800">
              <img
                src="~@highdigital/vuet/public/assets/storybook/images/210224_Kacheln_800x800_Ing_final117.png"
                width="100%"
                height="auto"
              />
            </div>
          </div>
        </div>
        <div class="plugins__info col-start-2@sm col-start-3@md">
          API System Beschreibung verfügbar
        </div>
      </div>
    </section>
    <!-- preise -->
    <section class="section-padding-y">
      <div class="grid container">
        <h2 data-aos="fade-right">
          <span>Preise</span>
        </h2>
        <ul class="preise-list col-start-3@md">
          <li class="grid preise-list__item" data-aos="fade-up">
            <div class="col-6@md title medium">ClearVAT Plugin</div>
            <div class="col-6@md description medium cl-accent">
              Bei uns kostenlos
            </div>
          </li>
          <li
            class="grid preise-list__item"
            data-aos="fade-up"
            data-aos-delay="500"
          >
            <div class="col-6@md title">
              ERP und Großsystem-Plugins (z.B. SAP)
            </div>
            <div class="col-6@md description">Preis auf Anfrage</div>
          </li>
          <li
            class="grid preise-list__item"
            data-aos="fade-up"
            data-aos-delay="500"
          >
            <div class="col-6@md title medium">Onboarding einmalig</div>
            <div class="col-6@md description">3.450 EUR</div>
          </li>
          <li
            class="grid preise-list__item"
            data-aos="fade-up"
            data-aos-delay="500"
          >
            <div class="col-6@md title medium">Kommissionsgebühr</div>
            <div class="col-6@md description">
              1,25% – 4,75% des GMV<br />(Brutto-Warenwert)
            </div>
          </li>
          <li
            class="grid preise-list__item"
            data-aos="fade-up"
            data-aos-delay="500"
          >
            <div class="col-6@md title">
              <span class="medium">VATRules</span><br />Up-to-date Steuersätze
              und -regeln
            </div>
            <div class="col-6@md description medium cl-accent">
              Bei uns inklusive
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- expertise -->
    <section class="bg-primary section-padding-y">
      <div class="qanda">
        <div class="qanda__img"></div>
        <h2 class="qanda__header">
          <span
            class="text-light"
            data-aos="fade-right"
            data-aos-duration="2000"
          >
            Unsere Expertise
          </span>
          <span data-aos="fade-right" data-aos-duration="2000">
            Mehrwertsteuer
          </span>
        </h2>
        <div class="qanda__text">
          <p class="" data-aos="fade-left" data-aos-duration="2000">
            <span class="medium"> Anita Richter, Syndikus-Steuerberaterin </span
            ><br />
            <span>Vice President Tax Technology Innovation</span>
          </p>
          <SfButton
            link="#"
            class="color-light"
            data-aos="fade-left"
            data-aos-duration="2000"
          >
            Frag Anita
          </SfButton>
        </div>
      </div>
      <div class="container section-padding-bottom">
        <div class="grid">
          <ul class="qa-list col-start-3@md">
            <li class="qa-list__item grid grid-gap-md" data-aos="fade-up">
              <div class="col-3@md text-sm">
                Brauche ich gar keine Registrierung mehr?
              </div>
              <div class="col-7@md col-start-5@md">
                Richtig!<br />Du brauchst gar keine Registrierung im Ausland
                mehr. Übrigens auch keine Steuerberater vor Ort.
              </div>
            </li>
            <li
              class="qa-list__item grid grid-gap-md"
              data-aos="fade-up"
              data-aos-delay="500"
            >
              <div class="col-3@md text-sm">
                Was ist, wenn ich im Ausland ein Lager betreibe? Zum Beispiel
                Amazon FBA.
              </div>
              <div class="col-7@md col-start-5@md">
                Kein Problem!<br />Dann benötigst Du eine Registrierung in
                diesem Land, um eine Meldung zu erstellen (ohne Zahlung). Das
                können wir Dir als automatisierten und integrierten Prozess
                anbieten. Sprich uns nach Deiner Registrierung darauf an.
              </div>
            </li>
            <li
              class="qa-list__item grid grid-gap-md"
              data-aos="fade-up"
              data-aos-delay="500"
            >
              <div class="col-3@md text-sm">
                Ich bin schon in einigen Ländern registriert. Kann ich ClearVAT
                mit diesen Registrierungen kombinieren?
              </div>
              <div class="col-7@md col-start-5@md">
                Ja, das ist möglich!<br />Der Preis ist dann möglicherweise
                etwas höher. Gib das bei der Registrierung einfach an, wir
                berücksichtigen es beim Angebot
              </div>
            </li>
            <li
              class="qa-list__item grid grid-gap-md"
              data-aos="fade-up"
              data-aos-delay="500"
            >
              <div class="col-3@md text-sm">
                Muss ich die Steuersätze und die ganzen Ausnahmen für meine
                Produkte in allen Ländern kennen?
              </div>
              <div class="col-7@md col-start-5@md">
                Nein!<br />Wir kennen die Steuersätze für über 80 Millionen
                Artikel in 30 Europäischen Ländern inkl. alle Ausnahmen – also
                rund 2,4 Mrd. Codes
              </div>
            </li>
            <li
              class="qa-list__item grid grid-gap-md"
              data-aos="fade-up"
              data-aos-delay="500"
            >
              <div class="col-3@md text-sm">
                Wie verbuche ich die Lieferungen?
              </div>
              <div class="col-7@md col-start-5@md">
                Ganz einfach!<br />Du bekommst von unseren MwSt-Experten ein
                Merkblatt für Deine Buchhaltung und Deinen Steuerberater.
              </div>
            </li>
            <li
              class="qa-list__item grid grid-gap-md"
              data-aos="fade-up"
              data-aos-delay="500"
            >
              <div class="col-3@md text-sm">
                Wer übernimmt die steuerliche Haftung und das Risiko der
                Umsatzsteuerprüfung im Ausland?
              </div>
              <div class="col-7@md col-start-5@md">
                Wir.<br />eClear befreit Dich vollständig von allen
                MwSt-Verpflichtungen im Lieferland.
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- sicherheit -->
    <section class="section-padding-y">
      <div class="container">
        <h2>
          <div
            class="text-primary"
            data-aos="fade-right"
            data-aos-duration="2000"
          >
            Zertifizierte Sicherheit
          </div>
          <div data-aos="fade-right" data-aos-duration="2000">
            für dein Geschäft
          </div>
        </h2>
        <div class="grid grid-gap-md">
          <div class="col-6@sm col-3@md certification" data-aos="zoom-in">
            <img
              src="~@highdigital/vuet/public/assets/storybook/images/logo_bafin.png"
            />
            <p class="text-sm">
              Wir sind ein EU-weit reguliertes Zahlungsinstitut und Acquirer
              nach ZAG.
            </p>
          </div>
          <div
            class="col-6@sm col-3@md certification"
            data-aos="zoom-in"
            data-aos-delay="500"
          >
            <img
              src="~@highdigital/vuet/public/assets/storybook/images/logo_lbdo.png"
            />
            <p class="text-sm">
              Die Buchhaltungssysteme (GoB), Steuerlogik und die gesamte
              Software von ClearVAT sind nach Prüfungsstandard 880 des
              Institutes der Wirtschaftprüfer zertifiziert.
            </p>
          </div>
          <div
            class="col-6@sm col-3@md certification"
            data-aos="zoom-in"
            data-aos-delay="1000"
          >
            <img
              src="~@highdigital/vuet/public/assets/storybook/images/logo_sap.png"
            />
            <p class="text-sm">
              Wir arbeiten auf SAP S4/HANA und sind SAP zertifiziert.
            </p>
          </div>
          <div
            class="col-6@sm col-3@md certification"
            data-aos="zoom-in"
            data-aos-delay="1500"
          >
            <img
              src="~@highdigital/vuet/public/assets/storybook/images/logo_sap-certified.png"
            />
            <p class="text-sm">
              Auf dem neusten SAP S4/HANA Coresystem mit der hochperformanten
              In-Memory Database Technologie sowie SAP zertifiziert.
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- oss -->
    <section class="section-padding-y bg-light">
      <div class="grid container">
        <h2>
          <div class="text-primary" data-aos="fade-right">
            Der OSS – eine Alternative?
          </div>
          <div data-aos="fade-right" data-aos-duration="2000">
            Wenn du über den OSS nachdenkst, so solltest du Folgendes wissen:
          </div>
        </h2>
        <ul
          class="col-start-3@md col-end-13@md icon-list icon-list--minus grid grid-gap-md"
        >
          <li class="col-6@sm" data-aos="zoom-in">
            <div>
              <p class="medium">Haftung</p>
              <p>
                Du meldest im Heimatland aber, du bleibst steuerpflichtig im
                Bestimmungsland.
              </p>
            </div>
          </li>
          <li class="col-6@sm" data-aos="zoom-in" data-aos-delay="500">
            <div>
              <p class="medium">Geld</p>
              <p>
                Du zahlst im Heimatland aber die Rückerstattung kommt aus dem
                Ausland – das kann dauern.
              </p>
            </div>
          </li>
          <li class="col-6@sm" data-aos="zoom-in" data-aos-delay="500">
            <div>
              <p class="medium">Registrierung und Meldung</p>
              <p>
                Das macht ab 1.7.21 dein Steuerberater. Allerdings haftet er
                dann auch. Mal sehen, ob er mitmacht.
              </p>
            </div>
          </li>
          <li class="col-6@sm" data-aos="zoom-in" data-aos-delay="500">
            <div>
              <p class="medium">Auslandslager</p>
              <p>
                In Ländern, in denen du ein Lager betreibst (z.B. Amazon FBA)
                ist der OSS ausgeschlossen.
              </p>
            </div>
          </li>
          <li class="col-6@sm" data-aos="zoom-in" data-aos-delay="500">
            <div>
              <p class="medium">Registrierung und Meldung</p>
              <p>
                Das macht ab 1.7.21 dein Steuerberater. Allerdings haftet er
                dann auch. Mal sehen, ob er mitmacht.
              </p>
            </div>
          </li>
          <li class="col-6@sm no-icon">
            <div class="oss-banner">
              <a href="https://oss.eu/de" target="_blank">
                <div class="flex items-center space-x-xs">
                  <img src="/assets/storybook/banner/svg/oss-badge_de.svg" alt="oss-badge">
                </div>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- oss vs clearvat -->
    <section class="section-padding-y">
      <div class="grid container">
        <div class="comparison col-start-3@md">
          <div class="comparison__header" data-aos="fade-up">
            <div class="comparison__oss">OSS</div>
            <div class="comparison__clearvat">clearVAT</div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step medium">
              <span> 1 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">Tax<br />Rates</div>
              <div class="description col-8@md">
                Du bekommst die richtigen Steuersätze für deine Artikel
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-x"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step medium">
              <span> 2 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">Tax Assignment</div>
              <div class="description col-8@md">
                Die Steuersätze werden den Artikeln zugeordnet
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-x"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step medium">
              <span> 3 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">Tax Calculation</div>
              <div class="description col-8@md">
                Die Steuersätze werden im Checkout je Land richtig ausgewiesen
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-x"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step medium">
              <span> 4 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">
                Registrieren,<br />melden und<br />zahlen
              </div>
              <div class="description col-8@md">
                Keine Registrierung mehr nötig.<br />Umsätze automatisiert
                melden<br />und die Steuern bezahlen
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-checkmark-sm"></span>
              <span class="icon-x"></span>
              <span class="icon-checkmark-sm"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
              <span class="icon-checkmark-sm"></span>
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step medium">
              <span> 5 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">Reclaim</div>
              <div class="description col-8@md">
                Du willst schnell deine Erstattungen
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-x"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
          <div class="comparison__row" data-aos="fade-up">
            <div class="comparison__step last medium">
              <span> 6 </span>
            </div>
            <div class="comparison__info grid grid-gap-md@md">
              <div class="title medium col-4@md">Betriebsprüfung Haftung</div>
              <div class="description col-8@md">
                Dir wird die Haftung und die Kommunikation mit ausländischen
                Behörden abgenommen
              </div>
            </div>
            <div class="oss comparison__icon">
              <span class="icon-x"></span>
            </div>
            <div class="clearvat comparison__icon">
              <span class="icon-checkmark-sm"></span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section-padding-y">
      <div class="grid container">
        <h2>
          <div data-aos="fade-right" data-aos-duration="2000">
            Umsatzsteuerfrei liefern nach ganz Europa
          </div>
          <div
            class="text-primary"
            data-aos="fade-right"
            data-aos-duration="2000"
          >
            Anmelden
          </div>
        </h2>
        <div class="col-start-3@md">
          <div class="steps margin-bottom-xxl">
            <div class="step step-1 step--active">
              <div class="step__number step__number--active" data-aos="zoom-in">
                1
              </div>
              <div class="step__label">
                Online Formular<br />
                <span class="text-primary">ausfüllen</span>
              </div>
            </div>
            <div class="steps__arrow"></div>
            <div class="step step-2">
              <div
                class="step__number step__number--active"
                data-aos="zoom-in"
                data-aos-delay="500"
              >
                2
              </div>
              <div class="step__label">
                Du bekommst ein Angebot<br />
                <span class="text-primary">prüfen + zurücksenden</span>
              </div>
            </div>
            <div class="steps__arrow"></div>
            <div class="step step-3">
              <div
                class="step__number step__number--active"
                data-aos="zoom-in"
                data-aos-delay="1000"
              >
                3
              </div>
              <div class="step__label">
                Du bekommst ein PlugIn und einen Vertrag<br />
                <span class="text-primary"> grenzenlos in Europa liefern </span>
              </div>
            </div>
          </div>
          <SfForm />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { SfButton, SfHero, SfForm } from "@highdigital/vuet";
import AOS from "aos";
import "aos/dist/aos.css";
import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue"; // import lottie-vuejs

export default {
  name: "Home",
  components: {
    SfButton,
    SfHero,
    SfForm,
    LottieAnimation,
  },
  data() {
    return {
      headingTitle: {
        mobile: "Match it with",
        desktop: "Bestsellers",
      },
      heroes: [
        {
          title:
            "ClearVAT macht unsere EU-Steuern – wir kümmern uns lieber um die Kunst.",
          subtitle: "Dr. Vanessa Moos, Managing Director",
          background: "rgb(236, 239, 241)",
          image: "/assets/storybook/images/slider-img_fineartmultiple.jpg",
        },
        {
          title: "Banner 2 Title",
          subtitle: "Banner 2 Subtitle",
          background: "rgb(239, 235, 233)",
          image: "/assets/storybook/images/slider-img_fineartmultiple.jpg",
        },
        {
          title: "Banner 3 Title",
          subtitle: "Banner 3 Subtitle",
          background: "rgb(236, 239, 241)",
          image: "/assets/storybook/images/slider-img_fineartmultiple.jpg",
        },
      ],
      banners: [
        {
          slot: "banner-A",
          subtitle: "Dresses",
          title: "Cocktail & Party",
          description:
            "Find stunning women's cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.",
          buttonText: "Shop now",
          image: "/assets/storybook/Home/bannerF.jpg",
          class: "desktop-only",
        },
        {
          slot: "banner-B",
          subtitle: "Dresses",
          title: "Linen Dresses",
          description:
            "Find stunning women's cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.",
          buttonText: "Shop now",
          image: "/assets/storybook/Home/bannerE.jpg",
          class: "desktop-only",
        },
        {
          slot: "banner-C",
          subtitle: "T-Shirts",
          title: "The Office Life",
          image: "/assets/storybook/Home/bannerC.jpg",
        },
        {
          slot: "banner-D",
          subtitle: "Summer Sandals",
          title: "Eco Sandals",
          image: "/assets/storybook/Home/bannerG.jpg",
        },
      ],
      products: [
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productA.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: true,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productB.jpg",
          price: { regular: "$ 50.00 ", special: "$ 25.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: true,
          reviews: 8,
          badgeLabel: "-50%",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productC.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productA.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productB.jpg",
          price: { regular: "$ 50.00 ", special: "$ 45.00" },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "-10%",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productC.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productA.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
        {
          title: "Cream Beach Bag",
          image: "assets/storybook/Home/productB.jpg",
          price: { regular: "$ 50.00 " },
          rating: { max: 5, score: 4 },
          isOnWishlist: false,
          reviews: 8,
          badgeLabel: "",
          badgeColor: "color-primary",
        },
      ],
      instagramFeed: [
        [
          {
            content: "angelina_trn",
            url: "/assets/storybook/Home/imageA.png",
          },
          {
            content: "angelina_trn",
            url: "/assets/storybook/Home/imageB.png",
          },
        ],
        [
          {
            content: "angelina_trn",
            url: "/assets/storybook/Home/imageC.jpg",
          },
          {
            content: "angelina_trn",
            url: "/assets/storybook/Home/imageD.jpg",
          },
        ],
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      AOS.init({
        duration: 1000,
        easing: "ease-out",
      });
    });
  },
  methods: {
    toggleWishlist(index) {
      return (this.products[index].isOnWishlist = !this.products[index]
        .isOnWishlist);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@highdigital/sharedt/styles/components/pages/Home";
</style>
