From 37244d3dff754ddc072b49aeb82de18e1991cd8b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 16 Jan 2023 18:44:32 +0000
Subject: [PATCH] Add core page layout for onboarding to frontend-core

---
 .../src/components/SplitPage.svelte           | 53 ++++++++++++++++
 .../src/components/TestimonialPage.svelte     | 62 +++++++++++++++++++
 .../frontend-core/src/components/index.js     |  2 +
 packages/frontend-core/src/index.js           |  1 +
 4 files changed, 118 insertions(+)
 create mode 100644 packages/frontend-core/src/components/SplitPage.svelte
 create mode 100644 packages/frontend-core/src/components/TestimonialPage.svelte
 create mode 100644 packages/frontend-core/src/components/index.js

diff --git a/packages/frontend-core/src/components/SplitPage.svelte b/packages/frontend-core/src/components/SplitPage.svelte
new file mode 100644
index 0000000000..2105c198f3
--- /dev/null
+++ b/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>
diff --git a/packages/frontend-core/src/components/TestimonialPage.svelte b/packages/frontend-core/src/components/TestimonialPage.svelte
new file mode 100644
index 0000000000..d0b772d5db
--- /dev/null
+++ b/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>
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
new file mode 100644
index 0000000000..7ca21c4ff9
--- /dev/null
+++ b/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"
diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.js
index aecca81cda..01bf05c69e 100644
--- a/packages/frontend-core/src/index.js
+++ b/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"