From c08bc3e50844fd7703a7da933d342927eb19fce2 Mon Sep 17 00:00:00 2001
From: jan-jaap <jan-jaap.sinke@tover.care>
Date: Thu, 6 Jun 2024 21:38:39 +0200
Subject: [PATCH] content

---
 lang/en/en.json                               | 19 ++--
 .../js/components/layout/ApiContentPage.vue   | 34 -------
 .../components/layout/home/SectionsPage.vue   |  8 ++
 .../layout/sections/DebugSection.vue          | 20 ++++
 .../layout/sections/HeroSection.vue           | 42 +++++----
 .../layout/sections}/InfoSection.vue          |  6 +-
 .../layout/sections/TabbedSection.vue         |  3 +-
 .../layout/sections}/TextSection.vue          |  2 +-
 .../layout/sections/TitleSection.vue          | 27 ++++++
 resources/js/components/nav/NavBar.vue        | 51 +++++-----
 resources/js/routes/PublicRoutes.js           | 93 +++++++++----------
 resources/js/views/Public/About/About.vue     | 27 +++---
 resources/js/views/Public/Home/Home.vue       | 71 +++++++-------
 .../Public/Home/Sections/HeroSection.vue      | 33 -------
 .../js/views/Public/HowItWorks/HowItWorks.vue | 38 --------
 resources/js/views/Public/Pages/Default.vue   | 52 +++++++++++
 resources/pages/en/about.json                 | 21 ++++-
 resources/pages/en/how-it-works.json          |  4 +-
 18 files changed, 286 insertions(+), 265 deletions(-)
 delete mode 100644 resources/js/components/layout/ApiContentPage.vue
 create mode 100644 resources/js/components/layout/home/SectionsPage.vue
 create mode 100644 resources/js/components/layout/sections/DebugSection.vue
 rename resources/js/{views/Public/Home/Sections => components/layout/sections}/InfoSection.vue (91%)
 rename resources/js/{views/Public/Home/Sections => components/layout/sections}/TextSection.vue (90%)
 create mode 100644 resources/js/components/layout/sections/TitleSection.vue
 delete mode 100644 resources/js/views/Public/Home/Sections/HeroSection.vue
 delete mode 100644 resources/js/views/Public/HowItWorks/HowItWorks.vue
 create mode 100644 resources/js/views/Public/Pages/Default.vue

diff --git a/lang/en/en.json b/lang/en/en.json
index 5138b63..25e9363 100644
--- a/lang/en/en.json
+++ b/lang/en/en.json
@@ -1,7 +1,7 @@
 {
   "auth": {
-    "logout": "Logout",
-    "login": "Login",
+    "logout": "Sign out",
+    "login": "Sign in",
     "register": "Sign up",
     "reset-password": "Reset password",
     "forgot-password": "Forgot password",
@@ -17,8 +17,8 @@
       "didnt-receive": " If you did not receive the email, click the button below to send it again.",
       "success": "Your email has been verified. You can now continue your journey."
     },
-    "already-registered": "Already have an account? Login now.",
-    "remember-password": "Remember your password? Login now."
+    "already-registered": "Already have an account? Sign in now.",
+    "remember-password": "Remember your password? Sign in now."
   },
   "buttons": {
     "login": "Sign in",
@@ -98,16 +98,17 @@
   },
   "nav": {
     "about": "About",
+    "children": "Children",
+    "cities": "Cities",
     "contact": "Contact",
     "dashboard": "Dashboard",
     "home": "Home",
+    "how-it-works": "How it works",
     "login": "Sign in",
-    "schools": "Schools",
-    "cities": "Cities",
-    "parents": "Parents",
-    "children": "Children",
     "logout": "Sign out",
+    "parents": "Parents",
+    "portal": "Portal",
     "register": "Sign up",
-    "portal": "Portal"
+    "schools": "Schools"
   }
 }
