feat: 3 neue E-Mail Templates + Logo im Layout
Neue Templates im einheitlichen Stil: - auth/welcome → nach erster E-Mail-Verifizierung, Feature-Übersicht + CTA - subscription/confirmed → Abo-Bestätigung mit Plan/Betrag/Verlängerungsdatum - subscription/cancelled → Kündigung mit Zugang-bis-Datum + Reaktivierungs-CTA Layout: Textwordmark durch logo-text.png ersetzt (height:32px) Preview: alle 3 Templates in /admin/mail-preview ergänzt (11 Templates gesamt) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main
parent
cd2e466f09
commit
00961be675
|
|
@ -0,0 +1,86 @@
|
||||||
|
@extends('emails.layout')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
{{-- Icon --}}
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto 28px;">
|
||||||
|
<tr>
|
||||||
|
<td style="width:52px;height:52px;background:#EEF2FF;border-radius:14px;text-align:center;vertical-align:middle;">
|
||||||
|
<x-heroicon-o-hand-raised style="width:24px;height:24px;stroke:#4F46E5;stroke-width:1.5;display:block;margin:14px auto;" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{{-- Title --}}
|
||||||
|
<h1 style="margin:0 0 8px;font-size:22px;font-weight:700;color:#111827;text-align:center;line-height:1.3;letter-spacing:-0.3px;">
|
||||||
|
Willkommen bei Aziros, {{ $user->name }}!
|
||||||
|
</h1>
|
||||||
|
<p style="margin:0 0 28px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
|
||||||
|
Dein Konto ist bestätigt. Hier ist, was du als Nächstes tun kannst.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- Feature list --}}
|
||||||
|
<div style="background:#F9FAFB;border:1px solid #F3F4F6;border-radius:12px;padding:20px 20px 16px;margin-bottom:28px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:8px 0;">
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation">
|
||||||
|
<tr>
|
||||||
|
<td style="width:28px;vertical-align:top;padding-top:1px;">
|
||||||
|
<div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
|
||||||
|
<x-heroicon-o-calendar-days style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td style="padding-left:10px;">
|
||||||
|
<p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Kalender</p>
|
||||||
|
<p style="margin:0;font-size:12px;color:#6B7280;">Termine planen, organisieren und im Blick behalten.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:8px 0;">
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation">
|
||||||
|
<tr>
|
||||||
|
<td style="width:28px;vertical-align:top;padding-top:1px;">
|
||||||
|
<div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
|
||||||
|
<x-heroicon-o-sparkles style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td style="padding-left:10px;">
|
||||||
|
<p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Aria – Dein KI-Assistent</p>
|
||||||
|
<p style="margin:0;font-size:12px;color:#6B7280;">Frag Aria alles – sie hilft dir, deinen Tag zu organisieren.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:8px 0;">
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation">
|
||||||
|
<tr>
|
||||||
|
<td style="width:28px;vertical-align:top;padding-top:1px;">
|
||||||
|
<div style="width:20px;height:20px;background:#EEF2FF;border-radius:6px;text-align:center;line-height:20px;">
|
||||||
|
<x-heroicon-o-arrows-right-left style="width:11px;height:11px;stroke:#4F46E5;stroke-width:2;display:inline-block;vertical-align:middle;" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td style="padding-left:10px;">
|
||||||
|
<p style="margin:0 0 2px;font-size:13px;font-weight:600;color:#111827;">Integrationen</p>
|
||||||
|
<p style="margin:0;font-size:12px;color:#6B7280;">Google Kalender & Outlook verbinden und synchronisieren.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- CTA --}}
|
||||||
|
<x-mail.button :url="config('app.url')">
|
||||||
|
Jetzt loslegen
|
||||||
|
</x-mail.button>
|
||||||
|
|
||||||
|
@endsection
|
||||||
|
|
@ -12,11 +12,11 @@
|
||||||
<tr><td align="center">
|
<tr><td align="center">
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width:560px;">
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width:560px;">
|
||||||
|
|
||||||
{{-- Wordmark --}}
|
{{-- Logo --}}
|
||||||
<tr>
|
<tr>
|
||||||
<td style="padding-bottom:20px;padding-left:4px;">
|
<td style="padding-bottom:20px;padding-left:2px;">
|
||||||
<a href="{{ config('app.url') }}" style="text-decoration:none;">
|
<a href="{{ config('app.url') }}" style="text-decoration:none;display:inline-block;">
|
||||||
<span style="font-size:19px;font-weight:300;color:#111827;letter-spacing:-0.5px;">aziros</span>
|
<img src="{{ config('app.url') }}/images/logo-text.png" height="32" alt="aziros" style="display:block;height:32px;width:auto;border:0;">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
@extends('emails.layout')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
{{-- Icon --}}
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto 28px;">
|
||||||
|
<tr>
|
||||||
|
<td style="width:52px;height:52px;background:#FFF7ED;border-radius:14px;text-align:center;vertical-align:middle;">
|
||||||
|
<x-heroicon-o-x-circle style="width:24px;height:24px;stroke:#F97316;stroke-width:1.5;display:block;margin:14px auto;" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{{-- Title --}}
|
||||||
|
<h1 style="margin:0 0 8px;font-size:22px;font-weight:700;color:#111827;text-align:center;line-height:1.3;letter-spacing:-0.3px;">
|
||||||
|
Dein Abo wurde gekündigt
|
||||||
|
</h1>
|
||||||
|
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
|
||||||
|
Hallo {{ $user->name }}, wir haben deine Kündigung des <strong style="color:#111827;">{{ $plan }}</strong>-Plans erhalten.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- Access info --}}
|
||||||
|
@if(!empty($endsAt))
|
||||||
|
<div style="background:#FFF7ED;border:1px solid #FED7AA;border-radius:12px;padding:18px 20px;margin-bottom:28px;text-align:center;">
|
||||||
|
<p style="margin:0 0 4px;font-size:11px;color:#FB923C;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;">Zugang aktiv bis</p>
|
||||||
|
<p style="margin:0;font-size:20px;font-weight:700;color:#EA580C;">{{ $endsAt->format('d.m.Y') }}</p>
|
||||||
|
<p style="margin:6px 0 0;font-size:12px;color:#9CA3AF;">Danach wechselst du automatisch auf den kostenlosen Plan.</p>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div style="background:#FFF7ED;border:1px solid #FED7AA;border-radius:12px;padding:16px 20px;margin-bottom:28px;text-align:center;">
|
||||||
|
<p style="margin:0;font-size:13px;color:#EA580C;">Du wechselst sofort auf den kostenlosen Plan.</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
{{-- Reactivate CTA --}}
|
||||||
|
<x-mail.button :url="config('app.url') . '/plans'">
|
||||||
|
Abo reaktivieren
|
||||||
|
</x-mail.button>
|
||||||
|
|
||||||
|
{{-- Footer note --}}
|
||||||
|
<p style="margin:20px 0 0;text-align:center;font-size:12px;color:#9CA3AF;line-height:1.6;">
|
||||||
|
Falls du eine Frage hast, antworte einfach auf diese E-Mail.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
@extends('emails.layout')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
{{-- Icon --}}
|
||||||
|
<table cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto 28px;">
|
||||||
|
<tr>
|
||||||
|
<td style="width:52px;height:52px;background:#F0FDF4;border-radius:14px;text-align:center;vertical-align:middle;">
|
||||||
|
<x-heroicon-o-check-badge style="width:24px;height:24px;stroke:#10B981;stroke-width:1.5;display:block;margin:14px auto;" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{{-- Title --}}
|
||||||
|
<h1 style="margin:0 0 8px;font-size:22px;font-weight:700;color:#111827;text-align:center;line-height:1.3;letter-spacing:-0.3px;">
|
||||||
|
Abo erfolgreich aktiviert!
|
||||||
|
</h1>
|
||||||
|
<p style="margin:0 0 24px;font-size:14px;color:#6B7280;text-align:center;line-height:1.6;">
|
||||||
|
Hallo {{ $user->name }}, dein <strong style="color:#111827;">{{ $plan }}</strong>-Plan ist jetzt aktiv.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- Details card --}}
|
||||||
|
<div style="background:#F9FAFB;border:1px solid #F3F4F6;border-radius:12px;padding:20px 20px 16px;margin-bottom:28px;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0;font-size:12px;color:#9CA3AF;width:130px;">Plan</td>
|
||||||
|
<td style="padding:6px 0;font-size:13px;font-weight:600;color:#111827;">{{ $plan }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Abrechnungszeitraum</td>
|
||||||
|
<td style="padding:6px 0;font-size:13px;color:#374151;">{{ $billing === 'yearly' ? 'Jährlich' : 'Monatlich' }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Betrag</td>
|
||||||
|
<td style="padding:6px 0;font-size:13px;color:#374151;">{{ number_format($amount / 100, 2, ',', '.') }} € / {{ $billing === 'yearly' ? 'Jahr' : 'Monat' }}</td>
|
||||||
|
</tr>
|
||||||
|
@if(!empty($renewsAt))
|
||||||
|
<tr><td colspan="2" style="height:1px;background:#F3F4F6;padding:0;"></td></tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:6px 0;font-size:12px;color:#9CA3AF;">Nächste Verlängerung</td>
|
||||||
|
<td style="padding:6px 0;font-size:13px;color:#374151;">{{ $renewsAt->format('d.m.Y') }}</td>
|
||||||
|
</tr>
|
||||||
|
@endif
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- CTA --}}
|
||||||
|
<x-mail.button :url="config('app.url')">
|
||||||
|
Zur App
|
||||||
|
</x-mail.button>
|
||||||
|
|
||||||
|
{{-- Footer note --}}
|
||||||
|
<p style="margin:20px 0 0;text-align:center;font-size:12px;color:#9CA3AF;line-height:1.6;">
|
||||||
|
Du kannst dein Abo jederzeit unter Einstellungen → Abonnement kündigen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
@endsection
|
||||||
|
|
@ -113,6 +113,28 @@ Route::middleware(['user', 'role:admin'])->prefix('admin')->name('admin.')->grou
|
||||||
'name' => 'Aria – Verfasste E-Mail',
|
'name' => 'Aria – Verfasste E-Mail',
|
||||||
'data' => ['body' => "Hallo!\n\nIch habe deine Aufgabe erledigt und hier ist die Zusammenfassung der Ergebnisse für dein Meeting morgen.\n\nBitte prüfe die Agenda und gib mir Bescheid, ob noch Änderungen nötig sind."],
|
'data' => ['body' => "Hallo!\n\nIch habe deine Aufgabe erledigt und hier ist die Zusammenfassung der Ergebnisse für dein Meeting morgen.\n\nBitte prüfe die Agenda und gib mir Bescheid, ob noch Änderungen nötig sind."],
|
||||||
],
|
],
|
||||||
|
'auth.welcome' => [
|
||||||
|
'name' => 'Willkommen',
|
||||||
|
'data' => ['user' => (object)['name' => 'Max Mustermann']],
|
||||||
|
],
|
||||||
|
'subscription.confirmed' => [
|
||||||
|
'name' => 'Abo bestätigt',
|
||||||
|
'data' => [
|
||||||
|
'user' => (object)['name' => 'Max Mustermann'],
|
||||||
|
'plan' => 'Pro',
|
||||||
|
'billing' => 'monthly',
|
||||||
|
'amount' => 1900,
|
||||||
|
'renewsAt' => \Carbon\Carbon::now()->addMonth(),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'subscription.cancelled' => [
|
||||||
|
'name' => 'Abo gekündigt',
|
||||||
|
'data' => [
|
||||||
|
'user' => (object)['name' => 'Max Mustermann'],
|
||||||
|
'plan' => 'Pro',
|
||||||
|
'endsAt' => \Carbon\Carbon::now()->addDays(14),
|
||||||
|
],
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
Route::get('/mail-preview', function () use ($fakeData) {
|
Route::get('/mail-preview', function () use ($fakeData) {
|
||||||
|
|
@ -123,7 +145,7 @@ Route::middleware(['user', 'role:admin'])->prefix('admin')->name('admin.')->grou
|
||||||
Route::get('/mail-preview/{template}', function (string $template) use ($fakeData) {
|
Route::get('/mail-preview/{template}', function (string $template) use ($fakeData) {
|
||||||
abort_unless(isset($fakeData[$template]), 404);
|
abort_unless(isset($fakeData[$template]), 404);
|
||||||
$entry = $fakeData[$template];
|
$entry = $fakeData[$template];
|
||||||
$view = 'emails.' . str_replace('.', '/', str_replace('-', '-', $template));
|
$view = 'emails.' . $template;
|
||||||
return response(view($view, $entry['data']));
|
return response(view($view, $entry['data']));
|
||||||
})->name('mail-preview.show');
|
})->name('mail-preview.show');
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue