From 0f6a40e2293b8707bc7be448ed910ae3686d1711 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Thu, 1 Dec 2022 16:27:54 +0100
Subject: [PATCH] added how it works area
---
pass/public/styles/index.less | 70 +++++++++++++++++++++++++++++--
pass/public/styles/misc/vars.less | 2 +
pass/views/index.ejs | 35 +++++++++++++++-
3 files changed, 103 insertions(+), 4 deletions(-)
diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index e63db74..e49660b 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -152,13 +152,13 @@
@advantages-breakpoint: 750px;
max-width: 1500px;
display: grid;
- margin: 0 auto;
+ margin: 4rem auto;
gap: 4rem;
- margin-top: 4rem;
> .advantage {
display: grid;
grid-template-columns: 1fr minmax(25em, 1fr);
grid-template-areas: "image text";
+ align-items: center;
&:nth-child(even) {
grid-template-columns: minmax(25em, 1fr) 1fr;
grid-template-areas: "text image";
@@ -176,7 +176,7 @@
}
> .text {
grid-area: text;
- color: #515151;
+ color: @font-color-on-white;
max-width: 40em;
padding-right: 1rem;
> p {
@@ -221,6 +221,70 @@
}
}
+#how-it-works {
+ @breakpoint-how-it-works: 420px;
+ background-color: @color-main;
+ color: white;
+ line-height: 1.5;
+ padding: 4rem 1rem;
+
+ > h1 {
+ margin: 0;
+ padding: 0 0 4rem 0;
+ white-space: nowrap;
+ line-height: 1;
+ padding-top: 0;
+ text-align: center;
+ font-size: clamp(2rem, 10vw, 3rem);
+ }
+
+ > ol {
+ display: grid;
+ row-gap: 3rem;
+ max-width: 1024px;
+ margin: 0 auto;
+ list-style-type: none;
+ padding: 0;
+
+ > li {
+ counter-increment: step-counter;
+ display: grid;
+ grid-template-rows: auto auto;
+ grid-template-columns: auto auto;
+ column-gap: 2rem;
+
+ @media (max-width: @breakpoint-how-it-works) {
+ grid-template-rows: auto auto auto;
+ grid-template-columns: auto;
+ justify-items: center;
+ }
+
+ &::before {
+ content: counter(step-counter);
+ grid-row: span 2;
+ align-self: center;
+ font-size: 3rem;
+ padding: 1rem;
+ border: 1px solid white;
+ line-height: 1;
+ width: 1em;
+ text-align: center;
+ border-radius: 50%;
+ background-color: white;
+ color: @font-color-on-white;
+ @media (max-width: @breakpoint-how-it-works) {
+ grid-row: auto;
+ margin-bottom: 1rem;
+ }
+ }
+
+ > h2 {
+ margin: 0;
+ }
+ }
+ }
+}
+
#offers,
#continue,
#info-container {
diff --git a/pass/public/styles/misc/vars.less b/pass/public/styles/misc/vars.less
index da222c5..da26860 100644
--- a/pass/public/styles/misc/vars.less
+++ b/pass/public/styles/misc/vars.less
@@ -2,4 +2,6 @@
@color-main-hover: lighten(@color-main, 5%);
@color-main-font-color: white;
+@font-color-on-white: #515151;
+
@body-scroll-break-point: 320px;
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index 93606f5..c9822ed 100644
--- a/pass/views/index.ejs
+++ b/pass/views/index.ejs
@@ -40,12 +40,45 @@
<img src="/images/robot.svg" alt="Image depicting a roboter">
<div class="text">
<h2>Ohne Logging</h2>
- <p>Bei Ihren Internetsuchen fallen automatisch viele Daten an. Einige davon bestimmen Sie selbst (Suchanfrage, Einstellungen, ...). Andere schickt Ihr Browser automatisch (Browsername und -version, Spracheinstellungen, ...). Widerum andere (wie z.B. Ihre IP-Adresse) sind für die Kommunikation unabdingbar. Schon immer sind wir mit diesen Daten äußerst vorsichtig umgegangen und haben nur abgespeichert, was unbedingt notwendig war um unseren Dienst zu betreiben. MetaGer-Pass macht das Speichern dieser Nutzerdaten nun aber endlich komplett überflüssig, weshalb Ihre Anfrage unsererseits bereits dauerhaft vergessen ist, sobald wir sie beantwortet haben.</p>
+ <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="/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. 5€ / Monat)</h2>
+ <div>
+ Einfach mal ausprobieren, oder dauerhafter Nutzer? Es liegt ganz bei Ihnen. Sie bezahlen nicht nach Zeit, sondern nach Nutzung. 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 MetaGer 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>
<div id="offers">
<form class="offer" action="/checkout">
--
GitLab