brookmind-emails 0.1.7 → 0.1.9

package/src/modelfy/templates/WelcomeEmail.tsx

@@ -0,0 +1,619 @@
+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 WelcomeEmailProps {
+  email: string;
+}
+
+// Design System Colors - Matching Modelfy Landing
+const colors = {
+  background: "#0d0d0d",
+  cardBg: "#121212",
+  primary: "#0a8f5a",
+  primaryLight: "#10b981",
+  accent: "#f59e0b",
+  accentDark: "#d97706",
+  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 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: "28px",
+    fontWeight: 700,
+    color: colors.white,
+    lineHeight: "1.3",
+  },
+  heroSubheading: {
+    margin: "0 0 28px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+  },
+  heroCta: {
+    display: "inline-block",
+    padding: "14px 36px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  welcomeSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+    borderBottom: `1px solid ${colors.border}`,
+  },
+  welcomeText: {
+    margin: "0 0 16px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+  },
+  welcomeEmail: {
+    color: colors.white,
+    fontWeight: 600,
+  },
+  creditsBox: {
+    display: "inline-block",
+    backgroundColor: "rgba(10, 143, 90, 0.15)",
+    border: `1px solid rgba(10, 143, 90, 0.3)`,
+    borderRadius: "8px",
+    padding: "10px 20px",
+  },
+  creditsText: {
+    margin: 0,
+    fontSize: "14px",
+    color: colors.white,
+    fontWeight: 600,
+  },
+  featuresSection: {
+    backgroundColor: colors.background,
+    padding: "40px 24px",
+  },
+  featuresSectionTitle: {
+    margin: "0 0 8px",
+    fontSize: "12px",
+    fontWeight: 600,
+    color: colors.primary,
+    letterSpacing: "2px",
+    textTransform: "uppercase" as const,
+    textAlign: "center" as const,
+  },
+  featuresSectionHeading: {
+    margin: "0 0 32px",
+    fontSize: "22px",
+    fontWeight: 700,
+    color: colors.white,
+    textAlign: "center" as const,
+    lineHeight: "1.4",
+  },
+  goldenGradient: {
+    background: "linear-gradient(135deg, #f59e0b, #d97706)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text",
+  },
+  featureRow: {
+    marginBottom: "20px",
+    backgroundColor: colors.cardBg,
+    borderRadius: "12px",
+    overflow: "hidden" as const,
+    border: `1px solid ${colors.border}`,
+  },
+  featureImage: {
+    width: "100%",
+    height: "auto",
+    display: "block" as const,
+  },
+  featureContent: {
+    padding: "20px",
+    verticalAlign: "middle" as const,
+  },
+  featureEyebrow: {
+    margin: "0 0 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: colors.primary,
+    letterSpacing: "1.5px",
+    textTransform: "uppercase" as const,
+  },
+  featureTitle: {
+    margin: "0 0 8px",
+    fontSize: "18px",
+    fontWeight: 700,
+    color: colors.white,
+    lineHeight: "1.2",
+  },
+  featureTitleHighlight: {
+    color: colors.primary,
+  },
+  featureDescription: {
+    margin: 0,
+    fontSize: "13px",
+    lineHeight: "1.5",
+    color: colors.textMuted,
+  },
+  ctaSection: {
+    backgroundColor: colors.cardBg,
+    padding: "40px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  ctaHeading: {
+    margin: "0 0 12px",
+    fontSize: "22px",
+    fontWeight: 700,
+    color: colors.white,
+  },
+  ctaSubheading: {
+    margin: "0 0 24px",
+    fontSize: "15px",
+    color: colors.textSecondary,
+  },
+  ctaButton: {
+    display: "inline-block",
+    padding: "16px 48px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  supportSection: {
+    backgroundColor: colors.background,
+    padding: "32px",
+    textAlign: "center" as const,
+  },
+  supportText: {
+    margin: "0 0 4px",
+    fontSize: "13px",
+    color: colors.textMuted,
+  },
+  supportLink: {
+    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",
+  },
+};
+
+// Image pools for random selection
+const campaignImages = Array.from(
+  { length: 33 },
+  (_, i) => `https://bucket.modelfy.ai/app-media/campaign/campaign${i + 1}.jpeg`
+);
+const campaignProImages = Array.from(
+  { length: 15 },
+  (_, i) => `https://bucket.modelfy.ai/app-media/campaign-pro/campaign-pro-${i + 1}.jpg`
+);
+const colorSwapImages = Array.from(
+  { length: 10 },
+  (_, i) => `https://modelfy.ai/images/color-swap/studio-color-change${i + 1}.jpg`
+);
+const modelImages = [
+  "https://modelfy.ai/images/result-model-1.jpg",
+  "https://modelfy.ai/images/result-model-2.jpg",
+  "https://modelfy.ai/images/result-model-3.jpg",
+];
+
+function getRandomImage(images: string[]): string {
+  return images[Math.floor(Math.random() * images.length)];
+}
+
+const features = [
+  {
+    eyebrow: "AI MODELS",
+    titleBefore: "Create your own",
+    titleHighlight: "AI Models",
+    titleAfter: "",
+    description: "Build custom AI models that capture your brand's unique aesthetic. Train once, use across every campaign.",
+    getImage: () => getRandomImage(modelImages),
+    isVideo: false,
+  },
+  {
+    eyebrow: "CAMPAIGNS",
+    titleBefore: "Professional",
+    titleHighlight: "Campaign",
+    titleAfter: "Photography",
+    description: "Place your products in any scene imaginable. Rooftop nights, city streets, beach sunsets, or fully custom environments.",
+    getImage: () => getRandomImage(campaignImages),
+    isVideo: false,
+  },
+  {
+    eyebrow: "STUDIO",
+    titleBefore: "Studio-Quality",
+    titleHighlight: "Product",
+    titleAfter: "Shots",
+    description: "Clean backgrounds, perfect lighting. E-commerce ready in seconds.",
+    getImage: () => getRandomImage(campaignProImages),
+    isVideo: false,
+  },
+  {
+    eyebrow: "COLOR SWAP",
+    titleBefore: "Instant",
+    titleHighlight: "Color",
+    titleAfter: "Variations",
+    description: "Generate every color variant your product comes in. One shoot, unlimited colors.",
+    getImage: () => getRandomImage(colorSwapImages),
+    isVideo: false,
+  },
+  {
+    eyebrow: "VIDEO",
+    titleBefore: "Create",
+    titleHighlight: "Videos",
+    titleAfter: "with Audio",
+    description: "Create stunning product videos with AI-generated audio, music, and voiceovers.",
+    getImage: () => getRandomImage(campaignImages),
+    isVideo: true,
+    videoLink: "https://modelfy.ai/#features",
+  },
+  {
+    eyebrow: "SUBTITLES",
+    titleBefore: "Auto-Generate",
+    titleHighlight: "Subtitles",
+    titleAfter: "",
+    description: "Auto-generate customizable subtitles for social media videos. Upload, generate, customize, download.",
+    getImage: () => "https://bucket.modelfy.ai/app-media/emails/subtitles.png",
+    isVideo: false,
+  },
+  {
+    eyebrow: "EXPORT",
+    titleBefore: "Every",
+    titleHighlight: "Format",
+    titleAfter: "You Need",
+    description: "Stories, Reels, Posts, Square, Landscape, Portrait. Up to 4K resolution.",
+    getImage: () => getRandomImage(campaignProImages),
+    isVideo: false,
+  },
+];
+
+export function WelcomeEmail({ email = "user@example.com" }: WelcomeEmailProps) {
+  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>Welcome to Modelfy - Transform your product photography with AI</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}>Welcome to Modelfy</Text>
+            <Text style={styles.heroHeading}>
+              Turn Your Product Photos Into Endless Professional Content
+            </Text>
+            <Text style={styles.heroSubheading}>
+              From one product photo to AI-powered professional campaigns, lifestyle content, and social posts.{" "}
+              <span style={{ color: colors.white }}>No photographers, no models, no reshoots.</span>
+            </Text>
+            <ReactEmailButton href={modelfyConfig.appUrl} style={styles.heroCta}>
+              Start Creating
+            </ReactEmailButton>
+          </Section>
+
+          {/* Welcome Message */}
+          <Section style={styles.welcomeSection}>
+            <Text style={styles.welcomeText}>
+              Hi <span style={styles.welcomeEmail}>{email}</span>, your account is ready.
+              <br />
+              You now have access to the complete Modelfy platform.
+            </Text>
+            <div style={styles.creditsBox}>
+              <Text style={styles.creditsText}>2 Free Generations Included</Text>
+            </div>
+          </Section>
+
+          {/* Features Section */}
+          <Section style={styles.featuresSection}>
+            <Text style={styles.featuresSectionTitle}>Features</Text>
+            <Text style={styles.featuresSectionHeading}>
+              Everything you need to create{" "}
+              <span style={{ color: colors.accent }}>stunning</span>{" "}
+              marketing, social, and e-commerce content
+            </Text>
+
+            {/* Feature Rows - Alternating Layout */}
+            {features.map((feature, index) => {
+              const isReversed = index % 2 === 1;
+
+              const imageContent = feature.isVideo ? (
+                <Link href={feature.videoLink || modelfyConfig.appUrl} style={{ display: "block", position: "relative" as const }}>
+                  <div style={{ position: "relative" as const }}>
+                    <Img
+                      src={feature.getImage()}
+                      alt={feature.titleHighlight}
+                      width="100%"
+                      style={{
+                        ...styles.featureImage,
+                        aspectRatio: "3/4",
+                        objectFit: "cover" as const,
+                      }}
+                    />
+                    {/* Play button overlay */}
+                    <div
+                      style={{
+                        position: "absolute" as const,
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        width: "60px",
+                        height: "60px",
+                        backgroundColor: "rgba(0, 0, 0, 0.7)",
+                        borderRadius: "50%",
+                        display: "flex" as const,
+                        alignItems: "center" as const,
+                        justifyContent: "center" as const,
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: "0",
+                          height: "0",
+                          borderTop: "12px solid transparent",
+                          borderBottom: "12px solid transparent",
+                          borderLeft: "20px solid white",
+                          marginLeft: "4px",
+                        }}
+                      />
+                    </div>
+                  </div>
+                </Link>
+              ) : (
+                <Img
+                  src={feature.getImage()}
+                  alt={feature.titleHighlight}
+                  width="100%"
+                  style={{
+                    ...styles.featureImage,
+                    aspectRatio: "3/4",
+                    objectFit: "cover" as const,
+                  }}
+                />
+              );
+
+              const imageCell = (
+                <td style={{ width: "45%", verticalAlign: "top" }}>
+                  {imageContent}
+                </td>
+              );
+
+              const contentCell = (
+                <td style={{ ...styles.featureContent, width: "55%" }}>
+                  <Text style={styles.featureEyebrow}>{feature.eyebrow}</Text>
+                  <Text style={styles.featureTitle}>
+                    {feature.titleBefore}{" "}
+                    <span style={styles.featureTitleHighlight}>{feature.titleHighlight}</span>
+                    {feature.titleAfter && ` ${feature.titleAfter}`}
+                  </Text>
+                  <Text style={styles.featureDescription}>{feature.description}</Text>
+                </td>
+              );
+
+              return (
+                <div key={index} style={styles.featureRow}>
+                  <table cellPadding={0} cellSpacing={0} style={{ width: "100%" }}>
+                    <tbody>
+                      <tr>
+                        {isReversed ? (
+                          <>
+                            {contentCell}
+                            {imageCell}
+                          </>
+                        ) : (
+                          <>
+                            {imageCell}
+                            {contentCell}
+                          </>
+                        )}
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              );
+            })}
+          </Section>
+
+          {/* CTA Section */}
+          <Section style={styles.ctaSection}>
+            <Text style={styles.ctaHeading}>Ready to Transform Your Content?</Text>
+            <Text style={styles.ctaSubheading}>
+              Upload your first product photo and see the magic happen.
+            </Text>
+            <ReactEmailButton href={modelfyConfig.appUrl} style={styles.ctaButton}>
+              Get Started Free
+            </ReactEmailButton>
+          </Section>
+
+          {/* Support Section */}
+          <Section style={styles.supportSection}>
+            <Text style={styles.supportText}>Need help getting started?</Text>
+            <Text style={styles.supportText}>
+              <Link href={`mailto:${modelfyConfig.supportEmail}`} style={styles.supportLink}>
+                {modelfyConfig.supportEmail}
+              </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 you signed up for Modelfy.
+            </Text>
+            <Text style={styles.footerText}>
+              <Link href={`${modelfyConfig.appUrl}/privacy`} style={styles.footerLink}>
+                Privacy Policy
+              </Link>
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default WelcomeEmail;

package/src/modelfy/templates/index.ts

@@ -1,3 +1,4 @@
 export { OtpEmail, type OtpEmailProps } from "./OtpEmail.js";
 export { PromoSubscriptionEmail, type PromoSubscriptionEmailProps } from "./PromoSubscriptionEmail.js";
 export { GrantCreditsEmail, type GrantCreditsEmailProps } from "./GrantCreditsEmail.js";
+export { WelcomeEmail, type WelcomeEmailProps } from "./WelcomeEmail.js";