brookmind-emails 0.1.11 → 0.1.13

package/src/modelfy/templates/FeedbackRequestEmail.tsx

@@ -0,0 +1,383 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+  Img,
+  Button as ReactEmailButton,
+} from "@react-email/components";
+import { modelfyConfig } from "../config.js";
+
+export interface FeedbackRequestEmailProps {
+  email: string;
+  planName: string;
+  subscriptionEndDate: 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: colors.background,
+    fontFamily: "'Inter', 'Segoe UI', Arial, sans-serif",
+  },
+  container: {
+    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 16px",
+    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: "28px",
+    fontWeight: 700,
+    color: colors.white,
+    lineHeight: "1.3",
+  },
+  heroSubheading: {
+    margin: "0",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+  },
+  feedbackSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    borderTop: `1px solid ${colors.border}`,
+    borderBottom: `1px solid ${colors.border}`,
+  },
+  feedbackText: {
+    margin: "0 0 20px",
+    fontSize: "15px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
+  },
+  feedbackBox: {
+    backgroundColor: "rgba(10, 143, 90, 0.1)",
+    border: `1px solid rgba(10, 143, 90, 0.3)`,
+    borderRadius: "12px",
+    padding: "20px 24px",
+    marginBottom: "24px",
+  },
+  feedbackBoxText: {
+    margin: 0,
+    fontSize: "14px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
+  },
+  questionsSection: {
+    backgroundColor: colors.background,
+    padding: "32px",
+  },
+  questionsSectionTitle: {
+    margin: "0 0 20px",
+    fontSize: "14px",
+    fontWeight: 600,
+    color: colors.white,
+    textAlign: "center" as const,
+  },
+  questionsList: {
+    margin: "0 auto",
+    padding: "0 20px",
+    maxWidth: "400px",
+  },
+  questionItem: {
+    margin: "0 0 12px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: colors.textMuted,
+  },
+  questionBullet: {
+    color: colors.primary,
+    marginRight: "8px",
+  },
+  ctaSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  ctaButton: {
+    display: "inline-block",
+    padding: "14px 36px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  winbackSection: {
+    backgroundColor: colors.background,
+    padding: "32px",
+    textAlign: "center" as const,
+  },
+  winbackText: {
+    margin: "0 0 8px",
+    fontSize: "14px",
+    lineHeight: "1.6",
+    color: colors.textMuted,
+    textAlign: "center" as const,
+  },
+  winbackLink: {
+    color: colors.primary,
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+  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",
+  },
+  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",
+  },
+};
+
+const feedbackReasons = [
+  "The pricing didn't fit my budget",
+  "I found an alternative solution",
+  "The features didn't meet my needs",
+  "I experienced technical issues",
+  "I didn't use the product enough",
+  "Other reasons",
+];
+
+export function FeedbackRequestEmail({
+  email = "user@example.com",
+  planName = "Pro",
+  subscriptionEndDate = "January 1, 2025",
+}: FeedbackRequestEmailProps): React.ReactElement {
+  const feedbackMailto = `mailto:${modelfyConfig.supportEmail}?subject=Feedback%20on%20my%20Modelfy%20subscription&body=Hi%20Modelfy%20team%2C%0A%0AI%27m%20sharing%20feedback%20about%20my%20${encodeURIComponent(planName)}%20subscription%20that%20ended%20on%20${encodeURIComponent(subscriptionEndDate)}.%0A%0A`;
+
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            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_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={600}
+          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>We'd love your feedback on Modelfy - Help us improve</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          {/* 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}>We'd Love Your Feedback</Text>
+            <Text style={styles.heroHeading}>We're Sorry to See You Go</Text>
+            <Text style={styles.heroSubheading}>
+              Hi <span style={{ color: colors.white, fontWeight: 600 }}>{email}</span>, your{" "}
+              <span style={{ color: colors.white, fontWeight: 600 }}>{planName}</span> subscription
+              ended on{" "}
+              <span style={{ color: colors.white, fontWeight: 600 }}>{subscriptionEndDate}</span>.
+              Your feedback would help us improve Modelfy for everyone.
+            </Text>
+          </Section>
+
+          {/* Feedback Explanation */}
+          <Section style={styles.feedbackSection}>
+            <Text style={styles.feedbackText}>
+              We'd genuinely appreciate hearing about your experience.
+              Just reply to this email or click the button below.
+            </Text>
+            <div style={styles.feedbackBox}>
+              <Text style={styles.feedbackBoxText}>
+                Simply hit reply and let us know what we could do better.
+                <br />
+                All feedback goes directly to our team.
+              </Text>
+            </div>
+          </Section>
+
+          {/* Quick Questions */}
+          <Section style={styles.questionsSection}>
+            <Text style={styles.questionsSectionTitle}>
+              Some things we'd love to know:
+            </Text>
+            <div style={styles.questionsList}>
+              {feedbackReasons.map((reason, index) => (
+                <Text key={index} style={styles.questionItem}>
+                  <span style={styles.questionBullet}>•</span>
+                  {reason}
+                </Text>
+              ))}
+            </div>
+          </Section>
+
+          {/* CTA Section */}
+          <Section style={styles.ctaSection}>
+            <ReactEmailButton href={feedbackMailto} style={styles.ctaButton}>
+              Share Your Feedback
+            </ReactEmailButton>
+          </Section>
+
+          {/* Win-back Section */}
+          <Section style={styles.winbackSection}>
+            <Text style={styles.winbackText}>
+              Changed your mind? Your account is still here waiting for you.
+            </Text>
+            <Text style={styles.winbackText}>
+              <Link href={modelfyConfig.appUrl} style={styles.winbackLink}>
+                Reactivate your subscription
+              </Link>
+            </Text>
+          </Section>
+
+          {/* 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 your Modelfy subscription has ended.
+            </Text>
+            <Text style={styles.footerText}>
+              <Link href={`${modelfyConfig.appUrl}/privacy`} style={styles.footerLink}>
+                Privacy Policy
+              </Link>
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default FeedbackRequestEmail;

package/src/modelfy/templates/WelcomeEmail.tsx

@@ -274,7 +274,7 @@ const campaignImages = Array.from(
   { length: 33 },
   (_, i) => `https://bucket.modelfy.ai/app-media/campaign/campaign${i + 1}.jpeg`
 );
-const campaignProImages = Array.from(
+const _campaignProImages = Array.from(
   { length: 15 },
   (_, i) => `https://bucket.modelfy.ai/app-media/campaign-pro/campaign-pro-${i + 1}.jpg`
 );