This commit is contained in:
MuslemRahimi 2024-10-29 11:47:56 +01:00
parent 631524648d
commit 48c60f408f
4 changed files with 134 additions and 207 deletions

View File

@ -5,7 +5,7 @@
const SortIcon = ({ sortOrder }) => `
<svg class="flex-shrink-0 w-4 h-4 inline-block ${
sortOrder === 'asc' ? 'rotate-180' : sortOrder === 'desc' ? '' : 'hidden'
sortOrder === "asc" ? "rotate-180" : sortOrder === "desc" ? "" : "hidden"
}" viewBox="0 0 20 20" fill="currentColor" style="max-width:50px">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
@ -16,10 +16,13 @@
{#each columns as column}
<th
on:click={() => sortData(column.key)}
class="cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap {column.align === 'right' ? 'text-end' : ''}"
class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
'right'
? 'text-end'
: ''}"
>
{column.label}
{@html SortIcon({ sortOrder: sortOrders[column.key].order })}
</th>
{/each}
</tr>
</tr>

View File

@ -1,68 +1,96 @@
<script lang='ts'>
export let data;
export let title;
export let color = '#27272A'
<script lang="ts">
export let data;
export let title;
export let color = "#27272A";
</script>
{#if data?.user?.tier !== 'Pro'}
<div class="px-5 sm:px-0 shadow-lg ">
<div class="sm:rounded-lg bg-[{color}] pl-10 pr-10 pb-10 pt-5 w-full h-full m-auto -mt-5 relative">
{#if data?.user?.tier !== "Pro"}
<div class="px-0 flex justify-center items-center">
<div
class="rounded bg-[{color}] pl-10 pr-10 text-center pb-10 pt-5 w-full h-full m-auto -mt-5 relative"
>
<h3 class="text-white font-bold text-xl sm:text-2xl text-center">
Upgrade to Pro
</h3>
<div
class="text-white text-center text-sm sm:text-[1rem] pt-5 text-center"
>
{title}
</div>
<h3 class="text-white font-bold text-xl sm:text-2xl text-center">
Upgrade to Pro
</h3>
<div class="text-white text-center text-sm sm:text-[1rem] pt-5 text-center">
{title}
</div>
<!--Start Market Cap Group-->
<h2 class="text-center text-lg text-white font-bold mb-3 mt-3">
and even more...
</h2>
<div class="pt-3 flex justify-center items-center m-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 m-auto">
<!-- Column 1 -->
<div class="mb-4">
<ul
class="list-disc space-y-4 sm:space-y-1 m-auto text-center sm:text-start w-48 sm:w-full"
>
<li class="mb-2 cursor-pointer">
<a href="/list/mega-cap-stocks" class="text-white text-sm"
>Unlimited access to all data and tools</a
>
</li>
<li class="mb-2 cursor-pointer">
<a href="/list/large-cap-stocks" class="text-white text-sm"
>Unlimited Options Data</a
>
</li>
</ul>
</div>
<!--Start Market Cap Group-->
<h2 class="text-center text-lg text-white font-bold mb-3 mt-3">and even more...</h2>
<!-- Column 2 -->
<div class="sm:ml-10">
<ul
class="list-disc space-y-1 text-center sm:text-start w-48 sm:w-full"
>
<li class="mb-2 cursor-pointer">
<a href="/list/small-cap-stocks" class="text-white text-sm"
>Unlimited Wall Street Analysts Ratings</a
>
</li>
<li class="mb-2 cursor-pointer">
<a href="/list/nano-cap-stocks" class="text-white text-sm"
>Unlimited Price Alerts</a
>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div>
<div class="pt-3 flex justify-center items-center m-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 m-auto">
<!-- Column 1 -->
<div class="mb-4">
<ul class="list-disc space-y-4 sm:space-y-1 m-auto text-center sm:text-start w-48 sm:w-full">
<li class="mb-2 cursor-pointer">
<a href="/list/mega-cap-stocks" class="text-white text-sm">Unlimited access to all data and tools</a>
</li>
<li class="mb-2 cursor-pointer">
<a href="/list/large-cap-stocks" class="text-white text-sm ">Unlimited Options Data</a>
</li>
</ul>
<!--End Market Cap Group-->
<a
href="/pricing"
class="mt-10 flex justify-center items-center w-56 m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group"
>
Become a Pro
<span
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
>
<svg
class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><g transform="rotate(90 12 12)"
><g fill="none"
><path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
/><path
fill="white"
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
/></g
></g
></svg
>
</span>
</a>
</div>
<!-- Column 2 -->
<div class="sm:ml-10">
<ul class="list-disc space-y-1 text-center sm:text-start w-48 sm:w-full">
<li class="mb-2 cursor-pointer">
<a href="/list/small-cap-stocks" class="text-white text-sm ">Unlimited Wall Street Analysts Ratings</a>
</li>
<li class="mb-2 cursor-pointer">
<a href="/list/nano-cap-stocks" class="text-white text-sm ">Unlimited Price Alerts</a>
</li>
<!-- ...other list items -->
</ul>
</div>
</div>
</div>
<!--End Market Cap Group-->
<a href="/pricing" class="mt-10 flex justify-center items-center w-56 m-auto btn text-white bg-purple-600 hover:bg-purple-500 transition duration-150 ease-in-out group">
Become a Pro
<span class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="white" d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"/></g></g></svg>
</span>
</a>
</div>
</div>
{/if}
</div>
{/if}

View File

@ -146,9 +146,9 @@
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Wall Street Analysts</li>
@ -161,65 +161,13 @@
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-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"
>
Top Wall Street Analysts
</h1>
</div>
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
A performance-based ranking of Wall Street Analysts.
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block 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-4">
<img
class="w-36 ml-2"
src={cloudFrontUrl + "/assets/analyst_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
<div class="mb-6 border-b-[3px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Top Wall Street Analysts
</h1>
<p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
A list of Wall Street Analysts, ranked by their performance
</p>
</div>
<div class="w-screen sm:w-full m-auto mt-16">
@ -243,7 +191,7 @@
: ''}"
>
<td
class="text-white text-sm sm:text-[1rem] font-semibold text-white text-center"
class="text-white text-sm sm:text-[1rem] text-white text-center"
>
{item?.rank}
</td>
@ -257,7 +205,7 @@
class="sm:hover:text-white text-blue-400 font-medium"
>{item?.analystName}
</a>
<span class="text-white">{item?.companyName} </span>
<!--<span class="text-white">{item?.companyName} </span>-->
<div class="flex flex-row items-center mt-1">
{#each Array.from({ length: 5 }) as _, i}
{#if i < Math.floor(item?.analystScore)}
@ -297,7 +245,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{#if Number(item?.successRate) >= 0}
<span class="text-[#00FC50]"
@ -307,7 +255,7 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-semibold text-white"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{#if Number(item?.avgReturn) >= 0}
<span class="text-[#00FC50]"
@ -321,7 +269,7 @@
</td>
<td
class="text-end font-semibold text-white text-sm sm:text-[1rem] whitespace-nowrap"
class="text-end text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.totalRatings}
</td>
@ -352,11 +300,6 @@
</tbody>
</table>
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
@ -371,6 +314,11 @@
</div>
{/if}
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
@ -383,7 +331,7 @@
>
<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 🔥
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -403,7 +351,7 @@
>
<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">
Top Stocks Picks
Top Stocks Picks
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -422,7 +370,7 @@
>
<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">
Top Shorted Stocks 🍋
Top Shorted Stocks
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>

View File

@ -150,9 +150,9 @@
</svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Analyst Stocks</li>
@ -165,65 +165,14 @@
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-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"
>
Top Stocks
</h1>
</div>
<span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Uncover 'Strong Buy' stocks from 5-star Wall Street analysts
</span>
</div>
<!-- End Column -->
<!-- Start Column -->
<div
class="hidden sm:block 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-0">
<img
class="w-28 ml-6"
src={cloudFrontUrl + "/assets/wsb_diamond_hands_logo.png"}
alt="logo"
loading="lazy"
/>
</div>
</div>
<!-- End Column -->
</div>
<div class="mb-6 border-b-[3px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Top Strong Buy Stocks
</h1>
<p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
The "Strong Buy" stocks according to the best performing Wall
Street analysts.
</p>
</div>
<div
@ -331,11 +280,6 @@
</tbody>
</table>
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
@ -350,6 +294,10 @@
</div>
{/if}
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
@ -363,7 +311,7 @@
>
<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 🔥
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -383,7 +331,7 @@
>
<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">
Top Analyst 📊
Top Analyst
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -402,7 +350,7 @@
>
<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">
Top Shorted Stocks 🍋
Top Shorted Stocks
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>