add about section to landing page

6 files changed, 102 insertions, 2 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
new file mode 100644
index 00000000..eb8e9a82
--- /dev/null
+++ b/src/components/About.svelte
@@ -0,0 +1,82 @@
+<script>
+	import { Image, Icon } from '$comp';
+</script>
+
+<div>
+	<h3 class="text-5xl font-medium mb-10 text-center">About</h3>
+	<div
+		class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative"
+	>
+		<p class="w-full lg:w-5/12">
+			Coinos is an open source bitcoin web wallet, point of sale, ecommerce marketplace and exchange
+			platform. Development started in Vancouver in September 2012 as a way to provide local
+			merchants with a convenient way to accept bitcoin payments.
+			<br /><br />
+			The feature set has grown over the years to accomodate a wide variety of use cases with the goal
+			of making it as easy as possible for anyone to get started using Bitcoin quickly, cheaply, and
+			securely.
+			<br /><br />
+			Anyone can download the source code and host their own instance of the platform backed by their
+			own bitcoin, liquid or lightning nodes, or reach out and we'll gladly set this up for you.
+			<Image
+				image="swoosh"
+				style="w-32 absolute -bottom-20 left-28 md:left-72 xl:left-96 lg:bottom-0"
+			/>
+		</p>
+		<p class="w-full lg:w-5/12">
+			Once signed in, you can create both custodial and non-custodial wallets within your account.
+			The default custodial wallet allows funds to be deposited on any of the bitcoin, liquid or
+			lightning networks and seamlessly withdrawn over any other network without any conversion
+			process or fee.
+			<br /><br />
+			Using a non-custodial wallet means keys are generated client-side in your browser so we never have
+			access to the funds. Transactions from these accounts are subject to on-chain transaction fees
+			and Lightning Network payments are not supported but we advise using this account type or a paper
+			wallet for storing larger amounts.
+			<br /><br />
+			Intra-account transfers between custodial wallets of different users on our server are completely
+			free, instant, and unlimited.
+		</p>
+	</div>
+
+	<div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20">
+		<div class="space-y-5 mb-5 lg:mb-0">
+			<h3 class="text-5xl font-medium mb-10 text-center lg:text-right">The Founder</h3>
+
+			<Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
+
+			<div class="space-y-2">
+				<span class="text-2xl text-center font-semibold block lg:text-right">Adam Soltys</span>
+				<span class="text-xl text-center text-secondary block lg:text-right"
+					>Chief Technical Officer</span
+				>
+			</div>
+
+			<div class="flex justify-center lg:justify-end items-center space-x-5">
+				<a
+					href="https://twitter.com/adamsoltys"
+					target="_blank"
+					rel="noreferrer"
+					class="rounded-full p-2 bg-[#1D9BF0]"><Icon icon="twitter" style="w-6" /></a
+				>
+				<a
+					href="https://github.com/asoltys"
+					target="_blank"
+					rel="noreferrer"
+					class="rounded-full p-2 bg-gray-800"><Icon icon="github" style="w-6" /></a
+				>
+			</div>
+		</div>
+
+		<ul
+			class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
+		>
+			<li>Running Bitcoin since 2011</li>
+			<li>20+ years web development experience in government and industry</li>
+			<li>Early Bitcoin Vancouver meetup organizer</li>
+			<li>Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver</li>
+			<li>Yogi, permaculturist, anarchist, decentralist</li>
+			<li>Husband, father, brother, son</li>
+		</ul>
+	</div>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 53f0fe99..afa4790c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -9,3 +9,4 @@ export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
 export { default as LoadingSplash } from './LoadingSplash.svelte';
 export { default as PageNotFound } from './404.svelte';
+export { default as About } from './About.svelte';
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cda885a3..5a9a0275 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,13 @@
 <script>
-	import { LandingHeader, LandingHero, LandingInfoCard, HowItWorksCard, FaqCard } from '$comp';
+	import {
+		LandingHeader,
+		LandingHero,
+		LandingInfoCard,
+		HowItWorksCard,
+		FaqCard,
+		Image,
+		About
+	} from '$comp';
 
 	let howItWorks;
 	let faq;
