feat: add listen section

src/app.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply bg-cocoa-brown text-yellow-300 text-center;
+    @apply bg-cocoa-brown text-yellow-300 text-center scroll-smooth;
   }
 }
 

src/lib/divider.svelte

@@ -0,0 +1 @@
+<div class="border-t-[1px] my-8"></div>

src/lib/h2.svelte

@@ -1 +1,5 @@
-<h2 class="text-4xl font-vinque my-8"><slot /></h2>
+<script lang="ts">
+  export let id: string = "";
+</script>
+
+<h2 class="text-4xl font-vinque my-8" {id}><slot /></h2>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
   import "../app.css";
   import Image from "$lib/image.svelte";
+  import Divider from "$lib/divider.svelte";
 
   import LogoImg from "$lib/images/logo.png?w=512";
 </script>
@@ -34,7 +35,8 @@
     <main class="p-4 font-sans">
       <slot />
     </main>
-    <footer class="font-vinque text-lg border-t-[1px] p-8">
+    <Divider />
+    <footer class="font-vinque text-lg p-8">
       <a href="/impressum" class="underline">Impressum & Datenschutz</a><br />
       <a
         href="https://github.com/apricote/ein-pfeil-am-rechten-fleck.de"

src/routes/+page.svelte

@@ -11,6 +11,7 @@
   import TamImg from "$lib/images/tam.png?w=336";
   import BlueImg from "$lib/images/blue.png?w=336";
   import Image from "$lib/image.svelte";
+  import Divider from "$lib/divider.svelte";
 </script>
 
 <Image
@@ -30,6 +31,8 @@
   Erzählung voller Intrigen und überraschenden Wendungen.
 </p>
 
+<Divider />
+
 <H2>Unsere Helden</H2>
 
 <Hero
@@ -49,7 +52,14 @@
   image={BlueImg}
 />
 
-<H2>Hörprobe</H2>
+<Divider />
+
+<H2>Jetzt anhören</H2>
+
+<a class="underline" href="#download">Auf YouTube</a><br />
+<a class="underline" href="#download">Zum Herunterladen</a>
+
+<Divider />
 
 <H2>Würdigungen</H2>
 <H3>Besetzung</H3>
@@ -88,7 +98,9 @@
 
 <H3><a href="/attributions" class="underline">Soundeffekte</a></H3>
 
-<H2>Herunterladen</H2>
+<Divider />
+
+<H2 id="download">Herunterladen</H2>
 
 <p class="my-8 flex items-center flex-col justify-center md:flex-row">
   <DownloadButton href="/">Hörspiel (mp3)</DownloadButton>