style: improve welcome email layout and content

shop/lib/actions/users.ts

@@ -61,9 +61,23 @@ export async function createUser(data: { email: string; role?: 'admin' | 'partne
         const setupLink = `${siteUrl}/auth/confirm?token_hash=${tokenHash}&type=recovery&next=/auth/update-password`;
         await sendMail({
           to: data.email,
-          subject: 'Willkommen bei Hephex - Passwort erstellen',
-          text: `Ihr Account wurde erstellt. Klicken Sie auf den folgenden Link, um Ihr Passwort festzulegen und Ihr Konto zu aktivieren: ${setupLink}`,
-          html: `<p>Ihr Account wurde erstellt.</p><p>Klicken Sie <a href="${setupLink}">hier</a>, um Ihr Passwort festzulegen und Ihr Konto zu aktivieren.</p>`,
+          subject: 'Willkommen bei HEPHEX – Ihr Benutzerkonto wurde erstellt',
+          text: `Hallo,\n\nein neues Benutzerkonto wurde für Sie auf HEPHEX erstellt.\n\nBitte klicken Sie auf den folgenden Link, um Ihr persönliches Passwort festzulegen und Ihr Konto zu aktivieren:\n${setupLink}\n\nDieser Link ist zeitlich begrenzt gültig.\n\nViele Grüße,\nIhr HEPHEX-Team`,
+          html: `
+            <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+              <h2 style="color: #0f172a; margin-bottom: 16px;">Willkommen bei HEPHEX!</h2>
+              <p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
+              <p style="color: #475569; font-size: 16px; line-height: 1.5;">für Sie wurde erfolgreich ein neues Benutzerkonto auf unserer Plattform eingerichtet.</p>
+              <p style="color: #475569; font-size: 16px; line-height: 1.5;">Bitte klicken Sie auf den untenstehenden Button, um Ihr Passwort festzulegen und Ihr Konto zu aktivieren:</p>
+              <div style="margin: 24px 0;">
+                <a href="${setupLink}" style="background-color: #3b82f6; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: bold; display: inline-block;">Passwort jetzt festlegen</a>
+              </div>
+              <p style="color: #64748b; font-size: 14px; line-height: 1.5;">Falls der Button nicht funktioniert, können Sie auch folgenden Link in Ihren Browser kopieren:<br>
+              <a href="${setupLink}" style="color: #3b82f6;">${setupLink}</a></p>
+              <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0;">
+              <p style="color: #94a3b8; font-size: 12px;">Diese E-Mail wurde automatisch generiert. Bitte antworten Sie nicht darauf.</p>
+            </div>
+          `,
         });
       }
     }