@@ -81,7 +89,7 @@
 
 	<!-- how it works -->
 	<div bind:this={howItWorks}>
-		<h3 class="text-5xl font-medium mb-20 text-center">How it works</h3>
+		<h3 class="text-5xl font-medium mb-10 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"
 		>
@@ -98,4 +106,7 @@
 			<FaqCard question={question.question} answer={question.answer} />
 		{/each}
 	</div>
+
+	<!-- about -->
+	<About />
 </main>
diff --git a/static/icons/github.svg b/static/icons/github.svg
new file mode 100644
index 00000000..039f4d21
--- /dev/null
+++ b/static/icons/github.svg
@@ -0,0 +1,3 @@
+<svg width="480" height="512" viewBox="0 0 480 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M186.1 328.7C186.1 349.6 175.2 383.8 149.4 383.8C123.6 383.8 112.7 349.6 112.7 328.7C112.7 307.8 123.6 273.6 149.4 273.6C175.2 273.6 186.1 307.8 186.1 328.7V328.7ZM480 278.2C480 310.1 476.8 343.9 462.5 373.2C424.6 449.8 320.4 448 245.8 448C170 448 59.6 450.7 20.2 373.2C5.6 344.2 0 310.1 0 278.2C0 236.3 13.9 196.7 41.5 164.6C36.3 148.8 33.8 132.2 33.8 115.8C33.8 94.3 38.7 83.5 48.4 64C93.7 64 122.7 73 157.2 100C186.2 93.1 216 90 245.9 90C272.9 90 300.1 92.9 326.3 99.2C360.3 72.5 389.3 64 434.1 64C443.9 83.5 448.7 94.3 448.7 115.8C448.7 132.2 446.1 148.5 441 164C468.5 196.4 480 236.3 480 278.2V278.2ZM415.7 328.7C415.7 284.8 389 246.1 342.2 246.1C323.3 246.1 305.2 249.5 286.2 252.1C271.3 254.4 256.4 255.3 241.1 255.3C225.9 255.3 211 254.4 196 252.1C177.3 249.5 159 246.1 140 246.1C93.2 246.1 66.5 284.8 66.5 328.7C66.5 416.5 146.9 430 216.9 430H265.1C335.4 430 415.7 416.6 415.7 328.7V328.7ZM333.1 273.6C307.3 273.6 296.4 307.8 296.4 328.7C296.4 349.6 307.3 383.8 333.1 383.8C358.9 383.8 369.8 349.6 369.8 328.7C369.8 307.8 358.9 273.6 333.1 273.6Z" fill="white"/>
+</svg>
diff --git a/static/icons/twitter.svg b/static/icons/twitter.svg
new file mode 100644
index 00000000..e43e5f2a
--- /dev/null
+++ b/static/icons/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M459.37 151.716C459.695 156.264 459.695 160.813 459.695 165.361C459.695 304.081 354.112 463.919 161.137 463.919C101.685 463.919 46.457 446.7 0 416.813C8.447 417.787 16.568 418.112 25.34 418.112C74.395 418.112 119.553 401.544 155.614 373.28C109.482 372.305 70.822 342.092 57.502 300.508C64 301.482 70.497 302.132 77.32 302.132C86.741 302.132 96.163 300.832 104.934 298.559C56.853 288.812 20.791 246.579 20.791 195.574V194.275C34.76 202.072 51.005 206.945 68.222 207.594C39.958 188.751 21.441 156.589 21.441 120.203C21.441 100.711 26.638 82.843 35.735 67.249C87.39 130.924 165.035 172.507 252.1 177.056C250.476 169.259 249.501 161.138 249.501 153.016C249.501 95.188 296.283 48.082 354.435 48.082C384.648 48.082 411.937 60.752 431.105 81.219C454.82 76.671 477.561 67.899 497.704 55.879C489.906 80.245 473.338 100.712 451.572 113.706C472.689 111.433 493.156 105.584 511.998 97.463C497.706 118.254 479.837 136.771 459.37 151.716V151.716Z" fill="white"/>
+</svg>
diff --git a/static/images/swoosh.png b/static/images/swoosh.png
new file mode 100644
index 00000000..b97bf475
--- /dev/null
+++ b/static/images/swoosh.png