From 96b50bb78b09bad8cdd2d05b6f1190429a0dfe96 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 21 Aug 2024 22:43:30 +0200
Subject: [PATCH] update list page

---
 src/routes/+layout.svelte      |   4 +-
 src/routes/list/+layout.svelte | 122 +++++++++++++++++----------------
 2 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 32a34358..ce8f496a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -283,7 +283,7 @@ $: {
         
           <Sheet.Root >
             <Sheet.Trigger asChild let:builder>
-              <Button builders={[builder]} size="icon" class="sm:xl bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none">
+              <Button builders={[builder]} size="icon" class="bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none">
                 <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
                 <span class="sr-only">Toggle Menu</span>
               </Button>
@@ -638,7 +638,7 @@ $: {
             </Sheet.Content>
           </Sheet.Root>
           
-          <a href="/" class="-ml-2 flex w-9 flex-shrink-0">
+          <a href="/home" class="-ml-2 flex flex-shrink-0">
             <img class="avatar w-9 3xl:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
             <span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
           </a>
diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index aa51396a..c41d67f1 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang='ts'>
     import { numberOfUnreadNotification } from '$lib/store';
     import { page } from '$app/stores';
-    import logo from '$lib/images/list_logo.png';
-    
-    
+    import ArrowLogo from "lucide-svelte/icons/move-up-right";
+    import { goto } from '$app/navigation';
+
     export let data;
 
 let navigation = [
@@ -193,7 +193,7 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
           
 <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
             
-            <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+            <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 sm:ml-10">
                 <ul>
                   <li><a href="/" class="text-gray-300">Home</a></li> 
                   <li><a href="/list/" class="text-gray-300">Lists</a></li>
@@ -209,54 +209,11 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
 
 
 
-        <div class="hidden sm:block w-full m-auto bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-8">
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
         
-            <!-- Start Column -->
-            <div>
-                <div class="flex flex-row justify-center items-center">
-                <h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
-                    Stocks Lists
-                </h1>
-                </div>
-
-                <span class="text-white text-md font-medium text-center flex justify-center items-center ">
-                    Identify various companies based on their market capitalization ranking
-                </span>
-
-
-            </div>
-            <!-- End Column -->
-        
-            <!-- Start Column -->
-            <div class="relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
-                <svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <filter id="glow">
-                    <feGaussianBlur stdDeviation="5" result="glow"/>
-                    <feMerge>
-                        <feMergeNode in="glow"/>
-                        <feMergeNode in="SourceGraphic"/>
-                    </feMerge>
-                    </filter>
-                </defs>
-                <path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
-                </svg>
-                
-
-                <div class="z-1 absolute top-2">
-                <img class="w-32 ml-4" src={logo} alt="logo" loading="lazy">
-                </div>
-            </div>
-            <!-- End Column -->
-            </div>
-
-        
-        </div>
 
 
         
-        <div class="mt-10 sm:mt-0 w-full m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
+        <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 sm:px-10 overflow-hidden">
         
         
             <!--Start Top Winners/Losers-->
@@ -272,22 +229,71 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
                   {/each}
               </div>
     
-              <div class="border-b mt-2 border-blue-400 w-full mb-4" />
+              <div class="border-b mt-2 border-blue-400 w-full mb-7" />
 
-              
-
-              <slot />
-
-
-              
-          
-    
+              <div class="flex justify-center w-full m-auto overflow-hidden">
       
+            <main class="w-full">
+              <slot />
+            </main>
+
+              <aside class="hidden lg:block relative fixed w-1/3 ml-12">        
+              
+                {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+                <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Pro Subscription
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Upgrade now for unlimited access to all data and tools.
+                        </span>
+                    </div>
+                </div>
+                {/if}
+
+                <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Wallstreet Analyst
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings.
+                        </span>
+                    </div>
+                </div>
+
+                <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Congress Trading
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Congress trading insights.
+                        </span>
+                    </div>
+                </div>
+
+            </aside>
+
+
+            </div>
+
+
           
           </div>
     
     
-        
+        </div>
      
         
         </section>