Welcome Email

WelcomeOnboardingSaaS

Welcome to the platform

Hi there, we're excited to have you on board. Mailbase allows you to build beautiful emails using React components.

If you have any questions, just reply to this email.

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
  Button,
} from "@react-email/components";
import * as React from "react";

export const WelcomeEmail = () => (
  <Html>
    <Head />
    <Preview>Welcome to Mailbase!</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img
          src="https://react.email/static/logo-black.png"
          width="170"
          height="50"
          alt="Mailbase"
          style={logo}
        />
        <Heading style={h1}>Welcome to the platform</Heading>
        <Text style={text}>
          Hi there, we're excited to have you on board. Mailbase allows you to build beautiful emails using React components.
        </Text>
        <Section style={btnContainer}>
             <Button style={button} href="https://mailbase.dev">
                Get Started
             </Button>
        </Section>
        <Text style={text}>
          If you have any questions, just reply to this email.
        </Text>
      </Container>
    </Body>
  </Html>
);

const main = {
  backgroundColor: "#ffffff",
  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
};

const logo = {
  margin: "0 auto",
  display: "block",
};

const h1 = {
  color: "#333",
  fontSize: "24px",
  fontWeight: "bold",
  textAlign: "center" as const,
  margin: "30px 0",
};

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
};

const btnContainer = {
  textAlign: "center" as const,
  marginTop: "24px",
  marginBottom: "24px",
};

const button = {
  backgroundColor: "#5F51E8",
  borderRadius: "3px",
  color: "#fff",
  fontSize: "16px",
  textDecoration: "none",
  textAlign: "center" as const,
  display: "block",
  padding: "12px",
};