feat(dashboard): screenshots and text showcasing some unique features

Catalogger.Frontend/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import type { PageData } from "./$types";
 	import { Button, ButtonGroup } from "@sveltestrap/sveltestrap";
 	import Message from "./Message.svelte";
+	import Screenshot from "./Screenshot.svelte";
 
 	export let data: PageData;
 
@@ -68,3 +69,60 @@
 {:else}
 	<p>No news right now.</p>
 {/each}
+
+<hr class="my-4" />
+
+<div class="row gx-2 gy-2 row-cols-1 row-cols-lg-3">
+	<Screenshot
+		image="delete"
+		alt="Screenshot showing a deleted message log, including PluralKit system and member."
+		title="Deleted message logging"
+	>
+		Catalogger will ignore the deleted messages caused by proxying, while adding
+		extra data to the proxied messages themselves.
+	</Screenshot>
+	<Screenshot
+		image="configure-channels"
+		alt="Screenshot showing a menu based on an embed and buttons, with fields for every type of log."
+		title="Easily configurable"
+	>
+		You can easily configure Catalogger with its slash commands, or with the
+		dashboard (you're there right now!)
+	</Screenshot>
+	<Screenshot
+		image="ban"
+		alt="Screenshot showing a ban log, with the user, reason, responsible moderator, and PluralKit system information."
+		title="Ban and unban logging"
+	>
+		When banning a user, Catalogger will warn you if they have a linked
+		PluralKit system, and notify you if another account linked to the same
+		system joins.
+	</Screenshot>
+	<Screenshot
+		image="join"
+		alt="Screenshot showing a join log, including PluralKit system information, a watchlist entry, and a banned system notice."
+		title="Join and leave logging"
+	>
+		When members join your server, Catalogger will list the invite they used,
+		their PluralKit system, and whether their system has been banned before. You
+		can also add users to a watchlist, and Catalogger will send a warning when
+		they join.
+	</Screenshot>
+	<Screenshot
+		image="edit"
+		alt="Screenshot showing an edited message log, including PluralKit system and member."
+		title="Edited message logging"
+	>
+		Catalogger can log edited messages too, and ignore the <code>pk;edit</code>
+		messages that made the edits. Of course, this <em>also</em> shows the system
+		and member that sent the message.
+	</Screenshot>
+	<Screenshot
+		image="keyroles"
+		alt="Screenshot showing a key role log, with three roles. The log message also shows the moderator that changed the roles."
+		title="Log important roles"
+	>
+		Catalogger can log your server's most important roles separately, and will
+		show who gave or removed the roles in addition to the target.
+	</Screenshot>
+</div>

Catalogger.Frontend/src/routes/Message.svelte

@@ -21,7 +21,7 @@
 		: null;
 </script>
 
-<Card>
+<Card class="mb-2">
 	<CardBody>
 		<CardText>{@html content}</CardText>
 	</CardBody>

Catalogger.Frontend/src/routes/Screenshot.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import {
+		Card,
+		CardBody,
+		CardText,
+		CardTitle,
+	} from "@sveltestrap/sveltestrap";
+
+	export let image: string;
+	export let alt: string;
+	export let title: string;
+</script>
+
+<div class="col">
+	<Card>
+		<picture class="card-img-top">
+			<source
+				srcset="/previews/{image}-light.webp"
+				media="(prefers-color-scheme: light)"
+			/>
+			<source
+				srcset="/previews/{image}-dark.webp"
+				media="(prefers-color-scheme: dark)"
+			/>
+			<img class="card-img-top" src="/previews/{image}-light.webp" {alt} />
+		</picture>
+		<CardBody>
+			<CardTitle>{title}</CardTitle>
+			<CardText><slot /></CardText>
+		</CardBody>
+	</Card>
+</div>