update analyst page

src/lib/components/AnalystEstimate.svelte

@@ -343,7 +343,7 @@
                         n/a
                       {:else if item?.val === null}
                         {#if tableForecastRevenue[index]?.val - tableForecastRevenue[index - 1]?.val > 0}
-                          <span class="text-orange-400">
+                          <span class="text-orange-400 before:content-['+']">
                             {(() => {
                               const previousVal =
                                 tableForecastRevenue[index - 1]?.val ?? 0;
@@ -378,7 +378,7 @@
                           n/a
                         {/if}
                       {:else if item?.val - tableActualRevenue[index - 1]?.val > 0}
-                        <span class="text-[#00FC50]">
+                        <span class="text-[#00FC50] before:content-['+']">
                           {(
                             ((item?.val - tableActualRevenue[index - 1]?.val) /
                               Math.abs(tableActualRevenue[index - 1]?.val)) *
@@ -433,7 +433,7 @@
                         n/a
                       {:else if item?.val === null}
                         {#if tableForecastEPS[index]?.val - tableForecastEPS[index - 1]?.val > 0}
-                          <span class="text-orange-400">
+                          <span class="text-orange-400 before:content-['+']">
                             {(
                               ((tableForecastEPS[index]?.val -
                                 tableForecastEPS[index - 1]?.val) /
@@ -452,7 +452,7 @@
                           </span>
                         {/if}
                       {:else if item?.val - tableActualEPS[index - 1]?.val > 0}
-                        <span class="text-[#00FC50]">
+                        <span class="text-[#00FC50] before:content-['+']">
                           {(
                             ((item?.val - tableActualEPS[index - 1]?.val) /
                               Math.abs(tableActualEPS[index - 1]?.val)) *
@@ -569,28 +569,76 @@
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >High</td
                     >
-                    {#each highRevenueList as val}
+                    {#each highRevenueList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= highRevenueList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr><tr class="border-b border-gray-600 last:border-0"
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >Avg</td
                     >
-                    {#each avgRevenueList as val}
+                    {#each avgRevenueList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= avgRevenueList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr><tr class="border-b border-gray-600 last:border-0"
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >Low</td
                     >
-                    {#each lowRevenueList as val}
+                    {#each lowRevenueList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= lowRevenueList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr></tbody
                 >
@@ -630,28 +678,76 @@
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >High</td
                     >
-                    {#each highEPSList as val}
+                    {#each highEPSList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= highEPSList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr><tr class="border-b border-gray-600 last:border-0"
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >Avg</td
                     >
-                    {#each avgEPSList as val}
+                    {#each avgEPSList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= avgEPSList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr><tr class="border-b border-gray-600 last:border-0"
                     ><td class="whitespace-nowrap px-1 py-[3px] text-left"
                       >Low</td
                     >
-                    {#each lowEPSList as val}
+                    {#each lowEPSList as val, index}
-                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]"
+                      <td class="px-1 py-[3px] text-sm sm:text-[1rem]">
-                        >{abbreviateNumber(val)}</td
+                        {#if data?.user?.tier !== "Pro" && index >= lowEPSList?.length - 2}
-                      >
+                          <a
+                            class="inline-block ml-0.5 text-white"
+                            href="/pricing"
+                            >Pro<svg
+                              class="w-4 h-4 ml-0.5 mb-1 inline-block text-[#A3A3A3]"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="currentColor"
+                                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
+                            ></a
+                          >
+                        {:else}
+                          {abbreviateNumber(val)}
+                        {/if}
+                      </td>
                     {/each}
                   </tr></tbody
                 >

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

@@ -615,10 +615,36 @@
                   {/if}
                 </div>
                 {#if Object?.keys(data?.getAnalystInsight)?.length > 0}
-                  <p>{data?.getAnalystInsight?.insight}</p>
+                  {#if data?.user?.tier === "Pro"}
-                  <p class="mt-5 italic text-white text-sm">
+                    <p>{data?.getAnalystInsight?.insight}</p>
-                    Updated {data?.getAnalystInsight?.date}
+                    <p class="mt-5 italic text-white text-sm">
-                  </p>
+                      Updated {data?.getAnalystInsight?.date}
+                    </p>
+                  {:else}
+                    <p>
+                      {data?.getAnalystInsight?.insight?.slice(0, 50) + "..."}
+                      <span class="mt-3">
+                        Unlock content with
+                        <a
+                          class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+                          href="/pricing"
+                          >Pro Subscription <svg
+                            class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            ><path
+                              fill="currentColor"
+                              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
+                          ></a
+                        >
+                      </span>
+                    </p>
+
+                    <p class="mt-5 italic text-white text-sm">
+                      Updated {data?.getAnalystInsight?.date}
+                    </p>
+                  {/if}
                 {:else}
                   <p>
                     According to {numOfAnalyst} stock analyst, the rating for {$displayCompanyName}

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

@@ -229,7 +229,7 @@
 </svelte:head>
 
 <section
-  class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
+  class="bg-[#09090B] overflow-hidden text-white h-full min-h-screen mb-40 sm:mb-0 w-full"
 >
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
@@ -580,6 +580,149 @@
             title="Get stock forecasts from Wall Street's highest rated professionals"
           />
         {/if}
+        {#if data?.user?.tier !== "Pro"}
+          <div class="mt-4 py-6 xl:mt-10 border-t border-gray-200">
+            <div class="mx-auto max-w-7xl px-3 xs:px-6 lg:px-8">
+              <div class="mx-auto max-w-2xl md:text-center">
+                <h3
+                  class="mt-2 text-2xl font-bold tracking-tight text-white bp:text-3xl"
+                >
+                  Analyst Star Rankings
+                </h3>
+                <p
+                  class="mt-3 text-base leading-8 text-muted dark:text-faded xl:text-lg"
+                >
+                  Our analyst star rankings are based on these four factors
+                </p>
+              </div>
+              <div class="mx-auto mt-6 max-w-2xl lg:max-w-5xl">
+                <dl
+                  class="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:max-w-none lg:grid-cols-4 lg:gap-y-16"
+                >
+                  <div class="relative pl-14">
+                    <dt
+                      class="text-base font-semibold leading-4 text-white md:leading-7"
+                    >
+                      <div
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="h-6 w-6 text-black"
+                          ><path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                          ></path></svg
+                        >
+                      </div>
+                      Success Rate
+                    </dt>
+                    <dd
+                      class="mt-2 text-base leading-7 text-muted dark:text-faded"
+                    >
+                      The percentage of ratings that are profitable.
+                    </dd>
+                  </div>
+                  <div class="relative pl-14">
+                    <dt
+                      class="text-base font-semibold leading-4 text-white md:leading-7"
+                    >
+                      <div
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="h-6 w-6 text-black"
+                          ><path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                          ></path></svg
+                        >
+                      </div>
+                      Average Return
+                    </dt>
+                    <dd
+                      class="mt-2 text-base leading-7 text-muted dark:text-faded"
+                    >
+                      The average percentage return within one year of the
+                      rating.
+                    </dd>
+                  </div>
+                  <div class="relative pl-14">
+                    <dt
+                      class="text-base font-semibold leading-4 text-white md:leading-7"
+                    >
+                      <div
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="h-6 w-6 text-black"
+                          ><path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z"
+                          ></path></svg
+                        >
+                      </div>
+                      Rating Count
+                    </dt>
+                    <dd
+                      class="mt-2 text-base leading-7 text-muted dark:text-faded"
+                    >
+                      The more ratings the analyst has provided, the higher the
+                      score.
+                    </dd>
+                  </div>
+                  <div class="relative pl-14">
+                    <dt
+                      class="text-base font-semibold leading-4 text-white md:leading-7"
+                    >
+                      <div
+                        class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-md bg-[#fff]"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="h-6 w-6 text-black"
+                          ><path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                          ></path></svg
+                        >
+                      </div>
+                      Recency
+                    </dt>
+                    <dd
+                      class="mt-2 text-base leading-7 text-muted dark:text-faded"
+                    >
+                      Ratings provided within the past year contribute to a
+                      higher score.
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+            </div>
+          </div>
+        {/if}
       </div>
     </div>
   </div>