Adding info about Waypoint's pro builder

usewaypoint · Feb 27, 2024 · 58e9f3c · 58e9f3c
1 parent 7d9479f
commit 58e9f3c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/packages/editor-sample/index.html b/packages/editor-sample/index.html
@@ -6,8 +6,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/src/favicon/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <title>Waypoint editor</title>
+    <meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
+    <title>EmailBuilder.js &mdash; Free and Open Source Template Builder</title>
     <style>
       html {
         margin: 0px;

diff --git a/packages/editor-sample/src/App/SamplesDrawer/index.tsx b/packages/editor-sample/src/App/SamplesDrawer/index.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
-import { Button, Drawer, Stack } from '@mui/material';
+import { Box, Button, Drawer, Link, Stack, Typography } from '@mui/material';
 
 import { useEditorState } from '../../documents/editor/EditorContext';
 
+import logo from './waypoint.svg';
+
 export const SAMPLES_DRAWER_WIDTH = 240;
 
 export default function SamplesDrawer() {
@@ -22,45 +24,64 @@ export default function SamplesDrawer() {
         width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0,
       }}
     >
-      <Stack
-        gap={2}
-        py={1}
-        px={2}
-        width={SAMPLES_DRAWER_WIDTH}
-        sx={{ '& .MuiButtonBase-root': { width: '100%', justifyContent: 'flex-start' } }}
-      >
-        <Button
-          size="small"
-          href="https://www.usewaypoint.com/open-source/emailbuilderjs"
-          target="_blank"
-          sx={{ fontSize: 16 }}
-        >
-          EmailBuilder.js
-        </Button>
-        <Stack alignItems="flex-start">
-          <Button size="small" onClick={() => select('empty')}>
-            Empty
-          </Button>
-          <Button size="small" onClick={() => select('one-time-password')}>
-            One-time passcode (OTP)
-          </Button>
-          <Button size="small" onClick={() => select('reset-password')}>
-            Reset password
-          </Button>
-          <Button size="small" onClick={() => select('order-ecomerce')}>
-            E-commerce receipt
+      <Stack spacing={3} py={1} px={2} width={SAMPLES_DRAWER_WIDTH} justifyContent="space-between" height="100%">
+        <Stack spacing={2} sx={{ '& .MuiButtonBase-root': { width: '100%', justifyContent: 'flex-start' } }}>
+          <Button
+            size="small"
+            href="https://www.usewaypoint.com/open-source/emailbuilderjs"
+            target="_blank"
+            sx={{ fontSize: 16 }}
+          >
+            EmailBuilder.js
           </Button>
-          <Button size="small" onClick={() => select('subscription-receipt')}>
-            Subscription receipt
-          </Button>
-          <Button size="small" onClick={() => select('reservation-reminder')}>
-            Reservation reminder
-          </Button>
-          <Button size="small" onClick={() => select('post-metrics-report')}>
-            Post metrics
-          </Button>
-          <Button size="small" onClick={() => select('respond-to-message')}>
-            Respond to message
+          <Stack alignItems="flex-start">
+            <Button size="small" onClick={() => select('empty')}>
+              Empty
+            </Button>
+            <Button size="small" onClick={() => select('one-time-password')}>
+              One-time passcode (OTP)
+            </Button>
+            <Button size="small" onClick={() => select('reset-password')}>
+              Reset password
+            </Button>
+            <Button size="small" onClick={() => select('order-ecomerce')}>
+              E-commerce receipt
+            </Button>
+            <Button size="small" onClick={() => select('subscription-receipt')}>
+              Subscription receipt
+            </Button>
+            <Button size="small" onClick={() => select('reservation-reminder')}>
+              Reservation reminder
+            </Button>
+            <Button size="small" onClick={() => select('post-metrics-report')}>
+              Post metrics
+            </Button>
+            <Button size="small" onClick={() => select('respond-to-message')}>
+              Respond to message
+            </Button>
+          </Stack>
+        </Stack>
+        <Stack spacing={2} px={0.75} py={3}>
+          <Link href="https://usewaypoint.com?utm_source=emailbuilderjs" target="_blank" sx={{ lineHeight: 1 }}>
+            <Box component="img" src={logo} width={32} />
+          </Link>
+          <Box>
+            <Typography variant="overline" gutterBottom>
+              Pro builder
+            </Typography>
+            <Typography variant="body2" color="text.secondary" paragraph>
+              Looking for more? Waypoint is an email API with a hosted &apos;pro&apos; template builder with dynamic
+              variables, loops, conditionals, drag and drop, layouts, and more.
+            </Typography>
+          </Box>
+          <Button
+            variant="contained"
+            color="primary"
+            sx={{ justifyContent: 'center' }}
+            href="https://usewaypoint.com?utm_source=emailbuilderjs"
+            target="_blank"
+          >
+            Learn more
           </Button>
         </Stack>
       </Stack>