frontend/src/routes/discord-bot/+page.svelte
MuslemRahimi 9c22f26e4c ui fix
2025-04-16 23:21:58 +02:00

511 lines
19 KiB
Svelte

<script lang="ts">
import { openLemonSqueezyUrl } from "$lib/lemonsqueezy";
import { onMount } from "svelte";
import SEO from "$lib/components/SEO.svelte";
export let data;
export let form;
let mode = true;
const emailAddress = "support@stocknear.com";
function toggleMode() {
mode = !mode;
}
let LoginPopup;
let discordURL = import.meta.env.VITE_DISCORD_URL;
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_DISCORD_ANNUAL_ID;
} else {
subId = import.meta.env.VITE_LEMON_SQUEEZY_DISCORD_MONTHLY_ID;
}
try {
} catch (e) {
console.log(e);
}
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>
<SEO
title="Discord Bot Plans"
description="Explore our affordable Discord Bot plans. Unlock unlimited access and powerful features to supercharge your Discord server with Stocknear dataset."
/>
<svelte:head>
<script>
window.lemonSqueezyAffiliateConfig = { store: "stocknear" };
</script>
<script src="https://lmsqueezy.com/affiliate.js" defer></script>
</svelte:head>
<section
class=" min-h-screen mb-40 w-full max-w-3xl sm:max-w-6xl m-auto text-muted dark:text-white"
>
<div class="px-3">
<div class="mx-auto text-center mb-8 mt-10">
<h1 class="text-4xl sm:text-5xl font-bold pb-4">
Power up your Discord Server
</h1>
</div>
<!--<Discount/>-->
<div class="flex flex-row items-center justify-center">
<div class="flex flex-row items-center ml-auto">
<span class="text-[1rem] font-semibold mr-3"> 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-[#09090B] border border-gray-600 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-blue-600 {mode ===
false
? 'after:translate-x-[-0.2rem]'
: ''} "
></div>
</label>
<div class="ml-3 flex flex-col text-[1rem] items-start">Annually</div>
</div>
</div>
<div class="">
<section
class="relative overflow-hidden card card-side mt-5 bg-[#18181B] to-black rounded-lg p-5 flex flex-col lg:flex-row items-center justify-between"
>
<div class="card-body relative z-10 min-h-[300px] sm:min-h-0">
<h2 class="card-title text-4xl font-bold mb-3 sm:mb-6 text-start">
All-in-one Bot
</h2>
<div
class="lg:hidden flex flex-col justify-start lg:ml-auto items-center mb-3"
>
<div>
<span class="text-4xl font-bold">{mode ? "$20" : "$30"}</span
><span class=" text-xl ml-1">/Month</span>
</div>
<p class="ml-2 text-sm text-gray-500 dark:text-gray-400">
{!mode ? "" : "(Billed Annually)"}
</p>
</div>
<p
class="text-[1rem] sm:text-lg mb-6 w-full sm:max-w-[450px] text-start"
>
We provide real-time options flow from large institutional players,
live dark pool activity, instant earnings reports, market-moving
news, and so much more.
</p>
<ul class="space-y-3 grid grid-cols-2 sm:grid-cols-3 mt-4 sm:mt-8">
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Unusual Options Flow</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Unusual Dark Pool Orders</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Earnings Release</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Latest Executive Orders</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Congress Trading</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Analyst Ratings</span>
</li>
<li class="flex items-start text-[1rem]">
<svg
class="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>
<span>Market News</span>
</li>
</ul>
<div class="card-actions mt-4 sm:mt-13">
<div
class="flex flex-col sm:flex-row items-center justify-between w-full"
>
<label
for={!data?.user ? "userLogin" : ""}
on:click={() => purchasePlan()}
class=" text-lg text-white cursor-pointer w-full lg:w-auto py-3 lg:mt-2 px-4 bg-blue-600 rounded font-semibold sm:hover:bg-blue-700 transition duration-100 flex items-center justify-center lg:justify-end"
>
Unlock Discord Bot
</label>
<div
class="hidden lg:flex flex-col justify-center lg:justify-end lg:ml-auto items-center mb-1"
>
<div>
<span class="text-3xl md:text-4xl font-bold"
>{mode ? "$20" : "$30"}</span
><span class=" text-xl ml-1">/Month</span>
</div>
<p class="ml-2 text-sm text-gray-500 dark:text-gray-400">
{!mode ? "" : "(Billed Annually)"}
</p>
</div>
</div>
</div>
<figure
class="mt-10 lg:mt-0 lg:absolute lg:-bottom-20 lg:top-5 lg:-right-0 z-2"
>
<div class="flex-shrink-0">
<img
class="rounded-xl w-full sm:w-[600px]"
src="/img/discord-dark-pool-order.png"
alt="Dark Pool Card"
/>
</div>
</figure>
</div>
</section>
<section
class="relative overflow-hidden mt-4 card card-side mt-10 mb-10 bg-[#18181B] to-black rounded-lg p-5 flex flex-col lg:flex-row items-center justify-between"
>
<div class="card-body relative z-10 min-h-96 sm:min-h-0">
<h2 class="card-title text-3xl sm:text-4xl font-bold mb-6 text-start">
See Our Discord Bots In Action!
</h2>
<p
class="text-[1rem] sm:text-lg mb-6 w-full sm:max-w-[450px] text-start"
>
Connect like-minded traders, share insights and stay ahead of market
movements with the support of our cutting-edge tools and community
members.
</p>
<div class="card-actions justify-start">
<a
href={discordURL}
rel="noopener noreferrer"
target="_blank"
class="btn btn-ghost bg-blue-600 text-lg font-semibold px-5 py-3 rounded w-full sm:w-fit"
>
Join Discord
</a>
</div>
</div>
<figure
class="absolute -bottom-30 sm:-bottom-48 sm:top-5 sm:-right-20 z-2"
>
<div class="flex-shrink-0">
<img
class="rounded-xl w-full sm:w-[600px] opacity-60 sm:opacity-100"
src="/img/discord-server.jpg"
alt="Dark Pool Card"
/>
</div>
</figure>
</section>
<!--Start FAQ-->
<section class="">
<div class="mx-auto">
<div class="py-12 md:py-10">
<!-- Section header -->
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-14">
<h2 class="text-4xl font-bold">Frequently Asked Questions</h2>
</div>
<!-- Faqs -->
<ul class="mx-auto divide-y divide-gray-800">
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
How do I integrate the Bot to my Discord Server?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
>
After purchasing our Bot, we will contact you via email to
set everything up. You can also reach out to us, and we'll
respond as soon as possible to get you started.
<a
href={`mailto:${emailAddress}`}
class="text-blue-700 dark:text-blue-400 underline"
>
{emailAddress}
</a>
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
Is the data real time?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
>
Options Flow Orders are delayed by 5 minutes, and Dark
Pool Data is delayed by 15 minutes. All other data is
provided in real time.
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
Is the data filtered in any way?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 transition-all duration-300 ease-in-out"
>
Yes, the data is filtered to reduce the amount of data
being sent over to your discord channel. This is not the
same amount of data you would find in the general
Stocknear application.
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
How do I cancel my subscription?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 transition-all duration-300 ease-in-out"
>
You can cancel anytime. Just send us an email and we will
do it asap for you.
<a
href={`mailto:${emailAddress}`}
class="text-blue-700 dark:text-blue-400 underline"
>
{emailAddress}
</a>
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
Are there any commissions in addition to the subscription
plans?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
>
No, we do not charge any additional commissions or hidden
fees beyond our subscription plans.
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
Can I request a refund?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
>
We offer a 30 day money back guarantee, no questions
asked. Just send an email to <a
href={`mailto:${emailAddress}`}
class="text-blue-700 dark:text-blue-400 underline"
>{emailAddress}</a
> and you will get a full refund.
</p>
</div>
</details>
</li>
<li class="border-b border-gray-400 dark:border-gray-800">
<details class="collapse collapse-arrow">
<summary
class="font-semibold collapse-title text-[1rem] sm:text-xl flex items-center justify-between w-full text-left py-5"
>
What are my payment options?
</summary>
<div class="collapse-content">
<p
class="text-sm sm:text-[1rem] pb-5 dark:text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
>
We support Credit Card & Paypal payments.
</p>
</div>
</details>
</li>
</ul>
</div>
</div>
</section>
<!--End FAQ-->
</div>
</div>
</section>
<!--Start Login Modal-->
{#if LoginPopup}
<LoginPopup {form} />
{/if}