Restructured core content components

client/src/components/Content.vue

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