115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
import {
|
|
Heading,
|
|
Section,
|
|
Text,
|
|
Link,
|
|
} from '@react-email/components';
|
|
import { EmailLayout } from './components/EmailLayout';
|
|
import { Button } from './components/Button';
|
|
import { theme } from './theme';
|
|
|
|
interface WaitlistEmailProps {
|
|
userName?: string;
|
|
position?: number;
|
|
}
|
|
|
|
export const WaitlistEmail = ({
|
|
userName = 'Kirubel',
|
|
position = 42,
|
|
}: WaitlistEmailProps) => {
|
|
return (
|
|
<EmailLayout
|
|
preview="Thank you for joining the AmbaPay waitlist! We're excited to have you on board."
|
|
>
|
|
<Section>
|
|
<Heading style={heading}>
|
|
You're on the List! 🎉
|
|
</Heading>
|
|
<Text style={text}>
|
|
Hi {userName},
|
|
</Text>
|
|
<Text style={text}>
|
|
Thank you for joining the AmbaPay waitlist! We're thrilled to have you as part of our community. You're helping us build the future of seamless payments.
|
|
</Text>
|
|
<Text style={text}>
|
|
<strong>Your position: #{position}</strong>
|
|
</Text>
|
|
<Text style={text}>
|
|
We're working hard to launch AmbaPay and bring you an innovative payment experience. As we get closer to launch, we'll keep you updated on our progress and exclusive early access opportunities.
|
|
</Text>
|
|
<Section style={buttonSection}>
|
|
<Button href="https://amba.app/waitlist">
|
|
Learn More About AmbaPay
|
|
</Button>
|
|
</Section>
|
|
<Text style={text}>
|
|
In the meantime, feel free to follow us on social media for updates, tips, and behind-the-scenes content:
|
|
</Text>
|
|
<Section style={socialSection}>
|
|
<Link href="https://twitter.com/ambapay" style={socialLink}>
|
|
Twitter
|
|
</Link>
|
|
{' • '}
|
|
<Link href="https://instagram.com/ambapay" style={socialLink}>
|
|
Instagram
|
|
</Link>
|
|
{' • '}
|
|
<Link href="https://linkedin.com/company/ambapay" style={socialLink}>
|
|
LinkedIn
|
|
</Link>
|
|
{' • '}
|
|
<Link href="https://facebook.com/ambapay" style={socialLink}>
|
|
Facebook
|
|
</Link>
|
|
</Section>
|
|
<Text style={text}>
|
|
We appreciate your patience and can't wait to welcome you to AmbaPay!
|
|
</Text>
|
|
<Text style={text}>
|
|
Best regards,<br />
|
|
The AmbaPay 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',
|
|
};
|
|
|
|
const socialSection = {
|
|
textAlign: 'center' as const,
|
|
margin: '24px 0',
|
|
padding: '16px 0',
|
|
};
|
|
|
|
const socialLink = {
|
|
color: theme.colors.primary,
|
|
textDecoration: 'underline',
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
};
|
|
|
|
WaitlistEmail.PreviewProps = {
|
|
userName: 'Kirubel',
|
|
position: 42,
|
|
} as WaitlistEmailProps;
|
|
|
|
export default WaitlistEmail;
|