try to improve core web vitals

website/src/lib/components/docs/DocsImage.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
-	export let src;
+	export let img: 'getting-started/interface' | 'tools/routing' | 'tools/split';
 	export let alt: string;
 </script>
 
 <div class="flex flex-col items-center py-6 w-full">
 	<div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
-		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
+		{#if img === 'getting-started/interface'}
+			<enhanced:img
+				src="/src/lib/assets/img/docs/getting-started/interface.png"
+				{alt}
+				class="w-full max-w-3xl"
+			/>
+		{:else if img === 'tools/routing'}
+			<enhanced:img
+				src="/src/lib/assets/img/docs/tools/routing.png"
+				{alt}
+				class="w-full max-w-3xl"
+			/>
+		{:else if img === 'tools/split'}
+			<enhanced:img src="/src/lib/assets/img/docs/tools/split.png" {alt} class="w-full max-w-3xl" />
+		{/if}
 	</div>
 	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
 </div>

website/src/lib/docs/en/getting-started.mdx

@@ -3,7 +3,6 @@ title: Getting started
 ---
 
 <script lang="ts">
-    import interfaceScreenshot from '$lib/assets/img/docs/getting-started/interface.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -12,7 +11,7 @@ title: Getting started
 Welcome to the official guide for **gpx.studio**!
 This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
 
-<DocsImage src={interfaceScreenshot} alt="The gpx.studio interface." />
+<DocsImage img="getting-started/interface" alt="The gpx.studio interface." />
 
 As shown in the screenshot above, the interface is divided into four main sections organized around the map. 
 Before we dive into the details of each section, let's have a quick overview of the interface.

website/src/lib/docs/en/map-controls.mdx

@@ -10,6 +10,9 @@ title: Map controls
 
 # { title }
 
+The map controls are located on the right side of the interface.
+These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
+
 ### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
 
 The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.

website/src/lib/docs/en/toolbar/routing.mdx

@@ -6,7 +6,6 @@ title: Route planning and editing
     import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
     import DocsNote from '$lib/components/docs/DocsNote.svelte';
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-    import routingScreenshot from '$lib/assets/img/docs/tools/routing.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -62,7 +61,7 @@ This allows the route to be edited at different levels of detail.
 
 Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
 
-<DocsImage src={routingScreenshot} alt="Anchor points allow you to easily edit a route." />
+<DocsImage img="tools/routing" alt="Anchor points allow you to easily edit a route." />
 
 ## Additional tools
 

website/src/lib/docs/en/toolbar/scissors.mdx

@@ -5,7 +5,6 @@ title: Crop and split
 <script>
     import { ScissorsIcon } from 'lucide-svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
-    import splitScreenshot from '$lib/assets/img/docs/tools/split.png?enhanced';
     import DocsImage from '$lib/components/docs/DocsImage.svelte';
 </script>
 
@@ -30,4 +29,4 @@ Scissors will appear at the cursor position, showing that you can split the trac
 
 You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
 
-<DocsImage src={splitScreenshot} alt="Hovering over the selected trace turns your cursor into scissors." />
+<DocsImage img="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />

website/src/lib/utils.ts

@@ -26,7 +26,7 @@ type FlyAndScaleParams = {
 
 export const flyAndScale = (
     node: Element,
-    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 50 }
 ): TransitionConfig => {
     const style = getComputedStyle(node);
     const transform = style.transform === "none" ? "" : style.transform;

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

@@ -22,13 +22,6 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
-	import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
-	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
-	import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
-	import ignMap from '$lib/assets/img/home/ign.png?enhanced';
-	import cyclosmMap from '$lib/assets/img/home/cyclosm.png?enhanced';
-	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
-	import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
 
 	export let data: {
 		fundingModule: any;
@@ -78,7 +71,7 @@
 		</div>
 		<div class="relative overflow-hidden">
 			<enhanced:img
-				src={routingScreenshot}
+				src="/src/lib/assets/img/home/routing.png"
 				alt="Screenshot of the gpx.studio map in 3D."
 				class="w-full min-w-[1200px] ml-[20%] -translate-x-[20%]"
 			/>
@@ -137,30 +130,34 @@
 				class="relative h-60 xs:h-80 aspect-square rounded-2xl shadow-xl overflow-hidden overflow-clip"
 			>
 				<enhanced:img
-					src={mapboxOutdoorsMap}
+					src="/src/lib/assets/img/home/mapbox-outdoors.png"
 					alt="Mapbox Outdoors map screenshot."
 					class="absolute"
 					style="clip-path: inset(0 50% 50% 0);"
 				/>
 				<enhanced:img
-					src={mapboxSatelliteMap}
+					src="/src/lib/assets/img/home/mapbox-satellite.png"
 					alt="Mapbox Satellite map screenshot."
 					class="absolute"
 					style="clip-path: inset(0 0 50% 50%);"
 				/>
 				<enhanced:img
-					src={ignMap}
+					src="/src/lib/assets/img/home/ign.png"
 					alt="IGN map screenshot."
 					class="absolute"
 					style="clip-path: inset(50% 50% 0 0);"
 				/>
 				<enhanced:img
-					src={cyclosmMap}
+					src="/src/lib/assets/img/home/cyclosm.png"
 					alt="CyclOSM map screenshot."
 					class="absolute"
 					style="clip-path: inset(50% 0 0 50%);"
 				/>
-				<enhanced:img src={waymarkedMap} alt="Waymarked Trails map screenshot." class="absolute" />
+				<enhanced:img
+					src="/src/lib/assets/img/home/waymarked.png"
+					alt="Waymarked Trails map screenshot."
+					class="absolute"
+				/>
 			</div>
 		</div>
 	</div>
@@ -216,7 +213,7 @@
 	<div class="px-12 w-full">
 		<div class="w-full max-w-7xl mx-auto rounded-2xl shadow-xl overflow-hidden overflow-clip">
 			<enhanced:img
-				src={mapScreenshot}
+				src="/src/lib/assets/img/home/map.png"
 				alt="Screenshot of the gpx.studio map in 3D."
 				class="min-w-[800px] ml-[15%] -translate-x-[15%]"
 			/>