paywall for components

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>

src/lib/components/DCF.svelte

@@ -7,7 +7,7 @@
     
     //export let quantData;
     export let fairPrice;
-    
+    export let data;
     
     let lastPrice:Number;
     
@@ -207,10 +207,8 @@
     
     
     
-    <section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0 ">
+    <section class="overflow-hidden text-white h-full pb-8">
-        <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
+        <main class="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
@@ -222,7 +220,8 @@
             />
         </div>
 
-                    <div class="w-fit sm:w-full sm:max-w-2xl text-[1rem]">
+                    {#if data?.user?.tier === 'Pro'}
+
                     {#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,10 +294,17 @@
                     <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>
+            {/if}
+    
         </main>
-            </div>
-            </div>
     </section>
     
     

src/lib/components/DarkPool.svelte

@@ -188,8 +188,8 @@ $: {
                 Dark Pool
             </label>
             <InfoModal
-              title={"Retail Trader Volume"}
+              title={"Dark Pool Data"}
-              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."}
+              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>

src/lib/components/FundamentalAnalysis.svelte

@@ -100,6 +100,8 @@ $: {
                 />
             </div>
             
+            {#if data?.user?.tier === 'Pro'}
+
             {#if isLoaded}
 
             {#if Object?.keys(fundamentalAnalysisDict)?.length !== 0}
@@ -226,6 +228,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}
+    
         </main>
     </section>
     

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}>
@@ -169,6 +170,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>

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>

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,11 +217,8 @@ $: {
 
             
             
-<section class="bg-[#0F0F0F] overflow-hidden w-full text-white h-full sm:mb-0">
+<section class="overflow-hidden text-white h-full pb-8">
-    <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+    <main class="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">
                                 
     <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">
@@ -232,6 +231,7 @@ $: {
         />
     </div>
 
+        {#if userTier === 'Pro'}
                     {#if isLoaded}
                         {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
                         
@@ -321,7 +321,6 @@ $: {
                             </label>
                             {/if}
                             
-    
       {/if}
     
                 {:else}
@@ -334,12 +333,14 @@ $: {
                 </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>
-                    </div>
+</section>
-                </div>
-        </section>
-                
             
             
             

src/lib/components/SentimentAnalysis.svelte

@@ -101,6 +101,8 @@ $: {
                   id={"sentimentAnalysisInfo"}
                 />
             </div>
+
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
             {#if sentimentList?.length !== 0}
             
@@ -243,6 +245,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}
+    
         </main>
     </section>
     

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,11 +155,8 @@ $: {
 
 
 
-<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0">
+<section class="overflow-hidden text-white h-full pb-8">
-    <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
+    <main class="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">
 
         <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">
@@ -170,6 +169,7 @@ $: {
             />
         </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]">
@@ -286,11 +286,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}
         </main>
-        </div>
-        </div>
 </section>
     
 

src/lib/components/TrendAnalysis.svelte

@@ -114,6 +114,8 @@ $: {
                 />
             </div>
 
+
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
             {#if trendList?.length !== 0}
             <div class="w-full flex flex-col items-start">
@@ -239,6 +241,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}
+    
         </main>
     </section>
     

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}
             
 
@@ -80,6 +83,13 @@
             
             {/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>
     

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) {

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>

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}
+                                  {#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,5)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                                  <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>

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}
+                              {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
-                              <tr class="text-gray-200 bg-[#0F0F0F]">
+                              <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">

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)}