minor about page improvements

website/src/lib/components/ModeSwitch.svelte

@@ -1,34 +1,24 @@
 <script lang="ts">
-	import * as Popover from '$lib/components/ui/popover';
 	import { Button } from '$lib/components/ui/button';
 	import { Moon, Sun } from 'lucide-svelte';
-	import { mode, resetMode, setMode, systemPrefersMode } from 'mode-watcher';
+	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _ } from 'svelte-i18n';
 
 	export let size = '20';
-	let open = false;
 
 	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
-<Popover.Root bind:open>
-	<Popover.Trigger {...$$restProps}>
-		{#if selectedMode === 'light'}
-			<Sun {size} class="mr-1" />
-		{:else}
-			<Moon {size} class="mr-1" />
-		{/if}
-	</Popover.Trigger>
-	<Popover.Content class=" w-fit flex flex-col p-2">
-		{#each ['light', 'dark'] as m}
-			<Button
-				variant="ghost"
-				class="h-8 justify-start"
-				on:click={() => {
-					setMode(m);
-					open = false;
-				}}>{$_(`menu.${m}`)}</Button
-			>
-		{/each}
-	</Popover.Content>
-</Popover.Root>
+<Button
+	variant="ghost"
+	class="h-8 px-1.5 {$$props.class ?? ''}"
+	on:click={() => {
+		setMode(selectedMode === 'light' ? 'dark' : 'light');
+	}}
+>
+	{#if selectedMode === 'light'}
+		<Sun {size} />
+	{:else}
+		<Moon {size} />
+	{/if}
+</Button>

website/src/lib/docs/en/about/maps.md

@@ -1,3 +0,0 @@
-# Global and local maps
-
-A large collection of basemaps and overlays to help you craft your next outdoor adventure, or visualize your latest achievement.

website/src/lib/docs/en/about/plot.md

@@ -1,3 +0,0 @@
-# Data visualization
-
-An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.

website/src/lib/docs/en/about/routing.md

@@ -1,3 +0,0 @@
-# Route planning
-
-An intuitive interface to create itineraries tailored to each sport, based on <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> data.

website/src/lib/docs/en/about/tools.md

@@ -1,3 +0,0 @@
-# Advanced file processing
-
-A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.

website/src/locales/en.json

@@ -356,6 +356,14 @@
         "email": "Email",
         "contribute": "Contribute",
         "supported_by": "supported by",
-        "support_button": "Support gpx.studio on Ko-fi"
+        "support_button": "Support gpx.studio on Ko-fi",
+        "route_planning": "Route planning",
+        "route_planning_description": "An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.",
+        "file_processing": "Advanced file processing",
+        "file_processing_description": "A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.",
+        "maps": "Global and local maps",
+        "maps_description": "A large collection of basemaps and overlays to help you craft your next outdoor adventure, or visualize your latest achievement.",
+        "data_visualization": "Data visualization",
+        "data_visualization_description": "An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives."
     }
 }

website/src/routes/[...language]/about/+page.svelte

@@ -88,8 +88,9 @@
 	</div>
 	<div class="px-24 w-full flex flex-col items-center">
 		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
-			<div class="text-center [&>*>p]:text-muted-foreground">
-				<DocsLoader path="about/routing.md" />
+			<div class="markdown text-center">
+				<h1>{$_('homepage.route_planning')}</h1>
+				<p class="text-muted-foreground">{$_('homepage.route_planning_description')}</p>
 			</div>
 			<div class="p-3 w-fit rounded-md border shadow-xl">
 				<Routing minimizable={false} />
@@ -98,14 +99,16 @@
 	</div>
 	<div class="px-24 w-full flex flex-col items-center">
 		<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
-			<div class="text-center md:hidden [&>*>p]:text-muted-foreground">
-				<DocsLoader path="about/tools.md" />
+			<div class="markdown text-center md:hidden">
+				<h1>{$_('homepage.file_processing')}</h1>
+				<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
 			</div>
 			<div class="relative">
 				<Toolbar />
 			</div>
-			<div class="text-center hidden md:block [&>*>p]:text-muted-foreground">
-				<DocsLoader path="about/tools.md" />
+			<div class="markdown text-center hidden md:block">
+				<h1>{$_('homepage.file_processing')}</h1>
+				<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
 			</div>
 		</div>
 	</div>
@@ -113,12 +116,11 @@
 		<div
 			class="markdown flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl"
 		>
-			<div class="text-center [&>*>p]:text-muted-foreground">
-				<DocsLoader path="about/maps.md" />
+			<div class="markdown text-center">
+				<h1>{$_('homepage.maps')}</h1>
+				<p class="text-muted-foreground">{$_('homepage.maps_description')}</p>
 			</div>
-			<div
-				class="relative grow min-w-1/2 min-h-96 shrink-0 aspect-square rounded-2xl shadow-xl overflow-clip"
-			>
+			<div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
 				<enhanced:img
 					src={mapboxOutdoorsMap}
 					alt="Mapbox Outdoors map screenshot."
@@ -148,8 +150,9 @@
 		</div>
 	</div>
 	<div class="px-6 md:px-12">
-		<div class="text-center mb-6 [&>*>p]:text-muted-foreground">
-			<DocsLoader path="about/plot.md" />
+		<div class="markdown text-center">
+			<h1>{$_('homepage.data_visualization')}</h1>
+			<p class="text-muted-foreground">{$_('homepage.data_visualization_description')}</p>
 		</div>
 		<div class="h-48 w-full">
 			<ElevationProfile
@@ -203,7 +206,7 @@
 			<DocsLoader path="about/translation.md" />
 		</div>
 	</div>
-	<div class="px-24 flex flex-col items-center">
+	<div class="px-12 md:px-24 flex flex-col items-center">
 		<div
 			class="max-w-4xl flex flex-col md:flex-row items-center justify-center gap-x-12 gap-y-6 p-6 border rounded-2xl shadow-xl"
 		>