AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layout

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-11 17:24:09 +02:00
parent ae1f00a82e
commit 74c337ea26
50 changed files with 231 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/routes/analysts/top-stocks/+page.svelte
View File

@ -69,9 +69,9 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
<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 breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li><a href="/analysts" class="text-gray-300">Analysts</a></li>
@ -79,13 +79,13 @@
</ul>
</div>
<div class="w-full max-w-4xl overflow-hidden m-auto mt-5">
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden max-w-4xl">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden w-full">
<main class="w-full">
<div class="w-full max-w-4xl 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="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 -->
@ -132,7 +132,7 @@
</div>
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 ">
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 ">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings.
</div>
@ -145,30 +145,30 @@
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead>
<tr class="bg-[#09090B]">
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
#
</th>
<th class="text-start bg-[#09090B] text-white text-sm font-semibold">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Symbol
</th>
<th class="hidden sm:table-cell text-start bg-[#09090B] text-white text-sm font-semibold">
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
Name
</th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Ratings Count
</th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Price Target
</th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Current Price
</th>
<th class="text-end bg-[#09090B] text-white text-sm font-semibold">
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Upside
</th>
<th class="text-white font-semibold text-end text-sm">
<th class="text-white font-semibold text-end text-[1rem]">
Market Cap
</th>
</tr>
@ -177,37 +177,32 @@
{#each analytRatingList as item, index}
<tr on:click={() => goto(`/stocks/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} cursor-pointer">
<td class="text-white text-sm font-medium text-white text-end">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-end">
{item?.rank}
</td>
<td class="text-sm text-start">
<div class="flex flex-col items-start w-32 sm:w-fit">
<span class="text-blue-400">{item?.ticker}</span>
<span class="text-white sm:hidden">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</span>
</div>
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap text-start">
{item?.ticker}
</td>
<td class="hidden sm:table-cell text-white text-sm text-white text-start">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-end text-sm font-medium text-white">
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{item?.counter}
</td>
<td class="text-end text-sm font-medium text-white">
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
${item?.priceTarget?.toFixed(2)}
</td>
<td class="text-end text-sm font-medium text-white">
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
${item?.price?.toFixed(2)}
</td>
<td class="text-end text-sm font-medium text-white">
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
{#if Number(item?.upside) >= 0}
<span class="text-[#37C97D]">{Number(item?.upside)?.toFixed(2)}%</span>
{:else}

6
src/routes/blog/+page.svelte
View File

@ -80,17 +80,17 @@ let allBlogPosts = data?.getAllBlogPost;
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40 ">
<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 breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">All Blog Post</li>
</ul>
</div>
<div class="w-full max-w-4xl 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="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 -->

4
src/routes/blog/article/[slug]/+page.svelte
View File

@ -35,9 +35,9 @@ const article = data?.getArticle;
</svelte:head>
<section class="w-full max-w-6xl m-auto pt-5 pb-60 min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
<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 breadcrumbs ml-4 sm:ml-0">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li><a href="/blog" class="text-gray-300">All Blog Post</a></li>

8
src/routes/contact/+page.svelte
View File

@ -34,15 +34,15 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
<!--
<div class="text-sm breadcrumbs ml-4">
<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">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Contact Us</li>
</ul>
</div>
-->
<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">

13
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -452,14 +452,13 @@ $: {
</script>
<body class="bg-[#09090B] pb-40">
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
<main class="grow">
<section>
<div class="flex flex-col">
<main class="grow w-full">
<section class="w-full">
<div class="w-full">
<div class="sm:flex sm:justify-start w-full">
<!--Start Mobile Navbar-->
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden ">
@ -543,11 +542,11 @@ $: {
<!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">
<div class="w-full max-w-3xl sm:max-w-6xl px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl">
<div class="pb-12 md:pb-20 w-full lg:max-w-2xl xl:max-w-3xl 2xl:max-w-5xl">
<div class="md:pr-6 lg:pr-10">

2
src/routes/crypto/[tickerID]/+page.svelte
View File

@ -695,7 +695,7 @@ afterUpdate(async () => {
<section class="bg-[#09090B] min-h-screen pb-40">
<div class="w-full max-w-5xl m-auto ">
<div class="w-full m-auto ">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">

2
src/routes/dividends-calendar/+page.svelte
View File

@ -315,7 +315,7 @@ $: {
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<!-- Cards -->

17
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -479,14 +479,13 @@ $: {
<body class="bg-[#09090B] pb-40">
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
<main class="grow">
<section>
<div class="flex flex-col">
<main class="grow w-full">
<section class="w-full">
<div class="w-full">
<div class="sm:flex sm:justify-start w-full">
<!--Start Mobile Navbar-->
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden">
@ -569,11 +568,11 @@ $: {
<!--End Mobile Navbar-->
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">
<div class="w-full max-w-3xl sm:max-w-6xl px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-5xl">
<div class="pb-12 md:pb-20 w-full lg:max-w-2xl xl:max-w-3xl 2xl:max-w-5xl">
<div class="md:pr-6 lg:pr-10">
@ -756,8 +755,8 @@ $: {
</div>
</div>
<aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10">
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
<div class="sm:pl-10">
<!--Start Company Info -->

2
src/routes/etf/[tickerID]/+page.svelte
View File

@ -744,7 +744,7 @@ async function initializePrice() {
<section class="bg-[#09090B] min-h-screen pb-40">
<div class="w-full max-w-5xl m-auto ">
<div class="w-full m-auto ">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">

8
src/routes/heatmaps/+page.svelte
View File

@ -305,9 +305,9 @@ $: {
<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pt-5 pb-60">
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<div class="w-full max-w-5xl 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="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 -->
@ -355,7 +355,7 @@ $: {
<body class="w-full max-w-5xl overflow-hidden m-auto">
<body class="w-full overflow-hidden m-auto">
{#if isLoaded}
@ -371,7 +371,7 @@ $: {
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4 ">
<div class="w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4 ">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
<span>
Today, <label on:click={() => sectorSelector(lowestAvgCategory)} class="cursor-pointer text-blue-400 sm:hover:text-white">{lowestAvgCategory}</label> took the lead as the {displayIndex} largest loser, marking a average return of <span class="text-white font-medium">{lowestAvg?.toFixed(2)}%</span>,

9
src/routes/imprint/+page.svelte
View File

@ -28,16 +28,15 @@
</svelte:head>
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
<!--
<div class="text-sm breadcrumbs ml-4">
<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">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Imprint</li>
</ul>
</div>
-->
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-5 sm:mb-10">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">

10
src/routes/list/+layout.svelte
View File

@ -2,8 +2,6 @@
import { numberOfUnreadNotification } from '$lib/store';
import { page } from '$app/stores';
import logo from '$lib/images/list_logo.png';
import { fly } from 'svelte/transition';
export let data;
@ -193,9 +191,9 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-4 pb-40">
<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 breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li><a href="/list/" class="text-gray-300">Lists</a></li>
@ -211,7 +209,7 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<div class="hidden sm:block w-full max-w-4xl m-auto bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-8">
<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 -->
@ -258,7 +256,7 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
<div class="mt-10 sm:mt-0 w-full max-w-4xl m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
<div class="mt-10 sm:mt-0 w-full m-auto mb-10 bg-[#09090B] pl-3 pr-3 overflow-hidden">
<!--Start Top Winners/Losers-->

2
src/routes/list/amex-stocks/+page.svelte
View File

@ -80,7 +80,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/basic-materials-sector/+page.svelte
View File

@ -157,7 +157,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

35
src/routes/list/bitcoin-etfs/+page.svelte
View File

@ -26,10 +26,10 @@ $: {
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A list of all Bitcoin ETFs available for trading on the US stock market, offering investors exposure to the cryptocurrency's price.
@ -57,22 +57,20 @@ $: {
<!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-sm sm:text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-sm sm:text-[0.95rem]">Fund Name</th>
<th class="text-slate-200 sm:font-bold text-end sm:text-start text-sm sm:text-[0.95rem]">Assets</th>
<th class="text-slate-200 sm:font-bold text-sm sm:text-[0.95rem] text-end">Expense Ratio</th>
<th class="text-white font-semibold text-[1rem]">Symbol</th>
<th class="text-white font-semibold text-[1rem] whitespace-nowrap">Fund Name</th>
<th class="text-white font-semibold text-end sm:text-start text-[1rem]">Assets</th>
<th class="text-white font-semibold text-[1rem] text-end whitespace-nowrap">Expense Ratio</th>
</tr>
</thead>
<tbody>
@ -81,26 +79,21 @@ $: {
<tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 text-xs sm:text-md font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end sm:text-start border-b-[#09090B]">
<td class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.totalAssets, true)}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.expenseRatio}%
</td>

2
src/routes/list/canadian-stocks-us/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/chinese-stocks-us/+page.svelte
View File

@ -80,7 +80,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/communication-services-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/consumer-cyclical-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/consumer-defensive-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/delisted-stocks/+page.svelte
View File

@ -71,7 +71,7 @@ $: {
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/dow-jones-stocks/+page.svelte
View File

@ -82,7 +82,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/energy-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

10
src/routes/list/financial-sector/+page.svelte
View File

@ -42,17 +42,17 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
</div>
<div class="stats stats-horizontal no-scrollbar bg-[#09090B] shadow w-full rounded-lg">
<div class="grid grid-cols-2 sm:grid-cols-3">
<div class="grid grid-cols-2 sm:grid-cols-4">
<div class="stat">
<div class="flex flex-row items-center">
@ -152,12 +152,12 @@
<!-- Page wrapper -->
<div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden">
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/german-stocks-us/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/healthcare-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">

2
src/routes/list/indian-stocks-us/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/industrials-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/israeli-stocks-us/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/japanese-stocks-us/+page.svelte
View File

@ -80,7 +80,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

45
src/routes/list/large-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
Large-cap stocks have a market capitalizations ranging between $10 billion to $200 billion USD, while additional categories include
<a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap
@ -97,19 +97,18 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -118,46 +117,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>

2
src/routes/list/magnificent-seven/+page.svelte
View File

@ -159,7 +159,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

48
src/routes/list/mega-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
Mega-cap stocks have a market capitalizations ranging above $200 billion USD, while additional categories include
<a href="/list/large-cap-stocks" class="text-blue-400 hover:text-white">
Large-Cap
@ -97,19 +97,19 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -118,46 +118,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -175,6 +167,8 @@
{/each}
</tbody>
</table>
</div>
<InfiniteLoading on:infinite={infiniteHandler} />

45
src/routes/list/micro-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
Micro-cap stocks have a market capitalizations ranging between $50 and $300 million USD, while additional categories include
<a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap
@ -97,19 +97,19 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -118,46 +118,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -175,7 +167,6 @@
{/each}
</tbody>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />

44
src/routes/list/mid-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
Mid-cap stocks have a market capitalizations ranging from $2 billion to $10 billion USD, while additional categories include
<a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap
@ -96,19 +96,19 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -117,46 +117,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>

46
src/routes/list/nano-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
Nano-cap stocks have a market capitalizations under $50 million USD, while additional categories include
<a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap
@ -94,19 +94,19 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -115,46 +115,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>
@ -171,7 +163,7 @@
{/each}
</tbody>
</table>
</table>
<InfiniteLoading on:infinite={infiniteHandler} />

2
src/routes/list/nasdaq-100-stocks/+page.svelte
View File

@ -80,7 +80,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/nasdaq-stocks/+page.svelte
View File

@ -81,7 +81,7 @@ $: {
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/nyse-stocks/+page.svelte
View File

@ -82,7 +82,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/real-estate-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

44
src/routes/list/small-cap-stocks/+page.svelte
View File

@ -42,11 +42,11 @@
}
</script>
<section class="w-full max-w-4xl overflow-hidden m-auto">
<section class="w-full overflow-hidden m-auto">
<div class="w-full max-w-4xl m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
<div class="w-full m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
Small-cap stocks have a market capitalizations ranging between $300 million and $2 billion USD, while additional categories include
<a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
Mega-Cap
@ -97,19 +97,19 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead>
<tr class="border border-slate-800">
<th class="text-slate-200 hidden sm:table-cell sm:font-bold text-[0.95rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[0.95rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold hidden sm:table-cell text-center text-[0.95rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[0.95rem] text-end">Price</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Symbol</th>
<th class="text-slate-200 sm:font-bold text-[1rem]">Company</th>
<th class="text-slate-200 sm:font-bold text-end text-[1rem]">Market Cap</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Revenue</th>
<th class="text-slate-200 sm:font-bold text-center text-[1rem]">Profits</th>
<th class="text-slate-200 sm:font-bold text-[1rem] text-end">Price</th>
</tr>
</thead>
<tbody>
@ -118,46 +118,38 @@
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="hidden sm:table-cell text-blue-400 font-medium border-b-[#09090B]">
<td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.symbol}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<span class="hidden sm:inline-block text-white font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
<div class="sm:hidden flex flex-row">
<div class="flex flex-col">
<span class="text-blue-400 font-medium">{item?.symbol}</span>
<span class="text-gray-200 font-medium">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
</div>
</div>
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
</td>
<td class="text-white font-medium text-end border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
{abbreviateNumber(item?.marketCap,true)}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'}
</td>
<td class="text-white font-medium text-center hidden sm:table-cell border-b-[#09090B]">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-center border-b-[#09090B]">
{item?.netIncome !== null ? abbreviateNumber(item?.netIncome,true) : '-'}
</td>
<td class="text-gray-200 border-b-[#09090B]">
<td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
<div class="flex flex-row justify-end items-center">
<div class="flex flex-col">
<span class="text-white font-semibold text-md ml-auto">${item.price?.toFixed(2)}</span>
<div class="flex flex-row mt-0.5 ml-auto">
{#if item.changesPercentage >=0}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#10DB06] text-xs font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
<span class="text-[#10DB06] font-medium">+{item.changesPercentage?.toFixed(2)}%</span>
{:else}
<svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
<span class="text-[#FF2F1F] text-xs font-medium">{item.changesPercentage?.toFixed(2)}% </span>
<span class="text-[#FF2F1F] font-medium">{item.changesPercentage?.toFixed(2)}% </span>
{/if}
</div>
</div>

2
src/routes/list/sp-500-stocks/+page.svelte
View File

@ -82,7 +82,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/technology-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/uk-stocks-us/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/utilities-sector/+page.svelte
View File

@ -158,7 +158,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

2
src/routes/list/xetra-stocks/+page.svelte
View File

@ -81,7 +81,7 @@
<!-- Content area -->
<div class="relative flex flex-col flex-1 overflow-hidden">
<div class="w-full overflow-x-scroll">

8
src/routes/privacy-policy/+page.svelte
View File

@ -25,15 +25,15 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
<!--
<div class="text-sm breadcrumbs ml-4">
<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">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Privacy Policy</li>
</ul>
</div>
-->
<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">

8
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -396,9 +396,9 @@ $: isScrolled = y > 0;
<svelte:window bind:scrollY={y}/>
<body class="bg-[#09090B] pb-40 lg:max-w-screen-2xl">
<body class="xl:pl-10 bg-[#09090B] pb-40 w-full max-w-screen min-h-screen sm:max-w-6xl xl:max-w-screen-2xl overflow-hidden">
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden w-full supports-[overflow:clip]:overflow-clip pb-40">
<div class="flex flex-col">
<main class="grow w-full">
<section class="w-full">
<div class="w-full">
@ -487,11 +487,11 @@ $: isScrolled = y > 0;
<!--End Mobile Navbar-->
<div class="w-full xl:w-fit px-3">
<div class="w-full max-w-3xl sm:max-w-6xl px-3">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
<div class="pb-12 md:pb-20 w-full lg:max-w-2xl xl:max-w-3xl 2xl:max-w-5xl">
<div class="md:pr-6 lg:pr-10">

4
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -702,12 +702,12 @@ function changeChartType() {
<section class="bg-[#09090B] min-h-screen pb-40 overflow-hidden">
<div class="w-full max-w-5xl m-auto overflow-hidden">
<div class="w-full m-auto overflow-hidden">
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
<!-- Main content -->
<div class="pb-12 md:pb-20 w-full max-w-5xl sm:pr-6 xl:pr-0">
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
<div class="xl:pr-10">

8
src/routes/terms-of-use/+page.svelte
View File

@ -26,16 +26,16 @@
<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
<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 breadcrumbs ml-4">
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Terms of Use</li>
</ul>
</div>
-->
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-10">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10">