import React from "react";
import { createElement } from "react";
import {render} from "../../lib/mjml"
import { MjmlColumn, MjmlSection, MjmlSpacer, MjmlWrapper } from "mjml-react";
import BaseLayout from "../components/theme2/BaseLayout"
import Button from "../components/theme2/Button";
import Footer from "../components/theme2/Footer";
import Heading from "../components/theme2/Heading";
import Header from "../components/theme2/Header";
import Text from "../components/theme2/Text";
import { fontSize, colors, spacing, fontFamily, screens } from "../components/theme2/theme";

const welcomeStyle = `
  .h1 > * {
    font-size: 56px !important;
  }
  .h2 > * {
    font-size: ${fontSize.lg}px !important;
  }
  .p > * {
    font-size: ${fontSize.base}px !important;
  }

  @media (min-width:${screens.xs}) {
    .h1 > * {
      font-size: 84px !important;
    }
    .h2 > * {
      font-size: ${fontSize.xxl}px !important;
    }
    .p > * {
      font-size: ${fontSize.md}px !important;
    }
  }
`;



const Welcome = ({ includeUnsubscribe }) => {
  return (
    <BaseLayout width={600} style={welcomeStyle}>
      <Header />
      <MjmlWrapper backgroundColor={colors.black}>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          <MjmlColumn>
            <Heading maxWidth={420} cssClass="h1" fontFamily={fontFamily.serif}>
              
              Welcome to HyperForm <br />
              Mailing :)
            </Heading>
          </MjmlColumn>
        </MjmlSection>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          <MjmlColumn>
            <Heading cssClass="h2" paddingBottom={spacing.s6}>
              <span style={{ color: colors.green300 }}>●</span> This is our welcoming
              mail
            </Heading>
            <Text
              cssClass="p"
              fontSize={fontSize.md}
              paddingBottom={spacing.s7}
            >
              Feel free to rebrand this template and use for your own fitting. Select a mail in your preview folder: 
               <span className="code">emails/previews</span>. If you like what you see  press the send telegram in the upperright corner. It's as ease as that.  
            </Text>

            <Button
              href="https://github.com/sofn-xyz/mailing-templates"
              backgroundColor={colors.green300}
              align="left"
              cssClass="sm-hidden"
            >
              More Demo Templates{"  "}
              <span style={{ fontFamily: fontFamily.serif }}>&rarr;</span>
            </Button>
            <MjmlSpacer height={spacing.s3} cssClass="lg-hidden" />
            <Button
              href="https://github.com/sofn-xyz/mailing-templates"
              backgroundColor={colors.green300}
              align="right"
              cssClass="lg-hidden"
            >
              More Demo Templates{"  "}
              <span style={{ fontFamily: fontFamily.serif }}>&rarr;</span>
            </Button>
          </MjmlColumn>
        </MjmlSection>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          <MjmlColumn>
            <Heading cssClass="h2" paddingBottom={spacing.s6}>
              <span style={{ color: colors.blue }}>●</span> HyperForm dashboard
            </Heading>
            <Text cssClass="p" paddingBottom={spacing.s7}>
              
              In the HyperForm dashboard you can import templates and edit them. Those templates will be stored and are available for future use. You can upload or write custom HTML code or use the no-code email editor.
            </Text>
            <Button
              href="https://mailing.run/docs"
              align="left"
              backgroundColor={colors.blue}
              cssClass="sm-hidden"
            >
              Check out the Docs{"  "}
              <span style={{ fontFamily: fontFamily.serif }}>&rarr;</span>
            </Button>
            <MjmlSpacer height={spacing.s3} cssClass="lg-hidden" />
            <Button
              href="https://mailing.run/docs"
              align="right"
              backgroundColor={colors.blue}
              cssClass="lg-hidden"
            >
              Login{"  "}
              <span style={{ fontFamily: fontFamily.serif }}>&rarr;</span>
            </Button>
            <MjmlSpacer height={spacing.s9} />
          </MjmlColumn>
        </MjmlSection>
      </MjmlWrapper>
      <Footer includeUnsubscribe={false} />
    </BaseLayout>
  );
};

export default Welcome;
export const currentmail = render(createElement(eval('Welcome')))

