102 lines
2.3 KiB
TypeScript
102 lines
2.3 KiB
TypeScript
import {
|
|
Body,
|
|
Container,
|
|
Head,
|
|
Heading,
|
|
Html,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
Button,
|
|
} from "@react-email/components";
|
|
|
|
interface WelcomeEmailProps {
|
|
name: string;
|
|
}
|
|
|
|
export function WelcomeEmail({ name }: WelcomeEmailProps) {
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>Welcome to FitAI - Your fitness journey starts here!</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Heading style={h1}>Welcome to FitAI! 💪</Heading>
|
|
<Text style={text}>Hi {name},</Text>
|
|
<Text style={text}>
|
|
We're excited to have you join FitAI! Your account has been
|
|
successfully created, and you're all set to begin your fitness
|
|
journey.
|
|
</Text>
|
|
<Section style={section}>
|
|
<Heading style={h2}>Getting Started</Heading>
|
|
<Text style={text}>
|
|
• Download the FitAI mobile app to track your workouts
|
|
<br />
|
|
• Complete your fitness profile for personalized recommendations
|
|
<br />
|
|
• Check in at the gym to start tracking your attendance
|
|
<br />• Connect with your trainer for custom workout plans
|
|
</Text>
|
|
</Section>
|
|
<Text style={text}>
|
|
If you have any questions, feel free to reach out to your gym
|
|
administrator or trainer.
|
|
</Text>
|
|
<Text style={text}>
|
|
Let's make fitness a lifestyle!
|
|
<br />
|
|
The FitAI Team
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
// Default export for email previews
|
|
export default WelcomeEmail;
|
|
|
|
// Styles
|
|
const main = {
|
|
backgroundColor: "#f6f9fc",
|
|
fontFamily:
|
|
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
|
|
};
|
|
|
|
const container = {
|
|
backgroundColor: "#ffffff",
|
|
margin: "0 auto",
|
|
padding: "20px 0 48px",
|
|
marginBottom: "64px",
|
|
maxWidth: "600px",
|
|
};
|
|
|
|
const h1 = {
|
|
color: "#333",
|
|
fontSize: "28px",
|
|
fontWeight: "bold",
|
|
margin: "40px 0 20px",
|
|
padding: "0 40px",
|
|
};
|
|
|
|
const h2 = {
|
|
color: "#333",
|
|
fontSize: "20px",
|
|
fontWeight: "bold",
|
|
margin: "20px 0 10px",
|
|
};
|
|
|
|
const text = {
|
|
color: "#333",
|
|
fontSize: "16px",
|
|
lineHeight: "26px",
|
|
padding: "0 40px",
|
|
};
|
|
|
|
const section = {
|
|
padding: "20px 40px",
|
|
backgroundColor: "#f8f9fa",
|
|
margin: "20px 0",
|
|
};
|