feat(analytics-mailer): Redesign email to Umami format with 3 periods, German translation, and inline glossary

2026-07-20 14:17:07 +02:00
parent 7a9dd06fc6
commit 53ad9f23d8
11 changed files with 834 additions and 268 deletions
--- a/packages/mail/src/index.ts
+++ b/packages/mail/src/index.ts
@@ -25,4 +25,4 @@ export * from "./templates/ConfirmationMessage";
 export * from "./templates/FollowUpTemplate";
 export * from "./templates/ProjectEstimateTemplate";
 export * from "./templates/SiteAuditTemplate";
-export * from "./templates/MonthlyAnalyticsTemplate";
+export * from "./templates/AnalyticsTemplate";
--- a/packages/mail/src/layouts/GatekeeperLayout.tsx
+++ b/packages/mail/src/layouts/GatekeeperLayout.tsx
@@ -0,0 +1,197 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Section,
+  Text,
+  Img,
+} from "@react-email/components";
+import * as React from "react";
+
+export interface GatekeeperLayoutProps {
+  preview: string;
+  projectName?: string;
+  subTitle?: string;
+  children: React.ReactNode;
+}
+
+export const GatekeeperLayout = ({ preview, projectName = "MINTEL", subTitle = "INFRASTRUCTURE", children }: GatekeeperLayoutProps) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>{preview}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          
+          {/* Top Icon Box */}
+          <Section style={iconBoxSection}>
+            <div style={iconBox}>
+              <Img 
+                src="https://mintel.me/favicon-32x32.png" 
+                width={28} 
+                height={28} 
+                alt="Mintel" 
+                style={iconImg} 
+              />
+            </div>
+          </Section>
+
+          {/* Title Area */}
+          <Section style={titleSection}>
+            <Text style={gatekeeperTitle}>
+              {projectName} <span style={{ color: "rgba(0,0,0,0.3)" }}>GATEKEEPER</span>
+            </Text>
+            
+            <table align="center" width="100%" border={0} cellPadding={0} cellSpacing={0} role="presentation">
+              <tbody>
+                <tr>
+                  <td width="30%" align="right"><div style={lineGradientRight} /></td>
+                  <td width="40%" align="center">
+                    <Text style={gatekeeperSub}>
+                      {subTitle}
+                    </Text>
+                  </td>
+                  <td width="30%" align="left"><div style={lineGradientLeft} /></td>
+                </tr>
+              </tbody>
+            </table>
+          </Section>
+
+          {/* Main Content Area */}
+          <Section style={contentSection}>
+            {children}
+          </Section>
+
+          {/* Footer Area */}
+          <Section style={footerSection}>
+            <div style={lineGradientCenter} />
+            <div style={{ marginTop: "24px" }}>
+              <Img
+                src="https://mintel.me/favicon-32x32.png"
+                width={24}
+                height={24}
+                alt={projectName}
+                style={{ opacity: 0.3, margin: "0 auto", display: "block" }}
+              />
+            </div>
+            <Text style={footerText}>
+              &copy; {new Date().getFullYear()} MINTEL
+            </Text>
+          </Section>
+
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+const main = {
+  backgroundColor: "#f5f5f7",
+  color: "#111111",
+  fontFamily:
+    'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  WebkitFontSmoothing: "antialiased" as const,
+};
+
+const container = {
+  margin: "0 auto",
+  padding: "40px 20px 80px",
+  maxWidth: "420px",
+};
+
+const iconBoxSection = {
+  textAlign: "center" as const,
+  marginBottom: "40px",
+};
+
+const iconBox = {
+  width: "56px",
+  height: "56px",
+  backgroundColor: "#ffffff",
+  borderRadius: "16px",
+  margin: "0 auto",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid rgba(0,0,0,0.06)",
+  boxShadow: "0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03)",
+};
+
+const iconImg = {
+  margin: "14px auto",
+  display: "block",
+  opacity: 0.8,
+  filter: "grayscale(100%) brightness(0)",
+};
+
+const titleSection = {
+  textAlign: "center" as const,
+  marginBottom: "32px",
+};
+
+const gatekeeperTitle = {
+  fontSize: "11px",
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+  fontWeight: "bold",
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.5em",
+  color: "rgba(0,0,0,0.8)",
+  margin: "0 0 12px 0",
+};
+
+const gatekeeperSub = {
+  fontSize: "8px",
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.35em",
+  fontWeight: 600,
+  color: "rgba(0,0,0,0.3)",
+  margin: "0",
+};
+
+const lineGradientRight = {
+  height: "1px",
+  width: "32px",
+  backgroundColor: "rgba(0,0,0,0.1)",
+  marginLeft: "auto",
+};
+
+const lineGradientLeft = {
+  height: "1px",
+  width: "32px",
+  backgroundColor: "rgba(0,0,0,0.1)",
+  marginRight: "auto",
+};
+
+const contentSection = {
+  backgroundColor: "#ffffff",
+  padding: "32px",
+  borderRadius: "24px",
+  border: "1px solid rgba(0,0,0,0.06)",
+  boxShadow: "0 4px 6px -1px rgba(0,0,0,0.03)",
+  marginBottom: "32px",
+};
+
+const footerSection = {
+  textAlign: "center" as const,
+  paddingTop: "24px",
+};
+
+const lineGradientCenter = {
+  height: "1px",
+  width: "64px",
+  backgroundColor: "rgba(0,0,0,0.1)",
+  margin: "0 auto",
+};
+
+const footerText = {
+  fontSize: "7px",
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+  fontWeight: 600,
+  color: "rgba(0,0,0,0.25)",
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.5em",
+  marginTop: "20px",
+};
--- a/packages/mail/src/templates/AnalyticsTemplate.tsx
+++ b/packages/mail/src/templates/AnalyticsTemplate.tsx
--- a/packages/mail/src/templates/MonthlyAnalyticsTemplate.tsx
+++ b/packages/mail/src/templates/MonthlyAnalyticsTemplate.tsx
@@ -1,205 +0,0 @@
-import * as React from "react";
-import { Heading, Section, Text, Row, Column } from "@react-email/components";
-import { MintelLayout } from "../layouts/MintelLayout";
-
-export interface MonthlyAnalyticsTemplateProps {
-  clientName: string;
-  domain: string;
-  month: string;
-  year: string;
-  totalVisitors: number;
-  totalPageviews: number;
-  topPages: { url: string; views: number }[];
-  topReferrers: { url: string; visitors: number }[];
-}
-
-export const MonthlyAnalyticsTemplate = ({
-  clientName,
-  domain,
-  month,
-  year,
-  totalVisitors,
-  totalPageviews,
-  topPages,
-  topReferrers,
-}: MonthlyAnalyticsTemplateProps) => {
-  const preview = `Ihr Website-Report für ${month} ${year}: ${domain}`;
-
-  return (
-    <MintelLayout preview={preview}>
-      <Heading style={h1}>Monatsreport: {month} {year}</Heading>
-      <Text style={intro}>
-        Hallo {clientName},<br /><br />
-        hier ist der monatliche Performance-Report für Ihre Website ({domain}). 
-        Die Daten zeigen, wie viele Menschen Ihre Seite besucht haben und welche Inhalte am beliebtesten waren.
-      </Text>
-
-      <Section style={metricsContainer}>
-        <Row>
-          <Column style={metricColumn}>
-            <Text style={metricLabel}>BESUCHER</Text>
-            <Text style={metricValue}>{totalVisitors.toLocaleString('de-DE')}</Text>
-          </Column>
-          <Column style={metricColumn}>
-            <Text style={metricLabel}>SEITENAUFRUFE</Text>
-            <Text style={metricValue}>{totalPageviews.toLocaleString('de-DE')}</Text>
-          </Column>
-        </Row>
-      </Section>
-
-      <Section style={auditContainer}>
-        <Heading as="h2" style={h2}>Top Seiten</Heading>
-        {topPages.map((page, i) => (
-          <Row key={i} style={highlightRow}>
-            <Column style={bulletCol}>
-              <div style={bullet} />
-            </Column>
-            <Column>
-              <Text style={highlightText}>{page.url}</Text>
-            </Column>
-            <Column align="right">
-              <Text style={highlightNumber}>{page.views.toLocaleString('de-DE')} Aufrufe</Text>
-            </Column>
-          </Row>
-        ))}
-      </Section>
-
-      <Section style={auditContainer}>
-        <Heading as="h2" style={h2}>Top Besucherquellen</Heading>
-        {topReferrers.length > 0 ? topReferrers.map((ref, i) => (
-          <Row key={i} style={highlightRow}>
-            <Column style={bulletCol}>
-              <div style={bullet} />
-            </Column>
-            <Column>
-              <Text style={highlightText}>{ref.url || "Direktaufruf"}</Text>
-            </Column>
-            <Column align="right">
-              <Text style={highlightNumber}>{ref.visitors.toLocaleString('de-DE')} Besucher</Text>
-            </Column>
-          </Row>
-        )) : (
-          <Text style={highlightText}>Keine externen Quellen verzeichnet.</Text>
-        )}
-      </Section>
-
-      <Text style={bodyText}>
-        Haben Sie Fragen zu diesen Zahlen oder möchten Sie die Reichweite Ihrer Seite weiter ausbauen? 
-        Antworten Sie einfach auf diese E-Mail.
-      </Text>
-
-      <Text style={footerText}>
-        Beste Grüße,<br />
-        <strong>Marc Mintel</strong><br />
-        Digitaler Architekt
-      </Text>
-    </MintelLayout>
-  );
-};
-
-export default MonthlyAnalyticsTemplate;
-
-const h1 = {
-  fontSize: "28px",
-  fontWeight: "900",
-  margin: "0 0 24px",
-  color: "#ffffff",
-  letterSpacing: "-0.04em",
-};
-
-const h2 = {
-  fontSize: "14px",
-  fontWeight: "900",
-  textTransform: "uppercase" as const,
-  color: "#444444",
-  margin: "0 0 16px",
-  letterSpacing: "0.1em",
-};
-
-const intro = {
-  fontSize: "16px",
-  lineHeight: "24px",
-  color: "#cccccc",
-  margin: "0 0 32px",
-};
-
-const metricsContainer = {
-  backgroundColor: "#151515",
-  padding: "32px",
-  borderRadius: "8px",
-  marginBottom: "32px",
-  border: "1px solid #222222",
-  textAlign: "center" as const,
-};
-
-const metricColumn = {
-  width: "50%",
-};
-
-const metricLabel = {
-  fontSize: "12px",
-  fontWeight: "bold",
-  color: "#888888",
-  letterSpacing: "0.1em",
-  margin: "0 0 8px",
-};
-
-const metricValue = {
-  fontSize: "36px",
-  fontWeight: "900",
-  color: "#4CAF50",
-  margin: "0",
-  letterSpacing: "-0.02em",
-};
-
-const auditContainer = {
-  backgroundColor: "#151515",
-  padding: "32px",
-  borderRadius: "8px",
-  marginBottom: "32px",
-  border: "1px solid #222222",
-};
-
-const highlightRow = {
-  marginBottom: "12px",
-};
-
-const bulletCol = {
-  width: "24px",
-  verticalAlign: "top" as const,
-};
-
-const bullet = {
-  width: "6px",
-  height: "6px",
-  backgroundColor: "#4CAF50",
-  marginTop: "8px",
-};
-
-const highlightText = {
-  fontSize: "15px",
-  color: "#ffffff",
-  margin: "0",
-  lineHeight: "22px",
-  wordBreak: "break-all" as const,
-};
-
-const highlightNumber = {
-  fontSize: "15px",
-  color: "#888888",
-  margin: "0",
-  whiteSpace: "nowrap" as const,
-};
-
-const bodyText = {
-  fontSize: "16px",
-  lineHeight: "24px",
-  color: "#888888",
-  margin: "0 0 32px",
-};
-
-const footerText = {
-  fontSize: "14px",
-  color: "#666666",
-  lineHeight: "20px",
-};