diff --git a/resources/js/components/layout/ApiContentPage.vue b/resources/js/components/layout/ApiContentPage.vue
deleted file mode 100644
index 177ff98..0000000
--- a/resources/js/components/layout/ApiContentPage.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <single-page :title="title">
-    <text-section :section="section"/>
-  </single-page>
-</template>
-<script>
-import SinglePage from "@/components/layout/home/SingleHomePage.vue";
-import TextSection from "@/views/Public/Home/Sections/TextSection.vue";
-export default {
-  name: 'ApiContentPage',
-  components: {TextSection, SinglePage},
-  data() {
-    return {
-      section: {}
-    }
-  },
-  computed: {
-    title() {
-      return this.$t(`page.${this.$route.name}`)
-    }
-  },
-  methods: {
-    loadPageContent() {
-      axios.get(`/page/${this.$route.name}`)
-          .then((response) => {
-            this.section = response.data.data
-          })
-    }
-  },
-  mounted() {
-    this.loadPageContent()
-  }
-}
-</script>
diff --git a/resources/js/components/layout/home/SectionsPage.vue b/resources/js/components/layout/home/SectionsPage.vue
new file mode 100644
index 0000000..009b080
--- /dev/null
+++ b/resources/js/components/layout/home/SectionsPage.vue
@@ -0,0 +1,8 @@
+<template>
+  <v-container class="ma-0 pa-0" fluid>
+    <slot></slot>
+  </v-container>
+</template>
+<script>
+export default {};
+</script>
diff --git a/resources/js/components/layout/sections/DebugSection.vue b/resources/js/components/layout/sections/DebugSection.vue
new file mode 100644
index 0000000..1c10c92
--- /dev/null
+++ b/resources/js/components/layout/sections/DebugSection.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-container v-if="auth">
+    <pre><slot></slot></pre>
+  </v-container>
+</template>
+<script>
+import PageSection from "@/components/layout/sections/PageSection.vue";
+
+export default {
+  name: "DebugSection",
+  components: { PageSection },
+};
+</script>
+<style scoped>
+pre {
+  border: solid 1px red;
+  padding: 1rem;
+  margin: 2rem 0;
+}
+</style>
diff --git a/resources/js/components/layout/sections/HeroSection.vue b/resources/js/components/layout/sections/HeroSection.vue
index 4291af5..86d2b65 100644
--- a/resources/js/components/layout/sections/HeroSection.vue
+++ b/resources/js/components/layout/sections/HeroSection.vue
@@ -1,27 +1,33 @@
 <template>
-  <v-container class="ma-0 pa-0" fluid>
-    <div class="bg-primary text-white">
-      <v-container class="pt-16 pb-12">
-        <h1 class="text-h3">{{ ucTitle }}</h1>
-      </v-container>
+  <v-parallax src="/images/parently_light.jpg" color="primary" height="600px">
+    <div class="py-16 d-flex flex-column align-center justify-center flex-grow-1 h-100">
+      <img class="main-image pa-4" alt="Parently" src="/images/logo.svg">
+      <h1 class="text-center text-primary text-h3 mb-8">Share care together</h1>
+      <div class="py-4 d-flex justify-center">
+        <template v-if="!user">
+          <v-btn class="mx-2" size="large" color="primary" :to="{name: 'login'}">{{ $t('guest.login') }}</v-btn>
+          <v-btn class="mx-2" size="large" color="warning" href="/register">{{ $t('guest.register') }}</v-btn>
+        </template>
+        <template v-if="user">
+          <v-btn class="mx-2" size="large" color="warning" :to="{name: 'dashboard'}">{{ $t('portal.title') }}</v-btn>
+        </template>
+      </div>
     </div>
-    <slot></slot>
-  </v-container>
+  </v-parallax>
+
 </template>
 <script>
-import { computed } from "vue";
+
+import {mapActions, mapState} from "pinia";
+import {useAuthStore} from "@/stores/auth/index.js";
 
 export default {
-  props: {
-    section: Object,
-  },
+  name: 'HeroSection',
   computed: {
-    ucTitle() {
-      return (
-        this.section.title &&
-        this.section.title[0].toUpperCase() + this.section.title.slice(1)
-      );
-    },
+    ...mapState(useAuthStore, ['user']),
   },
-};
+  methods: {
+    ...mapActions(useAuthStore, ['logout'])
+  }
+}
 </script>
