You could recreate this grid

frontend/src/lib/components/Header.svelte

@@ -1,21 +1,35 @@
-<script lang='ts'>
-    import { goto, afterNavigate } from '$app/navigation';
+<script lang="ts">
 	export let title: string = 'Naturalistici';
+	export let transparent = false;
 
 	const goBack = () => {
 		history.back();
 	};
 </script>
+
+{#if transparent}
+	<div style='background-color: transparent; color: black; justify-content: space-between; margin: 0 auto; width: 80%;'>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<a on:click={goBack}>
+			<img class="back" src="/images/black-back-arrow.png" alt="" />
+		</a>
+		
+		<img src="/images/app-bar-logo.png" alt="" />
+	</div>
+{:else}
 	<div>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<a on:click={goBack}>
-        <img class='back' src='/images/white-back-arrow.png' alt=''>
+			<img class="back" src="/images/white-back-arrow.png" alt="" />
 		</a>
 		<p>Percorsi {title}</p>
-    <img src='/images/app-bar-logo.png' alt=''>
+		<img src="/images/app-bar-logo.png" alt="" />
 	</div>
+{/if}
 
 <style>
 	div {

frontend/src/lib/components/InfoTab.svelte

@@ -0,0 +1,76 @@
+<script>
+</script>
+
+<div id="grid">
+	<div>
+		<p>Distanza</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Dislivello Positivo</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Velocità Media</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Difficolta</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Dislivello Negativo</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Durata</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Altitudine max</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Altitudine min</p>
+		<p>Value</p>
+	</div>
+
+	<div>
+		<p>Tipo Percorso</p>
+		<p>Value</p>
+	</div>
+</div>
+
+<style>
+    #grid {
+        display: grid;
+        grid-template-rows: repeat(3, 33%);
+        grid-template-columns: repeat(3, 1fr);
+        width: 100%;
+        background: white;
+        place-items: center;
+        font-size: 14px;
+    }
+
+    #grid div {
+        margin: 0 auto;
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    }
+    #grid div > p {
+        padding: 10px;
+        margin: 0px;
+    }
+    #grid div p:nth-child(2) {
+        font-weight: bold;
+        font-size: 16px;
+    }
+</style>

frontend/src/lib/components/Tabs.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import InfoTab from "./InfoTab.svelte";
+
+	const activeClicked = (evt) => {
+		const clickedTab = evt.target.closest('button');
+
+		for (const active of clickedTab.parentElement.querySelectorAll('.active')) {
+			active.classList.remove('active');
+		}
+
+		clickedTab.classList.add('active');
+	};
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div id="tabs" on:click={activeClicked}>
+	<button class="active">Info</button>
+	<button>Descrizione</button>
+	<button>Mappa</button>
+</div>
+<InfoTab></InfoTab>
+
+<style>
+	#tabs {
+		display: flex;
+		justify-content: center;
+		color: grey;
+		background-color: white;
+	}
+
+	#tabs button {
+		background: none;
+		color: inherit;
+		border: none;
+		padding: 0;
+		font: inherit;
+		cursor: pointer;
+		outline: inherit;
+		width: 33%;
+		text-align: center;
+		padding: 15px;
+		border-bottom: 1px solid #eee;
+		cursor: pointer;
+	}
+
+	.tab {
+		padding: 10px;
+		background-color: white;
+	}
+
+	.active {
+		color: black !important;
+		font-weight: bold !important;
+        border-bottom: 1px solid black !important;
+	}
+</style>

frontend/src/routes/routes/[slug]/+page.server.ts

@@ -0,0 +1,12 @@
+import { error } from "@sveltejs/kit";
+
+export const prerender = false;
+
+export async function load({ params }) {
+    return {
+        id: 1, 
+        name: 'Pianello 1',
+        image: '/images/test-1.jpg',
+        duration: 1233
+    };
+}

frontend/src/routes/routes/[slug]/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Header from '$lib/components/Header.svelte';
+	import Tabs from '$lib/components/Tabs.svelte';
+	export let data;
+</script>
+
+<Header transparent></Header>
+<img src='/splash.jpeg' alt='splash'>
+
+<div>
+	<div id='banner'>
+		<p>Percorso <b>{data.name}</b></p>
+		<p id='duration'>Durata {Math.floor(Number(data.duration) / 60)}'</p>
+	</div>
+	<Tabs></Tabs>
+</div>
+
+
+<style>
+	img {
+		width: 100%;
+		position: absolute;
+		z-index: -1;
+	}
+
+	#banner {
+		display: flex;
+		padding: 5px;
+		background-color: #de0e1b;
+		color: white;
+		font-size: 1.3em;
+		justify-content: space-evenly;
+		align-items: center;
+		padding: 20px;
+	}
+	#banner p {
+		margin: 0;
+		padding: 0;
+	}
+
+	#banner #duration {
+		font-size: 14px;
+		text-align: rightìì;
+	}
+</style>