splash page update

8 files changed, 52 insertions, 117 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index b2f376ed..07525fb7 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -4,21 +4,7 @@
   import { t } from "$lib/translations";
 
   let team = [
-    {
-      name: "adam",
-      socials: [
-        {
-          alt: "Nostr",
-          src: "/images/nostr.svg",
-          url: "https://coinos.io/98ae4da926c471c23fd12d1ebdd5839ba82917baa618e184e0c9916d93dcf4f7",
-        },
-        {
-          alt: "Github",
-          src: "/images/github.svg",
-          url: "https://github.com/asoltys",
-        },
-      ],
-    },
+    { name: "adam", socials: [] },
     { name: "cole", socials: [] },
   ];
 </script>
@@ -66,17 +52,10 @@
     {@html $t("about.locations.description")}
   </p>
 
-  <div class="relative">
-    <a href="/map" class="contents">
-      <img src="/map.webp" class="mx-auto" alt="Map" />
-    </a>
-
-    <a href="/map" class="contents">
-      <button
-        class="bg-black text-white border border-4 rounded-full px-6 py-2 font-bold hover:bg-secondary absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl"
-      >
-        {$t("about.locations.viewMap")}
-      </button>
+  <div class="flex justify-center">
+    <a href="/map" class="btn btn-accent !w-auto !rounded-full px-10 text-xl gap-2">
+      <iconify-icon noobserver icon="ph:map-trifold-bold" width="28"></iconify-icon>
+      {$t("about.locations.viewMap")}
     </a>
   </div>
 </div>
diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte
index 78506c88..f2cb97db 100644
--- a/src/components/DarkToggle.svelte
+++ b/src/components/DarkToggle.svelte
@@ -7,7 +7,7 @@
   };
 </script>
 
-<button class="flex justify-center items-center hover:opacity-80 gap-2 font-bold" onclick={dark}>
+<button class="flex justify-center items-center hover:opacity-80 gap-2 font-bold whitespace-nowrap" onclick={dark}>
   <iconify-icon
     noobserver
     icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"}
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 0bdee16e..9878b392 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -24,14 +24,11 @@
         <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
       </a>
     </div>
-    <div class="w-full sm:hidden">
+    <div class="sm:hidden flex justify-center">
       <a href="/register">
-        <button class="btn btn-accent w-full text-2xl">{$t("nav.startInSeconds")}</button>
+        <button class="btn btn-accent !w-auto text-xl !rounded-full px-10">{$t("nav.enterApp")}</button>
       </a>
     </div>
-    <div class="w-full hidden sm:flex gap-2 justify-center items-center">
-      <DarkToggle />
-    </div>
   </div>
 
   <div class="text-center md:text-left">
@@ -59,10 +56,9 @@
   </div>
 
   <div class="space-y-5">
-    <div class="flex justify-center">
+    <div class="flex justify-center items-center gap-4">
+      <DarkToggle />
       <LocaleSelector />
     </div>
-    <iconify-icon noobserver icon="coinos:shield" class="flex justify-center" width="96"
-    ></iconify-icon>
   </div>
 </footer>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 33a39e08..10c7e5c7 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -4,7 +4,9 @@
 </script>
 
 <div class="space-y-5">
-  <iconify-icon noobserver icon={image} class="mx-auto" width="128"></iconify-icon>
+  <div class="h-32 flex items-center justify-center">
+    <iconify-icon noobserver icon={image} class="mx-auto" width="128"></iconify-icon>
+  </div>
   <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p>
   <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
     {$t("howItWorks." + stepID + ".description")}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 1bce2ce2..5f00b8a7 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -4,9 +4,6 @@
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
 
-  import DarkToggle from "$comp/DarkToggle.svelte";
-  import LocaleSelector from "$comp/LocaleSelector.svelte";
-
   let {
     howItWorks = undefined,
     faq = undefined,
@@ -14,12 +11,7 @@
     user = undefined,
   }: any = $props();
 
-  let showMobileMenu = $state(false);
   let header = $state();
-  const mobileMenuButtonClick = (section) => {
-    showMobileMenu = false;
-    scroll(section);
-  };
 </script>
 
 <header class="w-full lg:w-5/6 p-4 mx-auto fixed sticky z-10 top-0 bg-base-100" bind:this={header}>
@@ -56,56 +48,5 @@
       {/if}
     </div>
 