diff --git a/resources/js/views/Public/Home/Sections/InfoSection.vue b/resources/js/components/layout/sections/InfoSection.vue
similarity index 91%
rename from resources/js/views/Public/Home/Sections/InfoSection.vue
rename to resources/js/components/layout/sections/InfoSection.vue
index 7500618..9ca0267 100644
--- a/resources/js/views/Public/Home/Sections/InfoSection.vue
+++ b/resources/js/components/layout/sections/InfoSection.vue
@@ -4,7 +4,9 @@
       <v-col cols="12" md="4" :order-md="order" class="f-flex align-stretch">
         <v-img
           class="flex-grow-1 rounded-lg elevation-0"
-          cover
+          contain
+          max-height="300px"
+          :aspect-ratio="1"
           :src="image"
         ></v-img>
       </v-col>
@@ -21,7 +23,7 @@
   </page-section>
 </template>
 <script>
-import PageSection from "../../../../components/layout/sections/PageSection.vue";
+import PageSection from "./PageSection.vue";
 
 export default {
   name: "InfoSection",
diff --git a/resources/js/components/layout/sections/TabbedSection.vue b/resources/js/components/layout/sections/TabbedSection.vue
index 2adac63..51ea782 100644
--- a/resources/js/components/layout/sections/TabbedSection.vue
+++ b/resources/js/components/layout/sections/TabbedSection.vue
@@ -10,7 +10,6 @@
       </v-tab>
     </v-tabs>
     <text-section :section="content" />
-    {{ selectedTab || "n/a" }}
   </page-section>
 </template>
 <script>
@@ -18,7 +17,7 @@ import { marked } from "marked";
 import PageSection from "@/components/layout/sections/PageSection.vue";
 import { mapActions, mapState } from "pinia";
 import { useContentStore } from "@/stores/content/index.js";
-import TextSection from "@/views/Public/Home/Sections/TextSection.vue";
+import TextSection from "@/components/layout/sections/TextSection.vue";
 export default {
   name: "TabbedSection",
   props: {
diff --git a/resources/js/views/Public/Home/Sections/TextSection.vue b/resources/js/components/layout/sections/TextSection.vue
similarity index 90%
rename from resources/js/views/Public/Home/Sections/TextSection.vue
rename to resources/js/components/layout/sections/TextSection.vue
index 48f860e..6588a62 100644
--- a/resources/js/views/Public/Home/Sections/TextSection.vue
+++ b/resources/js/components/layout/sections/TextSection.vue
@@ -1,6 +1,6 @@
 <template>
   <page-section>
-    <template v-for="part in section">
+    <template v-for="part in section.content">
       <p v-html="marked(part)"></p>
     </template>
   </page-section>
diff --git a/resources/js/components/layout/sections/TitleSection.vue b/resources/js/components/layout/sections/TitleSection.vue
new file mode 100644
index 0000000..4291af5
--- /dev/null
+++ b/resources/js/components/layout/sections/TitleSection.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-container class="ma-0 pa-0" fluid>
+    <div class="bg-primary text-white">
+      <v-container class="pt-16 pb-12">
+        <h1 class="text-h3">{{ ucTitle }}</h1>
+      </v-container>
+    </div>
+    <slot></slot>
+  </v-container>
+</template>
+<script>
+import { computed } from "vue";
+
+export default {
+  props: {
+    section: Object,
+  },
+  computed: {
+    ucTitle() {
+      return (
+        this.section.title &&
+        this.section.title[0].toUpperCase() + this.section.title.slice(1)
+      );
+    },
+  },
+};
+</script>
diff --git a/resources/js/components/nav/NavBar.vue b/resources/js/components/nav/NavBar.vue
index 3a09c3e..0ad3d06 100644
--- a/resources/js/components/nav/NavBar.vue
+++ b/resources/js/components/nav/NavBar.vue
@@ -1,27 +1,33 @@
 <template>
-  <v-app-bar flat style="border-bottom: solid 0.5px grey;">
+  <v-app-bar flat style="border-bottom: solid 0.5px grey">
     <v-app-bar-title>
-      <router-link class="d-block d-flex align-center" :to="{name: user ? 'home' : 'home'}">
+      <router-link
+        class="d-block d-flex align-center"
+        :to="{ name: user ? 'home' : 'home' }"
+      >
         <img
-            src="/images/logo.svg"
-            height="40"
-            alt="Parently"
-            style="object-fit:contain;object-position:left center;"
-        >
+          src="/images/logo.svg"
+          height="40"
+          alt="Parently"
+          style="object-fit: contain; object-position: left center"
+        />
       </router-link>
     </v-app-bar-title>
 
-
     <v-toolbar-items variant="plain">
-
       <template v-if="!inPortal">
-        <v-btn :to="{name: 'home'}" exact>Home</v-btn>
-        <v-btn :to="{name: 'about'}" exact>About</v-btn>
-        <v-btn :to="{name: 'how-it-works'}" exact>How It Works</v-btn>
-        <v-btn v-if="user" :to="{name: 'dashboard'}">Portal</v-btn>
+        <v-btn :to="{ name: 'home' }" exact>{{ $t("nav.home") }}</v-btn>
+        <v-btn :to="{ name: 'about' }" exact>{{ $t("nav.about") }}</v-btn>
+        <v-btn :to="{ name: 'how-it-works' }" exact>{{
+          $t("nav.how-it-works")
+        }}</v-btn>
+        <v-btn v-if="user" :to="{ name: 'dashboard' }">{{
+          $t("nav.portal")
+        }}</v-btn>
+        <v-btn v-if="!user" :to="{ name: 'login' }">{{
+          $t("nav.login")
+        }}</v-btn>
       </template>
-
-
     </v-toolbar-items>
 
     <!--      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"-->
@@ -79,19 +85,18 @@
   </v-app-bar>
 </template>
 <script>
-
-import {useAuthStore} from "@/stores/auth/index.js";
-import {mapActions, mapState} from "pinia";
+import { useAuthStore } from "@/stores/auth/index.js";
+import { mapActions, mapState } from "pinia";
 
 export default {
   computed: {
-    ...mapState(useAuthStore, ['user']),
+    ...mapState(useAuthStore, ["user"]),
     inPortal() {
-      return this.$route.path.includes('portal')
+      return this.$route.path.includes("portal");
     },
   },
   methods: {
-    ...mapActions(useAuthStore, ['logout'])
-  }
-}
+    ...mapActions(useAuthStore, ["logout"]),
+  },
+};
 </script>
diff --git a/resources/js/routes/PublicRoutes.js b/resources/js/routes/PublicRoutes.js
index 4dc8540..8c8ec09 100644
--- a/resources/js/routes/PublicRoutes.js
+++ b/resources/js/routes/PublicRoutes.js
@@ -1,51 +1,44 @@
-const ApiContentPage = () => import('@/components/layout/ApiContentPage.vue');
-
+const ApiContentPage = () => import("@/components/layout/ApiContentPage.vue");
+const DefaultPage = () => import("@/views/Public/Pages/Default.vue");
 export default [
-    {
-        path: '',
-        name: 'home',
-        component: () =>
-            import("@/views/Public/Home/Home.vue"),
-    },
-    {
-        path: 'about',
-        name: 'about',
-        component: ApiContentPage,
-    },
-    {
-        path: 'how-it-works',
-        name: 'how-it-works',
-        component: () =>
-            import("@/views/Public/HowItWorks/HowItWorks.vue"),
-    },
-    {
-        path: 'login',
-        name: 'login',
-        component: () =>
-            import("@/views/Auth/Login.vue"),
-    },
-    {
-        path: 'register',
-        name: 'register',
-        component: () =>
-            import("@/views/Auth/Register.vue"),
-    },
-    {
-        path: 'forgot-password',
-        name: 'forgot-password',
-        component: () =>
-            import("@/views/Auth/ForgotPassword.vue"),
-    },
-    {
-        path: 'reset-password',
-        name: 'reset-password',
-        component: () =>
-            import("@/views/Auth/ResetPassword.vue"),
-    },
-    {
-        path: 'verify-email',
-        name: 'verify-email',
-        component: () =>
-            import("@/views/Auth/VerifyEmail.vue"),
-    }
-]
+  {
+    path: "",
+    name: "home",
+    component: () => import("@/views/Public/Home/Home.vue"),
+  },
+  {
+    path: "about",
+    name: "about",
+    component: DefaultPage,
+  },
+  {
+    path: "how-it-works",
+    name: "how-it-works",
+    component: DefaultPage,
+  },
+  {
+    path: "login",
+    name: "login",
+    component: () => import("@/views/Auth/Login.vue"),
+  },
+  {
+    path: "register",
+    name: "register",
+    component: () => import("@/views/Auth/Register.vue"),
+  },
+  {
+    path: "forgot-password",
+    name: "forgot-password",
+    component: () => import("@/views/Auth/ForgotPassword.vue"),
+  },
+  {
+    path: "reset-password",
+    name: "reset-password",
+    component: () => import("@/views/Auth/ResetPassword.vue"),
+  },
+  {
+    path: "verify-email",
+    name: "verify-email",
+    component: () => import("@/views/Auth/VerifyEmail.vue"),
+  },
+];
diff --git a/resources/js/views/Public/About/About.vue b/resources/js/views/Public/About/About.vue
index 7488ee9..79cdc1d 100644
--- a/resources/js/views/Public/About/About.vue
+++ b/resources/js/views/Public/About/About.vue
@@ -1,27 +1,26 @@
 <template>
