feat: improve WelcomeModal table of contents layout

src/components/WelcomeModal.tsx

@@ -199,7 +199,7 @@ const WelcomeModal: Component = (props) => {
               </div>
             </div>
 
-            <div class="mt-28 text-base flex flex-wrap text-center gap-7 items-center justify-center">
+            <div class="mt-24 text-base grid grid-cols-3 lg:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
               <a
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-quickstart"
@@ -210,8 +210,7 @@ const WelcomeModal: Component = (props) => {
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-why-free"
               >
-                Wieso ist Räppli <br />
-                <strong>komplett kostenlos</strong>?
+                <strong>Komplett kostenlos</strong>!
               </a>
               <a
                 class="link text-secondary-focus hover:text-secondary"
@@ -223,18 +222,16 @@ const WelcomeModal: Component = (props) => {
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-patron"
               >
-                Das Projekt
-                <br />
-                unterstützen
+                Das Projekt unterstützen
               </a>
               <a
-                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
+                class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-opensource"
               >
                 Open Source
               </a>
               <a
-                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
+                class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-thankyou"
               >
                 Danksagungen