565 lines
39 KiB
Svelte
565 lines
39 KiB
Svelte
<script>
|
|
import { numberOfUnreadNotification, globalForm } from '$lib/store';
|
|
import { openLemonSqueezyUrl } from '$lib/lemonsqueezy';
|
|
import { goto } from '$app/navigation';
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
//import proTierLogo from "$lib/images/pro_tier_logo.png";
|
|
|
|
export let data;
|
|
let discordURL = import.meta.env.VITE_DISCORD_URL;
|
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
|
|
|
let mode = false;
|
|
const emailAddress = 'support@stocknear.com';
|
|
|
|
function toggleMode()
|
|
{
|
|
mode = !mode;
|
|
}
|
|
|
|
|
|
|
|
let LoginPopup;
|
|
|
|
|
|
onMount(async () => {
|
|
|
|
if(!data?.user)
|
|
{
|
|
LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
async function purchasePlan() {
|
|
if(data?.user) {
|
|
let subId = '';
|
|
|
|
if(mode) {
|
|
subId = import.meta.env.VITE_LEMON_SQUEEZY_ANNUAL_ID
|
|
}
|
|
else {
|
|
subId = import.meta.env.VITE_LEMON_SQUEEZY_MONTHLY_ID
|
|
}
|
|
const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
const checkoutUrl =
|
|
`https://stocknear.lemonsqueezy.com/checkout/buy/${subId}?` +
|
|
new URLSearchParams({
|
|
embed: "1",
|
|
dark: isDarkMode ? "1" : "0",
|
|
"checkout[email]": data?.user?.email,
|
|
"checkout[name]": data?.user?.username,
|
|
"checkout[custom][userId]": data?.user?.id,
|
|
}).toString();
|
|
|
|
openLemonSqueezyUrl(checkoutUrl);
|
|
//goto(`https://stocknear.lemonsqueezy.com/checkout/buy/${subId}`)
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<svelte:head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>
|
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Pricing · stocknear
|
|
</title>
|
|
<meta name="description" content={`Get unlimited access to all of our data and tools, including full financial history, full ETF holdings, and more.`} />
|
|
|
|
<!-- Other meta tags -->
|
|
<meta property="og:title" content={`Pricing · stocknear`}/>
|
|
<meta property="og:description" content={`Get unlimited access to all of our data and tools, including full financial history, full ETF holdings, and more.`} />
|
|
<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 -->
|
|
|
|
<!-- Twitter specific meta tags -->
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:title" content={`Pricing · stocknear`}/>
|
|
<meta name="twitter:description" content={`Get unlimited access to all of our data and tools, including full financial history, full ETF holdings, and more.`} />
|
|
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
<!-- Add more Twitter meta tags as needed -->
|
|
|
|
|
|
<script>window.lemonSqueezyAffiliateConfig = { store: "stocknear" };</script>
|
|
<script src="https://lmsqueezy.com/affiliate.js" defer></script>
|
|
|
|
|
|
</svelte:head>
|
|
|
|
|
|
|
|
|
|
<section class="bg-[#0F0F0F] min-h-screen mb-40 max-w-4xl w-full pt-10 pb-40 m-auto">
|
|
<div class="px-3 sm:px-0">
|
|
<div class="mx-auto text-center mb-8 ">
|
|
|
|
|
|
<h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-200/60 via-slate-200 to-slate-200/60 pb-4">
|
|
Flexible plans and features
|
|
</h1>
|
|
<div class="w-full flex justify-center items-center h-16 bg-[#202020] rounded-2xl">
|
|
<p class="font-medium font-serif text-center w-3/4 sm:w-full text-white text-lg sm:text-xl italic">
|
|
Simple pricing. No hidden fees. Cancel anytime.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-row items-center justify-center mt-6 pb-5">
|
|
<span class="text-sm font-medium text-white text-opacity-[0.6] mr-3">
|
|
Pay Monthly
|
|
</span>
|
|
|
|
<label class="inline-flex cursor-pointer relative ">
|
|
|
|
<input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer">
|
|
<div class="w-14 h-7 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[0.40rem] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-[#1563F9] {mode === false ? 'after:translate-x-[-0.2rem]' : ''} "></div>
|
|
</label>
|
|
|
|
<div class="ml-3 -mb-4 flex flex-col items-start">
|
|
<span class="text-sm font-medium text-white text-opacity-[0.6]">
|
|
Pay Yearly
|
|
</span>
|
|
<span class="text-[#10DB06] text-sm font-bold text-opacity-[0.8]">
|
|
Save up 25%
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row items-center gap-10 sm:gap-5 w-full mt-10 sm:mt-20">
|
|
<!-- Pricing Card -->
|
|
<div class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#202020] rounded-[30px]">
|
|
|
|
|
|
<div class="flex flex-row items-center justify-start items-center mt-2">
|
|
<img src={cloudFrontUrl+"/assets/free_tier_logo.png"} class="w-16 transform ease-in-out duration-300" loading="lazy" alt="free tier" />
|
|
<h2 class="m-auto sm:ml-8 text-4xl font-bold text-white">
|
|
Free Tier
|
|
</h2>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex flex-col mt-8 mb-6">
|
|
|
|
<div class="flex flex-row items-center">
|
|
<span class="mr-2 text-4xl font-bold">$0</span>
|
|
<span class="text-gray-300 text-xl">/month</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ol class="mb-8 space-y-4 text-left">
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Stock Screener Strategy</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Financial history.</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Hedge Funds Portfolio.</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Wall Street Analysts Ratings</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Watchlist Strategy</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Price Alerts</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="orange" d="M12 17q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
|
|
<span class="text-white text-sm font-medium">Limited Options Data</span>
|
|
</li>
|
|
</ol>
|
|
|
|
|
|
|
|
<div class="divider"></div>
|
|
<div class="m-auto w-full text-white font-medium text-sm mb-6">
|
|
+ Limited feature updates
|
|
</div>
|
|
|
|
{#if data?.user?.tier === 'Free'}
|
|
<a class="btn text-white bg-[#fff] bg-opacity-[0.2] transition duration-150 ease-in-out group" href="#">
|
|
Active Plan
|
|
</a>
|
|
{:else if !data?.user}
|
|
<label for="userLogin" class="btn text-white bg-blue-700 hover:bg-blue-600 transition duration-150 ease-in-out group">
|
|
Get Sign In
|
|
<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>
|
|
</label>
|
|
{/if}
|
|
|
|
|
|
</div>
|
|
<!--End Pricing Card-->
|
|
|
|
|
|
<!-- Pricing Card -->
|
|
<div class="sm:order-2 light-box-1 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-[#FF2F1F] w-full text-center text-white bg-[#202020]">
|
|
<div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right"><span class="text-white">Discount</span></div>
|
|
|
|
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row items-center bg-red-600 p-2">
|
|
<svg class="w-6 h-6 mr-2" fill="#D6D6DC" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="#E02424"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>star-solid</title> <g id="Layer_2" data-name="Layer 2"> <g id="invisible_box" data-name="invisible box"> <rect width="48" height="48" fill="none"></rect> </g> <g id="icons_Q2" data-name="icons Q2"> <path d="M24,3a2.1,2.1,0,0,0-1.8,1.1L16.5,15.7,3.7,17.5A2.1,2.1,0,0,0,2.6,21l9.2,8.9L9.7,42.7A2,2,0,0,0,11.6,45l1-.2,11.4-6,11.4,6,1,.2a2,2,0,0,0,1.9-2.3L36.2,29.9,45.4,21a2.1,2.1,0,0,0-1.1-3.5L31.5,15.7,25.8,4.1A2.1,2.1,0,0,0,24,3Z"></path> </g> </g> </g></svg>
|
|
<span class="text-white text-md font-medium">
|
|
Best Value
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-row justify-start items-center mt-10 mb-3">
|
|
<img src={cloudFrontUrl+"/assets/pro_tier_logo.png"} class="w-28 transform ease-in-out duration-300" style="transform: rotate(23deg);" loading="lazy" alt="pro tier" />
|
|
<h2 class="text-4xl font-bold text-white">
|
|
Pro Tier
|
|
</h2>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex flex-col mb-6 items-center">
|
|
|
|
<div class="flex flex-row items-center">
|
|
<span class="mr-2 text-4xl font-bold">{mode ? '$7.50' : '$9.99'}</span>
|
|
<span class="text-white text-xl">/month</span>
|
|
</div>
|
|
{#if mode}
|
|
<div class="flex flex-row items-center justify-start mt-2">
|
|
<span class="text-white text-sm">
|
|
Billed $90 annually
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
<div class="flex items-center mt-2 text-[1rem] text-center">
|
|
only ${mode ? (7.5/4)?.toFixed(2) : (9.99/4)?.toFixed(2)} / week, less than a
|
|
{#if mode}
|
|
<svg fill="#000000" class="w-7 h-7 inline-block ml-2" viewBox="0 0 64 64" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g transform="matrix(1,0,0,1,-192,-384)"> <g id="Icon"> <g transform="matrix(1.88491,0,0,2.02804,-563.297,366.103)"> <path d="M406.242,19.317L405.521,17.726C405.376,17.406 405.302,17.063 405.302,16.716L405.302,15.133C405.302,14.861 405.064,14.64 404.771,14.64C404.478,14.64 404.241,14.861 404.241,15.133C404.241,15.133 404.241,16.063 404.241,16.716C404.241,17.194 404.344,17.668 404.543,18.109L405.265,19.7C405.378,19.951 405.69,20.069 405.959,19.963C406.229,19.857 406.356,19.568 406.242,19.317Z" style="fill:#4a2401;"></path> </g> <g transform="matrix(2.02492,0,6.74129e-17,0.517887,-103.544,366.884)"> <path d="M150.985,122.829C150.985,122.829 151.287,121.782 151.669,120.456C152.571,117.323 153.916,117.152 154.868,120.048C154.953,120.307 155.039,120.567 155.123,120.825C156.027,123.575 157.294,123.575 158.198,120.825C158.318,120.46 158.439,120.091 158.559,119.726C159.463,116.976 160.729,116.976 161.633,119.726C161.753,120.091 161.874,120.46 161.994,120.825C162.898,123.575 164.164,123.575 165.068,120.825C165.188,120.46 165.31,120.091 165.43,119.726C166.334,116.976 167.6,116.976 168.504,119.726C168.613,120.058 168.723,120.394 168.833,120.727C169.752,123.522 171.042,123.471 171.947,120.603C172.351,119.321 172.676,118.29 172.676,118.29" style="stroke:black;stroke-width:1.35px;"></path> </g> <path d="M252.15,423.893C252.15,423.341 251.702,422.893 251.15,422.893L197.15,422.893C196.598,422.893 196.15,423.341 196.15,423.893L196.15,434.452C196.15,435.005 196.598,435.452 197.15,435.452L251.15,435.452C251.702,435.452 252.15,435.005 252.15,434.452L252.15,423.893Z" style="fill:#f8ac3a;"></path> <path d="M248,423.081L248,431.418C248,431.971 247.552,432.418 247,432.418L196.15,432.23L196.15,434.452C196.15,435.005 196.598,435.452 197.15,435.452L251.15,435.452C251.702,435.452 252.15,435.005 252.15,434.452L252.15,423.893C252.15,423.341 251.702,422.893 251.15,422.893L248,423.081Z" style="fill:#f39404;"></path> <path d="M251.15,424.893C251.702,424.893 252.15,424.446 252.15,423.893L252.15,417.973C252.15,417.42 251.702,416.973 251.15,416.973L197.15,416.973C196.598,416.973 196.15,417.42 196.15,417.973L196.15,423.893C196.15,424.446 196.598,424.893 197.15,424.893L251.15,424.893Z" style="fill:#633001;"></path> <path d="M247.785,416.973L247.785,422.393C247.785,422.946 247.337,423.393 246.785,423.393L196.15,423.393L196.15,423.893C196.15,424.446 196.598,424.893 197.15,424.893L251.15,424.893C251.702,424.893 252.15,424.446 252.15,423.893L252.15,417.973C252.15,417.42 251.702,416.973 251.15,416.973L247.785,416.973Z" style="fill:#4a2401;"></path> <path d="M196.396,417.394C196.138,417.69 196.078,418.109 196.24,418.466C196.403,418.822 196.76,419.051 197.152,419.05L251.152,418.972C251.63,418.971 252.041,418.631 252.132,418.161C252.223,417.691 251.968,417.223 251.524,417.044L211.575,400.968C211.18,400.809 210.727,400.918 210.447,401.239L196.396,417.394Z" style="fill:#f8ac3a;"></path> <path d="M250.284,416.545C250.136,416.92 249.771,417.176 249.356,417.176L196.518,417.253L196.396,417.394C196.138,417.69 196.078,418.109 196.24,418.466C196.403,418.822 196.76,419.051 197.152,419.05L251.152,418.972C251.63,418.971 252.041,418.631 252.132,418.161C252.223,417.691 251.968,417.223 251.524,417.044L250.284,416.545Z" style="fill:#f39404;"></path> <g transform="matrix(-0.772662,0.119061,0.399687,-0.671887,523.886,376.884)"> <path d="M409.114,24.501L411.281,26.668C412.109,27.495 413.098,27.85 413.488,27.46C413.878,27.07 413.523,26.081 412.696,25.254L410.528,23.086C409.701,22.259 408.712,21.904 408.322,22.294C407.931,22.684 408.286,23.673 409.114,24.501Z" style="fill:#633001;"></path> </g> <g transform="matrix(-0.456347,-0.634767,0.780068,0.0517307,390.464,672.695)"> <path d="M409.114,24.501L411.281,26.668C412.109,27.495 413.098,27.85 413.488,27.46C413.878,27.07 413.523,26.081 412.696,25.254L410.528,23.086C409.701,22.259 408.712,21.904 408.322,22.294C407.931,22.684 408.286,23.673 409.114,24.501Z" style="fill:#633001;"></path> </g> <g transform="matrix(0.684962,-0.289867,-0.289867,0.733294,-50.9722,516.046)"> <path d="M420.323,27.794L422.323,29.634C423.294,30.528 424.386,30.923 424.759,30.517C425.133,30.111 424.648,29.056 423.677,28.162L421.677,26.322C420.706,25.429 419.614,25.033 419.241,25.439C418.867,25.845 419.352,26.901 420.323,27.794Z" style="fill:#633001;"></path> </g> <g transform="matrix(0.614789,-0.531458,0.159337,0.807329,-40.7207,606.391)"> <path d="M405.432,29.315L407.302,31.139C407.982,31.802 408.847,32.019 409.232,31.624C409.618,31.229 409.378,30.37 408.698,29.707L406.828,27.883C406.148,27.22 405.283,27.003 404.898,27.398C404.512,27.793 404.752,28.652 405.432,29.315Z" style="fill:#633001;"></path> </g> <path d="M205.515,402.587C202.265,402.587 199.628,405.22 199.628,408.461C199.628,411.702 202.265,414.334 205.515,414.334C208.765,414.334 211.402,411.702 211.402,408.461C211.402,405.22 208.765,402.587 205.515,402.587Z" style="fill:#f0682d;"></path> </g> </g> </g></svg>
|
|
{:else}
|
|
<svg class="w-6 h-6 inline-block ml-2" viewBox="0 0 47.5 47.5" id="svg2" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs id="defs6"> <clipPath clipPathUnits="userSpaceOnUse" id="clipPath16"> <path d="M 0,38 38,38 38,0 0,0 0,38 Z" id="path18"></path> </clipPath> <clipPath clipPathUnits="userSpaceOnUse" id="clipPath40"> <path d="M 0,38 38,38 38,0 0,0 0,38 Z" id="path42"></path> </clipPath> </defs> <g id="g10" transform="matrix(1.25,0,0,-1.25,0,47.5)"> <g id="g12"> <g clip-path="url(#clipPath16)" id="g14"> <g id="g20" transform="translate(37,11)"> <path d="m 0,0 c 0,-5.522 -8.059,-10 -18,-10 -9.941,0 -18,4.478 -18,10 0,5.522 8.059,10 18,10 C -8.059,10 0,5.522 0,0" id="path22" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> <g id="g24" transform="translate(37,13)"> <path d="m 0,0 c 0,-5.522 -8.059,-10 -18,-10 -9.941,0 -18,4.478 -18,10 0,5.522 8.059,10 18,10 C -8.059,10 0,5.522 0,0" id="path26" style="fill:#ccd6dd;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> <g id="g28" transform="translate(19,6)"> <path d="m 0,0 c -14.958,0 -17,15 -17,19 l 34,0 C 17,17 15.042,0 0,0" id="path30" style="fill:#f5f8fa;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> <g id="g32" transform="translate(32.8818,30.0483)"> <path d="M 0,0 C -1.357,0.938 -3.103,1.694 -5.121,2.25 -3.246,2.826 -0.57,2.559 0,0 M 2.503,-2.692 C 4.945,7.43 -7.278,5.014 -9.701,3.106 c -1.34,0.149 -2.736,0.234 -4.181,0.234 -9.389,0 -17,-3.228 -17,-8.444 0,-5.216 7.611,-9.444 17,-9.444 9.389,0 17,4.228 17,9.444 0,0.862 -0.225,1.664 -0.615,2.412" id="path34" style="fill:#ccd6dd;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> </g> </g> <g id="g36"> <g clip-path="url(#clipPath40)" id="g38"> <g id="g44" transform="translate(34,24)"> <path d="m 0,0 c 0,-3.866 -6.716,-7 -15,-7 -8.284,0 -15,3.134 -15,7 0,3.866 6.716,7 15,7 C -6.716,7 0,3.866 0,0" id="path46" style="fill:#8a4b38;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> <g id="g48" transform="translate(21,20)"> <path d="m 0,0 c -0.256,0 -0.512,0.098 -0.707,0.293 -2.337,2.337 -2.376,4.885 -0.125,8.262 0.739,1.109 0.9,2.245 0.478,3.377 -0.461,1.235 -1.438,1.996 -1.731,2.076 -0.553,0 -0.958,0.444 -0.958,0.996 C -3.043,15.557 -2.552,16 -2,16 -1.003,16 0.395,14.847 1.183,13.375 2.217,11.442 2.093,9.336 0.832,7.445 -1.129,4.503 -0.699,3.113 0.707,1.707 1.098,1.316 1.098,0.684 0.707,0.293 0.512,0.098 0.256,0 0,0" id="path50" style="fill:#d99e82;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> <g id="g52" transform="translate(15,22)"> <path d="m 0,0 c -0.256,0 -0.512,0.098 -0.707,0.293 -2.337,2.337 -2.376,4.885 -0.125,8.262 0.727,1.091 0.894,2.082 0.494,2.947 -0.444,0.961 -1.431,1.469 -1.684,1.499 -0.552,0 -0.989,0.447 -0.989,0.999 0,0.553 0.459,1 1.011,1 0.997,0 2.584,-0.974 3.36,-2.423 C 1.841,11.678 2.413,9.816 0.832,7.445 -1.129,4.503 -0.699,3.113 0.707,1.707 1.098,1.316 1.098,0.684 0.707,0.293 0.512,0.098 0.256,0 0,0" id="path54" style="fill:#d99e82;fill-opacity:1;fill-rule:nonzero;stroke:none"></path> </g> </g> </g> </g> </g></svg>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- List -->
|
|
|
|
<ol class="mb-8 space-y-4 text-left">
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Stock Screener Strategy</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Financial history</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Hedge Funds Portfolio</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Wall Street Analysts Ratings</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Watchlist Strategy</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Price Alerts</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3 ">
|
|
<!-- Icon -->
|
|
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><mask id="ipSSuccess0"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"/><path stroke="#0F0F0F" d="m17 24l5 5l10-10"/></g></mask><path fill="#10db06" d="M0 0h48v48H0z" mask="url(#ipSSuccess0)"/></svg>
|
|
<span class="text-white text-sm font-medium">Unlimited Options Data</span>
|
|
</li>
|
|
</ol>
|
|
<div class="divider"></div>
|
|
<div class="m-auto w-full text-white font-medium text-sm mb-6">
|
|
+ Unlimited feature updates
|
|
</div>
|
|
{#if data?.user?.tier === 'Pro'}
|
|
<a class="btn text-white bg-[#fff] bg-opacity-[0.2] transition duration-150 ease-in-out group" href="#">
|
|
Active Plan
|
|
</a>
|
|
{:else}
|
|
<label for={!data?.user ? 'userLogin' : ''} on:click={purchasePlan} class="btn text-white bg-blue-700 hover:bg-blue-600 transition duration-150 ease-in-out group">
|
|
Get 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>
|
|
</label>
|
|
{/if}
|
|
|
|
<div class="m-auto w-full text-white font-medium text-[¹rem] mt-4">
|
|
30 Day Money Back Guarantee
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!--End Pricing Card-->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--Start FAQ-->
|
|
<div class="mt-16 mb-10 m-auto overflow-hidden">
|
|
|
|
<div class="m-auto">
|
|
<div class="mt-10 mb-5 m-auto">
|
|
<h2 class="text-4xl w-full font-bold bg-clip-text text-center text-transparent bg-gradient-to-r from-slate-200/60 via-slate-200 to-slate-200/60 pb-4">
|
|
Still have questions ?
|
|
</h2>
|
|
<h3 class="text-lg m-auto font-bold bg-clip-text text-center text-transparent bg-gradient-to-r from-slate-200/60 via-slate-200 to-slate-200/60 pb-4">
|
|
We have (almost) all the answers
|
|
</h3>
|
|
</div>
|
|
|
|
|
|
|
|
<!--Start-Table-Content-->
|
|
<div class="mt-10 ">
|
|
<div class="bg-[#141414] bg-opacity-80 text-white rounded-2xl">
|
|
<div class="p-4" style="margin-bottom: -20px">
|
|
<!--Row Starts-->
|
|
<!--
|
|
<div tabindex="0" class="collapse collapse-arrow">
|
|
<div class="collapse-title text-lg">
|
|
Will I get charged during the free trial?
|
|
</div>
|
|
<div class="collapse-content">
|
|
<label class="text-md text-[#A6ADBB]">
|
|
No, after your 7-day trial, your subscription will begin and you'll be charged. You have full control to cancel your subscription anytime through your account settings.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<hr class="border-gray-800"/>
|
|
-->
|
|
|
|
<details class="collapse collapse-arrow bg-[#131313]">
|
|
<summary class="collapse-title text-lg font-semibold">Is there a free trial?</summary>
|
|
<div class="collapse-content">
|
|
<p>While we don't offer a free trial, we provide a 30-day grace period from the date of your first payment. If you're unsatisfied, you can request a full refund within this period.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="border-gray-800"/>
|
|
<details class="collapse collapse-arrow bg-[#131313]">
|
|
<summary class="collapse-title text-lg font-semibold">What is your refund policy?</summary>
|
|
<div class="collapse-content">
|
|
<p>We offer a 30 day money back guarantee, no questions asked. Just send an email to <a href={`mailto:${emailAddress}`} class="text-blue-400 underline">{emailAddress}</a> and you will get a full refund.</p>
|
|
</div>
|
|
</details>
|
|
|
|
|
|
<hr class="border-gray-800"/>
|
|
<!--row 2 -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<details class="collapse collapse-arrow bg-[#131313]">
|
|
<summary class="collapse-title text-lg font-semibold">How to get support?</summary>
|
|
<div class="collapse-content">
|
|
<p>
|
|
You can send an email directly to <a href={`mailto:${emailAddress}`} class="text-blue-400 underline">{emailAddress}</a>.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
|
|
|
|
<hr class="border-gray-800"/>
|
|
|
|
<details class="collapse collapse-arrow bg-[#131313]">
|
|
<summary class="collapse-title text-lg font-semibold">Can I cancel at any time?</summary>
|
|
<div class="collapse-content">
|
|
<p>
|
|
Of course. There is a "Cancel Subscription" button in your account area that you get access to after signing up. You can also send us a message and we will cancel for you.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
<hr class="border-gray-800"/>
|
|
|
|
<!--Row Ends-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!--End FAQ-->
|
|
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!--Start Login Modal-->
|
|
{#if LoginPopup}
|
|
<LoginPopup form={$globalForm}/>
|
|
{/if}
|
|
<!--End Login Modal-->
|
|
|
|
|
|
|
|
<style lang='scss'>
|
|
|
|
@import url(https://fonts.googleapis.com/css?family=Lato:700);
|
|
@import url(https://fonts.googleapis.com/css?family=Lato:700);
|
|
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
/* common */
|
|
.ribbon {
|
|
width: 100px; /* Adjusted width for mobile */
|
|
height: 100px; /* Adjusted height for mobile */
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.ribbon::before,
|
|
.ribbon::after {
|
|
position: absolute;
|
|
z-index: -1;
|
|
content: '';
|
|
display: block;
|
|
border: 3px solid #E1341E; /* Reduced border thickness for mobile */
|
|
}
|
|
.ribbon span {
|
|
position: absolute;
|
|
display: block;
|
|
width: 150px; /* Adjusted width for mobile */
|
|
padding: 10px 0; /* Reduced padding for mobile */
|
|
background-color: #E1341E;
|
|
box: 0 3px 6px rgba(0,0,0,.6); /* Reduced box for mobile */
|
|
color: #fff;
|
|
font: 700 10px/1 'Lato', sans-serif; /* Reduced font size for mobile */
|
|
text-transform: normalcase;
|
|
text-align: center;
|
|
}
|
|
|
|
/* top right*/
|
|
.ribbon-top-right {
|
|
top: -5px; /* Adjusted positioning for mobile */
|
|
right: -5px; /* Adjusted positioning for mobile */
|
|
}
|
|
.ribbon-top-right::before,
|
|
.ribbon-top-right::after {
|
|
border-top-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
.ribbon-top-right::before {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.ribbon-top-right::after {
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.ribbon-top-right span {
|
|
left: -15px; /* Adjusted positioning for mobile */
|
|
top: 20px; /* Adjusted positioning for mobile */
|
|
transform: rotate(45deg);
|
|
font-size: 0.97rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.light-box-1 {
|
|
--border-size: 1px;
|
|
--border-angle: 0turn;
|
|
--border-radius: 30px; /* Added border radius */
|
|
|
|
background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
|
|
background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
border-radius: var(--border-radius); /* Added border radius */
|
|
|
|
animation: bg-spin 5s linear infinite;
|
|
}
|
|
|
|
@keyframes bg-spin {
|
|
to {
|
|
--border-angle: 1turn;
|
|
}
|
|
}
|
|
|
|
@property --border-angle {
|
|
syntax: "<angle>";
|
|
inherits: true;
|
|
initial-value: 0turn;
|
|
}
|
|
|
|
@property --border-radius {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
|
|
|
|
|
|
.light-box-2 {
|
|
--border-size: 1px;
|
|
--border-angle: 0turn;
|
|
background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.light-box-3 {
|
|
--border-size: 1px;
|
|
--border-angle: 0turn;
|
|
background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
</style> |