feat: simplify design & add further attributions

src/lib/about/hero.svelte

@@ -0,0 +1,20 @@
+<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-4xl pb-4 font-vinque">{name}</h3>
+
+    <p>
+      {description}
+    </p>
+  </div>
+</div>

src/lib/actor.svelte

@@ -3,7 +3,7 @@
   export let role: string;
 </script>
 
-<tr>
+<tr class="text-lg leading-10">
   <td class="font-vinque">{role}</td>
   <td>{actor}</td>
 </tr>

src/lib/h2.svelte

@@ -0,0 +1 @@
+<h2 class="text-4xl font-vinque my-4"><slot /></h2>

src/lib/h3.svelte

@@ -0,0 +1 @@
+<h3 class="text-2xl font-vinque my-4"><slot /></h3>

src/lib/hero.svelte

@@ -6,11 +6,17 @@
 </script>
 
 <div
-  class={`flex flex-col md:flex-row ${mirrored && "md:flex-row-reverse"} m-8 items-center`}
+  class={`flex flex-col md:flex-row ${
+    mirrored && "md:flex-row-reverse"
+  } m-8 my-12 items-center`}
 >
-  <img src={image} alt={`Grafik vom Charakter ${name}`} class="w-48 rounded-full" />
+  <img
+    src={image}
+    alt={`Grafik vom Charakter ${name}`}
+    class="w-48 rounded-full"
+  />
 
-  <div class="p-4 text-center md:text-left {!mirrored && "md:text-right"}">
+  <div class="p-4 md:text-left {!mirrored && 'md:text-right'}">
     <h3 class="text-4xl mb-4 font-vinque">{name}</h3>
 
     <p>

src/lib/major-actor.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let actor: string;
+  export let role: string;
+</script>
+
+<div class="text-xl my-3 md:my-0">
+  <div class="font-vinque">{role}</div>
+  <div>{actor}</div>
+</div>

src/lib/section-heading.svelte

@@ -1 +0,0 @@
-<h2 class="text-4xl font-vinque mb-4 text-center"><slot /></h2>