Skip to content

Commit

Permalink
Improved pricing and onboarding
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Aug 13, 2024
1 parent d9a96b0 commit 84facdd
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 87 deletions.
7 changes: 6 additions & 1 deletion platforms/interface/ui/pages/home.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@

{#if $settings.licenseKey === "" || $settings.licenseKey === "free"}
<h2 class="text-cores-alternative">Free</h2>
<h3 class="cursor-pointer underline"><a href="/onboarding">Upgrade</a></h3>

<a
class="bg-cores-alternative border-cores-alternative mt-2 cursor-pointer rounded-xl border-2 px-2 py-0.5 text-xl font-medium text-white duration-200 ease-in hover:border-white"
href="/onboarding">Upgrade</a
>
{/if}
</div>
<!-- <div class="flex items-center justify-center">
Expand Down Expand Up @@ -599,6 +603,7 @@
Battery,
LayoutGrid,
LayoutList,
TriangleAlert,
} from "lucide-svelte"
import { GpuCard, Memory, PcDisplay } from "svelte-bootstrap-icons"
import Progress from "ui/components/progress.svelte"
Expand Down
217 changes: 159 additions & 58 deletions platforms/interface/ui/pages/onboarding.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,66 +15,160 @@
</div>

<!-- step 2 -->
<div class="step2 mx-auto hidden w-1/2 flex-col justify-center rounded-2xl bg-black/30 p-10 shadow-md backdrop-blur-xl">
<div class="mb-10 text-center">
<h1 class="mb-2">Activate Cores</h1>
</div>
<div class="flex w-full flex-1 flex-row gap-5">
<div class="flex w-1/2 flex-col justify-center rounded-xl border-2 border-purple-600 bg-purple-700 p-3 text-center">
<h2 class="mb-2">Activate Cores</h2>
<h3 class="mb-10">Use the license key from your purchase confirmation email to activate Cores.</h3>

<Dialog
action={activate}
title={"Activate Cores"}
description={"Use the license key from your purchase confirmation email to activate Cores."}
>
<span class="flex flex-row items-center justify-center gap-1" slot="button">
<CircleCheck />
Activate
</span>
<div>
<h5>License key</h5>
<input class="input mt-1" type="text" id="key" />
<div class="step2 hidden justify-center rounded-2xl bg-black/30 p-10 py-20 shadow-md backdrop-blur-xl">
<div class="flex select-text flex-wrap items-center justify-between gap-10 px-20 sm:w-full sm:px-2 md:flex-nowrap">
<div class="flex w-full flex-col">
<div class="mb-10">
<h2 class="mb-1 bg-gradient-to-r bg-clip-text text-center text-4xl font-extrabold text-white md:text-8xl">Activate Cores</h2>
</div>

<div class="mt-1 flex flex-row justify-between gap-5 sm:flex-col">
<div class="w-full rounded-xl bg-gray-900 p-8 sm:p-4">
<div class=" flex flex-row flex-wrap gap-3">
<div class="mx-auto mt-5 flex max-w-lg flex-col gap-5 rounded-xl border-2 border-purple-400 p-5 sm:flex-col">
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Cores for Personal
</h1>
<div class="px-5 text-center sm:w-full">
<h2 class="text-[3rem] font-semibold">
$9.99 <p class="text-sm text-gray-200">One time purchase</p>
</h2>

<div class="text-center">
<button
on:click={() => {
open("https://link.levminer.com/buy-cores-app")
}}
class="button bg-cores-alternative hover:text-cores-alternative border-cores-alternative mt-5 w-full font-bold text-white hover:translate-y-0.5 hover:animate-pulse"
>
Buy
</button>
<div class="mt-3 flex justify-center">
<Dialog
action={activate}
title={"Activate Cores"}
description={"Use the license key from your purchase confirmation email to activate Cores."}
>
<span class="flex flex-row items-center justify-center gap-1" slot="button">
<CircleCheck />
Activate license
</span>
<div>
<h5>License key</h5>
<input class="input mt-1" type="text" id="key" />
</div>
</Dialog>
</div>
</div>
</div>
<div class="flex flex-col justify-center space-y-2 border-t-2 border-gray-600 px-5 pt-3 text-left text-lg sm:w-full">
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>For personal use</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>One-time purchase, no subscriptions</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Access your device remotely</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Use on up to 5 devices</p>
</div>
</div>
</div>
<div class="mx-auto mt-5 flex max-w-lg flex-col gap-5 rounded-xl border-2 border-purple-400 p-5 sm:flex-col">
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Cores for Business
</h1>
<div class="px-5 text-center sm:w-full">
<h2 class="text-[3rem] font-semibold">
$4.99 <p class="text-sm text-gray-200">/month/device</p>
</h2>

