continued the kita-planer

2026-05-08 14:32:14 +02:00
parent b686e714ff
commit 7aff691803
85 changed files with 9434 additions and 588 deletions
@@ -0,0 +1,143 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+import {
+  contactRequestTypeLabels,
+  type ContactRequestInput,
+} from "@/lib/contact-schema";
+
+type ContactRequestEmailProps = ContactRequestInput;
+
+export function ContactRequestEmail({
+  name,
+  kitaName,
+  email,
+  requestType,
+  message,
+}: ContactRequestEmailProps) {
+  const inquiryLabel = contactRequestTypeLabels[requestType];
+
+  return (
+    <Html>
+      <Head />
+      <Preview>
+        Neue Kontaktanfrage von {name}
+        {kitaName ? ` (${kitaName})` : ""}
+      </Preview>
+      <Body style={body}>
+        <Container style={container}>
+          <Heading style={heading}>Neue Kontaktanfrage</Heading>
+          <Text style={intro}>
+            Über die Kita-Planer Landingpage ist eine neue Anfrage eingegangen.
+          </Text>
+
+          <Section style={details}>
+            <InfoRow label="Name" value={name} />
+            <InfoRow label="Kita / Initiative" value={kitaName || "Nicht angegeben"} />
+            <InfoRow label="E-Mail" value={email} />
+            <InfoRow label="Anliegen" value={inquiryLabel} />
+          </Section>
+
+          <Section style={messageBox}>
+            <Text style={label}>Nachricht</Text>
+            <Text style={messageText}>{message}</Text>
+          </Section>
+
+          <Text style={footer}>
+            Tipp: Direkt auf diese E-Mail antworten, um {name} unter {email} zu
+            erreichen.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <Text style={row}>
+      <strong>{label}:</strong> {value}
+    </Text>
+  );
+}
+
+const body = {
+  margin: 0,
+  backgroundColor: "#f8faf8",
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+};
+
+const container = {
+  margin: "0 auto",
+  padding: "32px 24px",
+  maxWidth: "620px",
+};
+
+const heading = {
+  margin: "0 0 12px",
+  color: "#0f172a",
+  fontSize: "28px",
+  lineHeight: "34px",
+};
+
+const intro = {
+  margin: "0 0 24px",
+  color: "#475569",
+  fontSize: "15px",
+  lineHeight: "24px",
+};
+
+const details = {
+  border: "1px solid #d7e5dc",
+  borderRadius: "10px",
+  backgroundColor: "#ffffff",
+  padding: "18px",
+};
+
+const row = {
+  margin: "0 0 10px",
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "22px",
+};
+
+const messageBox = {
+  marginTop: "18px",
+  border: "1px solid #d7e5dc",
+  borderRadius: "10px",
+  backgroundColor: "#ffffff",
+  padding: "18px",
+};
+
+const label = {
+  margin: "0 0 8px",
+  color: "#64748b",
+  fontSize: "12px",
+  fontWeight: 700,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase" as const,
+};
+
+const messageText = {
+  margin: 0,
+  color: "#0f172a",
+  fontSize: "15px",
+  lineHeight: "24px",
+  whiteSpace: "pre-wrap" as const,
+};
+
+const footer = {
+  margin: "22px 0 0",
+  color: "#64748b",
+  fontSize: "13px",
+  lineHeight: "20px",
+};
@@ -0,0 +1,124 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type DutyReminderEmailProps = {
+  familyName: string;
+  dutyName: string;
+  weekLabel: string;
+};
+
+export function DutyReminderEmail({
+  familyName,
+  dutyName,
+  weekLabel,
+}: DutyReminderEmailProps) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>
+        Erinnerung: {familyName} ist diese Woche fuer {dutyName} eingeteilt.
+      </Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.header}>
+            <Text style={styles.kicker}>Elterndienst</Text>
+            <Heading style={styles.heading}>Danke fuer eure Hilfe</Heading>
+            <Text style={styles.lead}>
+              Hallo {familyName}, diese Woche seid ihr fuer den Dienst{" "}
+              <strong>{dutyName}</strong> eingeteilt.
+            </Text>
+          </Section>
+
+          <Section style={styles.card}>
+            <Text style={styles.text}>
+              Zeitraum: <strong>{weekLabel}</strong>
+            </Text>
+            <Text style={styles.text}>
+              Danke, dass ihr mithelft, den Kita-Alltag verlaesslich zu
+              organisieren.
+            </Text>
+          </Section>
+
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            Diese Erinnerung wurde automatisch vom Kita-Planer versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    backgroundColor: "#f7f5ef",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: "#24231f",
+  },
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+  },
+  header: {
+    padding: "28px",
+    backgroundColor: "#27423a",
+    borderRadius: "8px 8px 0 0",
+  },
+  kicker: {
+    margin: "0 0 20px",
+    color: "#d9e9c3",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+  },
+  heading: {
+    margin: "0 0 12px",
+    color: "#ffffff",
+    fontSize: "30px",
+    lineHeight: "1.18",
+    fontWeight: 800,
+  },
+  lead: {
+    margin: 0,
+    color: "#eef4eb",
+    fontSize: "16px",
+    lineHeight: "1.55",
+  },
+  card: {
+    padding: "28px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #dde3d7",
+    borderTop: "0",
+    borderRadius: "0 0 8px 8px",
+  },
+  text: {
+    margin: "0 0 16px",
+    color: "#3d423b",
+    fontSize: "16px",
+    lineHeight: "1.65",
+  },
+  hr: {
+    margin: "24px 0",
+    borderColor: "#dde3d7",
+  },
+  footer: {
+    margin: 0,
+    color: "#7b8279",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    textAlign: "center" as const,
+  },
+};
@@ -0,0 +1,120 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type NewsEmailProps = {
+  title: string;
+  content: string;
+  dashboardUrl: string;
+};
+
+export function NewsEmail({ title, content, dashboardUrl }: NewsEmailProps) {
+  const excerpt =
+    content.length > 420 ? `${content.slice(0, 420).trim()}...` : content;
+
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Neue Kita-Ankündigung: {title}</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.header}>
+            <Text style={styles.kicker}>Schwarzes Brett</Text>
+            <Heading style={styles.heading}>{title}</Heading>
+          </Section>
+
+          <Section style={styles.card}>
+            <Text style={styles.text}>{excerpt}</Text>
+            <Button href={dashboardUrl} style={styles.button}>
+              Im Kita-Planer lesen
+            </Button>
+          </Section>
+
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            Diese offizielle Ankündigung wurde über den Kita-Planer versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    backgroundColor: "#f5f3ee",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: "#25231f",
+  },
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+  },
+  header: {
+    padding: "28px",
+    backgroundColor: "#243b36",
+    borderRadius: "8px 8px 0 0",
+  },
+  kicker: {
+    margin: "0 0 20px",
+    color: "#d8f2bd",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+  },
+  heading: {
+    margin: 0,
+    color: "#ffffff",
+    fontSize: "28px",
+    lineHeight: "1.2",
+    fontWeight: 800,
+  },
+  card: {
+    padding: "28px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #deded5",
+    borderTop: "0",
+    borderRadius: "0 0 8px 8px",
+  },
+  text: {
+    margin: "0 0 24px",
+    color: "#42423b",
+    fontSize: "15px",
+    lineHeight: "1.65",
+    whiteSpace: "pre-wrap" as const,
+  },
+  button: {
+    display: "inline-block",
+    padding: "13px 20px",
+    backgroundColor: "#f0b84b",
+    color: "#172119",
+    borderRadius: "6px",
+    fontSize: "15px",
+    fontWeight: 800,
+    textDecoration: "none",
+  },
+  hr: {
+    margin: "24px 0",
+    borderColor: "#deded5",
+  },
+  footer: {
+    margin: 0,
+    color: "#77766e",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    textAlign: "center" as const,
+  },
+};