gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-taler-ops-www] branch master updated (61b5ecd -> af2b757)


From: gnunet
Subject: [taler-taler-ops-www] branch master updated (61b5ecd -> af2b757)
Date: Sun, 25 Feb 2024 06:37:57 +0100

This is an automated email from the git hooks/post-receive script.

nora pushed a change to branch master
in repository taler-ops-www.

    from 61b5ecd  fix: add warn comment
     new b1dde4e  force it on top
     new 62c3156  some link styles
     new 3a8cdff  some more stuff
     new 60be576  things
     new 8e304f0  more landing changes
     new af2b757  finish the landing page

The 6 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .prettierrc                       |   8 +-
 common/base.j2                    |  30 ++++---
 common/footer.j2.inc              | 102 +++++++---------------
 common/navigation/items.j2.inc    |  23 +++--
 locale/de/LC_MESSAGES/messages.po |  74 ++++++++--------
 locale/en/LC_MESSAGES/messages.po |  67 ++++++++-------
 locale/fr/LC_MESSAGES/messages.po |  67 ++++++++-------
 locale/messages.pot               |  67 ++++++++-------
 static/scss/_link.scss            |  19 +++++
 static/scss/footer.scss           |   6 ++
 static/scss/global.scss           |   1 -
 static/scss/links.scss            |  10 ---
 static/scss/navigation/skip.scss  |   1 +
 static/scss/pages/landing.scss    |  30 +++++++
 static/scss/util.scss             |  25 +++++-
 tailwind.config.js                |   6 ++
 template/index.html.j2            | 172 +++++++++++++++++---------------------
 17 files changed, 385 insertions(+), 323 deletions(-)
 create mode 100644 static/scss/_link.scss
 delete mode 100644 static/scss/links.scss
 create mode 100644 static/scss/pages/landing.scss

diff --git a/.prettierrc b/.prettierrc
index 7af430b..8fa0f09 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,5 +4,11 @@
   "useTabs": false,
   "endOfLine": "lf",
   "trailingComma": "all",
-  "semi": true
+  "semi": true,
+  "overrides": [
+    {
+      "files": "*.html.j2",
+      "options": { "parser": "html" }
+    }
+  ]
 }
diff --git a/common/base.j2 b/common/base.j2
index b6bb940..ac099e9 100644
--- a/common/base.j2
+++ b/common/base.j2
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="{{ lang }}">
   <head>
     <meta charset="UTF-8" />
@@ -14,24 +14,28 @@
     <meta property="og:image" content="https://taler.net/favicon.ico"; />
     <meta property="og:image" content="/favicon.ico" />
     {% include "common/header.j2.inc" %} {% block head_content %}
-      <!-- WARN: NO HEAD BLOCK SPECIFIED, USING DEFAULT -->
-      <meta
-        property="og:image"
-        content="{{ url_static('images/unsorted/favicon.png') }}"
-      />
-      <meta
-        name="description"
-        content="{{ _('Taler Operations AG, Biel, Switzerland') }}"
-      />
-      <meta property="og:title" content="{% trans %}Taler Operations AG, Biel, 
Switzerland{% endtrans %}" />
+    <!-- WARN: NO HEAD BLOCK SPECIFIED, USING DEFAULT -->
+    <meta
+      property="og:image"
+      content="{{ url_static('images/unsorted/favicon.png') }}"
+    />
+    <meta
+      name="description"
+      content="{{ _('Taler Operations AG, Biel, Switzerland') }}"
+    />
+    <meta
+      property="og:title"
+      content="{% trans %}Taler Operations AG, Biel, Switzerland{% endtrans %}"
+    />
     {% endblock %}
   </head>
 
   <body class="font-sans font-normal">
     <div id="page-container">
       <div id="content-wrap">
-        {% include "common/navigation/index.j2.inc" %} {% block body_content 
%}{%
-        endblock %} {% include "common/footer.j2.inc" %}
+        {% include "common/navigation/index.j2.inc" %}
+        <div id="approot">{% block body_content %}{% endblock %}</div>
+        {% include "common/footer.j2.inc" %}
       </div>
     </div>
   </body>
diff --git a/common/footer.j2.inc b/common/footer.j2.inc
index bff250e..fbf7172 100644
--- a/common/footer.j2.inc
+++ b/common/footer.j2.inc
@@ -1,20 +1,12 @@
-<footer
-  class="dark bg-black text-white w-screen relative py-8 footer flex flex-col 
items-center justify-center"
->
-  <div
-    class="footer-top-outer flex px-8 py-8 sm:px-10 items-center 
justify-center w-full"
-  >
+<footer class="dark bg-black text-white w-screen relative py-8 footer flex 
flex-col items-center justify-center">
+  <div class="footer-top-outer flex px-8 py-8 sm:px-10 items-center 
justify-center w-full">
     <div
-      class="footer-top flex p-4 items-start max-w-max justify-center flex-1 
gap-12 lg:max-w-screen-2xl flex-col lg:flex-row lg:items-start 
lg:justify-between"
-    >
+      class="footer-top flex p-4 items-start max-w-max justify-center flex-1 
gap-12 lg:max-w-screen-2xl flex-col lg:flex-row lg:items-start 
lg:justify-between">
       <div class="footer-col flex-1">
         <div class="text-center flex flex-col items-center">
-          <a href="{{ url_localized('index.html') }}" class="footlogo"
-            ><img
-              src="{{ url_static('images/unsorted/footlogo.png') }}"
-              alt="Homepage"
-              style="width: 206px; height: 85px; max-width: max-content"
-          /></a>
+          <a href="{{ url_localized('index.html') }}" class="footlogo"><img
+              src="{{ url_static('images/unsorted/footlogo.png') }}" 
alt="Homepage"
+              style="width: 206px; height: 85px; max-width: max-content" /></a>
           <p class="mt-3">
             Taler Operations AG, {% trans %}Switzerland{% endtrans %}<br />
             Höheweg 80<br />
@@ -23,29 +15,26 @@
         </div>
       </div>
       <div class="footer-col flex-1">
-        <div class="footbox footmenu">
+        <div class="footer-items-list">
           <h4 class="section-title">{% trans %}Quick Links{% endtrans %}</h4>
           <ul>
             <li>
-              <a
-                class="link"
-                href="{{ url_localized('index.html') }}"
-                alt="{% trans %}Taler Operations AG Homepage{% endtrans %}"
-              >
+              <a class="link no-clr" href="{{ url_localized('index.html') }}"
+                alt="{% trans %}Taler Operations AG Homepage{% endtrans %}">
                 {% trans %}Home{% endtrans %}
               </a>
             </li>
             {#
-            <!-- <li><a class="link" href="{{ url_localized('merchants.html') 
}}">{% trans %}Merchant Integration Guide{% endtrans %}</a></li>
-                                                       <li><a class="link" 
href="{{ url_localized('users.html') }}">{% trans %}User Installation Guide{% 
endtrans %}</a></li> -->
+            <!-- <li><a class="link no-clr" href="{{ 
url_localized('merchants.html') }}">{% trans %}Merchant Integration Guide{% 
endtrans %}</a></li>
+                                                       <li><a class="link 
no-clr" href="{{ url_localized('users.html') }}">{% trans %}User Installation 
Guide{% endtrans %}</a></li> -->
             #}
             <li>
