brookmind-emails 0.1.7 → 0.1.9

package/src/modelfy/index.ts

@@ -5,12 +5,13 @@ import {
   type PromoSubscriptionEmailProps,
 } from "./templates/PromoSubscriptionEmail.js";
 import { GrantCreditsEmail, type GrantCreditsEmailProps } from "./templates/GrantCreditsEmail.js";
+import { WelcomeEmail, type WelcomeEmailProps } from "./templates/WelcomeEmail.js";
 
 // Re-export types
-export type { OtpEmailProps, PromoSubscriptionEmailProps, GrantCreditsEmailProps };
+export type { OtpEmailProps, PromoSubscriptionEmailProps, GrantCreditsEmailProps, WelcomeEmailProps };
 
 // Re-export components for preview
-export { OtpEmail, PromoSubscriptionEmail, GrantCreditsEmail };
+export { OtpEmail, PromoSubscriptionEmail, GrantCreditsEmail, WelcomeEmail };
 
 // Render functions
 export interface RenderResult {
@@ -55,3 +56,16 @@ export async function renderGrantCreditsEmail(
     text,
   };
 }
+
+export async function renderWelcomeEmail(
+  props: WelcomeEmailProps
+): Promise<RenderResult> {
+  const html = await render(WelcomeEmail(props));
+  const text = await render(WelcomeEmail(props), { plainText: true });
+
+  return {
+    subject: "Welcome to Modelfy!",
+    html,
+    text,
+  };
+}

package/src/modelfy/templates/GrantCreditsEmail.tsx

@@ -8,8 +8,9 @@ import {
   Link,
   Preview,
   Font,
+  Img,
+  Button as ReactEmailButton,
 } from "@react-email/components";
