feat: add introduction text to WelcomeModal

src/components/WelcomeModal.tsx

@@ -13,12 +13,17 @@ 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 FreedomIcon from "~icons/noto/butterfly";
+import FreeIcon from "~icons/noto/seedling";
+import PrivacyIcon from "~icons/noto/princess";
+import AgileIcon from "~icons/noto/person-bouncing-ball";
+import ResultIcon from "~icons/noto/chequered-flag";
 import Modal, { ModalCloseButton } from "./Modal";
 import { LocalStoreContext } from "~/stores";
 import createAccordion from "./Accordion";
 import typer from "typer-js";
 import "typer-js/dist/typer.min.css";
-import { getDisplayDate, getHost, shuffle } from "~/util";
+import { getDisplayDate, getHost, onClickFocus, shuffle } from "~/util";
 import { capitalize } from "froebel";
 
 export const description =
@@ -121,8 +126,8 @@ const WelcomeModal: Component = (props) => {
       <div class="hidden xl:block">
         <ModalCloseButton onClick={() => setLocalState("showWelcome", false)} />
       </div>
-      <div class="max-h-[50vh] overflow-y-auto px-2">
-        <div class="min-h-[50vh] flex items-center justify-center">
+      <div class="max-h-[60vh] overflow-y-auto px-2">
+        <div class="min-h-[60vh] flex items-center justify-center">
           <div>
             <div class="flex flex-col items-center justify-around">
               <div class="mt-3 mb-3 text-6xl lg:text-8xl flex items-end lg:w-[370px] justify-between gap-2 lg:gap-0 font-bold tracking-tighter leading-none text-swiss-red fill-current">
@@ -218,10 +223,50 @@ const WelcomeModal: Component = (props) => {
           </div>
         </div>
 
-        <div class="mt-20 prose">
+        <div class="mt-20 prose text-opacity-100">
           <section>
             <h2 id="welcome-quickstart">Einleitung</h2>
-            <p>{description}</p>
+            <p class="text-xl font-light lead">{description}</p>
+            <p>
+              Du möchtest dich <strong>selbstständig machen</strong>, gründest
+              gerade ein <strong>Startup</strong> oder einen{" "}
+              <strong>Verein</strong> und musst in der Lage sein{" "}
+              <strong>Rechnungen, Offerten und Auftragsbestätigungen</strong> zu
+              verschicken? Du möchtest dabei <strong>unabhängig</strong>{" "}
+              bleiben? Dann bist du hier genau richtig!
+            </p>
+            <p>Vorteile von Räppli:</p>
+            <ul>
+              <li>
+                <ResultIcon class="inline-block scale-150 mr-2" /> Die
+                praktische Vorschau zeigt dir sofort das Endergebnis.
+              </li>
+              <li>
+                <PrivacyIcon class="inline-block scale-150 mr-2" />
+                Deine Daten bleiben{" "}
+                <a onClick={onClickFocus} href="#welcome-privacy">
+                  bei dir
+                </a>
+                .
+              </li>
+              <li>
+                <FreeIcon class="inline-block scale-150 mr-2" /> Räppli ist und
+                bleibt <a href="#welcome-why-free">komplett kostenlos</a>!
+              </li>
+              <li>
+                <FreedomIcon class="inline-block scale-150 mr-2" /> Der
+                Quellcode ist{" "}
+                <a href="#welcome-opensource">vollumfänglich öffentlich</a>.
+                Räppli kann selbst gehostet werden!
+              </li>
+              <li>
+                <AgileIcon class="inline-block scale-150 mr-2" /> Du arbeitest{" "}
+                <a onClick={onClickFocus} href="#welcome-agile">
+                  agil
+                </a>
+                ? Räppli kann dir dabei helfen einen Preis zu kalkulieren!
+              </li>
+            </ul>
           </section>
 
           <section class="mt-16">
@@ -305,6 +350,7 @@ const WelcomeModal: Component = (props) => {
             <h2 id="welcome-faq">Häufig gestellte Fragen</h2>
             <div class="text-black">
               <AcordionItem
+                id="welcome-privacy"
                 label={"1. Wo werden meine Daten gespeichert?"}
                 alignCenter={false}
               >
@@ -332,6 +378,7 @@ const WelcomeModal: Component = (props) => {
               </AcordionItem>
 
               <AcordionItem
+                id="welcome-agile"
                 label={
                   <div>
                     4. Wie können Aufwand-Schätzungen gemacht werden?