add register and login pages, DRY up more, add $comp, add new components

12 files changed, 113 insertions, 34 deletions

diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 6f94efcb..519cdcdc 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,11 +1,12 @@
 <script>
+	import Icon from './Icon.svelte';
 	export let image;
 	export let step;
 	export let description;
 </script>
 
 <div class="space-y-5">
-	<img src="/icons/{image}.svg" alt={image} class="mx-auto w-32 h-32" />
+	<Icon icon={image} style="mx-auto w-32 h-32" />
 	<p class="text-2xl font-medium">{step}</p>
 	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
 		{description}
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
new file mode 100644
index 00000000..58a61033
--- /dev/null
+++ b/src/components/Icon.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let icon;
+	export let style;
+</script>
+
+<img src="/icons/{icon}.svg" alt={icon} class={style} />
diff --git a/src/components/Image.svelte b/src/components/Image.svelte
new file mode 100644
index 00000000..b7db2b92
--- /dev/null
+++ b/src/components/Image.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let image;
+	export let style;
+</script>
+
+<img src="/images/{image}.png" alt={image} class={style} />
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index c6cd4095..d6d55863 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,6 +1,7 @@
 <script>
+	import { goto } from '$app/navigation';
 	import { scroll } from '../lib/utils';
-	import { PrimaryButton, SecondaryButton } from '../components';
+	import { PrimaryButton, SecondaryButton, Icon } from '$comp';
 
 	export let howItWorks;
 	export let faq;
@@ -9,14 +10,15 @@
 <header class="w-full lg:w-5/6 pt-10 mx-auto">
 	<nav class="block xl:flex flex-wrap justify-between items-center">
 		<a href="/">
-			<img src="/icons/logo.svg" alt="logo" class="mx-auto mb-5 xl:mb-0" />
+			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
+
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>How It Works</button>
 			<button on:click={() => scroll(faq)}>FAQ</button>
 			<button>About</button>
-			<SecondaryButton title="Start in Seconds" />
-			<PrimaryButton title="Login" />
+			<SecondaryButton title="Start in Seconds" click={() => goto('/register')} />
+			<PrimaryButton title="Sign In" click={() => goto('/login')} />
 		</div>
 	</nav>
 </header>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 756564de..828eed35 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { PrimaryButton } from '../components';
+	import { goto } from '$app/navigation';
+	import { PrimaryButton, Icon, Image } from '$comp';
 </script>
 
 <div>
@@ -9,11 +10,7 @@
 		>
 			The <span class="relative">
 				easiest
-				<img
-					src="/icons/rays.svg"
-					alt="rays"
-					class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
-				/>
+				<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
 			</span> way to accept Bitcoin in your store.
 		</h1>
 		<h2
@@ -23,13 +20,9 @@
 			of Sale. No software or hardware required.
 		</h2>
 		<div class="flex justify-center">
-			<PrimaryButton title="Start in Seconds" />
+			<PrimaryButton title="Start in Seconds" click={() => goto('/register')} />
 		</div>
 	</div>
 	<!-- hero image -->
-	<img
-		src="/images/hero-image.png"
-		alt="tablet-pos"
-		class="w-full md:w-2/3 max-w-5xl mx-auto mt-20"
-	/>
+	<Image image="hero-image" style="w-full md:w-2/3 max-w-5xl mx-auto mt-20" />
 </div>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index 2b2dd2a1..c67d3fcc 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -1,4 +1,6 @@
 <script>
+	import Image from './Image.svelte';
+
 	export let image;
 	export let title;
 	export let description;
@@ -6,14 +8,11 @@
 </script>
 
 <div class="block lg:flex justify-center lg:space-x-20 items-center">
-	{#if image}
-		<img
-			src="/images/{image}.png"
-			alt={image}
-			class="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
-				'reverse' && 'order-last'}"
-		/>
-	{/if}
+	<Image
+		{image}
+		style="w-2/3 md:w-5/12 lg:w-2/5 xl:w-1/3 2xl:w-1/4 max-w-xl mx-auto lg:mx-0 mb-10 lg:mb-0 {order ===
+			'reverse' && 'order-last'}"
+	/>
 	<div class="w-full lg:w-1/2 max-w-3xl space-y-10 mx-auto lg:mx-0">
 		<h3 class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]">{title}</h3>
 		<p class="text-secondary text-xl font-medium w-full md:w-[500px] mx-auto lg:mx-0">
diff --git a/src/components/PrimaryButton.svelte b/src/components/PrimaryButton.svelte
index 3caeb07d..4b33142b 100644
--- a/src/components/PrimaryButton.svelte
+++ b/src/components/PrimaryButton.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={click}
-	>{title}</button
->
+	>{title}
+</button>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
new file mode 100644
index 00000000..48e8096a
--- /dev/null
+++ b/src/components/RegisterOrLogin.svelte
@@ -0,0 +1,65 @@
+<script>
+	import { Icon } from '$comp';
+
+	export let page;
+
+	let revealPassword = false;
+</script>
+
+<div class="pt-10">
+	<a href="/">
+		<Icon icon="logo" style="mx-auto mb-10" />
+	</a>
+
+	<div class="flex justify-center items-center">
+		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
+			<h1 class="text-2xl font-bold text-center">{page}</h1>
+
+			<form class="space-y-5">
+				<div>
+					<label for="username" class="font-semibold">Username</label>
+					<input type="text" required class="bg-input p-4 rounded-2xl w-full" />
+				</div>
+
+				<div class="relative">
+					<label for="password" class="block font-semibold">Password</label>
+					<input
+						type={revealPassword ? 'text' : 'password'}
+						required
+						class="block bg-input p-4 rounded-2xl w-full"
+					/>
+					<button
+						type="button"
+						on:click={() => (revealPassword = !revealPassword)}
+						class="absolute right-5 top-10"
+					>
+						<Icon icon="eye" />
+					</button>
+				</div>
+
+				{#if page === 'Register'}
+					<p class="text-secondary text-sm">
+						We recommend a long, random password generated with a password manager.
+					</p>
+				{:else}
+					<div class="flex justify-end items-center">
+						<a href="" class="underline underline-offset-4 text-black text-sm">Forgot Password?</a>
+					</div>
+				{/if}
+
+				<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
+					>{page}
+				</button>
+			</form>
+
+			<p class="text-secondary text-center font-medium">
+				{page === 'Register' ? 'Already have an account?' : "Don't have an account?"}
+				<a
+					href={page === 'Register' ? '/login' : '/register'}
+					class="block md:inline text-black underline underline-offset-4"
+					>{page === 'Register' ? 'Sign in' : 'Register'}
+				</a>
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 448db45d..d96a8656 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,3 +5,6 @@ export { default as HowItWorksCard } from './HowItWorksCard.svelte';
 export { default as FaqCard } from './FaqCard.svelte';
 export { default as PrimaryButton } from './PrimaryButton.svelte';
 export { default as SecondaryButton } from './SecondaryButton.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Image } from './Image.svelte';
+export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 8912e41e..cda885a3 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,11 +1,5 @@
 <script>
-	import {
-		LandingHeader,
-		LandingHero,
-		LandingInfoCard,
-		HowItWorksCard,
-		FaqCard
-	} from '../components';
+	import { LandingHeader, LandingHero, LandingInfoCard, HowItWorksCard, FaqCard } from '$comp';
 
 	let howItWorks;
 	let faq;
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
new file mode 100644
index 00000000..c61269c1
--- /dev/null
+++ b/src/routes/login.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Sign in" />
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
new file mode 100644
index 00000000..69ec5fd2
--- /dev/null
+++ b/src/routes/register.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Register" />