separate teerdays lp, small ui fixen mouse over on select network box

components/ui/NetworkSelector.vue

@@ -2,21 +2,17 @@
   <div
     class="flex flex-row justify-between w-full text-center gap-4 container mb-10"
   >
-    <!-- USE THIS LATER TO LINK TO app.incognitee.io <a
-          href=""
-      target="_blank"
-      class="currency-box p-3 gap-2 basis-1/4 hover:border-2 hover:border-incognitee-green"
-    >
-      <TEER class="w-[30px] h-[30px]" />
-      <p class="text-xs">TEER<br />Integritee</p>
-    </a>
-    -->
+    <!-- TEER Box -->
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative"
       :class="{
-        'border-2 border-incognitee-green':
-          selectedNetwork === ChainId.IntegriteeKusama,
+        'border-incognitee-green':
+          teerHover ||
+          (isProd && selectedNetwork === ChainId.IntegriteeKusama) ||
+          (!isProd && selectedNetwork !== ChainId.PaseoRelay),
       }"
+      @mouseover="teerHover = true"
+      @mouseleave="teerHover = false"
       @click="handleTeerClick"
     >
       <TEER class="w-[30px] h-[30px]" />
@@ -27,18 +23,26 @@
       >
       <div class="ribbon red"><span>beta</span></div>
     </div>
+
+    <!-- PAS PASEO Box -->
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative"
       :class="{
-        'border-2 border-incognitee-green':
-          selectedNetwork === ChainId.PaseoRelay,
+        'border-incognitee-green':
+          pasHover ||
+          (!isProd && selectedNetwork === ChainId.PaseoRelay) ||
+          (isProd && teerHover),
       }"
+      @mouseover="pasHover = true"
+      @mouseleave="pasHover = false"
       @click="handlePasClick"
     >
       <Paseo class="w-[30px] h-[30px]" />
       <p class="text-xs">PAS<br />PASEO</p>
       <div class="ribbon blue"><span>test</span></div>
     </div>
+
+    <!-- USDC Box -->
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative"
       @click="openAssetsInfo"
@@ -54,12 +58,14 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import Paseo from "assets/img/paseo-logo.svg";
 import USDC from "assets/img/usdc-logo.svg";
 import TEER from "@/assets/img/logo-icon.svg";
 import { ChainId } from "@/configs/chains.ts";
 import { defineProps } from "vue";
 
+// Props werden übergeben
 const props = defineProps({
   openAssetsInfo: {
     type: Function,
@@ -71,12 +77,19 @@ const props = defineProps({
   },
 });
 
+// Umgebungsvariable für Prod/Dev erkennen
+const isProd = ref(process.env.LIVE === "false");
+
+// Hover-Zustände
+const teerHover = ref(false);
+const pasHover = ref(false);
+
+// Funktionen für das Klicken auf die Boxen
 const handleTeerClick = () => {
   try {
     if (props.selectedNetwork === ChainId.IntegriteeKusama) {
       console.log("do nothing");
     } else {
-      console.log("open link");
       window.open("https://app.incognitee.io", "_blank");
     }
   } catch (e) {
@@ -89,7 +102,6 @@ const handlePasClick = () => {
     if (props.selectedNetwork === ChainId.PaseoRelay) {
       console.log("do nothing");
     } else {
-      console.log("open link");
       window.open("https://try.incognitee.io", "_blank");
     }
   } catch (e) {
@@ -99,6 +111,16 @@ const handlePasClick = () => {
 </script>
 
 <style scoped>
+.currency-box {
+  position: relative;
+  border: 2px solid transparent; /* Transparenter Rahmen als Platzhalter */
+  transition: border-color 0.3s ease; /* Sanfter Übergang der Rahmenfarbe */
+}
+
+.currency-box.border-incognitee-green {
+  border-color: #24ad7c; /* Grüne Rahmenfarbe */
+}
+
 .ribbon {
   position: absolute;
   top: 0;

components/ui/ObtainTokenOverlay.vue

@@ -1,8 +1,13 @@
 <template>
-  <OverlayDialog :show="show" :close="close" title="Obtain Tokens!">
+  <OverlayDialog :show="show" :close="close" title="Obtain TEER Tokens!">
     <div class="mt-2">
       <p class="text-sm text-gray-400">
-        You can get {{ tokenSymbol }} at gate.io and kraken
+        You can get {{ tokenSymbol }} at
+        <a href="https://www.gate.io/de/trade/TEER_USDT">gate.io</a> and
+        <a
+          href="https://www.kraken.com/prices/integritee?quote=usd&interval=24h"
+          >Kraken</a
+        >
       </p>
       <p class="text-sm text-gray-400">
         after buying {{ tokenSymbol }}, withdraw them to this address:

nuxt.config.ts

@@ -71,6 +71,7 @@ export default defineNuxtConfig({
     "/": { ssr: false },
     "/teerdays": { ssr: false },
     "/gtn": { ssr: false },
+    "/teerdays-lp": { ssr: false },
   },
   imports: {
     autoImport: false,