feat: add heroes

src/lib/about/hero.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let name: string;
+  export let description: string;
+  export let image: string;
+  export let mirrored: boolean = false;
+</script>
+
+<div class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8`}>
+  <img src={image} alt={`Grafik vom Charakter ${name}`} class="p-4" />
+
+  <div>
+    <h3 class="text-xl pb-4">{name}</h3>
+
+    <p>
+      {description}
+    </p>
+  </div>
+</div>

src/routes/index.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  import Hero from "$lib/about/hero.svelte";
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>
   Visit <a class="text-blue-600 underline" href="https://kit.svelte.dev">kit.svelte.dev</a> to read the
@@ -13,12 +17,22 @@
 </p>
 
 <p id="heroes">
-  Quisque ornare tincidunt diam, sit amet sollicitudin turpis porta eu. In maximus vel nunc sit amet
-  congue. Aliquam dignissim ex at sollicitudin placerat. Praesent quis felis eu lacus vehicula
-  rutrum nec vel metus. Maecenas hendrerit posuere ex in tempus. In hendrerit lacinia lacus ut
-  dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-  Curabitur vitae enim hendrerit, scelerisque sapien non, facilisis magna. Nunc molestie iaculis
-  dapibus. Donec porttitor vestibulum libero, in auctor sem convallis eu.
+  <Hero
+    name="Beyron Ladisla"
+    description="Seit 22 Jahren Unteroffizier der Königsgarde und keine Ambitionen aufzusteigen. Beyron fühlt sich eher zum Alkohol hingezogen als zu seinem Beruf."
+    image=""
+  />
+  <Hero
+    name="Tam"
+    description="Nur wenigen ist Tamriel, genannt Tam, überhaupt bekannt. Fängt sie jedoch an zu sprechen offenbart sich ein kluger Kopf. Als beste Freundin und stete Begleiterin von Beyron ist sie oftmals das gute Gewissen dieser Zweierbeziehung."
+    image=""
+    mirrored
+  />
+  <Hero
+    name="Blue"
+    description="Ein langweiliges Leben führen wie ihre reichen Eltern? Nichts für Blue. Die weite Welt ist ein viel besserer Ort um erwachsen zu werden als ein staubiger Klassenraum."
+    image=""
+  />
 </p>
 
 <p id="listen">