import BaseLayout from "../components/BaseLayout2";
import Divider from "../components/Divider";
import Button from "../components/Button";
import P from "../components/P";
import { colors } from "../components/theme";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder1 = ({ name, schoolName, color, bodycolor, footertextcolor }) => {
  return (
    <BaseLayout backgroundColor={color} bodycolor={bodycolor} footertextcolor={footertextcolor}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        HyperMail Beta Invite. 
      </Headline>
      <Button
        href="https://sample-it.net"
        text="Get in touch"
      />
      <Divider />
      <P>Dear {name},</P>
      <P>
        We're looking for companies to test our hybrid mailing service. Every participant is granted an annual license at no costs whatsoever.  
      </P>
      <P>
      Using HyperForm companies can create, save and use responsive mail templates in no time. Our goal is to collect feedback and improve HyperMail.
      </P>
      <P>
        Let us know if you have further questions about our service. Looking
        forward to support your online business.
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder1;


import { MjmlImage, MjmlSpacer } from "mjml-react";
import BaseLayout from "./components/BaseLayout";
import Button from "./components/Button";
import assetUrl from "./util/assetUrl";
import P from "./components/P";
import { colors } from "../components/theme";
import Headline from "./components/Headline";

const ApplicationApproved = ({name}) => {
  return (
    <BaseLayout backgroundColor={colors.green}>
      <MjmlImage
        src={assetUrl("/assets/balloons.png")}
        alt="balloons"
        height="48px"
        width="48px"
        align="left"
        padding="42px 0 32px"
      />
      <Headline paddingBottom="32px" cssClass="header-md">
        You’re approved for a loan up to $15,000!
      </Headline>
      <P>Hi {name},</P>
      <P>
        Congratulations! You have been approved for a Fynn loan to attend{" "}
        {schoolName}.
      </P>
      <P>
        Now it’s time to select your loan amount and verify your identity; click
        the button below to complete your loan.
      </P>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <MjmlSpacer height="16px" />
      <P>We’re excited to be a part of your success at {schoolName}!</P>
    </BaseLayout>
  );
};

export default ApplicationApproved;


import { MjmlImage } from "mjml-react";
import BaseLayout from "../components/BaseLayout";
import { colors } from "../components/theme";
import assetUrl from "../util/assetUrl";
import P from "../components/P";
import Headline from "../components/Headline";

const ApplicationComplete = ({ name, schoolName }) => {
  return (
    <BaseLayout backgroundColor={colors.green} centerLogo>
      <MjmlImage
        src={assetUrl("/assets/jumping-man.png")}
        alt="celebratory person"
        height="160px"
        width="136.3px"
        paddingTop="42px"
        paddingBottom="14px"
      />
      <Headline align="center" cssClass="header-lg">
        You’re ready to attend your program!
      </Headline>
      <MjmlImage
        src={assetUrl("/assets/squiggle.png")}
        alt="squiggle separator"
        padding="0px"
        width="107px"
        paddingTop="32px"
        paddingBottom="32px"
      />
      <P>
        <b>Hi {name},</b>
      </P>
      <P>
        You’re all set with a Fynn loan and are ready to attend {schoolName}!
      </P>
      <P>
        We’ll reach out shortly after your first day with more information about
        your loan and how to log into your borrower portal.
      </P>
      <P>
        Your borrower portal will allow you to view your loan balance, make
        payments, and more.
      </P>
      <P>We’re excited to be a part of your success at {schoolName}!</P>
    </BaseLayout>
  );
};

export default ApplicationComplete;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingInvite = ({ name, schoolName }) => {
  return (
    <BaseLayout backgroundColor={colors.green}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign your loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        {schoolName} has certified your application, and your contract is ready
        for you to sign. You can complete the last step by clicking the button
        above!
      </P>
    </BaseLayout>
  );
};

export default FinalizingInvite;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import P from "../components/P";
import { colors } from "../components/theme";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder1 = ({ name, schoolName, color, bodycolor, footertextcolor }) => {
  return (
    <BaseLayout backgroundColor={color} bodycolor={bodycolor} footertextcolor={footertextcolor}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://sample-it.net"
        text="Sign Your Loan"
      />
      <Divider />
      <P>Hello {name},</P>
      <P>
        Your loan is approved. All you need to do before you attend {schoolName}{" "}
        is to sign your loan documents. Click the button above to sign your
        documents!
      </P>
      <P>
        Let us know if you have questions - we're here to help. We're looking
        forward to supporting your time in school and your future career.
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder1;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder2 = ({ name, schoolName, color }) => {
  return (
    <BaseLayout backgroundColor={color}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign Your Loan"
      />
      <Divider />
      <P>Hello {name},</P>
      <P>
        We hope you're excited about attending {schoolName}! You're almost ready
        to go with Fynn - we just need you to make it official.
      </P>
      <P>
        Let us know if you have any questions or concerns - our team is here to
        help. If you're no longer interested in financing your education with
        Fynn, just reply to this email and let us know.
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder2;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder3 = ({ name, schoolName, color }) => {
  return (
    <BaseLayout backgroundColor={color}>
      <HeadlineImage />
      <Headline cssClass="header-xl">
        Sign your loan before the opportunity is gone!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign Your Fynn loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        If we don't hear from you soon, your Fynn loan offer may expire in a few
        days. There's still time to sign it and secure financing for your
        program!
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder3;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder4 = ({ name, schoolName, color }) => {
  return (
    <BaseLayout backgroundColor={color}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        There’s one last simple step to secure funding from Fynn. All you have
        to do is sign your document!
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder4;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder5 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        You still have a chance to get funding for your program! There’s only
        one more thing we need to finalize your loan: your signature. To make
        your loan official, simply click the button above!
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder5;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder6 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>{name},</P>
      <P>
        This may be your last chance to obtain funding from Fynn! Your loan
        approval will be archived soon unless you sign your loan document. Don’t
        let this opportunity go to waste!
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder6;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const FinalizingReminder7 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        It’s time to sign your loan documents!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Sign Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        Your school has certified your tuition amount, but you still haven’t
        signed your Fynn loan document to make it official. Your account may be
        archived soon, and with that, you could lose your funding.
      </P>
    </BaseLayout>
  );
};

export default FinalizingReminder7;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder1 = ({ name, schoolName }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-sm">
        Funding is just a few steps away!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/login"
        text="Continue Your Application"
      />
      <Divider />
      <P>Hello {name},</P>
      <P>
        You’re almost done with your loan application to attend {schoolName}.
        Continue your application below to see if you qualify for full tuition
        funding!
      </P>
      <P>If you have any questions, simply respond to this email.</P>
      <P>We look forward to reviewing your application.</P>
    </BaseLayout>
  );
};

export default IncompleteReminder1;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder2 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-xl">
        Getting funded with Fynn only takes 5 minutes!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Continue Your Application"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        You are nearly done with your application for Fynn. It takes less than
        five minutes to get approved for a loan— submit your application and
        find out how much you can get for your program!
      </P>
      <P>
        If you'd like to cancel your application, go to your account by clicking
        the button above and then select “Cancel Application.”{" "}
      </P>
    </BaseLayout>
  );
};

export default IncompleteReminder2;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder3 = ({ name, schoolName }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        You’re almost done! Start on a path to a better future.
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Continue Your Application"
      />
      <Divider />
      <P>Hello {name},</P>
      <P>Your loan application with Fynn is almost complete.</P>
      <P>
        Continue your Fynn application to see if you qualify for 100% tuition
        funding.
      </P>
      <P>
        We're excited to review your completed application and help launch your
        career with {schoolName}.
      </P>
      <P>If you have any questions, simply respond to this email.</P>
      <P>
        If you'd like to cancel your application, go to your account by clicking
        the button above and then select “Cancel Application.”
      </P>
    </BaseLayout>
  );
};

export default IncompleteReminder3;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder4 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-lg">
        Find out if you are eligible for a Fynn loan!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/login"
        text="Continue Your Application"
      />
      <Divider />
      <P>{name},</P>
      <P>
        You’re close to completing your Fynn application! If you do not submit
        your application soon, it may be archived, and your progress will be
        lost.
      </P>
      <P>
        If you'd like to cancel your application, go to your account by clicking
        the button above and then select “Cancel Application.”{" "}
      </P>
    </BaseLayout>
  );
};

export default IncompleteReminder4;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder5 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-sm">
        There’s still time to complete your application!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/login"
        text="Continue Your Application"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        It’s been a few days since you started your Fynn loan application. If we
        don't hear from you soon, your application may be archived.
      </P>
      <P>
        We understand that finances can be tricky. If this isn't the right time
        for you, don't worry! You can always apply to Fynn again at a later
        date.
      </P>
      <P>
        If you'd like to cancel your application, go to your account by clicking
        the button above and then select “Cancel Application.”
      </P>
    </BaseLayout>
  );
};

export default IncompleteReminder5;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const IncompleteReminder6 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-lg">
        Don’t miss out on funding. Complete your application today!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/login"
        text="Continue Your Application"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        Be sure to finish filling out your Fynn application If you still need a
        loan for school! If you do not submit your application soon, it may be
        archived and your progress may be lost.
      </P>
      <P>You can quickly finish up and submit your application here:</P>
      <P>
        Don’t worry – even if your application becomes archived, you can always
        apply for a Fynn loan later.
      </P>
      <P>
        If you'd like to cancel your application, go to your account by clicking
        the button above and then select “Cancel Application.”
      </P>
    </BaseLayout>
  );
};

export default IncompleteReminder6;


import { MjmlText, MjmlImage, MjmlSpacer } from "mjml-react";
import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import assetUrl from "../util/assetUrl";
import P from "../components/P";
import Headline from "../components/Headline";
import Link from "../components/Link";
import HeadlineImage from "../components/HeadlineImage";
import Li from "../components/Li";

const MicrodepositFailure = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage
        src={assetUrl("/assets/action-required.png")}
        alt="Action required"
        height="33px"
        width="169px"
      />
      <Headline cssClass="header-xl" paddingBottom="0">
        Connect a new account
      </Headline>
      <P>Verify your identity with a different account</P>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        Fynn was not able to verify your identity with the bank account that you
        provided. Some reasons for this include the following:
      </P>
      <Li>The account is not a checking/savings account</Li>
      <Li>The account is too new</Li>
      <Li>The account is overdrawn or closed</Li>
      <Li>You are not the owner of the account</Li>
      <P>Please reattempt the bank linking with a different account.</P>
      <P>
        If you don’t have another account you can quickly and easily create a
        Chime account{" "}
        <Link href="https://www.kqzyfj.com/click-100634244-14415782">here</Link>
        !
      </P>
    </BaseLayout>
  );
};

export default MicrodepositFailure;


import { MjmlImage } from "mjml-react";
import BaseLayout from "../components/BaseLayout";
import { colors } from "../components/theme";
import assetUrl from "../util/assetUrl";
import P from "../components/P";
import Headline from "../components/Headline";

const StudentDispersed = ({ name, schoolName }) => {
  return (
    <BaseLayout backgroundColor={colors.white}>
      <MjmlImage
        src={assetUrl("/assets/twitter.png")}
        alt="balloons"
        height="48px"
        width="48px"
        align="left"
        padding="42px 0 32px"
      />
      <Headline paddingBottom="32px" cssClass="header-xl">
        We’ve officially sent your tuition to your school
      </Headline>
      <P>Hi {name},</P>
      <P>
        We’ve sent your tuition to your school today. This means two things:
      </P>
      <P>1.&nbsp;&nbsp;Your interest officially starts accruing today.</P>
      <P>
        2.&nbsp;&nbsp;Next week, you will receive a text and email about how to
        log into your borrower portal. You can manage all aspects of your loan
        in your borrower portal.
      </P>
      <P>
        As always, please feel free to reach out with any questions. We’re
        excited for your success at {schoolName}.
      </P>
    </BaseLayout>
  );
};

export default StudentDispersed;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const TuitionRequestReminder1 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        Select your loan amount to continue!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        You’ll need to select a loan amount to proceed with your loan. You can
        click the button above to choose an amount.
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder1;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const TuitionRequestReminder2 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        You still need to select a loan amount{" "}
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        You still have to select a loan amount before you can receive funding
        from Fynn! Click the button above to choose an amount.
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder2;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const TuitionRequestReminder3 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        Select a loan amount to get your funding!{" "}
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        Even though you’re approved for a loan, you still have one step left!
        Click the button above or log into your Fynn account to complete this
        step.
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder3;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const TuitionRequestReminder4 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-md">
        Request a tuition amount before your funding is gone!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        Before your loan can be certified by your school, we need to know how
        much money you need! Please go to your account and request a tuition
        amount. Your school will verify it, and then we will let you know when
        it’s time to sign!
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder4;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";

const TuitionRequestReminder5 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage />
      <Headline cssClass="header-xl">
        Request a tuition amount for your Fynn loan
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>{name},</P>
      <P>
        Please take a minute to input your tuition request amount for your Fynn
        loan. We need this information to be certified by your school before you
        can sign!
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder5;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";
import assetUrl from "../util/assetUrl";

const TuitionRequestReminder6 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage
        src={assetUrl("/assets/action-required.png")}
        alt="Action required"
        height="33px"
        width="169px"
      />
      <Headline cssClass="header-xl">
        Your Fynn account is about to be archived!
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>Hi {name},</P>
      <P>
        To complete your loan and avoid losing your approval, you must select
        your loan amount soon! Choosing a loan amount only takes 2 minutes.
        Click the button above, or log into your Fynn account to complete this
        step.
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder6;


import BaseLayout from "../components/BaseLayout";
import Divider from "../components/Divider";
import Button from "../components/Button";
import { colors } from "../components/theme";
import P from "../components/P";
import Headline from "../components/Headline";
import HeadlineImage from "../components/HeadlineImage";
import assetUrl from "../util/assetUrl";

const TuitionRequestReminder7 = ({ name }) => {
  return (
    <BaseLayout backgroundColor={colors.greenDark}>
      <HeadlineImage
        src={assetUrl("/assets/action-required.png")}
        alt="Action required"
        height="33px"
        width="169px"
      />
      <Headline cssClass="header-xl">
        Your chance for funding will be archived soon
      </Headline>
      <Button
        href="https://apply.fynncredit.com/application"
        text="Complete Your Loan"
      />
      <Divider />
      <P>{name},</P>
      <P>
        There’s not much time left to request your tuition amount for your Fynn
        loan! We need to know how much money you will need so that we can verify
        that with your school. If you don’t make a tuition request, your
        application may be archived soon, causing you to lose your accepted
        status.
      </P>
    </BaseLayout>
  );
};

export default TuitionRequestReminder7;


import React from "react";
import { createElement } from "react";
import {render} from "../../lib/mjml"
import { MjmlColumn, MjmlSection, MjmlSpacer, MjmlWrapper } from "mjml-react";
import BaseLayout from "../components/theme2/BaseLayout"
import Button from "../components/theme2/Button";
import Footer from "../components/theme2/Footer";
import Heading from "../components/theme2/Heading";
import Header from "../components/theme2/Header";
import Text from "../components/theme2/Text";
import { fontSize, colors, spacing, fontFamily, screens } from "../components/theme2/theme";

const welcomeStyle = `
  .h1 > * {
    font-size: 56px !important;
  }
  .h2 > * {
    font-size: ${fontSize.lg}px !important;
  }
  .p > * {
    font-size: ${fontSize.base}px !important;
  }

  @media (min-width:${screens.xs}) {
    .h1 > * {
      font-size: 50px !important;
    }
    .h2 > * {
      font-size: ${fontSize.xxl}px !important;
    }
    .p > * {
      font-size: ${fontSize.md}px !important;
    }
  }
`;



