brookmind-emails 0.1.7 → 0.1.9

package/dist/modelfy/templates/PromoSubscriptionEmail.js

@@ -1,83 +1,170 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Html, Head, Body, Container, Section, Text, Link, Preview, Font, } from "@react-email/components";
-import { Header, Footer, Button } from "../../shared/components/index.js";
+import { Html, Head, Body, Container, Section, Text, Link, Preview, Font, Img, Button as ReactEmailButton, } from "@react-email/components";
 import { modelfyConfig } from "../config.js";
+// Design System Colors - Matching Modelfy Landing
+const colors = {
+    background: "#0d0d0d",
+    cardBg: "#121212",
+    primary: "#0a8f5a",
+    accent: "#f59e0b",
+    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",
+    },
+    logo: {
+        display: "block",
+        margin: "0 auto",
+    },
+    heroSection: {
+        padding: "24px 32px 40px",
+        textAlign: "center",
+    },
+    heroTagline: {
+        margin: "0 0 12px",
+        fontSize: "13px",
+        fontWeight: 600,
+        color: colors.accent,
+        letterSpacing: "2px",
+        textTransform: "uppercase",
+    },
+    heroHeading: {
         margin: "0 0 16px",
-        fontSize: "24px",
+        fontSize: "28px",
         fontWeight: 700,
-        color: "#0F172A",
-        textAlign: "center",
+        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",
     },
     highlightBox: {
-        backgroundColor: "rgba(99, 102, 241, 0.08)",
-        border: "1px solid rgba(99, 102, 241, 0.24)",
+        backgroundColor: "rgba(245, 158, 11, 0.1)",
+        border: `1px solid rgba(245, 158, 11, 0.3)`,
         borderRadius: "12px",
         padding: "24px",
-        marginBottom: "24px",
-    },
-    highlightRow: {
-        display: "flex",
-        justifyContent: "space-between",
-        marginBottom: "12px",
+        marginBottom: "28px",
     },
     highlightLabel: {
-        fontSize: "14px",
-        color: "rgba(15, 23, 42, 0.6)",
-        margin: 0,
+        fontSize: "13px",
+        color: colors.textMuted,
+        margin: "0 0 4px",
     },
     highlightValue: {
         fontSize: "16px",
         fontWeight: 600,
-        color: "#0F172A",
+        color: colors.white,
         margin: 0,
     },
     buttonContainer: {
         textAlign: "center",
-        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",
+    },
+    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",
+    },
+    notesText: {
+        margin: "0 0 24px",
+        fontSize: "15px",
+        lineHeight: "1.6",
+        color: colors.textSecondary,
+        textAlign: "center",
+        fontStyle: "italic",
     },
     link: {
-        color: "#6366F1",
+        color: colors.primary,
         textDecoration: "none",
         fontWeight: 600,
     },
+    footer: {
+        backgroundColor: colors.cardBg,
+        padding: "24px 32px",
+        textAlign: "center",
+        borderTop: `1px solid ${colors.border}`,
+    },
+    footerLogo: {
+        display: "block",
+        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",
+        borderTop: `1px solid ${colors.border}`,
+    },
+    downloadText: {
+        margin: "0 0 16px",
+        fontSize: "14px",
+        color: colors.white,
+    },
+    badgeContainer: {
+        textAlign: "center",
+    },
+    badge: {
+        display: "inline-block",
+        margin: "0 8px",
+    },
 };
