Add core page layout for onboarding to frontend-core

packages/frontend-core/src/components/SplitPage.svelte

@@ -0,0 +1,53 @@
+<div class="split-page">
+  <div class="left">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+  <div class="right">
+    <slot name="right" />
+  </div>
+</div>
+
+<style>
+  .split-page {
+    height: 100%;
+    display: grid;
+    grid-template-columns: max(50%, 380px) 1fr;
+    justify-content: stretch;
+    overflow: hidden;
+  }
+  .left {
+    background: var(--background);
+    display: grid;
+    place-items: center;
+    padding: 40px;
+    overflow-y: auto;
+  }
+  .right {
+    background: linear-gradient(
+      to bottom right,
+      var(--spectrum-global-color-gray-300) 0%,
+      var(--background) 100%
+    );
+  }
+  .content {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  @media (max-width: 740px) {
+    .split-page {
+      grid-template-columns: 1fr;
+    }
+    .left {
+      padding: 20px;
+    }
+    .right {
+      display: none;
+    }
+    .content {
+      width: auto;
+    }
+  }
+</style>

packages/frontend-core/src/components/TestimonialPage.svelte

@@ -0,0 +1,62 @@
+<script>
+  import SplitPage from "./SplitPage.svelte"
+  import { Layout, Body } from "@budibase/bbui"
+</script>
+
+<SplitPage>
+  <slot />
+  <div class="wrapper" slot="right">
+    <div class="testimonial">
+      <Layout noPadding gap="S">
+        <div class="text">
+          "Here is an example of how Budibase changed my life for the better and
+          now all I do is eat, sleep, build apps, repeat."
+        </div>
+        <div class="user">
+          <img
+            src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
+          />
+          <div class="author">
+            <div class="name">No-code Enthusiast</div>
+            <div class="company">Bedroom TLD</div>
+          </div>
+        </div>
+      </Layout>
+    </div>
+  </div>
+</SplitPage>
+
+<style>
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+  .testimonial {
+    width: 280px;
+    padding: 40px;
+  }
+  .text {
+    font-size: var(--font-size-l);
+    font-style: italic;
+  }
+  img {
+    width: 40px;
+  }
+  .user {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .name {
+    font-weight: bold;
+    color: var(--spectrum-global-color-gray-900);
+    font-size: var(--font-size-l);
+  }
+  .company {
+    color: var(--spectrum-global-color-gray-700);
+  }
+</style>

packages/frontend-core/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as SplitPage } from "./SplitPage.svelte"
+export { default as TestimonialPage } from "./TestimonialPage.svelte"

packages/frontend-core/src/index.js

@@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
 export * as Constants from "./constants"
 export * from "./stores"
 export * from "./utils"
+export * from "./components"