import { Body, Container, Head, Heading, Hr, Html, Img, Link, Preview, Section, Text, Button, } from "@react-email/components"; import * as React from "react"; interface LicenseEmailProps { customerName: string; licenseKey: string; productName: string; features: string[]; } const baseUrl = "https://dokploy.com"; export const LicenseEmail = ({ customerName = "John Doe", licenseKey = "1234567890", productName = "Dokploy", features = ["Feature 1", "Feature 2", "Feature 3"], }: LicenseEmailProps): React.ReactElement => { return ( Your Dokploy License Key is Here! 🚀
Dokploy Welcome to the Future of Deployment
Hi {customerName}, Thank you for choosing {productName}! We're excited to have you on board. Your premium license key is ready to unlock all the powerful features:
Your License Key {licenseKey}
🎉 Your Premium Features
{features.map((feature, index) => ( ✓ {feature} ))}
Getting Started
1. Go to your Dokploy dashboard
2. Navigate to Settings → License
3. Enter your license key
4. Click "Activate License"
Need help? Our support team is ready to assist you.
support@dokploy.com
); }; const main = { backgroundColor: "#f6f9fc", fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { margin: "0 auto", padding: "40px 0", maxWidth: "600px", }; const heroSection = { backgroundColor: "#ffffff", borderRadius: "8px", padding: "40px 20px", textAlign: "center" as const, boxShadow: "0 2px 8px rgba(0,0,0,0.05)", }; const heroTitle = { color: "#1a1a1a", fontSize: "28px", fontWeight: "800", lineHeight: "1.3", margin: "20px 0 0", padding: "0", }; const mainContent = { backgroundColor: "#ffffff", borderRadius: "8px", marginTop: "24px", padding: "40px", boxShadow: "0 2px 8px rgba(0,0,0,0.05)", }; const greeting = { fontSize: "20px", lineHeight: "1.3", fontWeight: "600", color: "#1a1a1a", margin: "0 0 20px", }; const text = { color: "#4a5568", fontSize: "16px", lineHeight: "1.6", margin: "0 0 24px", }; const licenseContainer = { background: "linear-gradient(135deg, #2563eb 0%, #1e40af 100%)", borderRadius: "12px", padding: "24px", margin: "32px 0", textAlign: "center" as const, }; const licenseLabel = { color: "#ffffff", fontSize: "14px", textTransform: "uppercase" as const, letterSpacing: "1px", margin: "0 0 12px", }; const licenseKeyStyle = { fontFamily: "monospace", fontSize: "24px", color: "#ffffff", margin: "0", wordBreak: "break-all" as const, fontWeight: "600", }; const validitySection = { textAlign: "center" as const, margin: "24px 0", }; const validityText = { color: "#4a5568", fontSize: "16px", }; const featuresContainer = { margin: "40px 0", }; const featureGrid = { display: "grid", gridTemplateColumns: "1fr", gap: "12px", }; const featureItem = { color: "#4a5568", fontSize: "16px", lineHeight: "1.5", margin: "0", display: "flex", alignItems: "center", }; const checkmark = { color: "#2563eb", fontWeight: "bold", marginRight: "12px", fontSize: "18px", }; const h2 = { color: "#1a1a1a", fontSize: "20px", fontWeight: "600", margin: "0 0 20px", padding: "0", }; const activationSection = { backgroundColor: "#f8fafc", borderRadius: "8px", padding: "24px", margin: "32px 0", }; const stepsContainer = { margin: "20px 0", }; const steps = { color: "#4a5568", fontSize: "16px", lineHeight: "1.8", margin: "0", }; const ctaButton = { backgroundColor: "#2563eb", borderRadius: "6px", color: "#ffffff", fontSize: "16px", fontWeight: "600", textDecoration: "none", textAlign: "center" as const, display: "inline-block", padding: "12px 24px", margin: "20px 0 0", }; const hr = { borderColor: "#e2e8f0", margin: "40px 0", }; const supportSection = { textAlign: "center" as const, }; const supportText = { color: "#64748b", fontSize: "14px", lineHeight: "1.5", margin: "0", }; const link = { color: "#2563eb", textDecoration: "none", fontWeight: "500", }; export default LicenseEmail;