initial draft of landing page

8 files changed, 208 insertions, 1 deletions

diff --git a/src/app.css b/src/app.css
index b5c61c95..81307829 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+	font-family: 'PublicSans';
+	src: url('/fonts/Public_Sans/static/PublicSans-Regular.ttf') format('truetype');
+}
+
+html {
+	font-family: PublicSans, sans-serif;
+}
diff --git a/src/app.html b/src/app.html
index 2f836746..335772ac 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,8 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="description" content="Easy to use bitcoin point of sale app and web wallet." />
+		<meta property="og:image" content="/icons/logo.svg" />
+		<title>CoinOS</title>
 		%sveltekit.head%
 	</head>
 	<body>
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
new file mode 100644
index 00000000..5753fd87
--- /dev/null
+++ b/src/components/FaqCard.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let question;
+	export let answer;
+</script>
+
+<div class="mx-auto w-full md:w-2/3 lg:w-1/2 space-y-5">
+	<p class="text-2xl font-medium">{question}</p>
+	<p class="text-secondary text-xl font-medium w-full md:w-2/3 max-w-2xl">
+		{answer}
+	</p>
+</div>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
new file mode 100644
index 00000000..6f94efcb
--- /dev/null
+++ b/src/components/HowItWorksCard.svelte
@@ -0,0 +1,13 @@
+<script>
+	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" />
+	<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}
+	</p>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 00000000..4c1bc8f3
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,2 @@
+export { default as HowItWorksCard } from './HowItWorksCard.svelte';
+export { default as FaqCard } from './FaqCard.svelte';
diff --git a/src/lib/store.js b/src/lib/store.js
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/lib/store.js
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 00000000..ba0d8335
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,3 @@
+export function scroll(section) {
+	section.scrollIntoView({ behavior: 'smooth' });
+}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index e69de29b..71bd7870 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -0,0 +1,166 @@
+<script>
+	import { scroll } from '../lib/utils';
+	import { HowItWorksCard, FaqCard } from '../components';
+
+	let howItWorks;
+	let faq;
+	let about;
+
+	const howItWorksSteps = [
+		{
+			image: 'hand',
+			step: '1. Create your account',
+			description: 'A username & password is all you need to get started.'
+		},
+		{
+			image: 'bolt',
+			step: '2. Ask for payments',
+			description: 'The same as you normally would, but with Bitcoin.'
+		},
+		{
+			image: 'smile',
+			step: "3. That's all!",
+			description: 'You can convert to local currency at any point.'
+		}
+	];
+
+	const faqQuestions = [
+		{
+			question: 'What does it cost?',
+			answer:
+				'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
+		},
+		{
+			question: 'Do I need any special device or software?',
+			answer:
+				'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
+		},
+		{
+			question: 'Are my funds safe?',
+			answer:
+				'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
+		}
+	];
+</script>
+
+<header class="w-full lg:w-5/6 pt-10 mx-auto">
+	<nav class="block lg:flex flex-wrap justify-between items-center">
+		<a href="/">
+			<img src="/icons/logo.svg" alt="logo" class="mx-auto mb-5 lg:mb-0" />
+		</a>
+		<div class="hidden space-x-10 font-medium md:flex flex-wrap justify-center items-center">
+			<button on:click={() => scroll(howItWorks)}>How It Works</button>
+			<button on:click={() => scroll(faq)}>FAQ</button>
+			<button>About</button>
+			<button class="border rounded-full px-3 py-1">Start in Seconds</button>
+			<button class="bg-black text-white border rounded-full px-3 py-1">Login</button>
+		</div>
+	</nav>
+</header>
+
+<main class="space-y-40 py-20 md:py-40 px-5 md:px-0">
+	<!-- hero -->
+	<div>
+		<div class="space-y-10">
+			<h1
+				class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
+			>
+				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"
+					/></span
+				> way to accept Bitcoin in your store.
+			</h1>
+			<h2
+				class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
+			>
+				Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed
+				Point of Sale. No software or hardware required.
+			</h2>
+			<div class="flex justify-center">
+				<button class="bg-black text-white border rounded-full px-3 py-1 font-medium"
+					>Start in Seconds</button
+				>
+			</div>
+		</div>
+
+		<div
+			class="bg-gradient-to-br from-[#F5F7FA] via-[#EAF2FF] to-[#DEDFFF] rounded-full w-[300px] h-[300px] md:w-[450px] md:h-[450px] lg:w-[500px] lg:h-[500px] xl:w-[600px] xl:h-[600px] 2xl:w-[650px] 2xl:h-[650px] mx-auto mt-20 flex justify-center items-center"
+		>
+			<img src="/images/hero-image.svg" alt="tablet-pos" />
+		</div>
+	</div>
+
+	<!-- landing info 1 -->
+	<div class="block lg:flex justify-center lg:space-x-20 items-center">
+		<div
+			class="bg-gradient-to-r from-[#FFF9FF] via-[#F7FBFE] to-[#ECEFFF] rounded-full w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] xl:w-[450px] xl:h-[450px] 2xl:w-[500px] 2xl:h-[500px] flex justify-center items-center mx-auto lg:mx-0 mb-10 lg:mb-0"
+		>
+			<img src="/images/lightning-qr.svg" alt="lightning-qr" class="w-5/6" />
+		</div>
+		<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">Instant payments via Lightning.</h3>
+			<p class="text-secondary text-xl font-medium w-full lg:w-3/4 mx-auto lg:mx-0">
+				The moment your customer sends a payment, it’s there. No waiting for bank settlements or
+				worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card
+				processing fees.
+			</p>
+		</div>
+	</div>
+
+	<!-- landing info 2 -->
+	<div class="block lg:flex justify-center lg:space-x-20 items-center">
+		<div
+			class="md:order-last bg-gradient-to-r from-[#F5F7FA] via-[#EAF2FF] to-[#DEDFFF] rounded-full w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] xl:w-[450px] xl:h-[450px] 2xl:w-[500px] 2xl:h-[500px] flex justify-center items-center mx-auto lg:mx-0 mb-10 lg:mb-0"
+		>
+			<img src="/images/phone-checkout.svg" alt="phone-checkout" class="w-5/6" />
+		</div>
+		<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">Simple to use, custodial by default.</h3>
+			<p class="text-secondary text-xl font-medium w-full lg:w-3/4 mx-auto lg:mx-0">
+				Just enter an amount, share QR code and you’re done.
+				<br /><br />
+				CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning
+				works. We do all the heavy lifting so you can focus on your business.
+				<br /><br />
+				You always have the option of
+				<span class="underline underline-offset-4">taking custody</span> of your own keys.
+			</p>
+		</div>
+	</div>
+
+	<!-- landing info 3 -->
+	<div class="block lg:flex justify-center lg:space-x-20 items-center">
+		<div
+			class="bg-gradient-to-r from-[#FFF9FF] via-[#F7FBFE] to-[#ECEFFF] rounded-full w-[250px] h-[250px] md:w-[300px] md:h-[300px] lg:w-[350px] lg:h-[350px] xl:w-[450px] xl:h-[450px] 2xl:w-[500px] 2xl:h-[500px] flex justify-center items-center mx-auto lg:mx-0 mb-10 lg:mb-0"
+		/>
+		<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">Brand it your way!</h3>
+			<p class="text-secondary text-xl font-medium w-full lg:w-3/4 mx-auto lg:mx-0">
+				Customize your point of sale look and feel, or keep it on default - totally up to you.
+			</p>
+		</div>
+	</div>
+
+	<!-- how it works -->
+	<div bind:this={howItWorks}>
+		<h3 class="text-5xl font-medium mb-20 text-center">How it works</h3>
+		<div
+			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
+		>
+			{#each howItWorksSteps as step}
+				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
+			{/each}
+		</div>
+	</div>
+
+	<!-- faq -->
+	<div class="space-y-10" bind:this={faq}>
+		<h3 class="text-5xl font-medium text-center">FAQ</h3>
+		{#each faqQuestions as question}
+			<FaqCard question={question.question} answer={question.answer} />
+		{/each}
+	</div>
+</main>