problem: rocketpill card is displayed when it should not be

src/components/RocketPillCard.svelte

@@ -1,14 +1,18 @@
 <script>
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import { page } from '$app/stores';
 	import { Button } from '@/components/ui/button';
 	import * as Card from '@/components/ui/card';
 </script>
-
+{#if $page.route.id != "/"}
 <Card.Root>
 	<Card.Header class="pt-0 p-4">
 		<Card.Title>WTF</Card.Title>
 		<Card.Description>I'm new to Nostrocket, wtf is this thing all about?</Card.Description>
 	</Card.Header>
 	<Card.Content class="pt-0 md:p-4">
-		<Button size="sm" class="w-full">Rocketpill Me</Button>
+		<Button on:click={()=>{goto(`${base}/`)}} size="sm" class="w-full">Rocketpill Me</Button>
 	</Card.Content>
-</Card.Root>
+</Card.Root>
+{/if}

src/components/Subheading.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	export let title: string;
-</script>
-
-<div class="mb-4 flex items-center">
-	<h1 class="scroll-m-20 text-lg font-semibold tracking-tight md:text-xl">
-		{title}
-	</h1>
-</div>

src/layouts/SidePanelLayout.svelte

@@ -12,6 +12,7 @@
 	import RocketPillCard from '../components/RocketPillCard.svelte';
 	import { base } from '$app/paths';
 	import Login from '../components/Login.svelte';
+	import { page } from '$app/stores';
 
 	export let title = '';
 </script>