following tutorial a bit to learn

src/routes/+layout.svelte

@@ -1,5 +1,13 @@
-<script>
+<script lang="ts">
   import '../app.css'
+  let { children } = $props();
 </script>
 
-<slot />
+<nav>
+  <a href="/">home</a>
+  <a href="/about">about</a>
+  <a href="/blog">blog</a>
+</nav>
+
+{@render children()}
+

src/routes/+page.svelte

@@ -33,4 +33,4 @@
       max-width: none;
     }
   }
-</style>
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1,31 @@
+<main>
+  <h1>About </h1>
+  <p>This is the about page</p>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  p {
+    color: #333;
+    margin: 1em 0;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>

src/routes/blog/+page.svelte

@@ -0,0 +1,14 @@
+<main>
+	<h1>blog</h1>
+	<ul>
+		<li>
+			<a href="/blog/one">one</a>
+		</li>
+		<li>
+			<a href="/blog/two">two</a>
+		</li>
+		<li>
+			<a href="/blog/three">three</a>
+		</li>
+	</ul>
+</main>

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

@@ -0,0 +1,30 @@
+<main>
+  <h1>blog</h1>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  p {
+    color: #333;
+    margin: 1em 0;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>