-    <text-section :section="section"/>
+  <text-section :section="section" />
 </template>
 <script>
-import TextSection from "../Home/Sections/TextSection.vue";
+import TextSection from "../../../components/layout/sections/TextSection.vue";
 import SinglePage from "@/components/layout/home/SingleHomePage.vue";
 export default {
-  name: 'About',
-  components: {SinglePage, TextSection},
+  name: "About",
+  components: { SinglePage, TextSection },
   data() {
     return {
-      section: {}
-    }
+      section: {},
+    };
   },
   methods: {
     loadPage(page) {
-      axios.get(page || '/page/about')
-          .then((response) => {
-            this.section = response.data.data
-          })
-    }
+      axios.get(page || "/page/about").then((response) => {
+        this.section = response.data.data;
+      });
+    },
   },
   mounted() {
-    this.loadPage()
-  }
-}
+    this.loadPage();
+  },
+};
 </script>
diff --git a/resources/js/views/Public/Home/Home.vue b/resources/js/views/Public/Home/Home.vue
index 78409a1..e4c314b 100644
--- a/resources/js/views/Public/Home/Home.vue
+++ b/resources/js/views/Public/Home/Home.vue
@@ -1,61 +1,64 @@
 <template>
   <div>
-    <hero-section/>
+    <hero-section />
     <template v-for="(section, index) in sections">
