From 77e846b52a0e4dac516a9213b842eed146d255d5 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 20 Jun 2024 11:32:51 +0200
Subject: [PATCH] paywall for components

---
 src/lib/components/AnalystEstimate.svelte     |  9 +++
 src/lib/components/DCF.svelte                 | 46 +++++++------
 src/lib/components/DarkPool.svelte            |  4 +-
 src/lib/components/FundamentalAnalysis.svelte |  9 +++
 src/lib/components/OptionsData.svelte         |  8 +++
 src/lib/components/PriceAnalysis.svelte       |  8 ++-
 src/lib/components/RevenueSegmentation.svelte | 65 ++++++++++---------
 src/lib/components/SentimentAnalysis.svelte   |  9 +++
 src/lib/components/ShareHolders.svelte        | 44 +++++++------
 src/lib/components/TrendAnalysis.svelte       | 11 +++-
 src/lib/components/VaR.svelte                 | 10 +++
 src/routes/oauth/+server.ts                   | 11 ++--
 src/routes/stocks/[tickerID]/+page.svelte     |  6 +-
 .../stocks/[tickerID]/analyst/+page.svelte    |  6 +-
 .../stocks/[tickerID]/insider/+page.svelte    | 10 +--
 .../stocks/[tickerID]/options/+page.svelte    | 14 ++--
 16 files changed, 166 insertions(+), 104 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index bcf258bc..c25084d1 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -216,6 +216,8 @@ $: {
                 <div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full sm:w-5/6">
                     We analyze insights from various analysts to offer both historical and future fundamental data forecasts.
                 </div>
+
+                {#if data?.user?.tier === 'Pro'}
                 {#if isLoaded}
 
                 {#if analystEstimateList?.length !== 0}
@@ -346,6 +348,13 @@ $: {
                 </div>  
                 {/if}
 
+                {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
+
             </div>
         </main>
         </div>
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index aa715afa..6148969e 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -7,7 +7,7 @@
     
     //export let quantData;
     export let fairPrice;
-    
+    export let data;
     
     let lastPrice:Number;
     
@@ -207,22 +207,21 @@
     
     
     
-    <section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0 ">
-        <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
-            <div class="relative flex justify-center items-center overflow-hidden">
-                <main>
-                    <div class="flex flex-row items-center">
-                        <label for="dcfInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                          Discounted Cashflow Model
-                        </label>
-                        <InfoModal
-                          title={"Discounted Cashflow Model"}
-                          content={contentModal}
-                          id={"dcfInfo"}
-                        />
-                    </div>
+    <section class="overflow-hidden text-white h-full pb-8">
+        <main class="overflow-hidden ">
+        <div class="flex flex-row items-center">
+            <label for="dcfInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                Discounted Cashflow Model
+            </label>
+            <InfoModal
+                title={"Discounted Cashflow Model"}
+                content={contentModal}
+                id={"dcfInfo"}
+            />
+        </div>
+
+                    {#if data?.user?.tier === 'Pro'}
 
-                    <div class="w-fit sm:w-full sm:max-w-2xl text-[1rem]">
                     {#if fairPrice !== null}
                     <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
 
@@ -295,12 +294,19 @@
                     <svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
                   </h2>
                 {/if}
+
+
+
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
                 </div>
-            </main>
-            </div>
-            </div>
+            {/if}
+    
+        </main>
     </section>
-        
+    
     
     
 
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index 977b719e..8b182094 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -188,8 +188,8 @@ $: {
                 Dark Pool
             </label>
             <InfoModal
-              title={"Retail Trader Volume"}
-              content={"Gain insights into Retail Trader activity with the following visualization: The green bar illustrates the daily volume trend, signifying a bullish sentiment if it ranges from 0 to 100, or bearish if it spans from -100 to just below 0. The white line depicts the daily trading volume of retail investors."}
+              title={"Dark Pool Data"}
+              content={"Dark pool data refers to information on trading activities that occur in private, non-public financial exchanges known as dark pools. These venues are used by hedge funds and major institutional traders to buy and sell large blocks of securities without exposing their orders to the public, minimizing market impact and price fluctuations. Currently, nearly 50% of all trades are executed in these dark pools, highlighting their significant role in the trading landscape."}
               id={"darkPoolInfo"}
             />
         </div>
diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index a19f7aba..0dc5e4a5 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -100,6 +100,8 @@ $: {
                 />
             </div>
             
+            {#if data?.user?.tier === 'Pro'}
+
             {#if isLoaded}
 
             {#if Object?.keys(fundamentalAnalysisDict)?.length !== 0}
@@ -225,6 +227,13 @@ $: {
               </div>
             </div>  
             {/if}
+
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+          {/if}
     
         </main>
     </section>
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index cba23488..de49e17c 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -81,6 +81,7 @@ $: {
                   />
               </div>
 
+              {#if data?.user?.tier === 'Pro'}
 
               <div class="flex flex-row items-end justify-between">
                   <select class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5  bg-[#2A303C]" on:change={changeStatement}>
@@ -168,6 +169,13 @@ $: {
                 </div>
               </div>
               {/if}
+
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
               
           </div>
       </main>
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 58680519..d084728a 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -212,7 +212,7 @@ $: {
                 />
             </div>
     
-           
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
 
             {#if Object?.keys(priceAnalysisDict)?.length !== 0}
@@ -323,6 +323,12 @@ $: {
               </div>
             </div>  
             {/if}
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
     
         </main>
     </section>
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 609d1137..7dc49f97 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -7,6 +7,8 @@
 
     import InfoModal from '$lib/components/InfoModal.svelte';
     
+    export let userTier;
+
     let isLoaded = false;
     const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
@@ -215,23 +217,21 @@ $: {
 
             
             
-<section class="bg-[#0F0F0F] overflow-hidden w-full text-white h-full sm:mb-0">
-    <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-        <div class="w-full relative flex justify-center items-center overflow-hidden">
-            <main class="w-full">
-                <div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
+<section class="overflow-hidden text-white h-full pb-8">
+    <main class="overflow-hidden ">
                                 
-                    <div class="flex flex-row items-center">
-                        <label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                          Revenue Breakdown
-                        </label>
-                        <InfoModal
-                          title={"Revenue Breakdown"}
-                          content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
-                          id={"revenueProductSegmentationInfo"}
-                        />
-                    </div>
+    <div class="flex flex-row items-center">
+        <label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+            Revenue Breakdown
+        </label>
+        <InfoModal
+            title={"Revenue Breakdown"}
+            content={"A revenue stream for a company is how they make money. It can come from selling things, providing services, or other sources. These different ways of making money add up to keep the company running and growing."}
+            id={"revenueProductSegmentationInfo"}
+        />
+    </div>
 
+        {#if userTier === 'Pro'}
                     {#if isLoaded}
                         {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
                         
@@ -321,25 +321,26 @@ $: {
                             </label>
                             {/if}
                             
+      {/if}
     
-                            {/if}
-
-                    {:else}
-                    <div class="flex justify-center items-center h-80">
-                        <div class="relative">
-                        <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md"></span>
-                        </label>
-                        </div>
-                    </div>  
-                    {/if}
-                            
-                        </div>
-                    </main>
+                {:else}
+                <div class="flex justify-center items-center h-80">
+                    <div class="relative">
+                    <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <span class="loading loading-spinner loading-md"></span>
+                    </label>
                     </div>
-                </div>
-        </section>
-                
+                </div>  
+                {/if}
+    
+                {:else}
+                <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                    <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                    Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+                  </div>
+                {/if}
+        </main>
+</section>
             
             
             
diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index 129f8195..bd7536ab 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -101,6 +101,8 @@ $: {
                   id={"sentimentAnalysisInfo"}
                 />
             </div>
+
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
             {#if sentimentList?.length !== 0}
             
@@ -242,6 +244,13 @@ $: {
             </div>
           </div>  
           {/if}
+
+          {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+          {/if}
     
         </main>
     </section>
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 171a89a7..556fb88c 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -11,6 +11,8 @@ import Lazy from 'svelte-lazy';
 let isLoaded = false;
 const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
+export let data;
+
 let apiURL;
 
 userRegion.subscribe(value => {
@@ -153,23 +155,21 @@ $: {
 
 
 
-<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0">
-    <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
-        <div class="relative flex justify-center items-center overflow-hidden">
-            <main>
-                <div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
+<section class="overflow-hidden text-white h-full pb-8">
+    <main class="overflow-hidden ">
 
-                    <div class="flex flex-row items-center">
-                        <label for="shareholdersInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                          Shareholder Breakdown
-                        </label>
-                        <InfoModal
-                          title={"Shareholder Breakdown"}
-                          content={"Institutional shareholders are large investment entities like mutual funds and pension funds that invest significant amounts in publicly traded companies. They play a big role in influencing company decisions and stock market trends."}
-                          id={"shareholdersInfo"}
-                        />
-                    </div>
+        <div class="flex flex-row items-center">
+            <label for="shareholdersInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
+                Shareholder Breakdown
+            </label>
+            <InfoModal
+                title={"Shareholder Breakdown"}
+                content={"Institutional shareholders are large investment entities like mutual funds and pension funds that invest significant amounts in publicly traded companies. They play a big role in influencing company decisions and stock market trends."}
+                id={"shareholdersInfo"}
+            />
+        </div>
 
+            {#if data?.user?.tier === 'Pro'}
                 {#if isLoaded}
                 {#if shareholderList?.length !== 0}
                 <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
@@ -273,9 +273,9 @@ $: {
 
             
 
-
+            
                 {/if}
-
+    
                 {:else}
                 <div class="flex justify-center items-center h-80">
                     <div class="relative">
@@ -286,11 +286,13 @@ $: {
                 </div>  
                 {/if}
     
-                
-            </div>
+                {:else}
+                <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                    <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                    Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+                  </div>
+                {/if}
         </main>
-        </div>
-        </div>
 </section>
     
 
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index f5a56876..5368d946 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -113,7 +113,9 @@ $: {
                   id={"trendAnalysisInfo"}
                 />
             </div>
-            
+
+
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
             {#if trendList?.length !== 0}
             <div class="w-full flex flex-col items-start">
@@ -238,6 +240,13 @@ $: {
             </div>
           </div>  
           {/if}
+
+          {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+          {/if}
     
         </main>
     </section>
diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte
index cf73cfbf..9ba70aaa 100644
--- a/src/lib/components/VaR.svelte
+++ b/src/lib/components/VaR.svelte
@@ -4,6 +4,7 @@
     import InfoModal from '$lib/components/InfoModal.svelte';
 
     export let varDict = {};
+    export let data;
     
     let rating;
     let outlook;
@@ -35,6 +36,8 @@
                 />
             </div>
     
+            {#if data?.user?.tier === 'Pro'}
+
             {#if Object?.keys(varDict)?.length !== 0}
             
 
@@ -79,6 +82,13 @@
             </h2>
             
             {/if}
+
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"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>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
     
         </main>
     </section>
diff --git a/src/routes/oauth/+server.ts b/src/routes/oauth/+server.ts
index 7b481dc4..a4b038f7 100644
--- a/src/routes/oauth/+server.ts
+++ b/src/routes/oauth/+server.ts
@@ -1,5 +1,4 @@
 import { redirect } from '@sveltejs/kit';
-import { oauthState, oauthVerifier, oauthProvider } from '$lib/store';
 
 
 export const config = {
@@ -54,15 +53,13 @@ export const GET = async ({locals,  url, cookies}) => {
         
 
         //oauthUsername = generateUsername(newUser['meta']['name'].split(' ').join('')).toLowerCase();
-        
+        /*
         await locals.pb?.collection('users').update(
             newUser['record']['id'], {
-                'Tier' : 'Free'
+                'freeTrial' : true
             });
-        
-        oauthState.update( value => '');
-        oauthVerifier.update( value => '');
-        oauthProvider.update( value => '');
+        */
+
         
 
     } catch (err) {
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 109f0351..38202642 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1332,7 +1332,7 @@ function changeChartType() {
                                   <Lazy>
                                     <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} />
+                                      <svelte:component this={Comp} userTier={data?.user?.tier}/>
                                     {/await}
                                     </div>
                                     </Lazy>
@@ -1370,7 +1370,7 @@ function changeChartType() {
                                    <Lazy>
                                     <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
-                                      <svelte:component this={Comp} />
+                                      <svelte:component this={Comp} data={data}/>
                                     {/await}
                                     </div>
                                     </Lazy>
@@ -1394,7 +1394,7 @@ function changeChartType() {
                                     <Lazy>
                                       <div class="w-full m-auto rounded-2xl mb-5">
                                       {#await import('$lib/components/DCF.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp}  fairPrice = {fairPrice} currentPrice = {currentPrice}/>
+                                        <svelte:component this={Comp} data = {data} fairPrice = {fairPrice} currentPrice = {currentPrice}/>
                                       {/await}
                                       </div>
                                       </Lazy>
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index 977b8e73..1afec182 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -91,7 +91,6 @@ function latestInfoDate(inputDate) {
 <!-- Other meta tags -->
 <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Analyst Ratings · stocknear`}/>
 <meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -99,7 +98,6 @@ function latestInfoDate(inputDate) {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Analyst Ratings · stocknear`}/>
 <meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -262,8 +260,8 @@ function latestInfoDate(inputDate) {
                                   </tr>
                                 </thead>
                                 <tbody>
-                                  {#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,5)) as item,index}
-                                  <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] {index+1 === historyList?.slice(0,5)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                                  {#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index}
+                                  <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                     <td class="text-sm text-start">
                                       <div class="flex flex-col items-start">
                                         <span class="text-blue-400 font-medium">{item?.analyst_name} </span>
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index ada05b55..5f4ad861 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -395,7 +395,7 @@ onMount(async() => {
                       <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
       
                         <!--Start Put/Call-->  
-                        <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
+                        <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                           <div class="flex flex-col items-start">
                               <span class="font-medium text-gray-200 text-xs sm:text-sm">Buy/Sell</span>
                               <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -422,7 +422,7 @@ onMount(async() => {
                       </div>
                       <!--End Put/Call-->
                       <!--Start Call Flow-->  
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
+                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                         <div class="flex flex-col items-start">
                             <span class="font-medium text-gray-200 text-xs sm:text-sm">Bought Shares</span>
                             <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -451,7 +451,7 @@ onMount(async() => {
                       </div>
                       <!--End Call Flow-->
                       <!--Start Put Flow-->  
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
+                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                         <div class="flex flex-col items-start">
                             <span class="font-medium text-gray-200 text-xs sm:text-sm">Sold Shares</span>
                             <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -508,8 +508,8 @@ onMount(async() => {
                               </tr>
                             </thead>
                             <tbody>
-                              {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,20)) as item}
-                              <tr class="text-gray-200 bg-[#0F0F0F]">
+                              {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
+                              <tr class="text-gray-200 bg-[#0F0F0F] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
       
                                 <td class="text-gray-200 border-b border-[#0F0F0F]">
                                   <div class="flex flex-col">
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 450bf964..e1096de9 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -248,7 +248,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
 <meta property="og:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -256,7 +255,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Options Activity · stocknear`}/>
 <meta name="twitter:description" content={`Detailed informaton of unusual options activity for ${$displayCompanyName} (${$stockTicker}).`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -387,7 +385,7 @@ $: {
                             <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
                               <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
                                 <!--Start Flow Sentiment-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
                                     <div class="flex flex-col items-start">
                                         <span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
                                         <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@@ -396,7 +394,7 @@ $: {
                                 </div>
                                 <!--End Flow Sentiment-->
                                 <!--Start Put/Call-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
                                   <div class="flex flex-col items-start">
                                       <span class="font-medium text-gray-200 text-sm ">Put/Call</span>
                                       <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -423,7 +421,7 @@ $: {
                               </div>
                               <!--End Put/Call-->
                               <!--Start Call Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
                                 <div class="flex flex-col items-start">
                                     <span class="font-medium text-gray-200 text-sm ">Call Flow</span>
                                     <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -452,7 +450,7 @@ $: {
                               </div>
                               <!--End Call Flow-->
                               <!--Start Put Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-md h-20">
                                 <div class="flex flex-col items-start">
                                     <span class="font-medium text-gray-200 text-sm ">Put Flow</span>
                                     <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -510,9 +508,9 @@ $: {
                                       </tr>
                                     </thead>
                                     <tbody>
-                                      {#each optionList as item}
+                                      {#each (data?.user?.tier === 'Pro' ? optionList : optionList?.slice(0,3)) as item, index}
                                       <!-- row -->
-                                      <tr class="bg-[#0F0F0F] border-b-[#0F0F0F]">
+                                      <tr class="bg-[#0F0F0F] border-b-[#0F0F0F] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                         
                                         <td class="text-white text-xs sm:text-sm text-start">
                                           {formatDate(item?.updated)}