content

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"
   }
 }

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>

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>

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>

resources/js/views/Public/Home/Sections/InfoSection.vue → 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",

resources/js/components/layout/sections/TabbedSection.vue

@@ -10,15 +10,14 @@
       </v-tab>
     </v-tabs>
     <text-section :section="content" />
-    {{ selectedTab || "n/a" }}
   </page-section>
 </template>
 <script>
 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: {

resources/js/views/Public/Home/Sections/TextSection.vue → 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>

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>

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>