<div class="text-center">
<a
href="mailto:[email protected]"
class="button bg-cores-alternative hover:text-cores-alternative border-cores-alternative mt-5 w-full font-bold text-white hover:translate-y-0.5 hover:animate-pulse"
>
Get a quote
</a>
<div class="mt-3 flex justify-center">
<Dialog
action={activate}
title={"Activate Cores"}
description={"Use the license key from your purchase confirmation email to activate Cores."}
>
<span class="flex flex-row items-center justify-center gap-1" slot="button">
<CircleCheck />
Activate license
</span>
<div>
<h5>License key</h5>
<input class="input mt-1" type="text" id="key" />
</div>
</Dialog>
</div>
</div>
</div>
<div class="flex flex-col justify-center space-y-2 border-t-2 border-gray-600 px-5 pt-3 text-left text-lg sm:w-full">
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>For business & commercial use</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Monthly subscription, cancel anytime</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Access any device remotely</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Volume discount</p>
</div>
</div>
</div>
</div>

<div class="mt-4 flex flex-wrap justify-center gap-2 text-center text-lg">
<Popover.Root>
<Popover.Trigger
title="Trial over! Activate Cores!"
class="disabled:cursor-not-allowed disabled:opacity-50"
disabled={trialOver}>Get started for free</Popover.Trigger
>
<Popover.Content
class="z-30 w-full max-w-[300px] rounded-[12px] border border-cyan-600 bg-cyan-700 p-3 text-left"
transition={flyAndScale}
sideOffset={8}
>
<div class="flex flex-col text-center">
<h4 class="mb-2">Get started for free</h4>
<!-- <h5>You can use Cores for 7 days, after that you will need to buy it.</h5> -->
<h5>
During the beta period you can use Cores for free, please consider buying it to support the development.
</h5>
</div>
<Popover.Close on:click={free} class="smallButton my-4 w-full">
<CircleCheck />
Continue</Popover.Close
>
</Popover.Content>
</Popover.Root>
</div>
</div>
</Dialog>
</div>
<div class="flex w-1/2 flex-col justify-center rounded-xl border-2 border-pink-600 bg-pink-700 p-3 text-center">
<h2 class="mb-2">Buy Cores</h2>
<h3 class="mb-10">If you didn't purchase Cores yet you can buy it for $14<sup>99</sup> now.</h3>
<button
on:click={() => {
open("https://link.levminer.com/buy-cores-app")
}}
class="button mx-1"
>
<ShoppingCart />
Buy
</button>
</div>
</div>
</div>
<div class="mt-5 flex justify-center">
<Popover.Root>
<Popover.Trigger title="Trial over! Activate Cores!" class="disabled:cursor-not-allowed disabled:opacity-50" disabled={trialOver}
>Get started for free</Popover.Trigger
>
<Popover.Content
class="z-30 w-full max-w-[300px] rounded-[12px] border border-cyan-600 bg-cyan-700 p-3 text-left"
transition={flyAndScale}
sideOffset={8}
>
<div class="flex flex-col text-center">
<h4 class="mb-2">Get started for free</h4>
<!-- <h5>You can use Cores for 7 days, after that you will need to buy it.</h5> -->
<h5>During the beta period you can use Cores for free, please consider buying it to support the development.</h5>
</div>
<Popover.Close on:click={free} class="smallButton my-4 w-full">
<CircleCheck />
Continue</Popover.Close
>
</Popover.Content>
</Popover.Root>
</div>
</div>

