p 1 and 2 compeleted

2026-03-11 01:43:19 +01:00
1 parent 6adb541967
commit 3573709d99
@@ -0,0 +1,117 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+interface TrainerAssignmentEmailProps {
+  clientName: string;
+  trainerName: string;
+}
+
+export function TrainerAssignmentEmail({
+  clientName,
+  trainerName,
+}: TrainerAssignmentEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>You've been assigned a trainer - {trainerName}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Heading style={h1}>Great News! 🎯</Heading>
+          <Text style={text}>Hi {clientName},</Text>
+          <Text style={text}>
+            You've been assigned a personal trainer to help you reach your
+            fitness goals!
+          </Text>
+          <Section style={section}>
+            <Heading style={h2}>Your Trainer</Heading>
+            <Text style={highlightText}>{trainerName}</Text>
+          </Section>
+          <Text style={text}>
+            Your trainer will work with you to:
+            <br />
+            • Create personalized workout plans
+            <br />
+            • Provide nutrition guidance
+            <br />
+            • Track your progress and achievements
+            <br />• Adjust your program as you improve
+          </Text>
+          <Text style={text}>
+            Check your FitAI mobile app to view your trainer's profile and start
+            receiving personalized recommendations.
+          </Text>
+          <Text style={text}>
+            Let's crush those goals together!
+            <br />
+            The FitAI Team
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+// Default export for email previews
+export default TrainerAssignmentEmail;
+
+// 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: "10px 0",
+  padding: "0",
+};
+
+const text = {
+  color: "#333",
+  fontSize: "16px",
+  lineHeight: "26px",
+  padding: "0 40px",
+  margin: "16px 0",
+};
+
+const section = {
+  padding: "20px 40px",
+  backgroundColor: "#eff6ff",
+  margin: "20px 0",
+  borderLeft: "4px solid #3b82f6",
+};
+
+const highlightText = {
+  color: "#3b82f6",
+  fontSize: "24px",
+  fontWeight: "bold",
+  margin: "0",
+  padding: "0",
+};