-    <button
-      aria-label="Menu"
-      class="block lg:hidden absolute top-[34.5px] right-10 z"
-      onclick={() => (showMobileMenu = !showMobileMenu)}
-    >
-      <iconify-icon noobserver icon={!showMobileMenu ? "ph:list-bold" : "ph:x-bold"} width="32"
-      ></iconify-icon>
-    </button>
-
-    <div
-      class="container w-full p-10 lg:hidden absolute top-0 {showMobileMenu
-      ? 'right-0'
-      : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-base-100"
-    >
-      <div class="space-y-5 mt-24 font-bold text-xl">
-        <LocaleSelector />
-        <DarkToggle />
-        <button onclick={() => mobileMenuButtonClick(howItWorks)} class="block">
-          {$t("howItWorks.header")}
-        </button>
-        <button onclick={() => mobileMenuButtonClick(faq)} class="block">{$t("faq.header")}</button>
-        <button onclick={() => mobileMenuButtonClick(about)} class="block">
-          {$t("about.header")}
-        </button>
-        {#if !user}
-          <button class="btn btn-accent" onclick={() => goto("/register")}>
-            {$t("nav.register")}
-          </button>
-          <button class="btn" onclick={() => goto("/login")}>{$t("nav.signIn")}</button>
-        {:else}
-          <button
-            class="border rounded-full px-6 py-2 font-bold block"
-            onclick={() => goto(`/${user.username}`)}
-          >
-            {$t("nav.account")}
-          </button>
-          <button
-            class="bg-primary text-white border rounded-full px-6 py-2 font-bold block"
-            onclick={() => goto("/logout")}
-          >
-            {$t("nav.signOut")}
-          </button>
-        {/if}
-      </div>
-    </div>
   </nav>
 </header>
-
-<style>
-  .z {
-    z-index: 100;
-  }
-</style>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 18e60efe..7eae2e91 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -8,15 +8,15 @@
 <div class="pt-16 md:mt-0">
   <div class="space-y-5">
     <h1
-      class="text-4xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
+      class="text-4xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto"
     >
       {$t("landing.header_before_icon")}
-      <span class="relative">
+      <span class="relative inline-block">
         {$t("landing.header_with_icon")}
         <iconify-icon
           noobserver
           icon="coinos:rays"
-          class="absolute -top-10 md:-top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
+          class="absolute -top-10 md:-top-16 left-1/2 -translate-x-1/2"
         ></iconify-icon>
       </span>
       {$t("landing.header_after_icon")}
@@ -31,7 +31,7 @@
       <a href="/register">
         <button
           use:focus
-          class="btn !rounded-full bg-primary text-primary-content hover:bg-primary/80 !w-auto px-12 text-2xl"
+          class="btn !rounded-full bg-primary text-primary-content hover:bg-primary/80 !w-auto px-12 text-xl start-btn"
         >
           {$t("nav.startInSeconds")}
         </button>
@@ -41,3 +41,13 @@
 
   <Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" />
 </div>
+
+<style>
+  :global([data-theme="black"]) .start-btn {
+    background: white;
+    color: black;
+  }
+  :global([data-theme="black"]) .start-btn:hover {
+    background: rgba(255, 255, 255, 0.85);
+  }
+</style>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index 707cae2f..3d60eeaf 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -5,11 +5,11 @@
   let { image, title, description = undefined, order = undefined, children = undefined }: { image: string; title: string; description?: string; order?: string; children?: Snippet } = $props();
 </script>
 
-<div class="block lg:flex justify-center lg:space-x-20 items-center">
+<div class="flex flex-col-reverse lg:flex-row justify-center lg:space-x-20 items-center">
   <Image
     {image}
-    style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
-    'reverse' && 'order-last'}"
+    style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mt-10 lg:mt-0 {order ===
+    'reverse' && 'lg:order-last'}"
   />
   <div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0">
     <h3 class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]">{title}</h3>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 2d382260..cd6bd69f 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -3,6 +3,7 @@
   import { browser } from "$app/environment";
   import Popup from "$comp/Popup.svelte";
   import { back } from "$lib/utils";
+  import { t } from "$lib/translations";
 
   let map: any;
   let maplibreRef: any;
@@ -693,21 +694,27 @@
         </div>
       </div>
     {/if}
-    <div class="absolute flex top-2 right-2 gap-2">
-      <button
-        class="rounded-full border-2 border-primary w-16 h-16 flex items-center justify-center {showFilters ? 'bg-primary text-white' : 'bg-base-100/80'}"
-        onclick={toggleFilters}
-        aria-label="Filter categories"
-      >
-        <iconify-icon noobserver icon="ph:funnel-bold" width="24"></iconify-icon>
-      </button>
-      <button
-        class="rounded-full border-2 border-primary w-16 h-16 flex items-center justify-center {showList ? 'bg-primary text-white' : 'bg-base-100/80'}"
-        onclick={toggleList}
-        aria-label="Toggle location list"
-      >
-        <iconify-icon noobserver icon="ph:list-bold" width="24"></iconify-icon>
-      </button>
+    <div class="absolute flex flex-col top-2 right-2 gap-2">
+      <div class="flex gap-2">
+        <button
+          class="rounded-full border-2 border-primary w-16 h-16 flex items-center justify-center {showFilters ? 'bg-primary text-white' : 'bg-base-100/80'}"
+          onclick={toggleFilters}
+          aria-label="Filter categories"
+        >
+          <iconify-icon noobserver icon="ph:funnel-bold" width="24"></iconify-icon>
+        </button>
+        <button
+          class="rounded-full border-2 border-primary w-16 h-16 flex items-center justify-center {showList ? 'bg-primary text-white' : 'bg-base-100/80'}"
+          onclick={toggleList}
+          aria-label="Toggle location list"
+        >
+          <iconify-icon noobserver icon="ph:list-bold" width="24"></iconify-icon>
+        </button>
+      </div>
+      <a href="/map/add" class="whitespace-nowrap rounded-full bg-black text-white h-12 flex items-center justify-center gap-2 px-6 text-sm font-semibold hover:opacity-80 transition-opacity">
+        <iconify-icon noobserver icon="ph:plus-bold" width="20"></iconify-icon>
+        {$t("mapAdd.addLocation")}
+      </a>
     </div>
   </div>
 </div>