fix visual elements on the frontpage (#200)

* add a carousel element with bookmarks-tabs at the front page

* Small changes in alignment and element colors at the frontpage

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

frontend/src/lib/components/FrontPageBookmarks.svelte

@@ -29,7 +29,7 @@ function selectTab(index) {
     <div class="flex max-lg:flex-col max-md:min-w-full lg:flex-row border-b justify-center items-center px-2">
       {#each bookmarks as { titleKey }, index}
         <button
-          class="flex-1 rounded-lg text-base text-center lg:min-h-fit max-lg:min-w-80 py-2 px-4 dark:text-white text-gray-600 transition-colors hover:text-grey-900 max-lg:hover:bg-primary-800 dark:hover:text-gray-900 hover:bg-additional-color"
+          class="flex-1 rounded-lg text-base text-center lg:min-h-fit max-lg:hover:text-white max-md:hover:text-white h-16 max-lg:min-w-80 py-2 px-4 dark:text-white hover:dark:text-white text-gray-600 transition-colors hover:text-gray-900 max-lg:hover:bg-primary-800 dark:hover:text-gray-900 hover:bg-gray-100 hover:dark:bg-gray-800"
           class:bg-primary-600={activeIndex === index}
           class:text-white={activeIndex === index}
           on:click={() => selectTab(index)}
@@ -39,8 +39,8 @@ function selectTab(index) {
       {/each}
     </div>
 
-     <div class="p-6 bg-gray-100 dark:bg-gray-800 text-center rounded-lg shadow-md mt-2 space-y-4">
-      <p class="text-gray-700 dark:text-gray-400 text-balance mt-4 mb-4">
+     <div class="p-6 px-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md mt-2 space-y-4">
+      <p class="flex text-left lg:ml-30 md:ml-10 ml-5 mr-7 text-gray-700 dark:text-gray-400 mt-4 mb-4">
         {bookmarks[activeIndex]?.contentKey}</p>
     </div>
 

frontend/src/lib/components/FrontPageCard.svelte

@@ -9,7 +9,8 @@ import { _ } from "svelte-i18n";
   <h5 class="mb-2 mt-4 text-xl font-bold text-gray-700 dark:text-white tracking-wide">{$_("frontpage.heading")}</h5>
   <p class="mb-5 text-base text-gray-600 sm:text-md dark:text-gray-400">{$_("frontpage.summary")}</p>
   <div class="justify-center mb-1 items-center mt-2">
-      <Button class="text-bold text-md w-44 hover:text-white dark:text-white bg-white text-gray-700" onclick ={() => {
+
+      <Button class="text-bold text-md w-44 dark:bg-gray-100 hover:bg-gray-600 dark:hover:bg-gray-600 hover:text-white bg-white text-gray-700" onclick ={() => {
         goto("/signup");
       }}>{$_("frontpage.buttonLabel")}</Button>
       <Tooltip>{$_("frontpage.toolTip")}</Tooltip>