-export function PromoSubscriptionEmail({ email, planName, durationDays, credits, expiresAt, notes, }) {
+export function PromoSubscriptionEmail({ email = "user@example.com", planName = "Pro", durationDays = 30, credits = 500, expiresAt = "January 31, 2025", notes, }) {
     const safeCredits = Number.isFinite(credits) ? Number(credits) : 0;
-    return (_jsxs(Html, { lang: "en", children: [_jsx(Head, { children: _jsx(Font, { fontFamily: "Outfit", fallbackFontFamily: "Arial", webFont: {
-                        url: "https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4G-EiAou6Y.woff2",
-                        format: "woff2",
-                    }, fontWeight: 400, fontStyle: "normal" }) }), _jsx(Preview, { children: `You've received a ${durationDays}-day ${planName} subscription!` }), _jsx(Body, { style: styles.body, children: _jsxs(Container, { style: styles.container, children: [_jsx(Header, { logoUrl: modelfyConfig.logoUrl, logoAlt: "Modelfy", subtitle: "Gift for you" }), _jsxs(Section, { style: styles.content, children: [_jsx(Text, { style: styles.heading, children: "You've Got a Gift!" }), _jsxs(Text, { style: styles.paragraph, children: ["Hi ", _jsx("strong", { children: email }), ", great news! You've been granted a promotional", " ", _jsx("strong", { children: planName }), " subscription."] }), _jsx("div", { style: styles.highlightBox, children: _jsxs("table", { width: "100%", cellPadding: 0, cellSpacing: 0, children: [_jsxs("tr", { children: [_jsxs("td", { style: { paddingBottom: "12px" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Plan" }), _jsx(Text, { style: styles.highlightValue, children: planName })] }), _jsxs("td", { style: { paddingBottom: "12px", textAlign: "right" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Duration" }), _jsxs(Text, { style: styles.highlightValue, children: [durationDays, " days"] })] })] }), _jsxs("tr", { children: [_jsxs("td", { children: [_jsx(Text, { style: styles.highlightLabel, children: "Credits Included" }), _jsx(Text, { style: styles.highlightValue, children: safeCredits.toLocaleString() })] }), _jsxs("td", { style: { textAlign: "right" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Expires" }), _jsx(Text, { style: styles.highlightValue, children: expiresAt })] })] })] }) }), notes && (_jsx(Text, { style: styles.paragraph, children: _jsxs("em", { children: ["\"", notes, "\""] }) })), _jsx("div", { style: styles.buttonContainer, children: _jsx(Button, { href: modelfyConfig.appUrl, children: "Open Modelfy" }) }), _jsx(Text, { style: styles.smallText, children: "This promotional subscription will not auto-renew. Enjoy your free access!" }), _jsxs(Text, { style: styles.smallText, children: ["Questions? Contact us at", " ", _jsx(Link, { href: `mailto:${modelfyConfig.supportEmail}`, style: styles.link, children: modelfyConfig.supportEmail })] })] }), _jsx(Footer, { companyName: modelfyConfig.companyName, message: "You received this email because you were granted a promotional subscription.", supportEmail: modelfyConfig.supportEmail })] }) })] }));
+    return (_jsxs(Html, { lang: "en", children: [_jsxs(Head, { children: [_jsx(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" }), _jsx(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" })] }), _jsx(Preview, { children: `You've received a ${durationDays}-day ${planName} subscription!` }), _jsx(Body, { style: styles.body, children: _jsxs(Container, { style: styles.container, children: [_jsx(Section, { style: styles.header, children: _jsx(Img, { src: modelfyConfig.logoUrl, width: "130", height: "auto", alt: "Modelfy", style: styles.logo }) }), _jsxs(Section, { style: styles.heroSection, children: [_jsx(Text, { style: styles.heroTagline, children: "Gift for You" }), _jsx(Text, { style: styles.heroHeading, children: "You've Got a Gift!" }), _jsxs(Text, { style: { ...styles.paragraph, margin: "0 0 4px" }, children: ["Hi ", _jsx("span", { style: { color: colors.white, fontWeight: 600 }, children: email }), ", great news!"] }), _jsxs(Text, { style: styles.paragraph, children: ["You've been granted a promotional", " ", _jsx("span", { style: { color: colors.accent, fontWeight: 600 }, children: planName }), " subscription."] }), _jsx("div", { style: styles.highlightBox, children: _jsx("table", { width: "100%", cellPadding: 0, cellSpacing: 0, children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsxs("td", { style: { paddingBottom: "16px" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Plan" }), _jsx(Text, { style: styles.highlightValue, children: planName })] }), _jsxs("td", { style: { paddingBottom: "16px", textAlign: "right" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Duration" }), _jsxs(Text, { style: styles.highlightValue, children: [durationDays, " days"] })] })] }), _jsxs("tr", { children: [_jsxs("td", { children: [_jsx(Text, { style: styles.highlightLabel, children: "Credits Included" }), _jsx(Text, { style: styles.highlightValue, children: safeCredits.toLocaleString() })] }), _jsxs("td", { style: { textAlign: "right" }, children: [_jsx(Text, { style: styles.highlightLabel, children: "Expires" }), _jsx(Text, { style: styles.highlightValue, children: expiresAt })] })] })] }) }) }), notes && _jsxs(Text, { style: styles.notesText, children: ["\"", notes, "\""] }), _jsx("div", { style: styles.buttonContainer, children: _jsx(ReactEmailButton, { href: modelfyConfig.appUrl, style: styles.ctaButton, children: "Open Modelfy" }) })] }), _jsxs(Section, { style: styles.contentSection, children: [_jsx(Text, { style: styles.smallText, children: "This promotional subscription will not auto-renew. Enjoy your free access!" }), _jsxs(Text, { style: styles.smallText, children: ["Questions?", " ", _jsx(Link, { href: `mailto:${modelfyConfig.supportEmail}`, style: styles.link, children: modelfyConfig.supportEmail })] })] }), _jsxs(Section, { style: styles.downloadSection, children: [_jsx(Text, { style: styles.downloadText, children: "Get the Modelfy app" }), _jsxs("div", { style: styles.badgeContainer, children: [_jsx(Link, { href: modelfyConfig.appStoreUrl, style: styles.badge, children: _jsx(Img, { src: modelfyConfig.appStoreBadgeUrl, width: "120", height: "40", alt: "Download on the App Store" }) }), _jsx(Link, { href: modelfyConfig.playStoreUrl, style: styles.badge, children: _jsx(Img, { src: modelfyConfig.playStoreBadgeUrl, width: "135", height: "40", alt: "Get it on Google Play" }) })] })] }), _jsxs(Section, { style: styles.footer, children: [_jsx(Img, { src: modelfyConfig.logoUrl, width: "80", height: "auto", alt: "Modelfy", style: styles.footerLogo }), _jsxs(Text, { style: styles.footerText, children: ["\u00A9 ", new Date().getFullYear(), " ", modelfyConfig.companyName, ". All rights reserved."] }), _jsx(Text, { style: styles.footerText, children: "You received this email because you were granted a promotional subscription." }), _jsx(Text, { style: styles.footerText, children: _jsx(Link, { href: `${modelfyConfig.appUrl}/privacy`, style: styles.footerLink, children: "Privacy Policy" }) })] })] }) })] }));
 }
 export default PromoSubscriptionEmail;

