homepage tweaks

7 files changed, 46 insertions, 23 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 7c38d819..4e3b7d25 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -49,8 +49,8 @@
 		</h3>
 		<div class="space-y-10 2xl:space-y-0 2xl:grid gap-y-10 grid-cols-2">
 			{#each team as member}
-				<div class="md:flex justify-center items-center 2xl:items-start md:space-x-10">
-					<div>
+				<div class="md:flex justify-center 2xl:items-start md:space-x-10">
+					<div class="w-[220px]">
 						<Image image={member.name} style="rounded-full mx-auto w-40 h-40 mb-5 object-cover" />
 
 						<div class="space-y-2">
@@ -74,7 +74,7 @@
 							{/each}
 						</div>
 					</div>
-					<div class="mt-5 md:mt-0 text-secondary text-xl w-full md:w-[450px]">
+					<div class="text-secondary text-xl w-full md:w-[450px] mt-5">
 						{$t(`about.team.${member.name}.bio`)}
 					</div>
 				</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 0b0a2b72..0ea934e6 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -20,7 +20,16 @@
 		<div class="text-center w-full mb-8">
 			<a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
 		</div>
-		<div class="text-center">
+		<div class="flex gap-2 justify-center">
+			<div>
+				<a href="/register">
+					<button
+						class="bg-black text-white border rounded-full px-6 py-4 font-bold hover:opacity-80 text-lg"
+					>
+						Get started
+					</button>
+				</a>
+			</div>
 			<LocaleSelector style="p-2 rounded-md text-center hover:opacity-80 cursor-pointer" />
 		</div>
 	</div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b3be164f..8a1b6afd 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -188,10 +188,11 @@
 	onDestroy(async () => map && map.remove());
 </script>
 
-<div
-	class="mx-auto w-full md:w-11/12 lg:w-3/4 2xl:w-1/2 max-w-7xl h-[450px] z-0"
-	bind:this={mapElement}
-/>
+<div class="container mx-auto max-w-4xl">
+	<div class="flex w-full">
+		<div class="mx-auto h-[450px] w-full z-0" bind:this={mapElement} />
+	</div>
+</div>
 
 <style>
 	@import 'leaflet/dist/leaflet.css';
diff --git a/src/locales/en.json b/src/locales/en.json
index 07e9dab6..cbd9be0d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -44,7 +44,7 @@
 		},
 		"locations": {
 			"header": "Locations",
-			"description": "Here are some businesses that are accepting bitcoin with Coinos. Feel free to <a class=\"underline\" href=\"https://github.com/teambtcmap/btcmap-data/wiki/Tagging-Instructions\">suggest changes</a> if we missed something."
+			"description": "Here are some businesses that are accepting bitcoin with Coinos. We hope that yours will be next!"
 		}
 	},
 	"error": {
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index a042ddcb..c91d7e8f 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -66,30 +66,30 @@
 		</div>
 	</div>
 
-	<div class="grid sm:grid-cols-2 gap-2">
+	<div class="grid sm:grid-cols-2 gap-2 text-lg">
 		<a href="/send">
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
+			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
 				>{$t('user.dashboard.withdraw')}</button
 			>
 		</a>
 		<a href={`/${user.username}/receive`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
+			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
 				>{$t('user.dashboard.receive')}</button
 			>
 		</a>
 		<a href={`/${user.username}/address`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
+			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
 				>Deposit</button
 			>
 		</a>
 		<a href={`/send/voucher`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
+			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
 				>Voucher</button
 			>
 		</a>
 	</div>
 
-	<div class="flex">
+	<div class="flex container max-w-md fixed bottom-4">
 		<div class="text-secondary flex mr-auto">
 			<div class="flex mr-1">
 				<div class="my-auto mr-1">1</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 42c6265f..e318ad3a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -95,14 +95,6 @@
 	{#if locations?.length}
 		<About {locations} />
 	{/if}
-
-	<div class="flex justify-center">
-		<a href="/register">
-			<button class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80">
-				{$t('nav.startInSeconds')}
-			</button>
-		</a>
-	</div>
 </main>
 
 <Footer />
diff --git a/static/images/btcmap.svg b/static/images/btcmap.svg
new file mode 100644
index 00000000..4c1a4062
--- /dev/null
+++ b/static/images/btcmap.svg
@@ -0,0 +1,21 @@
+<svg width="267" height="344" viewBox="0 0 267 344" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.192383 133.016C0.192383 49.881 67.8089 0 133.209 0C198.608 0 266.225 49.881 266.225 133.016C266.225 212.826 146.51 334.757 140.968 340.3C138.751 342.517 136.534 343.625 133.209 343.625C129.883 343.625 127.666 342.517 125.449 340.3C119.907 334.757 0.192383 211.717 0.192383 133.016Z" fill="#0B9072"/>
+<mask id="mask0_116_862" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="267" height="344">
+<path d="M0.192383 133.016C0.192383 49.881 67.8089 0 133.209 0C198.608 0 266.225 49.881 266.225 133.016C266.225 212.826 146.51 334.757 140.968 340.3C138.751 342.517 136.534 343.625 133.209 343.625C129.883 343.625 127.666 342.517 125.449 340.3C119.907 334.757 0.192383 211.717 0.192383 133.016Z" fill="#0B9072"/>
+</mask>
+<g mask="url(#mask0_116_862)">
+<rect x="132.369" y="171.819" width="131.567" height="133.678" transform="rotate(45 132.369 171.819)" fill="#0099AF"/>
+<path d="M135.541 179.688L233.553 270.699C311.962 173.621 288.004 79.3429 266.224 44.3386L135.541 179.688Z" fill="#051173"/>
+<rect x="36.6914" y="247.691" width="291.246" height="38.318" transform="rotate(-45 36.6914 247.691)" fill="#53C5D5"/>
+<rect x="153.3" y="172.688" width="120.044" height="38.318" transform="rotate(45 153.3 172.688)" fill="#53C5D5"/>
+</g>
+<circle cx="130.874" cy="140.017" r="79.343" fill="#E4EBEC"/>
+<g clip-path="url(#clip0_116_862)">
+<path d="M157.264 143.33C163.513 142.104 168.246 138.264 169.566 130.106C171.387 118.963 162.62 112.714 150.6 108.383L154.631 93.3295L145.103 90.7764L141.173 105.432C138.666 104.761 136.098 104.123 133.54 103.491L137.491 88.739L127.971 86.1873L123.937 101.236C121.863 100.723 119.827 100.219 117.849 99.6888L117.86 99.6443L104.719 96.1176L102.099 105.902C102.099 105.902 109.17 107.66 109.021 107.753C112.878 108.789 113.561 111.282 113.424 113.239L108.833 130.387L102.379 154.475C101.896 155.596 100.681 157.27 97.9828 156.55C98.0777 156.687 91.0519 154.692 91.0519 154.692L86.2303 165.127L98.6278 168.449C100.937 169.07 103.198 169.713 105.42 170.327L101.349 185.552L110.866 188.104L114.9 173.04C117.504 173.793 120.026 174.493 122.495 175.151L118.475 190.143L128.003 192.696L132.081 177.5C148.334 180.907 160.586 180.031 165.856 165.938C170.101 154.592 165.795 147.866 157.264 143.33ZM130.882 114.322C136.256 115.762 153.598 118.645 150.707 129.443C147.931 139.793 131.36 134.057 125.98 132.616L130.882 114.322ZM118.097 162.02L123.506 141.851C129.963 143.579 150.692 147.22 147.515 159.088C144.468 170.47 124.559 163.746 118.097 162.02Z" fill="#0B9072"/>
+</g>
+<defs>
+<clipPath id="clip0_116_862">
+<rect width="83.9761" height="106.37" fill="white" transform="translate(105.696 78.4165) rotate(15)"/>
+</clipPath>
+</defs>
+</svg>