From b56a271f4d8b1f1148daec7c3bcda5469fd031c3 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 15 Sep 2022 14:44:57 -0700
Subject: started team section

---
 src/components/About.svelte | 77 ++++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

(limited to 'src/components')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 55fc34d1..27193804 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,6 +1,17 @@
 <script>
 	import { Image, Icon, LocationsMap } from '$comp';
 	import { t } from '$lib/translations';
+
+	let team = [
+		{
+			name: 'adam',
+			socials: [
+				{ type: 'twitter', url: 'https://twitter.com/adamsoltys', color: 'bg-[#1D9BF0]' },
+				{ type: 'github', url: 'https://github.com/asoltys', color: 'bg-gray-800' }
+			]
+		},
+		{ name: 'cole', socials: [] }
+	];
 </script>
 
 <h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3>
@@ -21,49 +32,37 @@
 	<Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" />
 </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">
-			{$t('about.founder.header')}
-		</h3>
+<div class="container grid grid-cols-2">
+	{#each team as member}
+		<div class="flex">
+			<div class="flex">
+				<Image image={member.name} style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
 
-		<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"
+						>{$t(`about.team.${member.name}.name`)}</span
+					>
+					<span class="text-xl text-center text-secondary block lg:text-right"
+						>{$t(`about.team.${member.name}.position`)}</span
+					>
+				</div>
 
-		<div class="space-y-2">
-			<span class="text-2xl text-center font-semibold block lg:text-right"
-				>{$t('about.founder.name')}</span
-			>
-			<span class="text-xl text-center text-secondary block lg:text-right"
-				>{$t('about.founder.position')}</span
-			>
+				<div class="flex justify-center lg:justify-end items-center space-x-5">
+					{#each member.socials as social}
+						<a
+							href={social.url}
+							target="_blank"
+							rel="noreferrer"
+							class={`rounded-full p-2 ${social.color}`}><Icon icon={social.type} style="w-6" /></a
+						>
+					{/each}
+				</div>
+			</div>
 		</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 class="text-secondary text-xl">
+			{$t(`about.team.${member.name}.bio`)}
 		</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>{$t('about.founder.qualifications.bitcoin')}</li>
-		<li>{$t('about.founder.qualifications.webDev')}</li>
-		<li>{$t('about.founder.qualifications.bitcoinVancouver')}</li>
-		<li>{$t('about.founder.qualifications.bitcoinCoop')}</li>
-		<li>{$t('about.founder.qualifications.beliefs')}</li>
-		<li>{$t('about.founder.qualifications.familialRelationships')}</li>
-	</ul>
+	{/each}
 </div>
 
 <div class="mt-20">
-- 
cgit v1.2.3