index.ejs

<%- include('templates/page_header', {css: [`${baseDir}/styles/index.css`], js:
[`${baseDir}/js/index.js`]}); %>
<div id="hero">
  <div class="container">
    <h1>Ihr Zugang zum maximalen Datenschutz bei der Suche</h1>
    <p>
      Mit MetaGer-Pass können Sie die Internetsuche so genießen, wie sie immer
      sein sollte:
    </p>
    <ul>
      <li>Ohne Werbung</li>
      <li>Ohne Tracking Links</li>
      <li>Ohne Logging</li>
      <li>Ohne Kompromisse</li>
    </ul>
    <div class="search-logo">
      <img
        class="metager-logo"
        src="<%= baseDir _%>/images/metager.svg"
        alt=""
      />
      <div class="searchbar">
        <button>
          <img src="<%= baseDir _%>/images/key-verified.svg" alt="" />
        </button>
        <input
          type="text"
          name="eingabe"
          id="eingabe"
          value="Anonym im Internet"
          disabled
        />
        <button>
          <img src="<%= baseDir _%>/images/icon-lupe.svg" alt="Suchen" />
        </button>
      </div>
    </div>
    <a class="call-to-action button" href="#how-it-works">So funktioniert es</a>
  </div>
</div>
<div id="advantages">
  <div class="advantage" id="no-ads">
    <img src="<%= baseDir _%>/images/hand.svg" alt="Image depicting money" />
    <div class="text">
      <h2>Ohne Werbeanzeigen</h2>
      <p>
        Kein Dienst kann kostenlos betrieben werden. Wenn ein Dienst im Internet
        kostenlos zur Verfügung steht, wird er in der Regel durch Werbeeinnahmen
        finanziert. MetaGer ist da keine Ausnahme. Selbst die
        datenschutzfreundlichste Werbung kann Ihre Daten nicht mehr schützen,
        wenn auf einen Werbelink geklickt wird. Mit MetaGer-Pass ist nun aber
        Schluss damit:
      </p>
      <div class="relevant-items">
        <div>Werbung</div>
        <div>Tracking Links</div>
      </div>
    </div>
  </div>
  <div class="advantage" id="no-logging">
    <img
      src="<%= baseDir _%>/images/robot.svg"
      alt="Image depicting a roboter"
    />
    <div class="text">
      <h2>Ohne Logging</h2>
      <p>
        Bei Ihren Internetsuchen fallen automatisch viele Daten an. Mit
        MetaGer-Pass kümmern wir uns darum, dass diese Daten gar nicht erst
        abgespeichert werden.
      </p>
      <div class="relevant-items">
        <div>Logging</div>
      </div>
    </div>
  </div>
  <div class="advantage" id="no-tradeoff">
    <img
      src="<%= baseDir _%>/images/metager-schloss-orange.svg"
      alt="Image depicting a lock"
    />
    <div class="text">
      <h2>Ohne Kompromisse</h2>
      <p>
        Es gibt bei MetaGer keine Nutzeraccounts. Sie erhalten von uns einen
        zufällig generierten Schlüssel. Es sind keine Kontaktdaten notwendig.
        Außerdem bieten wir mit PaySafe Card und Bargeld auch mehrere anonyme
        Zahlungsmethoden an. Wer noch einen Schritt weiter gehen möchte, kann
        anstelle eines Schlüssels unsere
        <a href="#">MetaGer-Pass Tokens</a> verwenden.
      </p>
      <div class="relevant-items">
        <div>Logging</div>
      </div>
    </div>
  </div>
</div>
<div id="how-it-works">
  <h1>So funktioniert es</h1>
  <ol>
    <li>
      <h2>MetaGer-Pass Schlüssel erstellen</h2>
      <div>
        Ihr Schlüssel ist das einzige, was Sie sich für die Nutzung von
        MetaGer-Pass notieren müssen. Dieser wird automatisch für Sie erstellt.
        Wir benötigen keine Kontaktdaten.
      </div>
    </li>
    <li>
      <h2>Suchanfragen kaufen (ca. 10€ / Monat)</h2>
      <div>
        Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei
        Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzungsmenge. Sie
        haben die Wahl, wie viele Suchanfragen es sein dürfen.
      </div>
    </li>
    <li>
      <h2>Verwenden Sie Ihren Schlüssel auf beliebig vielen Geräten</h2>
      <div>
        Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie
        können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit
        Ihrem Gerät <a href="https://metager.de" target="_blank">MetaGer</a> auf
        und geben Sie dort Ihren Schlüssel ein, indem Sie auf das
        Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen.
      </div>
    </li>
  </ol>
  <div id="how-it-works-action">
    <a href="<%= baseDir _%>/key/create" class="button">Los geht's</a>
  </div>
</div>
<div id="offers">
  <form class="offer" action="/checkout">
    <input type="hidden" name="amount" value="0" />
    <h1>100</h1>
    <div class="spacer"></div>
    <button type="submit" class="select"><%- price_for_100 %>€</button>
  </form>
  <form
    class="offer default"
    action="/checkout"
    data-price_for_250="<%- price_for_250 %>"
  >
    <h1>-</h1>
    <p class="hint">reicht üblicherweise für <span>-</span> Monat</p>
    <input type="range" name="amount" id="amount" min="1" max="12" value="1" />
    <div class="spacer"></div>
    <button type="submit" class="select">- €</button>
  </form>
</div>
<div id="continue">
  <form action="/checkout" method="get">
    <input type="hidden" name="amount" value="-1" />
    <button type="submit">
      Einkauf fortsetzen / MetaGer-Pass Coupon einlösen
    </button>
  </form>
</div>
<div id="info-container">
  <h1>MetaGer Pass</h1>
  <div id="first">
    wir bringen Privatsphäre bei der Suche auf ein neues Level.
    <ul>
      <li>Keine Werbung</li>
      <li>Keine Affiliate Links</li>
      <li>Kein Logging</li>
    </ul>
  </div>
  <div id="second">
    In MetaGer liegt ein großer Anteil unserer Bestrebungen einen freien
    Wissenszugang für alle gewährleisten zu können. Wir möchten dabei ein
    möglichst ganzheitliches Konzept verfolgen. Unsere Funktion als
    Meta-Suchmaschine ermöglicht das parallele Abfragen mehrerer Suchdienste und
    minimiert auf diese Weise das Risiko, welches automatisch entsteht wenn
    einzelne Unternehmen darüber entscheiden können, welche Informationen im
    Internet auffindbar sind und welche nicht.
  </div>
  <div id="third">
    Ihre Privatsphäre liegt uns am Herzen. Um unsere Versprechen auch technisch
    zu hinterfüttern ist der Quellcode von
    <a href="https://gitlab.metager.de/open-source/MetaGer">MetaGer</a> und
    selbstversändlich auch der von
    <a href="https://gitlab.metager.de/open-source/metager-pass"
      >MetaGer Pass</a
    >
    unter einer Open-Source Lizenz öffentlich einsehbar.
  </div>
  <div id="fourth">
    Um Ihre persönlichen Daten auch beim Kaufprozess abzusichern haben wir ein
    Zahlungssystem entwickelt, welches Ihren Einkauf uns gegenüber
    kryptographisch verschlüsselt. Dafür verwenden wir ein
    <a href="https://en.wikipedia.org/wiki/Blind_signature">Verfahren</a>,
    welches uns ermöglicht Ihnen ein Passwort zu verkaufen, ohne dass wir dieses
    Passwort kennen.
  </div>
</div>
<%- include('templates/page_footer'); -%>