<!-- step 3 -->
Expand Down Expand Up @@ -120,14 +214,21 @@
import { open } from "@tauri-apps/plugin-shell"
import Dialog from "ui/components/dialog.svelte"
import { router } from "@baileyherbert/tinro"
import { Globe, MoveRight, ShoppingCart, Home, CircleCheck, Settings } from "lucide-svelte"
import { Globe, MoveRight, ShoppingCart, Home, CircleCheck, Settings, Check } from "lucide-svelte"
import { settings } from "../stores/settings.ts"
import { Popover } from "bits-ui"
import { flyAndScale } from "../utils/transitions.ts"
import build from "../../../../build.json"
import { onMount } from "svelte"
let trialOver = false
onMount(() => {
if ($settings.licenseKey === "free") {
step2()
}
})
// Check if trial is over
/* if ($settings.licenseActivated) {
let dateActivated = new Date($settings.licenseActivated)
Expand Down
82 changes: 54 additions & 28 deletions platforms/interface/web/src/routes/(marketing)/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,22 +470,22 @@
<div class="flex w-full flex-col">
<div class="mb-10">
<h2 class="mb-5 bg-gradient-to-r bg-clip-text text-center text-4xl font-extrabold text-white md:text-8xl">Pricing</h2>
<h3 class="italic text-gray-100">Do you hate subscriptions too? Buy Cores now and get life time access.</h3>
<h3 class="text-center italic text-gray-100">Do you hate subscriptions too? Buy Cores now and get life time access.</h3>
</div>

<div class="mt-5 flex flex-row justify-between gap-5 sm:flex-col">
<div class="w-full rounded-xl bg-gray-900 p-8 sm:p-4">
<OSSelector bind:selected={pricingSelected} />

{#if pricingSelected === "windows"}
<div class=" flex flex-row flex-wrap gap-3">
<div class="mx-auto mt-5 flex max-w-lg flex-col gap-5 rounded-xl border-2 border-purple-400 p-5 sm:flex-col">
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Cores for Windows
Cores for Personal
</h1>
<div class="px-5 text-center sm:w-full">
<h2 class="text-[3rem] font-semibold">$14<sup>99</sup></h2>
<h2 class="text-[3rem] font-semibold">
$9.99 <p class="text-sm text-gray-200">One time purchase</p>
</h2>

<div class="text-center">
<a
Expand Down Expand Up @@ -520,33 +520,59 @@
<Check class="h-5 w-5 text-green-500" />
<p>Use on up to 5 devices</p>
</div>

<!-- <p>Access to free updates for a year</p> -->
</div>
</div>
{:else if pricingSelected === "linux"}
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Coming soon!
</h1>
<div class="flex items-center justify-center">
<a href="#newsletter" class="underline">Subscribe to get notified</a>
</div>
{:else}
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Coming soon!
</h1>
<div class="flex items-center justify-center">
<a href="#newsletter" class="underline">Subscribe to get notified</a>
<div class="mx-auto mt-5 flex max-w-lg flex-col gap-5 rounded-xl border-2 border-purple-400 p-5 sm:flex-col">
<h1
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text px-5 text-center text-4xl font-extrabold text-transparent"
>
Cores for Business
</h1>
<div class="px-5 text-center sm:w-full">
<h2 class="text-[3rem] font-semibold">
$4.99 <p class="text-sm text-gray-200">/month/device</p>
</h2>

<div class="text-center">
<a
href="mailto:[email protected]"
class="button bg-cores-alternative hover:text-cores-alternative border-cores-alternative mt-5 w-full font-bold text-white hover:translate-y-0.5 hover:animate-pulse"
>
Get a quote
</a>
<div class="mt-3">
<a rel="noreferrer" href="#downloads" class="underline duration-200 hover:text-gray-200"
>Get started for free</a
>
</div>
</div>
</div>
<div
class="flex flex-col justify-center space-y-2 border-t-2 border-gray-600 px-5 pt-3 text-left text-lg sm:w-full"
>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>For business & commercial use</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Monthly subscription, cancel anytime</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Access any device remotely</p>
</div>
<div class="flex items-center space-x-2">
<Check class="h-5 w-5 text-green-500" />
<p>Volume discount</p>
</div>
</div>
</div>
{/if}
</div>

<div class="mt-4 flex flex-wrap justify-center gap-2 text-center text-lg">
<p>Want to use Cores as a business?</p>
<a class="underline" href="mailto:[email protected]">Contact</a>
<p>Want to use Cores as a business or have a question?</p>
<a class="underline" href="mailto:[email protected]">Reach out</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 84facdd

Please sign in to comment.