From 168518680502c85e3801f02d95ec713607c6c449 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Fri, 24 Jun 2022 16:06:35 +0200
Subject: [PATCH] feat: add donate button to WelcomeModal, finalize headings
 and faq questions

---
 src/components/WelcomeModal.tsx | 121 +++++++++++++++++++++++++-------
 1 file changed, 94 insertions(+), 27 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index e0230cf..586f718 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -11,6 +11,8 @@ import AppIcon from "~icons/custom/icon";
 import ExternalLinkIcon from "~icons/carbon/launch";
 import WarningIcon from "~icons/carbon/warning-alt-filled";
 import LaunchIcon from "~icons/carbon/edit";
+import DonationIcon from "~icons/carbon/favorite-filled";
+import WatermarkIcon from "~icons/carbon/bullhorn";
 import Modal, { ModalCloseButton } from "./Modal";
 import { LocalStoreContext } from "~/stores";
 import createAccordion from "./Accordion";
@@ -165,9 +167,15 @@ const WelcomeModal: Component = (props) => {
               >
                 Was ist Lufrai?
               </a>
+              <a
+                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
+                href="#welcome-opensource"
+              >
+                Open Source
+              </a>
               <a
                 class="link text-secondary-focus hover:text-secondary"
-                href="#welcome-support"
+                href="#welcome-patron"
               >
                 Das Projekt
                 <br />
@@ -180,15 +188,6 @@ const WelcomeModal: Component = (props) => {
               >
                 FAQ
               </a>
-              <a
-                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
-                target="_blank"
-                rel="noopener"
-                href="https://git.lufrai.com/rappli/rappli"
-              >
-                Git-Repository
-                <ExternalLinkIcon />
-              </a>
             </div>
 
             <div
@@ -262,7 +261,31 @@ const WelcomeModal: Component = (props) => {
           </section>
 
           <section class="mt-16">
-            <h1 id="welcome-support">Das Projekt unterstützen</h1>
+            <h1 id="welcome-opensource">Open Source</h1>
+            <p>
+              Quis occaecat pariatur laborum do ad esse. Mollit excepteur duis
+              nulla proident nostrud tempor ad ullamco. Amet id magna aute esse
+              tempor incididunt pariatur veniam ipsum qui. Sunt laboris in
+              laborum reprehenderit qui sint consectetur nostrud excepteur
+              proident proident laboris qui dolor ea. Reprehenderit tempor elit
+              consequat dolore quis ad voluptate consequat. Eiusmod ad quis
+              dolore dolore ea ipsum commodo eu aliquip veniam. Consequat
+              pariatur est do sint nisi duis enim tempor occaecat elit non.
+            </p>
+
+            <a
+              class="btn btn-sm flex items-center gap-2"
+              target="_blank"
+              rel="noopener"
+              href="https://git.lufrai.com/rappli/rappli"
+            >
+              Git-Repository
+              <ExternalLinkIcon />
+            </a>
+          </section>
+
+          <section class="mt-16">
+            <h1 id="welcome-patron">Das Projekt unterstützen</h1>
             <p>
               Irure laboris quis consequat enim tempor dolor. Esse velit
               occaecat dolore aute cillum pariatur reprehenderit irure duis eu
@@ -279,52 +302,88 @@ const WelcomeModal: Component = (props) => {
               culpa Lorem nostrud cillum eu cillum adipisicing eu aute duis
               excepteur. In anim mollit amet elit ex.
             </p>
+            <h2>Spende</h2>
+            <h2>Mitwirkung</h2>
           </section>
 
           <section class="mt-16">
             <h1 id="welcome-faq">Häufig gestellte Fragen</h1>
             <div class="text-black">
               <AcordionItem
-                item={0}
-                label={"Wo werden meine Daten gespeichert?"}
+                label={"1. Wo werden meine Daten gespeichert?"}
+                alignCenter={false}
               >
                 test
               </AcordionItem>
 
-              <AcordionItem label="Ich habe vergessen zu speichern!?">
+              <AcordionItem
+                label="2. Ich habe vergessen zu speichern, was nun?!"
+                alignCenter={false}
+              >
                 test
               </AcordionItem>
 
               <AcordionItem
                 label={
-                  <div class="text-center">
-                    Ich habe einen Anpassungswunsch!
+                  <>
+                    3. Ich habe einen Anpassungswunsch!
                     <br />
                     Kann die App bitte gratis angepasst werden?
-                  </div>
+                  </>
                 }
+                alignCenter={false}
               >
                 test
               </AcordionItem>
 
-              <AcordionItem label={"Welche Geräte werden unterstützt?"}>
+              <AcordionItem
+                label={
+                  <div>
+                    4. Wie können Aufwand-Schätzungen gemacht werden?
+                    <br />
+                    Was hat es mit <strong>Agile</strong> auf sich?
+                  </div>
+                }
+                alignCenter={false}
+              >
                 test
               </AcordionItem>
 
-              <AcordionItem label={"Wer hat's erfunden?"}>test</AcordionItem>
-
-              <AcordionItem label={'Was heisst "Open Source"?'}>
+              <AcordionItem
+                label={"5. Welche Geräte werden unterstützt?"}
+                alignCenter={false}
+              >
                 test
               </AcordionItem>
 
               <AcordionItem
                 label={
-                  <div class="text-center">
-                    Können Fliesstexte formatiert werden?
+                  <div>
+                    6. Können Fliesstexte formatiert werden?
                     <br />
                     Was ist <strong>Markdown</strong>?
                   </div>
                 }
+                alignCenter={false}
+              >
+                test
+              </AcordionItem>
+
+              <AcordionItem
+                label={<div>7. Kann Räppli lokal installiert werden?</div>}
+                alignCenter={false}
+              >
+                test
+              </AcordionItem>
+
+              <AcordionItem
+                label={
+                  <div>
+                    8. Wie präzise wurden die SIX QR-Rechnung Vorgaben
+                    umgesetzt?
+                  </div>
+                }
+                alignCenter={false}
               >
                 test
               </AcordionItem>
@@ -332,10 +391,17 @@ const WelcomeModal: Component = (props) => {
           </section>
         </div>
       </div>
-      <div class="mt-14 relative flex justify-center gap-10">
+      <div class="mt-14 relative flex justify-center items-center gap-10">
+        <a
+          href="#welcome-patron"
+          class="hidden xl:flex btn btn-sm btn-secondary gap-2 transition-all shadow-lg hover:shadow-lg shadow-purple-300 hover:shadow-purple-500 hover:ring-2 ring-offset-2 ring-purple-500"
+        >
+          <DonationIcon />
+          Spenden
+        </a>
         <div
-          class="hidden xl:flex form-control flex-row items-center gap-2"
-          title="Unterstütze Lufrai mit einem Wasserzeichen im Dokument"
+          class="hidden xl:flex form-control flex-row items-center gap-2 tooltip tooltip-accent"
+          data-tip="Füge das Lufrai Logo zu deinem Dokument hinzu."
         >
           <input
             id="welcome-modal-show-watermark"
@@ -350,7 +416,8 @@ const WelcomeModal: Component = (props) => {
             for="welcome-modal-show-watermark"
             class="btn btn-sm btn-accent gap-2 shadow-md"
           >
-            Lufrai unterstützen
+            <WatermarkIcon />
+            Für Lufrai werben
           </label>
         </div>
         <button