-      <info-section :section="section" :index="index"/>
+      <info-section :section="section" :index="index" />
     </template>
   </div>
 </template>
 <script>
-
-import {mapActions, mapState} from "pinia";
-import {useAuthStore} from "@/stores/auth/index.js";
-import HeroSection from "./Sections/HeroSection.vue";
-import InfoSection from "./Sections/InfoSection.vue";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth/index.js";
+import HeroSection from "../../../components/layout/sections/HeroSection.vue";
+import InfoSection from "../../../components/layout/sections/InfoSection.vue";
 
 export default {
-  name: 'Home',
-  components: {InfoSection, HeroSection},
+  name: "Home",
+  components: { InfoSection, HeroSection },
   data() {
     return {
       sections: [
         {
-          image: '/images/parent_circle_sketch.jpg',
-          title: 'Welcome to Parently',
-          description: 'Parently is a platform that helps parents to manage daycare for their children.\n Help each other and share daycare together.'
+          image: "/images/parent_circle_sketch.jpg",
+          title: "Welcome to Parently",
+          description:
+            "Parently is a platform that helps parents to manage daycare for their children.\n Help each other and share daycare together.",
         },
         {
-          image: '/images/daycare_full_sketch.jpg',
-          title: 'Why Parently',
-          description: 'Daycare is full, teachers get sick. Need help?\n Parently is here to help you find other parents to share daycare together.',
-          to: {name: 'how-it-works'}
+          image: "/images/daycare_full_sketch.jpg",
+          title: "Why Parently",
+          description:
+            "Daycare is full, teachers get sick. Need help?\n Parently is here to help you find other parents to share daycare together.",
+          to: { name: "how-it-works" },
         },
         {
-          image: '/images/teacher_sick_sketch.jpg',
-          title: 'Share unexpected daycare needs',
-          description: 'You never know when you need help. Parently is here to help you find other parents to share daycare together.',
+          image: "/images/teacher_sick_sketch.jpg",
+          title: "Share unexpected daycare needs",
+          description:
+            "You never know when you need help. Parently is here to help you find other parents to share daycare together.",
           button: {
-            text: 'buttons.need-care',
-            to: {name: 'how-it-works'}
-          }
+            text: "buttons.need-care",
+            to: { name: "how-it-works" },
+          },
         },
         {
-          image: '/images/parent_circle_sketch.jpg',
-          title: 'How it works',
-          description: 'Sign up and tell us about you and your child(ren).\nWhat days do you need help? What days can you provide help? Find other parents at your school to share daycare together.',
+          image: "/images/parent_circle_sketch.jpg",
+          title: "How it works",
+          description:
+            "Sign up and tell us about you and your child(ren).\nWhat days do you need help? What days can you provide help? Find other parents at your school to share daycare together.",
           button: {
-            text: 'buttons.provide-care',
-            to: {name: 'how-it-works'}
-          }
+            text: "buttons.provide-care",
+            to: { name: "how-it-works" },
+          },
         },
-      ]
-    }
+      ],
+    };
   },
   computed: {
-    ...mapState(useAuthStore, ['user']),
+    ...mapState(useAuthStore, ["user"]),
   },
   methods: {
-    ...mapActions(useAuthStore, ['logout'])
-  }
-}
+    ...mapActions(useAuthStore, ["logout"]),
+  },
+};
 </script>
