teoldalad/routes/+page.svelte
2024-03-13 00:30:45 +01:00

51 lines
No EOL
2.1 KiB
Svelte

<script lang="ts">
import Avatar from '$lib/components/bio/profile/Avatar.svelte';
import Landing from '$lib/components/screens/Landing.svelte';
export let data;
$: title = 'The most advanced link-in-bio · YourSitee';
$: description =
'Feature-rich, customizable, modern, and user-friendly link-in-bio tool. Create your own sitee now — yoursit.ee!';
$: image = 'https://cdn.yoursit.ee/branding/logo_blue_background-sm.png';
</script>
<svelte:head>
<title>YourSitee</title>
<meta property="og:title" content={title} />
<meta name="twitter:title" content={title} />
<meta property="og:description" content={description} />
<meta name="twitter:description" content={description} />
<meta property="og:image" content={image} />
<meta name="twitter:image" content={image} />
</svelte:head>
<Landing bio={data.bio}>
<p class="text-[60px] 2xl:text-[100px] 3xl:text-[120px] font-medium leading-none max-w-[1330px]">
The most advanced <span class="whitespace-nowrap">link-in-bio</span>. Ever.
</p>
<p class="text-xl leading-[1.25] text-[#D1D6DB] max-w-[430px]">
YourSitee is a feature-rich, customizable, modern, and user-friendly link-in-bio tool.
</p>
<div class="flex gap-2 flex-col md:flex-row">
{#if data.session}
<a data-sveltekit-reload href="/dashboard" class="button primary flex gap-1"
><Avatar uniqueId={data.session.data.uniqueId} veryTiny={true} /> Continue to the Dashboard</a>
<a data-sveltekit-reload href="/dashboard/logout" class="button">Log out</a>
{:else}
<a data-sveltekit-reload href="/dashboard/register" class="button primary">Invited for Alpha? Sign up</a>
<a data-sveltekit-reload href="/dashboard/login" class="button">Log in</a>
{/if}
</div>
</Landing>
<style lang="postcss">
.button {
@apply bg-button-dark-transparent-fill hover:bg-button-dark-fill !text-text-primary font-medium rounded-2xl box-border px-4 py-2 w-fit h-fit;
}
.button.primary {
@apply bg-text-header hover:bg-text-primary !text-item;
}
</style>