import {
Body,
Button,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Section,
Tailwind,
Text,
} from '@react-email/components';
export type WelcomeEmailProps = {
username: string;
loginLink: string;
};
export const WelcomeEmailEN = ({ username, loginLink }: WelcomeEmailProps) => {
const previewText = `Welcome to Intlayer!`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="m-auto px-2 font-sans">
<Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]">
<Section className="mt-[32px]">
<Img
src="https://intlayer.org/apple-touch-icon.png"
width="40"
height="37"
alt="Intlayer"
className="mx-auto my-0"
/>
</Section>
<Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
Welcome to <strong>Intlayer</strong>
</Heading>
<Text className="text-[14px] text-black leading-[24px]">
Hello {username},
</Text>
<Text className="text-[14px] text-black leading-[24px]">
We're excited to have you on board! Get started by logging in to
your <strong>Intlayer</strong> account.
</Text>
<Section className="my-[32px] text-center">
<Button
className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
href={loginLink}
>
Log In to Your Account
</Button>
</Section>
<Text className="text-[14px] text-black leading-[24px]">
or copy and paste this URL into your browser:
</Text>
<Link
href={loginLink}
className="text-[#8a8a8a] text-[10px] no-underline"
>
{loginLink}
</Link>
<Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
If you have any questions or need help getting started, feel free
to reply to this email. We're here to help!
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export const WelcomeEmailFR = ({ username, loginLink }: WelcomeEmailProps) => {
const previewText = `Bienvenue chez Intlayer !`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="m-auto px-2 font-sans">
<Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]">
<Section className="mt-[32px]">
<Img
src="https://intlayer.org/apple-touch-icon.png"
width="40"
height="37"
alt="Intlayer"
className="mx-auto my-0"
/>
</Section>
<Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
Bienvenue chez <strong>Intlayer</strong>
</Heading>
<Text className="text-[14px] text-black leading-[24px]">
Bonjour {username},
</Text>
<Text className="text-[14px] text-black leading-[24px]">
Nous sommes ravis de vous avoir parmi nous ! Commencez par vous
connecter à votre compte <strong>Intlayer</strong>.
</Text>
<Section className="my-[32px] text-center">
<Button
className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
href={loginLink}
>
Connectez-vous à votre compte
</Button>
</Section>
<Text className="text-[14px] text-black leading-[24px]">
ou copiez et collez cette URL dans votre navigateur :
</Text>
<Link
href={loginLink}
className="text-[#8a8a8a] text-[10px] no-underline"
>
{loginLink}
</Link>
<Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
Si vous avez des questions ou besoin d'aide pour commencer,
n'hésitez pas à répondre à cet e-mail. Nous sommes là pour vous
aider !
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export const WelcomeEmailES = ({ username, loginLink }: WelcomeEmailProps) => {
const previewText = `¡Bienvenido a Intlayer!`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="m-auto px-2 font-sans">
<Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]">
<Section className="mt-[32px]">
<Img
src="https://intlayer.org/apple-touch-icon.png"
width="40"
height="37"
alt="Intlayer"
className="mx-auto my-0"
/>
</Section>
<Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
Bienvenido a <strong>Intlayer</strong>
</Heading>
<Text className="text-[14px] text-black leading-[24px]">
Hola {username},
</Text>
<Text className="text-[14px] text-black leading-[24px]">
¡Estamos emocionados de tenerte a bordo! Comienza iniciando sesión
en tu cuenta de <strong>Intlayer</strong>.
</Text>
<Section className="my-[32px] text-center">
<Button
className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
href={loginLink}
>
Inicia sesión en tu cuenta
</Button>
</Section>
<Text className="text-[14px] text-black leading-[24px]">
o copia y pega esta URL en tu navegador:
</Text>
<Link
href={loginLink}
className="text-[#8a8a8a] text-[10px] no-underline"
>
{loginLink}
</Link>
<Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
Si tienes preguntas o necesitas ayuda para comenzar, no dudes en
responder a este correo electrónico. ¡Estamos aquí para ayudarte!
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
const PreviewProps: WelcomeEmailProps = {
username: 'alanturing',
loginLink: 'https://intlayer.org/login',
};
WelcomeEmailEN.PreviewProps = PreviewProps;
WelcomeEmailFR.PreviewProps = PreviewProps;
WelcomeEmailES.PreviewProps = PreviewProps;