Update Best Friend site

packages/bestfriend/src/app.html

@@ -4,7 +4,11 @@
 		<meta charset="utf-8" />
 		<meta name="theme-color" content="#fff7ed" media="(prefers-color-scheme: light)" />
 		<meta name="theme-color" content="#1c1917" media="(prefers-color-scheme: dark)" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon-96x96.png" sizes="96x96" />
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="shortcut icon" href="%sveltekit.assets%/favicon.ico" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

packages/bestfriend/src/lib/components/Footer.svelte

@@ -1,18 +1,35 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
-	import { navLinks, site } from '$lib/site';
+	import { navLinks } from '$lib/site';
+	const footerLink = 'text-teal-700 transition hover:text-orange-500 dark:text-teal-400 dark:hover:text-orange-400';
 </script>
 
 <footer class="mt-auto border-t border-stone-200/80 pt-8 dark:border-stone-700/60">
 	<nav class="mb-6 flex flex-wrap gap-x-6 gap-y-2 text-sm">
+		<a
+			class={footerLink}
+			href="https://www.instagram.com/badbadpower"
+			rel="external noopener noreferrer"
+			target="_blank"
+		>
+			<img src="/InstagramGradient.svg" alt="Instagram logo" class="w-[2ch] inline"/> @badbadpower
+		</a>
 		{#each navLinks as link (link.href)}
 			<a
-				class="text-teal-700 transition hover:text-orange-500 dark:text-teal-400 dark:hover:text-orange-400"
+				class={footerLink}
 				href={resolve(link.href)}>{link.label}</a
 			>
 		{/each}
+		<a
+			class={footerLink}
+			href="https://forms.gle/jvMsX5sYRAZZVqPu7"
+			rel="external noopener noreferrer"
+			target="_blank"
+		>
+			Sign up for the beta
+		</a>
 	</nav>
 	<p class="text-xs leading-relaxed text-stone-500 dark:text-stone-400">
-		{site.disclaimer}
+		Best Friend is not affiliated with, endorsed by, or sponsored by Teenage Engineering. EP-133, EP-1320, EP-40, and related names are trademarks of their respective owners. This app does not include any copyrighted material from Teenage Engineering.
 	</p>
 </footer>

packages/bestfriend/src/lib/site.ts

@@ -1,14 +1,10 @@
 export const site = {
 	name: 'Best Friend',
 	domain: 'https://epbf.app',
-	email: 'hello@brianholt.ca',
+	email: 'feedback@epbf.app',
+	bugs: 'bugs@epbf.app',
 	developer: 'Brian Holt',
 	developerUrl: 'https://brianholt.ca',
-	betaUrl: 'https://forms.gle/jvMsX5sYRAZZVqPu7',
-	tagline: 'The companion app for Teenage Engineering EP-Series samplers.',
-	disclaimer:
-		'Best Friend is not affiliated with, endorsed by, or sponsored by Teenage Engineering. EP-133, EP-1320, EP-40, and related names are trademarks of their respective owners. This app does not include any copyrighted material from Teenage Engineering.',
-	privacyUpdated: 'June 2026',
 } as const;
 
 export const navLinks = [

packages/bestfriend/src/routes/+page.svelte

@@ -1,27 +1,21 @@
 <script lang="ts">
 	import { site } from '$lib/index';
+	const tagline = 'The companion app for Teenage Engineering EP-Series samplers.';
 </script>
 
 <svelte:head>
 	<title>{site.name}</title>
-	<meta name="description" content={site.tagline} />
+	<meta name="description" content={tagline} />
 </svelte:head>
 
-<div class="space-y-8 mt-48">
+<div class="space-y-8 my-18">
 	<h1 class="text-5xl sm:text-9xl mb-3 sm:mb-8 font-bold tracking-tight text-orange-500 dark:text-orange-400">
 		{site.name}
 	</h1>
 
 	<p class="text-lg sm:text-3xl leading-relaxed text-stone-600 dark:text-stone-300">
-		{site.tagline}
+		{tagline} Follow the development Substack for releases, updates, and tips!
 	</p>
 
-	<a
-		class="inline-block rounded-full bg-orange-500 px-6 py-3 text-sm sm:px-8 sm:py-4 sm:text-xl font-semibold text-white shadow-md shadow-orange-500/25 transition hover:bg-orange-600 active:bg-orange-700  dark:shadow-orange-500/15 "
-		href={site.betaUrl}
-		rel="external noopener noreferrer"
-		target="_blank"
-	>
-		Sign up for the beta
-	</a>
+	<iframe src="https://epbf.substack.com/embed?transparent=1" width="480" height="150" style="border: 0; background: transparent" frameborder="0" scrolling="no"></iframe>
 </div>

packages/bestfriend/src/routes/privacy/+page.svelte

@@ -12,7 +12,7 @@
 	class="prose prose-stone dark:prose-invert prose-sm max-w-none prose-headings:text-teal-700 dark:prose-headings:text-teal-400"
 >
 	<h1>Privacy Policy</h1>
-	<p class="text-stone-500 not-prose dark:text-stone-400">Last updated: {site.privacyUpdated}</p>
+	<p class="text-stone-500 not-prose dark:text-stone-400">Last updated: July 2026</p>
 
 	<p>
 		{site.name} is built by

packages/bestfriend/src/routes/support/+page.svelte

@@ -19,7 +19,7 @@
 		Email
 		<a
 			class="font-medium text-orange-500 underline decoration-orange-300 underline-offset-2 transition hover:text-orange-500 dark:text-orange-400 dark:decoration-orange-500/50"
-			href="mailto:{site.email}">{site.email}</a
+			href="mailto:{site.bugs}">{site.bugs}</a
 		>
 	</p>
 

packages/bestfriend/static/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Best Friend",
+  "short_name": "EPBF",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#fff",
+  "background_color": "#fff",
+  "display": "standalone"
+}