-              <a class="link" href="{{ url_localized('fees.html') }}">
+              <a class="link no-clr" href="{{ url_localized('fees.html') }}">
                 {% trans %}Fees{% endtrans %}
               </a>
             </li>
             <li>
-              <a class="link" href="https://exchange.taler-ops.ch/terms";>
+              <a class="link no-clr" 
href="https://exchange.taler-ops.ch/terms";>
                 {% trans %}Terms of Service{% endtrans %}
               </a>
             </li>
@@ -53,36 +42,21 @@
         </div>
       </div>
       <div class="footer-col flex-1">
-        <div class="footbox footmenu">
+        <div class="footer-items-list">
           <h4 class="section-title">{% trans %}Partners{% endtrans %}</h4>
           <ul>
             <li>
-              <a
-                href="https://taler.net/en/ngi-taler.html";
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link"
-                >{% trans %}Taler Consortium{% endtrans %}</a
-              >
+              <a href="https://taler.net/en/ngi-taler.html"; target="_blank" 
rel="noopener noreferrer"
+                class="link no-clr">{% trans %}Taler Consortium{% endtrans 
%}</a>
             </li>
             <li>
-              <a
-                href="https://bfh.ch/";
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link"
-                >{% trans %}Bern&nbsp;University of Applied&nbsp;Sciences{%
-                endtrans %}</a
-              >
+              <a href="https://bfh.ch/"; target="_blank" rel="noopener 
noreferrer" class="link no-clr">{% trans
+                %}Bern&nbsp;University of Applied&nbsp;Sciences{%
+                endtrans %}</a>
             </li>
             <li>
-              <a
-                href="https://netzbon.ch";
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link"
-                >{% trans %}NetzBon{% endtrans %}</a
-              >
+              <a href="https://netzbon.ch"; target="_blank" rel="noopener 
noreferrer" class="link no-clr">{% trans
+                %}NetzBon{% endtrans %}</a>
             </li>
           </ul>
         </div>
@@ -92,43 +66,29 @@
           <h4 class="section-title">{% trans %}Contacts{% endtrans %}</h4>
           <ul>
             <li>
-              <a class="link phone" href="tel:0041442801200"
-                >{% trans %}Tel:{% endtrans %} +41 44 280 1200</a
-              >
+              <a class="link no-clr phone" href="tel:0041442801200">{% trans 
%}Tel:{% endtrans %} +41 44 280 1200</a>
             </li>
             <li>
-              <a class="link" href="mailto:compliance@taler-systems.com";
-                >{% trans %}Compliance Officer{% endtrans %}</a
-              >
+              <a class="link no-clr" 
href="mailto:compliance@taler-systems.com";>{% trans %}Compliance Officer{% 
endtrans
+                %}</a>
             </li>
             <li>
-              <a class="link" href="mailto:aml@taler-systems.com";
-                >{% trans %}AML Officer{% endtrans %}</a
-              >
+              <a class="link no-clr" href="mailto:aml@taler-systems.com";>{% 
trans %}AML Officer{% endtrans %}</a>
             </li>
           </ul>
         </div>
       </div>
     </div>
   </div>
-  <div
-    class="footer-bottom flex items-center justify-center flex-col text-center 
px-6 max-w-5xl"
-  >
+  <div class="footer-bottom flex items-center justify-center flex-col 
text-center px-6 max-w-5xl">
     <p>
       © {% trans %}Copyright{% endtrans %} 2024
