Restructured core content components

client/src/components/Content.vue

@@ -1,19 +1,13 @@
 <script>
     export default {
-        props: ['contentTitle']
+        name: 'Content'
     }
 </script>
 <template>
-    <div class="max-w-2xl mx-auto bg-lime-50 p-3 rounded-xl">
-        <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
-            <slot name="header"></slot>
-        </h1>
     <div>
-            <slot name="content">
+        <slot>
-                <p>Where will the text go?</p>
         </slot>
     </div>
-    </div>
 </template>
 <style>
 </style>

client/src/components/Header.vue

@@ -0,0 +1,12 @@
+<script>
+    export default {
+        name: 'Header'
+    }
+</script>
+<template>
+        <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
+            <slot></slot>
+        </h1>
+</template>
+<style>
+</style>

client/src/components/TextFrame.vue

@@ -0,0 +1,12 @@
+<script>
+    export default {
+        name: 'TextFrame'
+    }
+</script>
+<template>
+    <div class="max-w-2xl mx-auto bg-lime-50 p-3 rounded-xl">
+        <slot></slot>
+    </div>
+</template>
+<style>
+</style>