package/dist/modelfy/templates/WelcomeEmail.d.ts

@@ -0,0 +1,6 @@
+export interface WelcomeEmailProps {
+    email: string;
+}
+export declare function WelcomeEmail({ email }: WelcomeEmailProps): import("react/jsx-runtime").JSX.Element;
+export default WelcomeEmail;
+//# sourceMappingURL=WelcomeEmail.d.ts.map

package/dist/modelfy/templates/WelcomeEmail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WelcomeEmail.d.ts","sourceRoot":"","sources":["../../../src/modelfy/templates/WelcomeEmail.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAwVD,wBAAgB,YAAY,CAAC,EAAE,KAA0B,EAAE,EAAE,iBAAiB,2CA+P7E;AAED,eAAe,YAAY,CAAC"}

package/dist/modelfy/templates/WelcomeEmail.js

@@ -0,0 +1,377 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Html, Head, Body, Container, Section, Text, Link, Preview, Font, Img, Button as ReactEmailButton, } from "@react-email/components";
+import { modelfyConfig } from "../config.js";
+// 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",
+    },
+    logo: {
+        display: "block",
+        margin: "0 auto",
+    },
+    heroSection: {
+        padding: "24px 32px 40px",
+        textAlign: "center",
+    },
+    heroTagline: {
+        margin: "0 0 12px",
+        fontSize: "13px",
+        fontWeight: 600,
+        color: colors.primary,
+        letterSpacing: "2px",
+        textTransform: "uppercase",
+    },
+    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",
+    },
+    welcomeSection: {
+        backgroundColor: colors.cardBg,
+        padding: "32px",
+        textAlign: "center",
+        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",
+        textAlign: "center",
+    },
+    featuresSectionHeading: {
+        margin: "0 0 32px",
+        fontSize: "22px",
+        fontWeight: 700,
+        color: colors.white,
+        textAlign: "center",
+        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",
+        border: `1px solid ${colors.border}`,
+    },
+    featureImage: {
+        width: "100%",
+        height: "auto",
+        display: "block",
+    },
+    featureContent: {
+        padding: "20px",
+        verticalAlign: "middle",
+    },
+    featureEyebrow: {
+        margin: "0 0 6px",
+        fontSize: "11px",
+        fontWeight: 600,
+        color: colors.primary,
+        letterSpacing: "1.5px",
+        textTransform: "uppercase",
+    },
+    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",
+        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",
+    },
+    supportSection: {
+        backgroundColor: colors.background,
+        padding: "32px",
+        textAlign: "center",
+    },
+    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",
+        borderTop: `1px solid ${colors.border}`,
+    },
+    footerLogo: {
+        display: "block",
+        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",
+        borderTop: `1px solid ${colors.border}`,
+    },
+    downloadText: {
+        margin: "0 0 16px",
+        fontSize: "14px",
+        color: colors.white,
+    },
+    badgeContainer: {
+        textAlign: "center",
+    },
+    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) {
+    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" }) {
+    return (_jsxs(Html, { lang: "en", children: [_jsxs(Head, { children: [_jsx(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" }), _jsx(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" }), _jsx(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" })] }), _jsx(Preview, { children: "Welcome to Modelfy - Transform your product photography with AI" }), _jsx(Body, { style: styles.body, children: _jsxs(Container, { style: styles.container, children: [_jsx(Section, { style: styles.header, children: _jsx(Img, { src: modelfyConfig.logoUrl, width: "130", height: "auto", alt: "Modelfy", style: styles.logo }) }), _jsxs(Section, { style: styles.heroSection, children: [_jsx(Text, { style: styles.heroTagline, children: "Welcome to Modelfy" }), _jsx(Text, { style: styles.heroHeading, children: "Turn Your Product Photos Into Endless Professional Content" }), _jsxs(Text, { style: styles.heroSubheading, children: ["From one product photo to AI-powered professional campaigns, lifestyle content, and social posts.", " ", _jsx("span", { style: { color: colors.white }, children: "No photographers, no models, no reshoots." })] }), _jsx(ReactEmailButton, { href: modelfyConfig.appUrl, style: styles.heroCta, children: "Start Creating" })] }), _jsxs(Section, { style: styles.welcomeSection, children: [_jsxs(Text, { style: styles.welcomeText, children: ["Hi ", _jsx("span", { style: styles.welcomeEmail, children: email }), ", your account is ready.", _jsx("br", {}), "You now have access to the complete Modelfy platform."] }), _jsx("div", { style: styles.creditsBox, children: _jsx(Text, { style: styles.creditsText, children: "2 Free Generations Included" }) })] }), _jsxs(Section, { style: styles.featuresSection, children: [_jsx(Text, { style: styles.featuresSectionTitle, children: "Features" }), _jsxs(Text, { style: styles.featuresSectionHeading, children: ["Everything you need to create", " ", _jsx("span", { style: { color: colors.accent }, children: "stunning" }), " ", "marketing, social, and e-commerce content"] }), features.map((feature, index) => {
+                                    const isReversed = index % 2 === 1;
+                                    const imageContent = feature.isVideo ? (_jsx(Link, { href: feature.videoLink || modelfyConfig.appUrl, style: { display: "block", position: "relative" }, children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(Img, { src: feature.getImage(), alt: feature.titleHighlight, width: "100%", style: {
+                                                        ...styles.featureImage,
+                                                        aspectRatio: "3/4",
+                                                        objectFit: "cover",
+                                                    } }), _jsx("div", { style: {
+                                                        position: "absolute",
+                                                        top: "50%",
+                                                        left: "50%",
+                                                        transform: "translate(-50%, -50%)",
+                                                        width: "60px",
+                                                        height: "60px",
+                                                        backgroundColor: "rgba(0, 0, 0, 0.7)",
+                                                        borderRadius: "50%",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                    }, children: _jsx("div", { style: {
+                                                            width: "0",
+                                                            height: "0",
+                                                            borderTop: "12px solid transparent",
+                                                            borderBottom: "12px solid transparent",
+                                                            borderLeft: "20px solid white",
+                                                            marginLeft: "4px",
+                                                        } }) })] }) })) : (_jsx(Img, { src: feature.getImage(), alt: feature.titleHighlight, width: "100%", style: {
+                                            ...styles.featureImage,
+                                            aspectRatio: "3/4",
+                                            objectFit: "cover",
+                                        } }));
+                                    const imageCell = (_jsx("td", { style: { width: "45%", verticalAlign: "top" }, children: imageContent }));
+                                    const contentCell = (_jsxs("td", { style: { ...styles.featureContent, width: "55%" }, children: [_jsx(Text, { style: styles.featureEyebrow, children: feature.eyebrow }), _jsxs(Text, { style: styles.featureTitle, children: [feature.titleBefore, " ", _jsx("span", { style: styles.featureTitleHighlight, children: feature.titleHighlight }), feature.titleAfter && ` ${feature.titleAfter}`] }), _jsx(Text, { style: styles.featureDescription, children: feature.description })] }));
+                                    return (_jsx("div", { style: styles.featureRow, children: _jsx("table", { cellPadding: 0, cellSpacing: 0, style: { width: "100%" }, children: _jsx("tbody", { children: _jsx("tr", { children: isReversed ? (_jsxs(_Fragment, { children: [contentCell, imageCell] })) : (_jsxs(_Fragment, { children: [imageCell, contentCell] })) }) }) }) }, index));
+                                })] }), _jsxs(Section, { style: styles.ctaSection, children: [_jsx(Text, { style: styles.ctaHeading, children: "Ready to Transform Your Content?" }), _jsx(Text, { style: styles.ctaSubheading, children: "Upload your first product photo and see the magic happen." }), _jsx(ReactEmailButton, { href: modelfyConfig.appUrl, style: styles.ctaButton, children: "Get Started Free" })] }), _jsxs(Section, { style: styles.supportSection, children: [_jsx(Text, { style: styles.supportText, children: "Need help getting started?" }), _jsx(Text, { style: styles.supportText, children: _jsx(Link, { href: `mailto:${modelfyConfig.supportEmail}`, style: styles.supportLink, children: modelfyConfig.supportEmail }) })] }), _jsxs(Section, { style: styles.downloadSection, children: [_jsx(Text, { style: styles.downloadText, children: "Get the Modelfy app" }), _jsxs("div", { style: styles.badgeContainer, children: [_jsx(Link, { href: modelfyConfig.appStoreUrl, style: styles.badge, children: _jsx(Img, { src: modelfyConfig.appStoreBadgeUrl, width: "120", height: "40", alt: "Download on the App Store" }) }), _jsx(Link, { href: modelfyConfig.playStoreUrl, style: styles.badge, children: _jsx(Img, { src: modelfyConfig.playStoreBadgeUrl, width: "135", height: "40", alt: "Get it on Google Play" }) })] })] }), _jsxs(Section, { style: styles.footer, children: [_jsx(Img, { src: modelfyConfig.logoUrl, width: "80", height: "auto", alt: "Modelfy", style: styles.footerLogo }), _jsxs(Text, { style: styles.footerText, children: ["\u00A9 ", new Date().getFullYear(), " ", modelfyConfig.companyName, ". All rights reserved."] }), _jsx(Text, { style: styles.footerText, children: "You received this email because you signed up for Modelfy." }), _jsx(Text, { style: styles.footerText, children: _jsx(Link, { href: `${modelfyConfig.appUrl}/privacy`, style: styles.footerLink, children: "Privacy Policy" }) })] })] }) })] }));
+}
+export default WelcomeEmail;

package/dist/modelfy/templates/index.d.ts

@@ -1,4 +1,5 @@
 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";
 //# sourceMappingURL=index.d.ts.map

package/dist/modelfy/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modelfy/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AACvG,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modelfy/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AACvG,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/modelfy/templates/index.js

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

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "brookmind-emails",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Email templates for Brookmind projects",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "require": "./dist/index.js",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./modelfy": {
+      "require": "./dist/modelfy/index.js",
       "import": "./dist/modelfy/index.js",
       "types": "./dist/modelfy/index.d.ts"
     }

package/src/modelfy/config.ts

@@ -3,4 +3,10 @@ export const modelfyConfig = {
   companyName: "Modelfy",
   supportEmail: "support@modelfy.ai",
   appUrl: "https://modelfy.ai",
+  // App Store links
+  appStoreUrl: "https://apps.apple.com/app/id6753621155",
+  playStoreUrl: "https://play.google.com/store/apps/details?id=com.brookmind.modelfy",
+  // Badge images (using landing page assets)
+  appStoreBadgeUrl: "https://modelfy.ai/images/appstore.svg",
+  playStoreBadgeUrl: "https://modelfy.ai/images/googleplay.svg",
 };