add footer and other refactoring

3 files changed, 52 insertions, 6 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 0fdf5200..a5f4c274 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,5 +1,14 @@
 <script>
 	import { Image, Icon } from '$comp';
+
+	const aboutAdam = [
+		'Running Bitcoin since 2011',
+		'20+ years web development experience in government and industry',
+		'Early Bitcoin Vancouver meetup organizer',
+		'Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver',
+		'Yogi, permaculturist, anarchist, decentralist',
+		'Husband, father, brother, son'
+	];
 </script>
 
 <h3 class="text-5xl font-medium mb-10 text-center">About</h3>
@@ -68,11 +77,8 @@
 	<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>
+		{#each aboutAdam as about}
+			<li>{about}</li>
+		{/each}
 	</ul>
 </div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 00000000..0c682179
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { Icon } from '$comp';
+
+	const followLinks = [
+		{ url: 'https://twitter.com/coinoswallet', title: 'Twitter' },
+		{ url: 'https://github.com/coinos', title: 'GitHub' },
+		{ url: 'https://t.me/coinos', title: 'Telegram' }
+	];
+
+	const companyLinks = [
+		{ url: 'mailto:[email protected]', title: 'Support' },
+		{ url: '/community', title: 'Community' },
+		{ url: '/jobs', title: 'Jobs' }
+	];
+</script>
+
+<footer class="space-y-10 md:space-y-0 text-xl block md:flex justify-around items-center mb-20">
+	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Follow Us</p>
+		<ul class="mt-5 text-secondary space-y-3 font-medium">
+			{#each followLinks as link}
+				<li><a href={link.url} target="_blank" rel="noreferrer">{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Company</p>
+		<ul class="mt-5 text-secondary space-y-3">
+			{#each companyLinks as link}
+				<li><a href={link.url}>{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<Icon icon="shield" style="mx-auto md:mx-0" />
+</footer>
diff --git a/src/components/index.js b/src/components/index.js
index afa4790c..dade4c2c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -10,3 +10,4 @@ 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';
+export { default as Footer } from './Footer.svelte';