mirror of
https://github.com/jcreek/SvelteKitSaasBoilerplate.git
synced 2026-07-13 11:03:49 +00:00
OllyNicholass
355 lines
12 KiB
Svelte
355 lines
12 KiB
Svelte
<script lang="ts">
|
|
import MagicLink from '$lib/components/MagicLink.svelte';
|
|
|
|
export let data;
|
|
let { supabase, session } = data;
|
|
$: ({ supabase, session } = data);
|
|
</script>
|
|
|
|
{#if session !== null}
|
|
<div class="hero bg-base-100 my-36">
|
|
Welcome back {session.user.email}
|
|
</div>
|
|
{:else}
|
|
<div class="hero bg-base-100 my-36">
|
|
<div class="hero-content flex-col lg:flex-row-reverse">
|
|
<div class="text-center lg:text-left">
|
|
<h1 class="text-5xl font-bold">
|
|
Sign up for this amazing SaaS right now - don't miss out!
|
|
</h1>
|
|
</div>
|
|
<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
|
|
<MagicLink {supabase} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div
|
|
class="md:container md:mx-auto justify-self-center flex justify-center items-center h-full flex-col mb-10"
|
|
>
|
|
<div class="stats stats-vertical lg:stats-horizontal shadow text-center">
|
|
<div class="stat">
|
|
<div class="stat-title">Conversions</div>
|
|
<div class="stat-value">310K</div>
|
|
<div class="stat-desc">Since January 2024</div>
|
|
</div>
|
|
|
|
<div class="stat">
|
|
<div class="stat-title">New Users</div>
|
|
<div class="stat-value">4,200</div>
|
|
<div class="stat-desc">↗︎ 400 (22%)</div>
|
|
</div>
|
|
|
|
<div class="stat">
|
|
<div class="stat-title">Contracts Completed</div>
|
|
<div class="stat-value">1,200</div>
|
|
<div class="stat-desc">↘︎ 90 (14%)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features mt-8">
|
|
<h1 class="flex justify-center text-4xl font-bold mb-5">Features</h1>
|
|
|
|
<ul class="space-y-6">
|
|
<li class="p-6 rounded-lg shadow-md">
|
|
<div class="flex items-start space-x-4">
|
|
<svg
|
|
class="w-8 h-8 text-green-500 flex-shrink-0"
|
|
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>
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Blah</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut ex blandit, hendrerit
|
|
dolor in, egestas erat. In hac habitasse platea dictumst. Vestibulum consequat arcu
|
|
ultrices, dignissim quam consectetur, mattis turpis. Quisque ligula est, consectetur a
|
|
nunc eget, efficitur euismod sapien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="p-6 rounded-lg shadow-md">
|
|
<div class="flex items-start space-x-4">
|
|
<svg
|
|
class="w-8 h-8 text-green-500 flex-shrink-0"
|
|
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>
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Blah</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut ex blandit, hendrerit
|
|
dolor in, egestas erat. In hac habitasse platea dictumst. Vestibulum consequat arcu
|
|
ultrices, dignissim quam consectetur, mattis turpis. Quisque ligula est, consectetur a
|
|
nunc eget, efficitur euismod sapien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="p-6 rounded-lg shadow-md">
|
|
<div class="flex items-start space-x-4">
|
|
<svg
|
|
class="w-8 h-8 text-green-500 flex-shrink-0"
|
|
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>
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Blah</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut ex blandit, hendrerit
|
|
dolor in, egestas erat. In hac habitasse platea dictumst. Vestibulum consequat arcu
|
|
ultrices, dignissim quam consectetur, mattis turpis. Quisque ligula est, consectetur a
|
|
nunc eget, efficitur euismod sapien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="p-6 rounded-lg shadow-md">
|
|
<div class="flex items-start space-x-4">
|
|
<svg
|
|
class="w-8 h-8 text-green-500 flex-shrink-0"
|
|
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>
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Blah</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut ex blandit, hendrerit
|
|
dolor in, egestas erat. In hac habitasse platea dictumst. Vestibulum consequat arcu
|
|
ultrices, dignissim quam consectetur, mattis turpis. Quisque ligula est, consectetur a
|
|
nunc eget, efficitur euismod sapien.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<section>
|
|
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
|
|
<div class="mx-auto max-w-lg text-center">
|
|
<h2 class="text-3xl font-bold sm:text-4xl">Kickstart your marketing</h2>
|
|
|
|
<p class="mt-4 text-gray-500">
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur aliquam doloribus
|
|
nesciunt eos fugiat. Vitae aperiam fugit consequuntur saepe laborum.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
|
|
href="#"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-10 text-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path
|
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
|
/>
|
|
</svg>
|
|
|
|
<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
|
|
distinctio alias voluptatum blanditiis laudantium.
|
|
</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center">
|
|
<a href="#sign-up" class="btn btn-primary">Get Started Today</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|