feat: simplified email template, closer to standard implementations

gabrielmfern · gabrielmfern · commit b782f7b80d48 · 2026-01-06T13:02:24.000-03:00
diff --git a/emails/pricing.tsx b/emails/pricing.tsx
diff --git a/emails/welcome.tsx b/emails/welcome.tsx
@@ -0,0 +1,68 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+import { createIntl } from 'react-intl';
+
+interface WelcomeProps {
+  locale: 'pt' | 'en';
+  name: string;
+}
+
+export async function Welcome({ locale, name }: WelcomeProps) {
+  const { formatMessage } = createIntl({
+    locale,
+    messages: await import(`../messages/${locale}/welcome-email.json`),
+  });
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{formatMessage({ id: 'header' })}</Preview>
+      <Tailwind>
+        <Body className="bg-gray-100 font-sans">
+          <Container className="mx-auto py-10 px-5">
+            <Section className="bg-white rounded-lg p-8">
+              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
+                {formatMessage({ id: 'header' })}
+              </Heading>
+              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
+                {formatMessage({ id: 'hi' })} {name}
+              </Text>
+              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
+                {formatMessage({ id: 'thanks' })}
+              </Text>
+              <Button
+                href="https://example.com/dashboard"
+                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
+              >
+                {formatMessage({ id: 'get-started' })}
+              </Button>
+              <Hr className="border-gray-200 my-6" />
+              <Text className="text-sm text-gray-400 m-0">
+                {formatMessage({ id: 'questions' })}
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+export default Welcome;
+
+Welcome.PreviewProps = {
+  name: 'John Lennon',
+  locale: 'en',
+};
+
diff --git a/messages/en/welcome-email.json b/messages/en/welcome-email.json
@@ -0,0 +1,7 @@
+{
+  "header": "Welcome to Acme",
+  "hi": "Hi",
+  "thanks": "Thanks for signing up! We're excited to have you on board.",
+  "get-started": "Get Started",
+  "questions": "If you have any questions, reply to this email. We're here to help!"
+}
diff --git a/messages/pt/welcome-email.json b/messages/pt/welcome-email.json
@@ -0,0 +1,7 @@
+{
+  "header": "Bem-vindo à Acme",
+  "hi": "Olá",
+  "thanks": "Obrigado por se inscrever! Estamos animados em tê-lo conosco.",
+  "get-started": "Começar",
+  "questions": "Se você tiver alguma dúvida, responda a este e-mail. Estamos aqui para ajudar!"
+}