const Welcome = ({ includeUnsubscribe }) => {
  return (
    <BaseLayout width={600} style={welcomeStyle}>
      <Header />
      <MjmlWrapper backgroundColor={colors.black}>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          <MjmlColumn>
            <Heading maxWidth={420} cssClass="h1" fontFamily={fontFamily.serif}>
              Moderne mails zijn nu een fluitje van een cent : )
            </Heading>
          </MjmlColumn>
        </MjmlSection>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          
          <MjmlColumn>
            <Heading cssClass="h2" paddingBottom={spacing.s8}>
              <span style={{ color: "#F46800"}}>●</span> Unieke mails in huisstijl
            </Heading>
            <Text
              cssClass="p"
              fontSize={fontSize.md}
              paddingBottom={spacing.s5}
            >
             {`Hi Erwin,
      
             `}  
             </Text>

            <Text
              cssClass="p"
              fontSize={fontSize.md}
              paddingBottom={spacing.s7}
            >
             {`
             Voor de HyperForm launch zijn we op zoek naar referenten die geïnteresseerd zijn in geavanceerde mails ontworpen in huisstijl. Bijvoorbeeld een standaard mail die je stuurt naar pas ingeschreven huurders. 
             `}  
             </Text>
             <Text
              cssClass="p"
              fontSize={fontSize.md}
              paddingBottom={spacing.s7}
            >
             {`
              Je kan de gecodeerde mail eenvoudig gebruiken met services zoals gmail of outlook, de kosten voor zowel ontwerp als gebruik zijn volledig gratis. Door de verouderde mail technologie is het zelfs voor codeurs erg gecompliceerd om responsive mails te coderen.`}
             </Text>

            <Button
              href="https://github.com/JohannesBaptist/HyperForm"
              backgroundColor={"#F46800"}
              align="left"
              cssClass="sm-hidden"
            >
              Zie wat mogelijk is{"  "}
              <span style={{ fontFamily: fontFamily.serif }}>&rarr;</span>
            </Button>
            <MjmlSpacer height={spacing.s3} cssClass="lg-hidden" />
            <Button
              href="https://github.com/JohannesBaptist/HyperForm"
              backgroundColor={"#F46800"}
              align="right"
              cssClass="lg-hidden"
            >
             Zie voorbeelden{"  "}
              <span > →</span>
            </Button>
          </MjmlColumn>
        </MjmlSection>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          
          <MjmlColumn>
            <Heading cssClass="h2" paddingBottom={spacing.s6}>
              <span style={{ color: colors.green300 }}>●</span> Responsive op mobiel en desktop 
            </Heading>
            <Text
              cssClass="p"
              fontSize={fontSize.md}
              paddingBottom={spacing.s7}
            >
              Alle mail templates zijn zo gecodeerd dat ze er zowel op mobiel als desktop perfect uitzien.
              Achter de schermen worden deze templates online bewaard in een folder genaamd <span className="code"> emails/master</span> 
              
            </Text>
           
            <Button
              href="https://sample-it.net"
              backgroundColor={colors.green300}
              align="left"
              cssClass="sm-hidden"
            >
              Zie wat mogelijk is{"  "}
              <span > →</span>
            </Button>
            <MjmlSpacer height={spacing.s3} cssClass="lg-hidden" />
          </MjmlColumn>
        </MjmlSection>
        <MjmlSection paddingBottom={spacing.s11} cssClass="gutter">
          <MjmlColumn>
            <Heading cssClass="h2" paddingBottom={spacing.s6}>
              <span style={{ color: colors.blue }}>●</span> HyperForm dashboard
            </Heading>
            <Text cssClass="p" paddingBottom={spacing.s7}>
              In het HyperForm dashboard kan je gepersonaliseerde of publieke templates importeren en ze naar wens aanpassen. 
            </Text>
            <Text cssClass="p" paddingBottom={spacing.s7}>
             Door de mobiele & desktop preview modus weet je exact hoe de mail bij de ontvanger binnenkomt. Na het opzetten van de smtp server (doen wij uiteraard) stuur je met een druk op de knop moderne mails in huisstijl. Scheelt een hoop gedoe.
            </Text>
           

           

            <Button
              href="https://github.com/JohannesBaptist/HyperForm"
              align="left"
              backgroundColor={colors.blue}
              cssClass="sm-hidden"
            >
              Check out the Docs{"  "}
              <span > →</span>
            </Button>
            <MjmlSpacer height={spacing.s3} cssClass="lg-hidden" />
            <Button
              href="https://mailing.run/docs"
              align="right"
              backgroundColor={colors.blue}
              cssClass="lg-hidden"
            >
              Beta versie{"  "}
              <span > →</span>
            </Button>
            <MjmlSpacer height={spacing.s9} />
          </MjmlColumn>
        </MjmlSection>
      </MjmlWrapper>
      <Footer includeUnsubscribe={false} />
    </BaseLayout>
  );
};

export default Welcome;
