add pages

src/components/SectionHeader.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="flex justify-end">
 		<div class="flex w-4/5 flex-col justify-end">
-			<h2 class="text-center text-3xl text-blue-400">{{ headline }}</h2>
+			<h2 class="ml-20 text-center text-3xl text-blue-400">
+				{{ headline }}
+			</h2>
 			<div class="h-2 bg-blue-400" />
 		</div>
 	</div>

src/views/Playground.vue

@@ -1,10 +1,15 @@
 <template>
-	<container>
+	<cover />
+	<page>
 		<section-header headline="Lebenslauf" />
-	</container>
+	</page>
+	<page>
+		<section-header headline="Sonstiges" />
+	</page>
 </template>
 
 <script setup>
-import Container from "@/views/Container.vue";
+import Cover from "@/views/pages/Cover.vue";
+import Page from "@/views/pages/Page.vue";
 import SectionHeader from "@/components/SectionHeader.vue";
 </script>

src/views/pages/Cover.vue

@@ -0,0 +1,10 @@
+<template>
+	<page>
+		<section-header headline="Cover" />
+	</page>
+</template>
+
+<script setup>
+import Page from "@/views/pages/Page.vue";
+import SectionHeader from "@/components/SectionHeader.vue";
+</script>

src/views/pages/Page.vue

@@ -0,0 +1,7 @@
+<template>
+	<div class="my-16 break-after-page">
+		<slot />
+	</div>
+</template>
+
+<script setup></script>