-import { Header, Footer, Button } from "../../shared/components/index.js";
 import { modelfyConfig } from "../config.js";
 
 export interface GrantCreditsEmailProps {
@@ -20,101 +21,187 @@ export interface GrantCreditsEmailProps {
   description?: string;
 }
 
+// Design System Colors - Matching Modelfy Landing
+const colors = {
+  background: "#0d0d0d",
+  cardBg: "#121212",
+  primary: "#0a8f5a",
+  white: "#f2f2f2",
+  textSecondary: "rgba(242, 242, 242, 0.7)",
+  textMuted: "#8c8c8c",
+  border: "#262626",
+};
+
 const styles = {
   body: {
     margin: 0,
     padding: 0,
-    backgroundColor: "#F8FAFC",
-    fontFamily: "'Outfit', Arial, sans-serif",
+    backgroundColor: colors.background,
+    fontFamily: "'Inter', 'Segoe UI', Arial, sans-serif",
   },
   container: {
-    maxWidth: "560px",
-    margin: "32px auto",
-    backgroundColor: "#ffffff",
-    border: "1px solid #E2E8F0",
-    borderRadius: "16px",
-    boxShadow: "0 24px 48px rgba(15, 23, 42, 0.08)",
-    overflow: "hidden",
-  },
-  content: {
-    padding: "32px 40px 24px",
-  },
-  heading: {
+    maxWidth: "600px",
+    margin: "0 auto",
+    backgroundColor: colors.background,
+  },
+  header: {
+    backgroundColor: colors.background,
+    padding: "40px 32px 24px",
+    textAlign: "center" as const,
+  },
+  logo: {
+    display: "block" as const,
+    margin: "0 auto",
+  },
+  heroSection: {
+    padding: "24px 32px 40px",
+    textAlign: "center" as const,
+  },
+  heroTagline: {
+    margin: "0 0 12px",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: colors.primary,
+    letterSpacing: "2px",
+    textTransform: "uppercase" as const,
+  },
+  heroHeading: {
     margin: "0 0 16px",
-    fontSize: "24px",
+    fontSize: "28px",
     fontWeight: 700,
-    color: "#0F172A",
-    textAlign: "center" as const,
+    color: colors.white,
+    lineHeight: "1.3",
   },
   paragraph: {
-    margin: "0 0 24px",
+    margin: "0 0 28px",
     fontSize: "16px",
     lineHeight: "1.6",
-    color: "rgba(15, 23, 42, 0.72)",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
   },
   creditBox: {
-    backgroundColor: "rgba(34, 197, 94, 0.08)",
-    border: "1px solid rgba(34, 197, 94, 0.24)",
+    backgroundColor: "rgba(10, 143, 90, 0.15)",
+    border: `1px solid rgba(10, 143, 90, 0.3)`,
     borderRadius: "12px",
     padding: "24px",
-    marginBottom: "24px",
+    marginBottom: "28px",
     textAlign: "center" as const,
   },
   creditAmount: {
     fontSize: "48px",
     fontWeight: 700,
-    color: "#16A34A",
-    margin: "0 0 8px",
+    color: colors.white,
+    margin: "0 0 4px",
   },
   creditLabel: {
-    fontSize: "16px",
-    color: "rgba(15, 23, 42, 0.6)",
+    fontSize: "14px",
+    color: colors.textMuted,
     margin: 0,
   },
   detailsBox: {
-    backgroundColor: "#F8FAFC",
-    borderRadius: "8px",
-    padding: "16px",
-    marginBottom: "24px",
-  },
-  detailRow: {
-    display: "flex" as const,
-    justifyContent: "space-between" as const,
-    marginBottom: "8px",
+    backgroundColor: colors.cardBg,
+    border: `1px solid ${colors.border}`,
+    borderRadius: "12px",
+    padding: "20px 24px",
+    marginBottom: "28px",
   },
   detailLabel: {
-    fontSize: "14px",
-    color: "rgba(15, 23, 42, 0.6)",
-    margin: 0,
+    fontSize: "13px",
+    color: colors.textMuted,
+    margin: "0 0 4px",
   },
   detailValue: {
-    fontSize: "14px",
+    fontSize: "16px",
     fontWeight: 600,
-    color: "#0F172A",
+    color: colors.white,
     margin: 0,
   },
   buttonContainer: {
     textAlign: "center" as const,
-    marginBottom: "24px",
+    marginBottom: "28px",
+  },
+  ctaButton: {
+    display: "inline-block",
+    padding: "14px 36px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  contentSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    borderTop: `1px solid ${colors.border}`,
   },
   smallText: {
     margin: "0 0 12px",
     fontSize: "14px",
     lineHeight: "1.6",
-    color: "rgba(15, 23, 42, 0.6)",
+    color: colors.textMuted,
+    textAlign: "center" as const,
+  },
+  descriptionText: {
+    margin: "0 0 24px",
+    fontSize: "15px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
+    fontStyle: "italic" as const,
   },
   link: {
-    color: "#6366F1",
+    color: colors.primary,
     textDecoration: "none",
     fontWeight: 600,
   },
+  footer: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  footerLogo: {
+    display: "block" as const,
+    margin: "0 auto 12px",
+    opacity: 0.6,
+  },
+  footerText: {
+    margin: "0 0 4px",
+    fontSize: "11px",
+    color: colors.textMuted,
+    lineHeight: "1.6",
+  },
+  footerLink: {
+    color: colors.textMuted,
+    textDecoration: "underline",
+  },
+  downloadSection: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  downloadText: {
+    margin: "0 0 16px",
+    fontSize: "14px",
+    color: colors.white,
+  },
+  badgeContainer: {
+    textAlign: "center" as const,
+  },
+  badge: {
+    display: "inline-block",
+    margin: "0 8px",
+  },
 };
 
 export function GrantCreditsEmail({
-  email,
+  email = "user@example.com",
   credits,
-  durationDays,
-  expiresAt,
+  durationDays = 30,
+  expiresAt = "January 31, 2025",
   description,
 }: GrantCreditsEmailProps) {
   const safeCredits = Number.isFinite(credits) ? Number(credits) : 0;
@@ -123,79 +210,139 @@ export function GrantCreditsEmail({
     <Html lang="en">
       <Head>
         <Font
-          fontFamily="Outfit"
+          fontFamily="Inter"
           fallbackFontFamily="Arial"
           webFont={{
-            url: "https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4G-EiAou6Y.woff2",
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_0.woff2",
             format: "woff2",
           }}
           fontWeight={400}
           fontStyle="normal"
         />
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={700}
+          fontStyle="normal"
+        />
       </Head>
       <Preview>
         You've received {safeCredits.toLocaleString()} credits on Modelfy!
       </Preview>
       <Body style={styles.body}>
         <Container style={styles.container}>
-          <Header logoUrl={modelfyConfig.logoUrl} logoAlt="Modelfy" subtitle="Credits added" />
-          <Section style={styles.content}>
-            <Text style={styles.heading}>Credits Added to Your Account!</Text>
+          {/* Header */}
+          <Section style={styles.header}>
+            <Img
+              src={modelfyConfig.logoUrl}
+              width="130"
+              height="auto"
+              alt="Modelfy"
+              style={styles.logo}
+            />
+          </Section>
+
+          {/* Hero Section */}
+          <Section style={styles.heroSection}>
+            <Text style={styles.heroTagline}>Bonus Credits</Text>
+            <Text style={styles.heroHeading}>Credits Added to Your Account!</Text>
             <Text style={styles.paragraph}>
-              Hi <strong>{email}</strong>, you've received bonus credits to use on Modelfy.
+              Hi <span style={{ color: colors.white, fontWeight: 600 }}>{email}</span>, you've
+              received bonus credits to use on Modelfy.
             </Text>
 
             <div style={styles.creditBox}>
-              <Text style={styles.creditAmount}>+{safeCredits.toLocaleString()}</Text>
+              <Text style={styles.creditAmount}>{safeCredits.toLocaleString()}</Text>
               <Text style={styles.creditLabel}>credits</Text>
             </div>
 
             <div style={styles.detailsBox}>
               <table width="100%" cellPadding={0} cellSpacing={0}>
-                <tr>
-                  <td style={{ paddingBottom: "8px" }}>
-                    <Text style={styles.detailLabel}>Valid for</Text>
-                  </td>
-                  <td style={{ paddingBottom: "8px", textAlign: "right" }}>
-                    <Text style={styles.detailValue}>{durationDays} days</Text>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <Text style={styles.detailLabel}>Expires</Text>
-                  </td>
-                  <td style={{ textAlign: "right" }}>
-                    <Text style={styles.detailValue}>{expiresAt}</Text>
-                  </td>
-                </tr>
+                <tbody>
+                  <tr>
+                    <td style={{ paddingBottom: "16px" }}>
+                      <Text style={styles.detailLabel}>Valid for</Text>
+                      <Text style={styles.detailValue}>{durationDays} days</Text>
+                    </td>
+                    <td style={{ paddingBottom: "16px", textAlign: "right" as const }}>
+                      <Text style={styles.detailLabel}>Expires</Text>
+                      <Text style={styles.detailValue}>{expiresAt}</Text>
+                    </td>
+                  </tr>
+                </tbody>
               </table>
             </div>
 
-            {description && (
-              <Text style={styles.paragraph}>
-                <em>"{description}"</em>
-              </Text>
-            )}
+            {description && <Text style={styles.descriptionText}>"{description}"</Text>}
 
             <div style={styles.buttonContainer}>
-              <Button href={modelfyConfig.appUrl}>Start Creating</Button>
+              <ReactEmailButton href={modelfyConfig.appUrl} style={styles.ctaButton}>
+                Start Creating
+              </ReactEmailButton>
             </div>
+          </Section>
 
+          {/* Content Section */}
+          <Section style={styles.contentSection}>
             <Text style={styles.smallText}>
               These credits will be used before your regular credits and expire on {expiresAt}.
             </Text>
             <Text style={styles.smallText}>
-              Questions? Contact us at{" "}
+              Questions?{" "}
               <Link href={`mailto:${modelfyConfig.supportEmail}`} style={styles.link}>
                 {modelfyConfig.supportEmail}
               </Link>
             </Text>
           </Section>
-          <Footer
-            companyName={modelfyConfig.companyName}
-            message="You received this email because credits were added to your Modelfy account."
-            supportEmail={modelfyConfig.supportEmail}
-          />
+
+          {/* Download App Section */}
+          <Section style={styles.downloadSection}>
+            <Text style={styles.downloadText}>Get the Modelfy app</Text>
+            <div style={styles.badgeContainer}>
+              <Link href={modelfyConfig.appStoreUrl} style={styles.badge}>
+                <Img
+                  src={modelfyConfig.appStoreBadgeUrl}
+                  width="120"
+                  height="40"
+                  alt="Download on the App Store"
+                />
+              </Link>
+              <Link href={modelfyConfig.playStoreUrl} style={styles.badge}>
+                <Img
+                  src={modelfyConfig.playStoreBadgeUrl}
+                  width="135"
+                  height="40"
+                  alt="Get it on Google Play"
+                />
+              </Link>
+            </div>
+          </Section>
+
+          {/* Footer */}
+          <Section style={styles.footer}>
+            <Img
+              src={modelfyConfig.logoUrl}
+              width="80"
+              height="auto"
+              alt="Modelfy"
+              style={styles.footerLogo}
+            />
+            <Text style={styles.footerText}>
+              © {new Date().getFullYear()} {modelfyConfig.companyName}. All rights reserved.
+            </Text>
+            <Text style={styles.footerText}>
+              You received this email because credits were added to your Modelfy account.
+            </Text>
+            <Text style={styles.footerText}>
+              <Link href={`${modelfyConfig.appUrl}/privacy`} style={styles.footerLink}>
+                Privacy Policy
+              </Link>
+            </Text>
+          </Section>
         </Container>
       </Body>
     </Html>