ui fix

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -8,6 +8,7 @@
   import InfoModal from "$lib/components/InfoModal.svelte";
   import { onMount } from "svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+  import { goto } from "$app/navigation";
 
   export let data;
 
@@ -258,9 +259,28 @@
                   class="bg-[#313131] w-full sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
                 >
                   {#each tabs as item, i}
+                    {#if data?.user?.tier !== "Pro" && i > 0}
+                      <button
+                        on:click={() => goto("/pricing")}
+                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                      >
+                        <span class="relative text-sm block font-semibold">
+                          {item.title}
+                          <svg
+                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            ><path
+                              fill="#A3A3A3"
+                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                            /></svg
+                          >
+                        </span>
+                      </button>
+                    {:else}
                       <button
                         on:click={() => changeTab(i)}
-                      class="group relative z-[1] rounded-full w-1/2 md:w-auto px-5 py-1 {activeIdx ===
+                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
                         i
                           ? 'z-0'
                           : ''} "
@@ -279,6 +299,7 @@
                           {item.title}
                         </span>
                       </button>
+                    {/if}
                   {/each}
                 </div>
               </div>