add mac app links

README.md

@@ -2,7 +2,15 @@
 
 [Find the nearest Tailwind colour](https://find-nearest-tailwind-colour.edjohnsonwilliams.co.uk) is a web app to help you find the nearest colour from [the full Tailwind CSS colour palette](https://tailwindcss.com/docs/customizing-colors).
 
-<https://find-nearest-tailwind-colour.edjohnsonwilliams.co.uk>
+<https://find-nearest-tailwind-colour.netlify.app>
+
+## Nearest Color Desktop app
+
+Nearest Color is a desktop app that's a better version of this website in every way, including much better color matching and every color input format. Find out more about [why **Nearest Color** is better than *Find the nearest Tailwind colour*](https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour).
+
+You can [buy Nearest Color on the Mac App Store](https://apps.apple.com/gb/app/nearest-color/id6504228400?mt=12) (Windows coming soon).
+
+<a href="https://apps.apple.com/gb/app/nearest-color/id6504228400?mt=12"><img src="https://github.com/edjw/find-nearest-tailwind-colour/blob/main/src/assets/images/apple_store.svg" alt="Download on the App Store" width="200"></a>
 
 ## Developing
 

src/components/AppStoreLinks.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import AppStoreImage from "$/assets/images/apple_store.svg";
+</script>
+
+<div class="flex items-center gap-x-2">
+	<a href="https://apps.apple.com/gb/app/nearest-color/id6504228400">
+		<img src={AppStoreImage} alt="Download on the App Store" class="my-0" />
+	</a>
+
+	<p class="my-0"><small>Windows coming soon</small></p>
+</div>

src/components/Banner.svelte

@@ -2,7 +2,7 @@
 	import { get } from "svelte/store";
 	import { bannerShownSessionStore, bannerHiddenCountStore } from "../data/bannerStore";
 	import { onMount } from "svelte";
-	import TestFlightLink from "./TestFlightLink.svelte";
+	import AppStoreLinks from "./AppStoreLinks.svelte";
 	let banner: HTMLDivElement;
 
 	onMount(() => {
@@ -40,7 +40,7 @@
 				class="px-2 py-1 italic font-extrabold text-white transition-all bg-indigo-500 rounded hover:bg-indigo-600 hover:text-gray-50"
 				>Nearest Color</a
 			>
-			will be an app that's a better version of this website in every way, including
+			is an app that's a better version of this website in every way, including
 			<a
 				class="font-bold"
 				href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?banner"
@@ -54,7 +54,9 @@
 			>.
 		</p>
 
-		<TestFlightLink />
+		<div class="my-2">
+			<AppStoreLinks />
+		</div>
 		<!-- <p class="flex-shrink-0 mt-0">
 			<a
 				href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?banner"

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
 	import "$/app.css";
+	import AppStoreLinks from "$/components/AppStoreLinks.svelte";
 	import Banner from "$/components/Banner.svelte";
-	import TestFlightLink from "$/components/TestFlightLink.svelte";
 </script>
 
 <div class="container pt-4 mx-auto">
@@ -16,7 +16,7 @@
 					href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?footer"
 					>Nearest Color</a
 				>
-				will be an app that's a better version of this website in every way, including
+				is an app that's a better version of this website in every way, including
 				<a
 					class="font-bold"
 					href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?footer"
@@ -30,7 +30,9 @@
 				>.
 			</p>
 		</div>
-		<TestFlightLink />
+		<div class="my-2">
+			<AppStoreLinks />
+		</div>
 
 		<p>
 			Made by