70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import {
|
|
Heading,
|
|
Section,
|
|
Text,
|
|
} from '@react-email/components';
|
|
import { EmailLayout } from './components/EmailLayout';
|
|
import { Button } from './components/Button';
|
|
import { theme } from './theme';
|
|
|
|
interface WelcomeEmailProps {
|
|
userName?: string;
|
|
}
|
|
|
|
export const WelcomeEmail = ({ userName = 'Kirubel' }: WelcomeEmailProps) => {
|
|
return (
|
|
<EmailLayout
|
|
preview="Welcome to Amba! We're excited to have you join us."
|
|
>
|
|
<Section>
|
|
<Heading style={heading}>
|
|
Hi {userName}! 👋
|
|
</Heading>
|
|
<Text style={text}>
|
|
Welcome to Amba! We're thrilled to have you join our community. Amba makes it easy to manage your payments, send money to friends, and handle all your financial transactions seamlessly.
|
|
</Text>
|
|
<Text style={text}>
|
|
Get started by adding your first payment card or exploring the app to see all the amazing features we have to offer.
|
|
</Text>
|
|
<Section style={buttonSection}>
|
|
<Button href="https://amba.app/get-started">
|
|
Get Started
|
|
</Button>
|
|
</Section>
|
|
<Text style={text}>
|
|
If you have any questions, feel free to reach out to our support team. We're here to help!
|
|
</Text>
|
|
<Text style={text}>
|
|
Best regards,<br />
|
|
The Amba Team
|
|
</Text>
|
|
</Section>
|
|
</EmailLayout>
|
|
);
|
|
};
|
|
|
|
const heading = {
|
|
color: theme.colors.primary,
|
|
fontSize: '28px',
|
|
fontWeight: '700',
|
|
margin: '0 0 24px',
|
|
};
|
|
|
|
const text = {
|
|
color: theme.colors.textDark,
|
|
fontSize: '16px',
|
|
lineHeight: '24px',
|
|
margin: '0 0 16px',
|
|
};
|
|
|
|
const buttonSection = {
|
|
textAlign: 'center' as const,
|
|
margin: '32px 0',
|
|
};
|
|
|
|
WelcomeEmail.PreviewProps = {
|
|
userName: 'Kirubel',
|
|
} as WelcomeEmailProps;
|
|
|
|
export default WelcomeEmail;
|