-      <a class="link" href="{{ url_localized('index.html') }}"
-        >Taler Operations AG</a
-      >. {% trans %}Licensed under the{% endtrans %}
-      <a
-        href="https://www.gnu.org/licenses/fdl-1.3.html.en";
-        target="_blank"
-        rel="noopener noreferrer"
-        class="link"
-      >
+      <a class="link" href="{{ url_localized('index.html') }}">Taler 
Operations AG</a>. {% trans %}Licensed under the{%
+      endtrans %}
+      <a href="https://www.gnu.org/licenses/fdl-1.3.html.en"; target="_blank" 
rel="noopener noreferrer" class="link">
         {# TODO: ask around for who chose the FDL - shouldn't we be using the
         GPL, or atleast license the code under the GPL? #} GNU Free
-        Documentation License</a
-      >.
+        Documentation License</a>.
     </p>
     <p class="py-2">
       {% trans %}We do not assume any liability for the correctness of 
contents.
@@ -140,4 +100,4 @@
       mitigating problems.{% endtrans %}
     </p>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/common/navigation/items.j2.inc b/common/navigation/items.j2.inc
index 9aecd27..60de158 100644
--- a/common/navigation/items.j2.inc
+++ b/common/navigation/items.j2.inc
@@ -1,14 +1,27 @@
-<nav class="flex flex-row gap-4">
-  <a class="link" href="{{ url_localized('index.html') }}"
+<nav class="flex flex-row gap-4 font-medium">
+  <a
+    class="no-underline hover:underline text-slate-500 hover:text-slate-400 
transition-all"
+    href="{{ url_localized('index.html') }}"
     >{% trans %}Home{% endtrans %}</a
   >
-  <a class="link" href="{{ url_localized('merchants.html') }}"
+  <a
+    class="no-underline hover:underline text-slate-500 hover:text-slate-400 
transition-all"
+    href="{{ url_localized('merchants.html') }}"
     >{% trans %}For Merchants{% endtrans %}</a
   >
-  <a class="link" href="{{ url_localized('users.html') }}"
+  <a
+    class="no-underline hover:underline text-slate-500 hover:text-slate-400 
transition-all"
+    href="{{ url_localized('users.html') }}"
     >{% trans %}For Users{% endtrans %}</a
   >
-  <a class="link" href="{{ url_localized('fees.html') }}"
+  <a
+    class="no-underline hover:underline text-slate-500 hover:text-slate-400 
transition-all"
+    href="{{ url_localized('fees.html') }}"
     >{% trans %}Fees{% endtrans %}</a
   >
+  <a
+    class="no-underline hover:underline text-slate-500 hover:text-slate-400 
transition-all"
+    href="https://exchange.taler-ops.ch/terms";
+    >{% trans %}Terms of Service{% endtrans %}</a
+  >
 </nav>
diff --git a/locale/de/LC_MESSAGES/messages.po 
b/locale/de/LC_MESSAGES/messages.po
index 9abdcef..1af016a 100644
--- a/locale/de/LC_MESSAGES/messages.po
+++ b/locale/de/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-25 04:23+0100\n"
+"POT-Creation-Date: 2024-02-25 05:32+0100\n"
 "PO-Revision-Date: 2024-02-24 20:06+0000\n"
 "Last-Translator: Stefan Kügel <skuegel@web.de>\n"
 "Language-Team: German <https://weblate.taler.net/projects/taler-ops/website/";
@@ -20,78 +20,79 @@ msgstr ""
 "X-Generator: Weblate 5.2.1\n"
 "Generated-By: Babel 2.6.0\n"
 
-#: common/base.j2:24 common/base.j2:26
+#: common/base.j2:24 common/base.j2:28
 msgid "Taler Operations AG, Biel, Switzerland"
 msgstr "Taler Operations AG, Biel, Schweiz"
 
-#: common/footer.j2.inc:19 common/footer.old.j2.inc:15
+#: common/footer.j2.inc:11 common/footer.old.j2.inc:15
 msgid "Switzerland"
 msgstr "Schweiz"
 
-#: common/footer.j2.inc:27 common/footer.old.j2.inc:23
+#: common/footer.j2.inc:19 common/footer.old.j2.inc:23
 msgid "Quick Links"
 msgstr "Seitenübersicht"
 
-#: common/footer.j2.inc:33 common/footer.old.j2.inc:28
+#: common/footer.j2.inc:23 common/footer.old.j2.inc:28
 msgid "Taler Operations AG Homepage"
 msgstr "Taler Operations AG Startseite"
 
-#: common/footer.j2.inc:35 common/footer.old.j2.inc:29
-#: common/navigation/items.j2.inc:3
+#: common/footer.j2.inc:24 common/footer.old.j2.inc:29
+#: common/navigation/items.j2.inc:5
 msgid "Home"
 msgstr "Startseite"
 
-#: common/footer.j2.inc:44 common/footer.old.j2.inc:38
-#: common/navigation/items.j2.inc:12 template/fees.html.j2:3
+#: common/footer.j2.inc:33 common/footer.old.j2.inc:38
+#: common/navigation/items.j2.inc:20 template/fees.html.j2:3
 #: template/fees.html.j2:14 template/fees.html.j2:29
 msgid "Fees"
 msgstr "Gebührenordnung"
 
-#: common/footer.j2.inc:49 common/footer.old.j2.inc:43
+#: common/footer.j2.inc:38 common/footer.old.j2.inc:43
+#: common/navigation/items.j2.inc:25
 msgid "Terms of Service"
 msgstr "AGB"
 
-#: common/footer.j2.inc:57 common/footer.old.j2.inc:51
+#: common/footer.j2.inc:46 common/footer.old.j2.inc:51
 msgid "Partners"
 msgstr "Partner"
 
-#: common/footer.j2.inc:65 common/footer.old.j2.inc:58
+#: common/footer.j2.inc:50 common/footer.old.j2.inc:58
 msgid "Taler Consortium"
 msgstr "Taler-Konsortium NGI TALER"
 
-#: common/footer.j2.inc:74 common/footer.old.j2.inc:66
+#: common/footer.j2.inc:53 common/footer.old.j2.inc:66
 msgid "Bern&nbsp;University of Applied&nbsp;Sciences"
 msgstr "Berner Fachhochschule (BFH)"
 
-#: common/footer.j2.inc:84 common/footer.old.j2.inc:75
+#: common/footer.j2.inc:58 common/footer.old.j2.inc:75
 msgid "NetzBon"
 msgstr "NetzBon"
 
-#: common/footer.j2.inc:92 common/footer.old.j2.inc:83
+#: common/footer.j2.inc:66 common/footer.old.j2.inc:83
 msgid "Contacts"
 msgstr "Kontakt"
 
-#: common/footer.j2.inc:96 common/footer.old.j2.inc:87
+#: common/footer.j2.inc:69 common/footer.old.j2.inc:87
 msgid "Tel:"
 msgstr "Tel:"
 
-#: common/footer.j2.inc:101 common/footer.old.j2.inc:92
+#: common/footer.j2.inc:72 common/footer.old.j2.inc:92
 msgid "Compliance Officer"
 msgstr "Compliance-Beauftragte"
 
-#: common/footer.j2.inc:106 common/footer.old.j2.inc:97
+#: common/footer.j2.inc:76 common/footer.old.j2.inc:97
 msgid "AML Officer"
 msgstr "AML-Beauftragte"
 
-#: common/footer.j2.inc:118 common/footer.old.j2.inc:110
+#: common/footer.j2.inc:85 common/footer.old.j2.inc:110
 msgid "Copyright"
 msgstr "Copyright"
 
-#: common/footer.j2.inc:121
+#: common/footer.j2.inc:86
 msgid "Licensed under the"
 msgstr ""
 
-#: common/footer.j2.inc:134
+#: common/footer.j2.inc:94
 #, fuzzy
 #| msgid ""
 #| "We do not assume any liability for the correctness of contents. We do not "
@@ -137,11 +138,11 @@ msgstr ""
 msgid "Skip to main content"
 msgstr "Navigationsmenü überspringen"
 
-#: common/navigation/items.j2.inc:6 template/index.html.j2:84
+#: common/navigation/items.j2.inc:10 template/index.html.j2:73
 msgid "For Merchants"
 msgstr "Für Händler"
 
-#: common/navigation/items.j2.inc:9 template/index.html.j2:66
+#: common/navigation/items.j2.inc:15 template/index.html.j2:57
 msgid "For Users"
 msgstr "Für Kunden"
 
@@ -157,7 +158,7 @@ msgstr ""
 msgid "Costs for sending SMS to users"
 msgstr "Kosten für den Versand von SMS an Kunden"
 
-#: template/index.html.j2:5
+#: template/index.html.j2:6
 #, fuzzy
 #| msgid "Taler Operations runs the GNU Taler payment system in Switzerland."
 msgid ""
@@ -165,11 +166,13 @@ msgid ""
 "Switzerland."
 msgstr "Taler Operations betreibt das Taler-Bezahlsystem in der Schweiz."
 
-#: template/index.html.j2:18
-msgid "Welcome to <span>Taler Operations</span>!"
+#: template/index.html.j2:20
+#, fuzzy
+#| msgid "Welcome to <span>Taler Operations</span>!"
+msgid "Welcome to <span class=\"text-accent-pure\">Taler Operations</span>!"
 msgstr "Willkommen bei <span>Taler Operations</span>!"
 
-#: template/index.html.j2:23
+#: template/index.html.j2:24
 msgid "Taler Operations runs the GNU Taler payment system in Switzerland."
 msgstr "Taler Operations betreibt das Taler-Bezahlsystem in der Schweiz."
 
@@ -184,7 +187,13 @@ msgstr ""
 msgid "Swiss Franc coin with GNU head as face value"
 msgstr ""
 
-#: template/index.html.j2:68
+#: template/index.html.j2:49
+#, fuzzy
+#| msgid "Get Started Now"
+msgid "Getting Started with Taler"
+msgstr "Zur Demo-Seite"
+
+#: template/index.html.j2:59
 msgid ""
 "Taler provides the world with a payment solution that definitely makes sense "
 "in a society where privacy, data safety, technical security, and reliability "
@@ -195,11 +204,11 @@ msgstr ""
 "höchsten Datenschutz, technische Sicherheit und uneingeschränkte "
 "Verlässlichkeit verlangen."
 
-#: template/index.html.j2:74
+#: template/index.html.j2:68
 msgid "Pay&nbsp;with&nbsp;Taler"
 msgstr "Mit&nbsp;Taler&nbsp;bezahlen"
 
-#: template/index.html.j2:86
+#: template/index.html.j2:75
 msgid ""
 "Taler offers efficient payments and backoffice procedures with security, "
 "privacy and data minimization by design. Payers and payees can rely on "
@@ -210,7 +219,7 @@ msgstr ""
 "Händler und Kunden können sich auf Technologie verlassen und müssen nicht "
 "mehr auf blindes Vertrauen setzen."
 
-#: template/index.html.j2:94
+#: template/index.html.j2:84
 msgid "Integrate"
 msgstr "Integration"
 
@@ -1103,9 +1112,6 @@ msgstr "FAQs (Frequently Asked Questions)"
 #~ "Taler-Wallets nach Verstreichen einer Nutzungsfrist. Ihre Höhe und die "
 #~ "Nutzungsfrist werden vom Systembetreiber bestimmt."
 
-#~ msgid "Get Started Now"
-#~ msgstr "Zur Demo-Seite"
-
 #~ msgid ""
 #~ "From a legal point of view, users can always turn to their national "
 #~ "authority responsible for settling disputes concerning the management of "
diff --git a/locale/en/LC_MESSAGES/messages.po 
b/locale/en/LC_MESSAGES/messages.po
index 435b75d..dc235b9 100644
--- a/locale/en/LC_MESSAGES/messages.po
+++ b/locale/en/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-25 04:23+0100\n"
+"POT-Creation-Date: 2024-02-25 05:32+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,78 +18,79 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.6.0\n"
 
-#: common/base.j2:24 common/base.j2:26
+#: common/base.j2:24 common/base.j2:28
 msgid "Taler Operations AG, Biel, Switzerland"
 msgstr ""
 
-#: common/footer.j2.inc:19 common/footer.old.j2.inc:15
+#: common/footer.j2.inc:11 common/footer.old.j2.inc:15
 msgid "Switzerland"
 msgstr ""
 
-#: common/footer.j2.inc:27 common/footer.old.j2.inc:23
+#: common/footer.j2.inc:19 common/footer.old.j2.inc:23
 msgid "Quick Links"
 msgstr ""
 
-#: common/footer.j2.inc:33 common/footer.old.j2.inc:28
+#: common/footer.j2.inc:23 common/footer.old.j2.inc:28
 msgid "Taler Operations AG Homepage"
 msgstr ""
 
-#: common/footer.j2.inc:35 common/footer.old.j2.inc:29
-#: common/navigation/items.j2.inc:3
+#: common/footer.j2.inc:24 common/footer.old.j2.inc:29
+#: common/navigation/items.j2.inc:5
 msgid "Home"
 msgstr ""
 
-#: common/footer.j2.inc:44 common/footer.old.j2.inc:38
-#: common/navigation/items.j2.inc:12 template/fees.html.j2:3
+#: common/footer.j2.inc:33 common/footer.old.j2.inc:38
+#: common/navigation/items.j2.inc:20 template/fees.html.j2:3
 #: template/fees.html.j2:14 template/fees.html.j2:29
 msgid "Fees"
 msgstr ""
 
-#: common/footer.j2.inc:49 common/footer.old.j2.inc:43
+#: common/footer.j2.inc:38 common/footer.old.j2.inc:43
+#: common/navigation/items.j2.inc:25
 msgid "Terms of Service"
 msgstr ""
 
-#: common/footer.j2.inc:57 common/footer.old.j2.inc:51
+#: common/footer.j2.inc:46 common/footer.old.j2.inc:51
 msgid "Partners"
 msgstr ""
 
-#: common/footer.j2.inc:65 common/footer.old.j2.inc:58
+#: common/footer.j2.inc:50 common/footer.old.j2.inc:58
 msgid "Taler Consortium"
 msgstr ""
 
-#: common/footer.j2.inc:74 common/footer.old.j2.inc:66
+#: common/footer.j2.inc:53 common/footer.old.j2.inc:66
 msgid "Bern&nbsp;University of Applied&nbsp;Sciences"
 msgstr ""
 
-#: common/footer.j2.inc:84 common/footer.old.j2.inc:75
+#: common/footer.j2.inc:58 common/footer.old.j2.inc:75
 msgid "NetzBon"
 msgstr ""
 
-#: common/footer.j2.inc:92 common/footer.old.j2.inc:83
+#: common/footer.j2.inc:66 common/footer.old.j2.inc:83
 msgid "Contacts"
 msgstr ""
 
-#: common/footer.j2.inc:96 common/footer.old.j2.inc:87
+#: common/footer.j2.inc:69 common/footer.old.j2.inc:87
 msgid "Tel:"
 msgstr ""
 
-#: common/footer.j2.inc:101 common/footer.old.j2.inc:92
+#: common/footer.j2.inc:72 common/footer.old.j2.inc:92
 msgid "Compliance Officer"
 msgstr ""
 
-#: common/footer.j2.inc:106 common/footer.old.j2.inc:97
+#: common/footer.j2.inc:76 common/footer.old.j2.inc:97
 msgid "AML Officer"
 msgstr ""
 
-#: common/footer.j2.inc:118 common/footer.old.j2.inc:110
+#: common/footer.j2.inc:85 common/footer.old.j2.inc:110
 msgid "Copyright"
 msgstr ""
 
-#: common/footer.j2.inc:121
+#: common/footer.j2.inc:86
 msgid "Licensed under the"
 msgstr ""
 
-#: common/footer.j2.inc:134
+#: common/footer.j2.inc:94
 msgid ""
 "We do not assume any liability for the correctness of contents. We do not "
 "collect any data and do not use cookies. </p> <p> Our web server generates a "
@@ -113,11 +114,11 @@ msgstr ""
 msgid "Skip to main content"
 msgstr ""
 
-#: common/navigation/items.j2.inc:6 template/index.html.j2:84
+#: common/navigation/items.j2.inc:10 template/index.html.j2:73
 msgid "For Merchants"
 msgstr ""
 
-#: common/navigation/items.j2.inc:9 template/index.html.j2:66
+#: common/navigation/items.j2.inc:15 template/index.html.j2:57
 msgid "For Users"
 msgstr ""
 
@@ -133,17 +134,17 @@ msgstr ""
 msgid "Costs for sending SMS to users"
 msgstr ""
 
-#: template/index.html.j2:5
+#: template/index.html.j2:6
 msgid ""
 "Taler Operations is the entity running the GNU Taler payment system in "
 "Switzerland."
 msgstr ""
 
-#: template/index.html.j2:18
-msgid "Welcome to <span>Taler Operations</span>!"
+#: template/index.html.j2:20
+msgid "Welcome to <span class=\"text-accent-pure\">Taler Operations</span>!"
 msgstr ""
 
-#: template/index.html.j2:23
+#: template/index.html.j2:24
 msgid "Taler Operations runs the GNU Taler payment system in Switzerland."
 msgstr ""
 
@@ -158,25 +159,29 @@ msgstr ""
 msgid "Swiss Franc coin with GNU head as face value"
 msgstr ""
 
-#: template/index.html.j2:68
+#: template/index.html.j2:49
+msgid "Getting Started with Taler"
+msgstr ""
+
+#: template/index.html.j2:59
 msgid ""
 "Taler provides the world with a payment solution that definitely makes sense "
 "in a society where privacy, data safety, technical security, and reliability "
 "become more and more crucial for everyone."
 msgstr ""
 
-#: template/index.html.j2:74
+#: template/index.html.j2:68
 msgid "Pay&nbsp;with&nbsp;Taler"
 msgstr ""
 
-#: template/index.html.j2:86
+#: template/index.html.j2:75
 msgid ""
 "Taler offers efficient payments and backoffice procedures with security, "
 "privacy and data minimization by design. Payers and payees can rely on "
 "technology, and do not need to purely rely on trust anymore."
 msgstr ""
 
-#: template/index.html.j2:94
+#: template/index.html.j2:84
 msgid "Integrate"
 msgstr ""
 
diff --git a/locale/fr/LC_MESSAGES/messages.po 
b/locale/fr/LC_MESSAGES/messages.po
index bea79f8..3c2f587 100644
--- a/locale/fr/LC_MESSAGES/messages.po
+++ b/locale/fr/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-25 04:23+0100\n"
+"POT-Creation-Date: 2024-02-25 05:32+0100\n"
 "PO-Revision-Date: 2024-02-12 18:13+0000\n"
 "Last-Translator: Stefan Kügel <skuegel@web.de>\n"
 "Language-Team: French <https://weblate.taler.net/projects/taler-ops/website/";
@@ -20,80 +20,81 @@ msgstr ""
 "X-Generator: Weblate 5.2.1\n"
 "Generated-By: Babel 2.8.0\n"
 
-#: common/base.j2:24 common/base.j2:26
+#: common/base.j2:24 common/base.j2:28
 msgid "Taler Operations AG, Biel, Switzerland"
 msgstr "Taler Operations AG, Bienne, Suisse"
 
-#: common/footer.j2.inc:19 common/footer.old.j2.inc:15
+#: common/footer.j2.inc:11 common/footer.old.j2.inc:15
 msgid "Switzerland"
 msgstr ""
 
-#: common/footer.j2.inc:27 common/footer.old.j2.inc:23
+#: common/footer.j2.inc:19 common/footer.old.j2.inc:23
 msgid "Quick Links"
 msgstr "Liens directs"
 
-#: common/footer.j2.inc:33 common/footer.old.j2.inc:28
+#: common/footer.j2.inc:23 common/footer.old.j2.inc:28
 msgid "Taler Operations AG Homepage"
 msgstr "Page d'accueil Taler Operations AG"
 
-#: common/footer.j2.inc:35 common/footer.old.j2.inc:29
-#: common/navigation/items.j2.inc:3
+#: common/footer.j2.inc:24 common/footer.old.j2.inc:29
+#: common/navigation/items.j2.inc:5
 msgid "Home"
 msgstr "Accueil"
 
-#: common/footer.j2.inc:44 common/footer.old.j2.inc:38
-#: common/navigation/items.j2.inc:12 template/fees.html.j2:3
+#: common/footer.j2.inc:33 common/footer.old.j2.inc:38
+#: common/navigation/items.j2.inc:20 template/fees.html.j2:3
 #: template/fees.html.j2:14 template/fees.html.j2:29
 msgid "Fees"
 msgstr "Frais"
 
-#: common/footer.j2.inc:49 common/footer.old.j2.inc:43
+#: common/footer.j2.inc:38 common/footer.old.j2.inc:43
+#: common/navigation/items.j2.inc:25
 msgid "Terms of Service"
 msgstr "Conditions d'utilisation"
 
-#: common/footer.j2.inc:57 common/footer.old.j2.inc:51
+#: common/footer.j2.inc:46 common/footer.old.j2.inc:51
 msgid "Partners"
 msgstr "Partenaires"
 
-#: common/footer.j2.inc:65 common/footer.old.j2.inc:58
+#: common/footer.j2.inc:50 common/footer.old.j2.inc:58
 msgid "Taler Consortium"
 msgstr "Consortium Taler"
 
-#: common/footer.j2.inc:74 common/footer.old.j2.inc:66
+#: common/footer.j2.inc:53 common/footer.old.j2.inc:66
 #, fuzzy
 #| msgid "Bern University of Applied Sciences"
 msgid "Bern&nbsp;University of Applied&nbsp;Sciences"
 msgstr "Haute école spécialisée bernoise"
 
-#: common/footer.j2.inc:84 common/footer.old.j2.inc:75
+#: common/footer.j2.inc:58 common/footer.old.j2.inc:75
 msgid "NetzBon"
 msgstr "NetzBon"
 
-#: common/footer.j2.inc:92 common/footer.old.j2.inc:83
+#: common/footer.j2.inc:66 common/footer.old.j2.inc:83
 msgid "Contacts"
 msgstr "Contacts"
 
-#: common/footer.j2.inc:96 common/footer.old.j2.inc:87
+#: common/footer.j2.inc:69 common/footer.old.j2.inc:87
 msgid "Tel:"
 msgstr ""
 
-#: common/footer.j2.inc:101 common/footer.old.j2.inc:92
+#: common/footer.j2.inc:72 common/footer.old.j2.inc:92
 msgid "Compliance Officer"
 msgstr "Responsable de la conformité"
 
-#: common/footer.j2.inc:106 common/footer.old.j2.inc:97
+#: common/footer.j2.inc:76 common/footer.old.j2.inc:97
 msgid "AML Officer"
 msgstr "Agent de lutte contre le blanchiment d'argent"
 
-#: common/footer.j2.inc:118 common/footer.old.j2.inc:110
+#: common/footer.j2.inc:85 common/footer.old.j2.inc:110
 msgid "Copyright"
 msgstr "Droits d'auteur"
 
-#: common/footer.j2.inc:121
+#: common/footer.j2.inc:86
 msgid "Licensed under the"
 msgstr ""
 
-#: common/footer.j2.inc:134
+#: common/footer.j2.inc:94
 #, fuzzy
 msgid ""
 "We do not assume any liability for the correctness of contents. We do not "
@@ -129,11 +130,11 @@ msgstr ""
 msgid "Skip to main content"
 msgstr "Aller au menu principal"
 
-#: common/navigation/items.j2.inc:6 template/index.html.j2:84
+#: common/navigation/items.j2.inc:10 template/index.html.j2:73
 msgid "For Merchants"
 msgstr ""
 
-#: common/navigation/items.j2.inc:9 template/index.html.j2:66
+#: common/navigation/items.j2.inc:15 template/index.html.j2:57
 msgid "For Users"
 msgstr ""
 
@@ -149,7 +150,7 @@ msgstr ""
 msgid "Costs for sending SMS to users"
 msgstr ""
 
-#: template/index.html.j2:5
+#: template/index.html.j2:6
 #, fuzzy
 #| msgid "Taler Operations AG, Biel, Switzerland"
 msgid ""
@@ -157,11 +158,11 @@ msgid ""
 "Switzerland."
 msgstr "Taler Operations AG, Bienne, Suisse"
 
-#: template/index.html.j2:18
-msgid "Welcome to <span>Taler Operations</span>!"
+#: template/index.html.j2:20
+msgid "Welcome to <span class=\"text-accent-pure\">Taler Operations</span>!"
 msgstr ""
 
-#: template/index.html.j2:23
+#: template/index.html.j2:24
 #, fuzzy
 #| msgid "Taler Operations AG, Biel, Switzerland"
 msgid "Taler Operations runs the GNU Taler payment system in Switzerland."
@@ -178,25 +179,29 @@ msgstr ""
 msgid "Swiss Franc coin with GNU head as face value"
 msgstr ""
 
-#: template/index.html.j2:68
+#: template/index.html.j2:49
+msgid "Getting Started with Taler"
+msgstr ""
+
+#: template/index.html.j2:59
 msgid ""
 "Taler provides the world with a payment solution that definitely makes sense "
 "in a society where privacy, data safety, technical security, and reliability "
 "become more and more crucial for everyone."
 msgstr ""
 
-#: template/index.html.j2:74
+#: template/index.html.j2:68
 msgid "Pay&nbsp;with&nbsp;Taler"
 msgstr ""
 
-#: template/index.html.j2:86
+#: template/index.html.j2:75
 msgid ""
 "Taler offers efficient payments and backoffice procedures with security, "
 "privacy and data minimization by design. Payers and payees can rely on "
 "technology, and do not need to purely rely on trust anymore."
 msgstr ""
 
-#: template/index.html.j2:94
+#: template/index.html.j2:84
 msgid "Integrate"
 msgstr ""
 
diff --git a/locale/messages.pot b/locale/messages.pot
index 09240b5..10ebd35 100644
--- a/locale/messages.pot
+++ b/locale/messages.pot
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-02-25 04:23+0100\n"
+"POT-Creation-Date: 2024-02-25 05:32+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,78 +17,79 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.12.1\n"
 
-#: common/base.j2:24 common/base.j2:26
+#: common/base.j2:24 common/base.j2:28
 msgid "Taler Operations AG, Biel, Switzerland"
 msgstr ""
 
-#: common/footer.j2.inc:19 common/footer.old.j2.inc:15
+#: common/footer.j2.inc:11 common/footer.old.j2.inc:15
 msgid "Switzerland"
 msgstr ""
 
-#: common/footer.j2.inc:27 common/footer.old.j2.inc:23
+#: common/footer.j2.inc:19 common/footer.old.j2.inc:23
 msgid "Quick Links"
 msgstr ""
 
-#: common/footer.j2.inc:33 common/footer.old.j2.inc:28
+#: common/footer.j2.inc:23 common/footer.old.j2.inc:28
 msgid "Taler Operations AG Homepage"
 msgstr ""
 
-#: common/footer.j2.inc:35 common/footer.old.j2.inc:29
-#: common/navigation/items.j2.inc:3
+#: common/footer.j2.inc:24 common/footer.old.j2.inc:29
+#: common/navigation/items.j2.inc:5
 msgid "Home"
 msgstr ""
 
-#: common/footer.j2.inc:44 common/footer.old.j2.inc:38
-#: common/navigation/items.j2.inc:12 template/fees.html.j2:3
+#: common/footer.j2.inc:33 common/footer.old.j2.inc:38
+#: common/navigation/items.j2.inc:20 template/fees.html.j2:3
 #: template/fees.html.j2:14 template/fees.html.j2:29
 msgid "Fees"
 msgstr ""
 
-#: common/footer.j2.inc:49 common/footer.old.j2.inc:43
+#: common/footer.j2.inc:38 common/footer.old.j2.inc:43
+#: common/navigation/items.j2.inc:25
 msgid "Terms of Service"
 msgstr ""
 
-#: common/footer.j2.inc:57 common/footer.old.j2.inc:51
+#: common/footer.j2.inc:46 common/footer.old.j2.inc:51
 msgid "Partners"
 msgstr ""
 
-#: common/footer.j2.inc:65 common/footer.old.j2.inc:58
+#: common/footer.j2.inc:50 common/footer.old.j2.inc:58
 msgid "Taler Consortium"
 msgstr ""
 
-#: common/footer.j2.inc:74 common/footer.old.j2.inc:66
+#: common/footer.j2.inc:53 common/footer.old.j2.inc:66
 msgid "Bern&nbsp;University of Applied&nbsp;Sciences"
 msgstr ""
 
-#: common/footer.j2.inc:84 common/footer.old.j2.inc:75
+#: common/footer.j2.inc:58 common/footer.old.j2.inc:75
 msgid "NetzBon"
 msgstr ""
 
-#: common/footer.j2.inc:92 common/footer.old.j2.inc:83
+#: common/footer.j2.inc:66 common/footer.old.j2.inc:83
 msgid "Contacts"
 msgstr ""
 
-#: common/footer.j2.inc:96 common/footer.old.j2.inc:87
+#: common/footer.j2.inc:69 common/footer.old.j2.inc:87
 msgid "Tel:"
 msgstr ""
 
-#: common/footer.j2.inc:101 common/footer.old.j2.inc:92
+#: common/footer.j2.inc:72 common/footer.old.j2.inc:92
 msgid "Compliance Officer"
 msgstr ""
 
-#: common/footer.j2.inc:106 common/footer.old.j2.inc:97
+#: common/footer.j2.inc:76 common/footer.old.j2.inc:97
 msgid "AML Officer"
 msgstr ""
 
-#: common/footer.j2.inc:118 common/footer.old.j2.inc:110
+#: common/footer.j2.inc:85 common/footer.old.j2.inc:110
 msgid "Copyright"
 msgstr ""
 
-#: common/footer.j2.inc:121
+#: common/footer.j2.inc:86
 msgid "Licensed under the"
 msgstr ""
 
-#: common/footer.j2.inc:134
+#: common/footer.j2.inc:94
 msgid ""
 "We do not assume any liability for the correctness of contents. We do not"
 " collect any data and do not use cookies. </p> <p> Our web server "
@@ -113,11 +114,11 @@ msgstr ""
 msgid "Skip to main content"
 msgstr ""
 
-#: common/navigation/items.j2.inc:6 template/index.html.j2:84
+#: common/navigation/items.j2.inc:10 template/index.html.j2:73
 msgid "For Merchants"
 msgstr ""
 
-#: common/navigation/items.j2.inc:9 template/index.html.j2:66
+#: common/navigation/items.j2.inc:15 template/index.html.j2:57
 msgid "For Users"
 msgstr ""
 
@@ -133,17 +134,17 @@ msgstr ""
 msgid "Costs for sending SMS to users"
 msgstr ""
 
-#: template/index.html.j2:5
+#: template/index.html.j2:6
 msgid ""
 "Taler Operations is the entity running the GNU Taler payment system in "
 "Switzerland."
 msgstr ""
 
-#: template/index.html.j2:18
-msgid "Welcome to <span>Taler Operations</span>!"
+#: template/index.html.j2:20
+msgid "Welcome to <span class=\"text-accent-pure\">Taler Operations</span>!"
 msgstr ""
 
-#: template/index.html.j2:23
+#: template/index.html.j2:24
 msgid "Taler Operations runs the GNU Taler payment system in Switzerland."
 msgstr ""
 
@@ -158,25 +159,29 @@ msgstr ""
 msgid "Swiss Franc coin with GNU head as face value"
 msgstr ""
 
-#: template/index.html.j2:68
+#: template/index.html.j2:49
+msgid "Getting Started with Taler"
+msgstr ""
+
+#: template/index.html.j2:59
 msgid ""
 "Taler provides the world with a payment solution that definitely makes "
 "sense in a society where privacy, data safety, technical security, and "
 "reliability become more and more crucial for everyone."
 msgstr ""
 
-#: template/index.html.j2:74
+#: template/index.html.j2:68
 msgid "Pay&nbsp;with&nbsp;Taler"
 msgstr ""
 
-#: template/index.html.j2:86
+#: template/index.html.j2:75
 msgid ""
 "Taler offers efficient payments and backoffice procedures with security, "
 "privacy and data minimization by design. Payers and payees can rely on "
 "technology, and do not need to purely rely on trust anymore."
 msgstr ""
 
-#: template/index.html.j2:94
+#: template/index.html.j2:84
 msgid "Integrate"
 msgstr ""
 
diff --git a/static/scss/_link.scss b/static/scss/_link.scss
new file mode 100644
index 0000000..5b43fdd
--- /dev/null
+++ b/static/scss/_link.scss
@@ -0,0 +1,19 @@
+@mixin link {
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.3s;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:not(.no-clr) {
+    color: var(--link-clr-overwrite, #4160ff);
+    &:hover {
+      color: var(--hover-link-clr-overwrite, #4f6cfe);
+    }
+  }
+  .dark &,
+  &.dark {
+    --link-clr-overwrite: #99aaff;
+    --hover-link-clr-overwrite: #aaccff;
+  }
+}
diff --git a/static/scss/footer.scss b/static/scss/footer.scss
index d722647..e42e904 100644
--- a/static/scss/footer.scss
+++ b/static/scss/footer.scss
@@ -4,5 +4,11 @@ footer.footer {
       font-size: 1.3rem;
       font-weight: 600;
     }
+    .footer-items-list {
+      @apply flex flex-col gap-2;
+      > ul {
+        @apply flex flex-col gap-1;
+      }
+    }
   }
 }
diff --git a/static/scss/global.scss b/static/scss/global.scss
index 17b5a4c..a9ff185 100644
--- a/static/scss/global.scss
+++ b/static/scss/global.scss
@@ -1,5 +1,4 @@
 @use './navigation';
-@use './links.scss';
 @use './fonts/fonts.scss';
 @use './footer.scss';
 @use './util.scss';
diff --git a/static/scss/links.scss b/static/scss/links.scss
deleted file mode 100644
index bd3ffe1..0000000
--- a/static/scss/links.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.link {
-  cursor: pointer;
-  color: #99aaff;
-  text-decoration: none;
-  transition: all 0.3s;
-  &:hover {
-    text-decoration: underline;
-    color: #aaddff;
-  }
-}
diff --git a/static/scss/navigation/skip.scss b/static/scss/navigation/skip.scss
index a8fec15..46b8c21 100644
--- a/static/scss/navigation/skip.scss
+++ b/static/scss/navigation/skip.scss
@@ -11,6 +11,7 @@
   color: #dedede;
   padding: 0.5rem 1rem;
   border-radius: 16px;
+  z-index: 999999;
   &:focus,
   &:active {
     opacity: 1;
diff --git a/static/scss/pages/landing.scss b/static/scss/pages/landing.scss
new file mode 100644
index 0000000..b78a90a
--- /dev/null
+++ b/static/scss/pages/landing.scss
@@ -0,0 +1,30 @@
+.welcome-to-taler-text {
+  font-weight: 550;
+}
+.target-audience-selection {
+  @apply relative w-full bg-accent-pure pb-16 lg:pb-8;
+  &::before {
+    @apply w-screen bg-cover bg-no-repeat bg-center absolute left-0 
bottom-full;
+    content: '';
+    height: 217px;
+    background-image: url('/images/backgrounds/topbg.png');
+  }
+  &::after {
+    $start-black: 40%;
+    @apply hidden lg:block w-screen absolute left-0 bottom-full bg-slate-100;
+    content: '';
+    top: $start-black;
+    height: calc(100% - #{$start-black});
+    z-index: 5;
+  }
+  .target-audience-card {
+    @apply flex-1 max-w-xl relative z-10 text-black bg-white p-10 rounded-3xl 
flex flex-col
+    items-center justify-center text-center gap-6;
+    h3 {
+      @apply font-semibold text-3xl;
+    }
+    p {
+      @apply text-xl;
+    }
+  }
+}
diff --git a/static/scss/util.scss b/static/scss/util.scss
index eab1ec8..80cfe08 100644
--- a/static/scss/util.scss
+++ b/static/scss/util.scss
@@ -1,3 +1,24 @@
-main#maincontent:not(.no-full-width) {
-  @apply max-w-screen-xl px-8 md:px-16;
+@use './link' as *;
+#approot {
+  @apply flex flex-col items-center;
+  main#maincontent:not(.no-auto-width) {
+    @apply max-w-screen-xl px-8 md:px-16;
+  }
+  main#maincontent:not(.no-auto-margin) {
+    @apply my-12;
+  }
+}
+.link {
+  @include link;
+}
+.button {
+  @apply border-none px-6 py-4 transition-all inline-flex items-center 
justify-center rounded-3xl text-lg font-semibold;
+  &:not(.custom-button-clr-handling) {
+    &.accent {
+      @apply bg-accent-pure text-white bg-opacity-100 hover:bg-opacity-90;
+    }
+    &:not(.accent) {
+      @apply bg-gray-700 bg-opacity-0 hover:bg-opacity-10;
+    }
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index f62fe19..437237a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,6 +22,12 @@ module.exports = {
   theme: {
     extend: {
       // things that are new go here
+      colors: {
+        accent: {
+          pure: '#0042B3',
+          // todo: add accent shades
+        },
+      },
     },
     // things to replace go below here:
     fontFamily: {
diff --git a/template/index.html.j2 b/template/index.html.j2
index a528374..97bb6c8 100644
--- a/template/index.html.j2
+++ b/template/index.html.j2
@@ -1,102 +1,88 @@
-{% extends "common/base.j2" %}
-{% block head_content %}
+{% extends "common/base.j2" %} {% block head_content %}
 <title>Taler Operations AG</title>
 {# TODO: Provide a better opengraph description #}
-<meta name="description" content="{% trans %}Taler Operations is the entity 
running the GNU Taler payment system in Switzerland.{% endtrans %}" /> 
-{# <meta name="author" content="" /> #}
-{% endblock %}
-
-{% block body_content %}
-<main id="maincontent">
-  <div class="banner_sec">
-    <div class="banner_box">
-      <div class="container">
-        <div class="row">
-          <div class="col-sm-7">
-            <div class="ban_left">
-              <h3>
-                {% trans %}Welcome to <span>Taler Operations</span>!{% endtrans
-                %}
-              </h3>
-              <br />
-              <h4>
-                {% trans %}Taler Operations runs the GNU Taler payment system 
in
-                Switzerland.{% endtrans %}
-              </h4>
-              <br /><br />
-              <h4>
-                {% trans %}Taler Operations is not supervised by the Swiss
-                Financial Market Supervisory Authority (FINMA). However, the
-                cover amount (in Swiss francs) of your eCHF is deposited in a
-                separate bank account.{% endtrans %}
-              </h4>
-            </div>
-          </div>
-          <div class="col-sm-5">
-            <div class="ban_rt">
-              <img
-                src="{{ url_static('images/unsorted/swiss_coin_5.png') }}"
-                alt="{% trans %}Swiss Franc coin with GNU head as face value{% 
endtrans %}"
-                width="100px"
-              />
-            </div>
-          </div>
-        </div>
+<meta
+  name="description"
+  content="{% trans %}Taler Operations is the entity running the GNU Taler 
payment system in Switzerland.{% endtrans %}"
+/>
+<link href="{{ url_static('scss/pages/landing.scss') }}" rel="stylesheet" />
+{# <meta name="author" content="" /> #} {% endblock %} {% block body_content %}
+<main
+  id="maincontent"
+  class="no-auto-margin no-auto-width w-screen flex flex-col items-center"
+>
+  <div class="herocontainer max-w-screen-xl px-8 md:px-16">
+    <div
+      class="hero flex flex-col md:flex-row min-h-[80vh] items-center 
justify-center gap-12 sm:-mt-6 pb-8"
+    >
+      <div class="left-section md:flex-1">
+        <h1 class="welcome-to-taler-text text-3xl">
+          {% trans %}Welcome to
+          <span class="text-accent-pure">Taler Operations</span>!{% endtrans %}
+        </h1>
+        <p class="text-xl mt-3 mb-2">
+          {% trans %}Taler Operations runs the GNU Taler payment system in
+          Switzerland.{% endtrans %}
+        </p>
+        <p class="text-xl notice-text">
+          {% trans %}Taler Operations is not supervised by the Swiss Financial
+          Market Supervisory Authority (FINMA). However, the cover amount (in
+          Swiss francs) of your eCHF is deposited in a separate bank account.{%
+          endtrans %}
+        </p>
+      </div>
+      <div
+        class="right-section md:flex-1 flex flex-col items-center 
justify-center"
+      >
+        <img
+          src="{{ url_static('images/unsorted/swiss_coin_5.png') }}"
+          alt="{% trans %}Swiss Franc coin with GNU head as face value{% 
endtrans %}"
+          width="256px"
+        />
       </div>
     </div>
   </div>
 
-  <section class="digital_sec assetsSec benefitsPanel">
-    <div class="container">
-      {#
-      <!-- <div class="top_heading">
-                       <h2>{% trans %}Benefits of Taler{% endtrans %}</h2>
-                       <p>{% trans %}Taler is easy to integrate with existing 
Web applications. Payments are<br/>cryptographically secured and are confirmed 
within milliseconds<br/>with extremely low transaction costs.{% endtrans %}</p>
-               </div> -->
-      #}
-      <div class="digital_innr">
-        <div class="desk">
-          <div class="row">
-            <div class="col-lg-6 col-sm-6">
-              <div class="digital_box">
-                <img
-                  src="{{ url_static('images/unsorted/newpic2.png') }}"
-                  alt=""
-                />
-                <b>{% trans %}For Users{% endtrans %}</b>
-                <p>
-                  {% trans %}Taler provides the world with a payment solution
-                  that definitely makes sense in a society where privacy, data
-                  safety, technical security, and reliability become more and
-                  more crucial for everyone.{% endtrans %}
-                </p>
-                <a href="{{ url_localized('users.html') }}" class="lrean_btn"
-                  >{% trans %}Pay&nbsp;with&nbsp;Taler{% endtrans %}</a
-                >
-              </div>
-            </div>
-            <div class="col-lg-6 col-sm-6">
-              <div class="digital_box">
-                <img
-                  src="{{ url_static('images/unsorted/newpic1.png') }}"
-                  alt=""
-                />
-                <b>{% trans %}For Merchants{% endtrans %}</b>
-                <p>
-                  {% trans %}Taler offers efficient payments and backoffice
-                  procedures with security, privacy and data minimization by
-                  design. Payers and payees can rely on technology, and do not
-                  need to purely rely on trust anymore.{% endtrans %}
-                </p>
-                <a
-                  href="{{ url_localized('merchants.html') }}"
-                  class="lrean_btn"
-                  >{% trans %}Integrate{% endtrans %}</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
+  <section class="target-audience-selection">
+    <div class="flex items-center justify-center pt-16 pb-8">
+      <h2 class="text-3xl text-white font-semibold">
+        {% trans %}Getting Started with Taler{% endtrans %}
+      </h2>
+    </div>
+    <div
+      class="flex flex-col lg:flex-row items-center justify-center flex-wrap 
gap-16"
+    >
+      <div class="target-audience-card">
+        <img src="{{ url_static('images/unsorted/newpic2.png') }}" alt="" />
+        <h3>{% trans %}For Users{% endtrans %}</h3>
+        <p>
+          {% trans %}Taler provides the world with a payment solution that
+          definitely makes sense in a society where privacy, data safety,
+          technical security, and reliability become more and more crucial for
+          everyone.{% endtrans %}
+        </p>
+        <a
+          href="{{ url_localized('users.html') }}"
+          class="button accent"
+          role="button"
+          >{% trans %}Pay&nbsp;with&nbsp;Taler{% endtrans %}</a
+        >
+      </div>
+      <div class="target-audience-card">
+        <img src="{{ url_static('images/unsorted/newpic1.png') }}" alt="" />
+        <h3>{% trans %}For Merchants{% endtrans %}</h3>
+        <p>
+          {% trans %}Taler offers efficient payments and backoffice procedures
+          with security, privacy and data minimization by design. Payers and
+          payees can rely on technology, and do not need to purely rely on 
trust
+          anymore.{% endtrans %}
+        </p>
+        <a
+          href="{{ url_localized('merchants.html') }}"
+          class="button accent"
+          role="button"
+          >{% trans %}Integrate{% endtrans %}</a
+        >
       </div>
     </div>
   </section>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]