diff --git a/resources/js/views/Public/Home/Sections/HeroSection.vue b/resources/js/views/Public/Home/Sections/HeroSection.vue
deleted file mode 100644
index 86d2b65..0000000
--- a/resources/js/views/Public/Home/Sections/HeroSection.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <v-parallax src="/images/parently_light.jpg" color="primary" height="600px">
-    <div class="py-16 d-flex flex-column align-center justify-center flex-grow-1 h-100">
-      <img class="main-image pa-4" alt="Parently" src="/images/logo.svg">
-      <h1 class="text-center text-primary text-h3 mb-8">Share care together</h1>
-      <div class="py-4 d-flex justify-center">
-        <template v-if="!user">
-          <v-btn class="mx-2" size="large" color="primary" :to="{name: 'login'}">{{ $t('guest.login') }}</v-btn>
-          <v-btn class="mx-2" size="large" color="warning" href="/register">{{ $t('guest.register') }}</v-btn>
-        </template>
-        <template v-if="user">
-          <v-btn class="mx-2" size="large" color="warning" :to="{name: 'dashboard'}">{{ $t('portal.title') }}</v-btn>
-        </template>
-      </div>
-    </div>
-  </v-parallax>
-
-</template>
-<script>
-
-import {mapActions, mapState} from "pinia";
-import {useAuthStore} from "@/stores/auth/index.js";
-
-export default {
-  name: 'HeroSection',
-  computed: {
-    ...mapState(useAuthStore, ['user']),
-  },
-  methods: {
-    ...mapActions(useAuthStore, ['logout'])
-  }
-}
-</script>
diff --git a/resources/js/views/Public/HowItWorks/HowItWorks.vue b/resources/js/views/Public/HowItWorks/HowItWorks.vue
deleted file mode 100644
index dca7c4e..0000000
--- a/resources/js/views/Public/HowItWorks/HowItWorks.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <template v-for="pageSection in page.sections">
-    <template v-if="pageSection.type === 'TabbedSection'">
-      <tabbed-section :section="pageSection" :parent="parentPage" />
-    </template>
-    <template v-if="pageSection.type === 'HeroSection'">
-      <hero-section :section="pageSection" />
-    </template>
-  </template>
-
-  <pre>{{ page }}</pre>
-</template>
-<script>
-import HeroSection from "@/components/layout/sections/HeroSection.vue";
-import TextSection from "@/views/Public/Home/Sections/TextSection.vue";
-import { mapActions, mapState } from "pinia";
-import { useContentStore } from "@/stores/content/index.js";
-import TabbedSection from "@/components/layout/sections/TabbedSection.vue";
-
-export default {
-  name: "HowItWorks",
-  components: { TabbedSection, TextSection, HeroSection },
-  data() {
-    return {
-      parentPage: "how-it-works",
-    };
-  },
-  computed: {
-    ...mapState(useContentStore, ["page", "pages"]),
-  },
-  methods: {
-    ...mapActions(useContentStore, ["loadPage"]),
-  },
-  mounted() {
-    this.loadPage(this.parentPage);
-  },
-};
-</script>
diff --git a/resources/js/views/Public/Pages/Default.vue b/resources/js/views/Public/Pages/Default.vue
new file mode 100644
index 0000000..4135b15
--- /dev/null
+++ b/resources/js/views/Public/Pages/Default.vue
@@ -0,0 +1,52 @@
+<template>
+  <sections-page>
+    <template v-for="pageSection in page.sections">
+      <template v-if="pageSection.type === 'tabbed-section'">
+        <tabbed-section :section="pageSection" :parent="slug" />
+      </template>
+      <template v-else-if="pageSection && pageSection.type !== undefined">
+        <component :is="pageSection.type" :section="pageSection" />
+      </template>
+    </template>
+    <debug-section>
+      {{ slug }}
+    </debug-section>
+  </sections-page>
+</template>
+<script>
+import TitleSection from "@/components/layout/sections/TitleSection.vue";
+import HeroSection from "@/components/layout/sections/HeroSection.vue";
+import TextSection from "@/components/layout/sections/TextSection.vue";
+import TabbedSection from "@/components/layout/sections/TabbedSection.vue";
+import { mapActions, mapState } from "pinia";
+import { useContentStore } from "@/stores/content/index.js";
+import SinglePage from "@/components/layout/home/SingleHomePage.vue";
+import SectionsPage from "@/components/layout/home/SectionsPage.vue";
+import DebugSection from "@/components/layout/sections/DebugSection.vue";
+
+export default {
+  components: {
+    DebugSection,
+    SectionsPage,
+    SinglePage,
+    TabbedSection,
+    TextSection,
+    TitleSection,
+    HeroSection,
+  },
+  data() {
+    return {
+      slug: this.$route.fullPath.replace("/", ""),
+    };
+  },
+  computed: {
+    ...mapState(useContentStore, ["page", "pages"]),
+  },
+  methods: {
+    ...mapActions(useContentStore, ["loadPage"]),
+  },
+  mounted() {
+    this.loadPage(this.slug);
+  },
+};
+</script>
diff --git a/resources/pages/en/about.json b/resources/pages/en/about.json
index 393897a..316cc1d 100644
--- a/resources/pages/en/about.json
+++ b/resources/pages/en/about.json
@@ -1,5 +1,16 @@
-[
-  "Some text about Parently\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"",
-  "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"",
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-]
+{
+  "sections": [
+    {
+      "type": "title-section",
+      "title": "About Parently"
+    },
+    {
+      "type": "text-section",
+      "content": [
+        "Some text about Parently\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"",
+        "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"",
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      ]
+    }
+  ]
+}
diff --git a/resources/pages/en/how-it-works.json b/resources/pages/en/how-it-works.json
index e271cb2..e7b1cc5 100644
--- a/resources/pages/en/how-it-works.json
+++ b/resources/pages/en/how-it-works.json
@@ -1,11 +1,11 @@
 {
   "sections": [
     {
-      "type": "HeroSection",
+      "type": "title-section",
         "title": "How It Works"
     },
     {
-      "type": "TabbedSection",
+      "type": "tabbed-section",
       "tabs": [
         {
           "title": "How It Works",