majiayu000 Componentes de UI para E-mails
Esta skill define os componentes Blade específicos para a geração e visualização de e-mails no Easy Budget, seguindo o padrão de components estabelecido no sistema.
Estrutura de Components
resources/views/components/
├── email/
│ ├── email-header.blade.php # Cabeçalho padrão de e-mails
│ ├── email-footer.blade.php # Rodapé padrão de e-mails
│ ├── email-layout.blade.php # Layout base de e-mails
│ ├── email-budget.blade.php # Template de e-mail de orçamento
│ ├── email-invoice.blade.php # Template de e-mail de fatura
│ ├── email-reminder.blade.php # Template de e-mail de lembrete
│ ├── email-welcome.blade.php # Template de e-mail de boas-vindas
│ ├── email-verification.blade.php # Template de e-mail de verificação
│ ├── email-password.blade.php # Template de e-mail de senha
│ ├── email-support.blade.php # Template de e-mail de suporte
│ └── email-styles.blade.php # Estilos CSS para e-mails
└── ...
1. Email Header Component
Componente para cabeçalho padrão de e-mails.
Uso Básico
<x-email.email-header :title="$title" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
title |
string |
Título do e-mail | Obrigatório |
company |
array |
Dados da empresa | [] |
showLogo |
bool |
Exibir logo da empresa | true |
Estrutura
@props([
'title',
'company' => [],
'showLogo' => true
])
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title }}</title>
<x-email.email-styles />
</head>
<body>
<div class="email-container">
<!-- Cabeçalho -->
<header class="email-header">
<div class="header-content">
@if($showLogo && !empty($company['logo']))
<div class="company-logo">
<img src="{{ $company['logo_url'] ?? asset('storage/' . $company['logo']) }}"
alt="{{ $company['name'] ?? 'Easy Budget' }}"
style="max-height: 60px;">
</div>
@endif
<div class="company-info">
<h1 class="company-name">{{ $company['name'] ?? 'Easy Budget' }}</h1>
<div class="company-tagline">{{ $company['tagline'] ?? 'Sua solução de gestão empresarial' }}</div>
</div>
</div>
</header>
2. Email Footer Component
Componente para rodapé padrão de e-mails.
Uso Básico
<x-email.email-footer :company="$company" :unsubscribeUrl="$unsubscribeUrl" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
company |
array |
Dados da empresa | [] |
unsubscribeUrl |
string |
URL para cancelamento de inscrição | null |
showSocial |
bool |
Exibir links sociais | true |
Estrutura
@props([
'company' => [],
'unsubscribeUrl' => null,
'showSocial' => true
])
<!-- Rodapé -->
<footer class="email-footer">
<div class="footer-content">
<div class="footer-section">
<h3>{{ $company['name'] ?? 'Easy Budget' }}</h3>
<p class="footer-description">
{{ $company['description'] ?? 'Sua solução de gestão empresarial completa.' }}
</p>
</div>
<div class="footer-section">
<h4>Contato</h4>
<div class="contact-info">
@if(!empty($company['email']))
<div class="contact-item">
<i class="bi bi-envelope"></i>
<a href="mailto:{{ $company['email'] }}">{{ $company['email'] }}</a>
</div>
@endif
@if(!empty($company['phone']))
<div class="contact-item">
<i class="bi bi-telephone"></i>
<span>{{ $company['phone'] }}</span>
</div>
@endif
@if(!empty($company['website']))
<div class="contact-item">
<i class="bi bi-globe"></i>
<a href="{{ $company['website'] }}" target="_blank">{{ $company['website'] }}</a>
</div>
@endif
</div>
</div>
@if($showSocial && !empty($company['social']))
<div class="footer-section">
<h4>Siga-nos</h4>
<div class="social-links">
@foreach($company['social'] as $social)
<a href="{{ $social['url'] }}" target="_blank" class="social-link">
<i class="bi bi-{{ $social['icon'] }}"></i>
</a>
@endforeach
</div>
</div>
@endif
</div>
<div class="footer-bottom">
<div class="footer-text">
© {{ date('Y') }} {{ $company['name'] ?? 'Easy Budget' }}. Todos os direitos reservados.
</div>
@if($unsubscribeUrl)
<div class="footer-text">
<a href="{{ $unsubscribeUrl }}" class="unsubscribe-link">Cancelar inscrição</a>
</div>
@endif
</div>
</footer>
</div>
</body>
</html>
3. Email Layout Component
Componente para layout base de e-mails.
Uso Básico
<x-email.email-layout :title="$title" :company="$company" :content="$content" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
title |
string |
Título do e-mail | Obrigatório |
company |
array |
Dados da empresa | [] |
content |
string |
Conteúdo do e-mail | Obrigatório |
showHeader |
bool |
Exibir cabeçalho | true |
showFooter |
bool |
Exibir rodapé | true |
Estrutura
@props([
'title',
'company' => [],
'content',
'showHeader' => true,
'showFooter' => true
])
<x-email.email-header :title="$title" :company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
{!! $content !!}
</main>
<x-email.email-footer :company="$company" />
4. Email Budget Component
Componente para template de e-mail de orçamento.
Uso Básico
<x-email.email-budget :budget="$budget" :customer="$customer" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
budget |
Budget |
Modelo do orçamento | Obrigatório |
customer |
Customer |
Cliente do orçamento | Obrigatório |
company |
array |
Dados da empresa | [] |
actionUrl |
string |
URL de ação (visualizar orçamento) | null |
Estrutura
@props([
'budget',
'customer',
'company' => [],
'actionUrl' => null
])
<x-email.email-header
:title="'Orçamento #' . $budget->code . ' - ' . $customer->display_name"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero">
<h2 class="hero-title">Novo Orçamento Disponível</h2>
<p class="hero-subtitle">Olá {{ $customer->display_name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>Detalhes do Orçamento</h3>
<div class="budget-details">
<div class="detail-row">
<span class="detail-label">Número:</span>
<span class="detail-value">{{ $budget->code }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Data:</span>
<span class="detail-value">{{ $budget->created_at->format('d/m/Y') }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Validade:</span>
<span class="detail-value">{{ $budget->due_date?->format('d/m/Y') ?? 'Indeterminado' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Status:</span>
<span class="status-badge status-{{ $budget->status }}">
{{ ucfirst($budget->status) }}
</span>
</div>
<div class="detail-row">
<span class="detail-label">Total:</span>
<span class="detail-value total-amount">
R$ {{ number_format($budget->total, 2, ',', '.') }}
</span>
</div>
</div>
</div>
<!-- Serviços -->
@if($budget->services->isNotEmpty())
<div class="content-section">
<h3>Serviços Incluídos</h3>
<div class="services-list">
@foreach($budget->services as $service)
<div class="service-item">
<div class="service-info">
<div class="service-code">{{ $service->code }}</div>
<div class="service-description">{{ $service->description }}</div>
</div>
<div class="service-price">
R$ {{ number_format($service->total - $service->discount, 2, ',', '.') }}
</div>
</div>
@endforeach
</div>
</div>
@endif
<!-- Observações -->
@if($budget->description)
<div class="content-section">
<h3>Observações</h3>
<div class="observations">
{{ $budget->description }}
</div>
</div>
@endif
<!-- Ações -->
@if($actionUrl)
<div class="content-section">
<h3>Próximos Passos</h3>
<div class="action-buttons">
<a href="{{ $actionUrl }}" class="btn-primary">
Visualizar Orçamento
</a>
<a href="{{ route('provider.budgets.index') }}" class="btn-secondary">
Ver Todos os Orçamentos
</a>
</div>
</div>
@endif
<!-- Termos -->
<div class="content-section">
<h3>Termos e Condições</h3>
<div class="terms">
<p>
Este orçamento tem validade de 30 dias a partir da data de emissão.
Para aceitar este orçamento, por favor entre em contato conosco.
</p>
</div>
</div>
</div>
</main>
<x-email.email-footer :company="$company" />
5. Email Invoice Component
Componente para template de e-mail de fatura.
Uso Básico
<x-email.email-invoice :invoice="$invoice" :customer="$customer" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
invoice |
Invoice |
Modelo da fatura | Obrigatório |
customer |
Customer |
Cliente da fatura | Obrigatório |
company |
array |
Dados da empresa | [] |
paymentUrl |
string |
URL de pagamento | null |
Estrutura
@props([
'invoice',
'customer',
'company' => [],
'paymentUrl' => null
])
<x-email.email-header
:title="'Fatura #' . $invoice->code . ' - ' . $customer->display_name"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero">
<h2 class="hero-title">Nova Fatura Disponível</h2>
<p class="hero-subtitle">Olá {{ $customer->display_name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>Detalhes da Fatura</h3>
<div class="invoice-details">
<div class="detail-row">
<span class="detail-label">Número:</span>
<span class="detail-value">{{ $invoice->code }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Data de Emissão:</span>
<span class="detail-value">{{ $invoice->created_at->format('d/m/Y') }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Data de Vencimento:</span>
<span class="detail-value">{{ $invoice->due_date?->format('d/m/Y') ?? 'N/A' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Status:</span>
<span class="status-badge status-{{ $invoice->status }}">
{{ ucfirst($invoice->status) }}
</span>
</div>
<div class="detail-row">
<span class="detail-label">Total:</span>
<span class="detail-value total-amount">
R$ {{ number_format($invoice->total, 2, ',', '.') }}
</span>
</div>
</div>
</div>
<!-- Itens da Fatura -->
@if($invoice->items->isNotEmpty())
<div class="content-section">
<h3>Itens da Fatura</h3>
<div class="invoice-items">
@foreach($invoice->items as $item)
<div class="item-row">
<div class="item-description">{{ $item->description }}</div>
<div class="item-quantity">{{ $item->quantity }}</div>
<div class="item-price">R$ {{ number_format($item->unit_price, 2, ',', '.') }}</div>
<div class="item-total">R$ {{ number_format($item->total, 2, ',', '.') }}</div>
</div>
@endforeach
</div>
<div class="invoice-summary">
<div class="summary-row">
<span class="summary-label">Subtotal:</span>
<span class="summary-value">R$ {{ number_format($invoice->subtotal, 2, ',', '.') }}</span>
</div>
@if($invoice->discount > 0)
<div class="summary-row">
<span class="summary-label">Desconto:</span>
<span class="summary-value">- R$ {{ number_format($invoice->discount, 2, ',', '.') }}</span>
</div>
@endif
<div class="summary-row total-row">
<span class="summary-label">Total:</span>
<span class="summary-value">R$ {{ number_format($invoice->total, 2, ',', '.') }}</span>
</div>
</div>
</div>
@endif
<!-- Informações de Pagamento -->
@if($paymentUrl)
<div class="content-section">
<h3>Formas de Pagamento</h3>
<div class="payment-info">
<p>Para efetuar o pagamento, utilize um dos métodos abaixo:</p>
<div class="payment-buttons">
<a href="{{ $paymentUrl }}" class="btn-primary">
Pagar Agora
</a>
<a href="{{ route('provider.invoices.show', $invoice) }}" class="btn-secondary">
Ver Fatura
</a>
</div>
</div>
</div>
@endif
<!-- Avisos de Atraso -->
@if($invoice->status === 'overdue')
<div class="content-section warning-section">
<h3>Atenção: Fatura Vencida</h3>
<div class="warning-message">
<p>Esta fatura está vencida há {{ $invoice->due_date->diffInDays(now()) }} dias.</p>
<p>Entre em contato conosco para regularizar sua situação.</p>
</div>
</div>
@endif
<!-- Observações -->
@if($invoice->notes)
<div class="content-section">
<h3>Observações</h3>
<div class="observations">
{{ $invoice->notes }}
</div>
</div>
@endif
</div>
</main>
<x-email.email-footer :company="$company" />
6. Email Reminder Component
Componente para template de e-mail de lembrete.
Uso Básico
<x-email.email-reminder :type="$type" :entity="$entity" :customer="$customer" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
type |
string |
Tipo de lembrete (invoice, budget, etc.) | Obrigatório |
entity |
mixed |
Entidade do lembrete | Obrigatório |
customer |
Customer |
Cliente do lembrete | Obrigatório |
company |
array |
Dados da empresa | [] |
actionUrl |
string |
URL de ação | null |
Estrutura
@props([
'type',
'entity',
'customer',
'company' => [],
'actionUrl' => null
])
@php
$reminderType = match($type) {
'invoice' => 'Fatura',
'budget' => 'Orçamento',
'payment' => 'Pagamento',
default => 'Lembrete'
};
$reminderMessage = match($type) {
'invoice' => 'Está quase vencendo! Não perca tempo e efetue o pagamento.',
'budget' => 'Está quase expirando! Aproveite enquanto está válido.',
'payment' => 'Lembre-se de efetuar o pagamento para evitar juros.',
default => 'Não perca esta oportunidade!'
};
@endphp
<x-email.email-header
:title="'Lembrete: ' . $reminderType . ' #' . $entity->code"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero reminder-hero">
<h2 class="hero-title">Lembrete Importante</h2>
<p class="hero-subtitle">Olá {{ $customer->display_name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>{{ $reminderType }} em Destaque</h3>
<div class="reminder-content">
<p>{{ $reminderMessage }}</p>
<div class="entity-details">
<div class="detail-row">
<span class="detail-label">Número:</span>
<span class="detail-value">{{ $entity->code }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Data:</span>
<span class="detail-value">{{ $entity->created_at->format('d/m/Y') }}</span>
</div>
@if($type === 'invoice' && $entity->due_date)
<div class="detail-row">
<span class="detail-label">Vencimento:</span>
<span class="detail-value">{{ $entity->due_date->format('d/m/Y') }}</span>
</div>
@endif
<div class="detail-row">
<span class="detail-label">Valor:</span>
<span class="detail-value total-amount">
R$ {{ number_format($entity->total, 2, ',', '.') }}
</span>
</div>
</div>
</div>
</div>
<!-- Ações -->
@if($actionUrl)
<div class="content-section">
<h3>Próximos Passos</h3>
<div class="action-buttons">
<a href="{{ $actionUrl }}" class="btn-primary">
{{ $type === 'invoice' ? 'Efetuar Pagamento' : 'Visualizar ' . $reminderType }}
</a>
<a href="{{ $type === 'invoice' ? route('provider.invoices.index') : route('provider.budgets.index') }}"
class="btn-secondary">
Ver Todos
</a>
</div>
</div>
@endif
<!-- Contato -->
<div class="content-section">
<h3>Precisa de Ajuda?</h3>
<div class="contact-reminder">
<p>Entre em contato conosco para mais informações:</p>
<div class="contact-info">
@if(!empty($company['email']))
<div class="contact-item">
<i class="bi bi-envelope"></i>
<a href="mailto:{{ $company['email'] }}">{{ $company['email'] }}</a>
</div>
@endif
@if(!empty($company['phone']))
<div class="contact-item">
<i class="bi bi-telephone"></i>
<span>{{ $company['phone'] }}</span>
</div>
@endif
</div>
</div>
</div>
</div>
</main>
<x-email.email-footer :company="$company" />
7. Email Welcome Component
Componente para template de e-mail de boas-vindas.
Uso Básico
<x-email.email-welcome :user="$user" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
user |
User |
Usuário recém-cadastrado | Obrigatório |
company |
array |
Dados da empresa | [] |
loginUrl |
string |
URL de login | null |
Estrutura
@props([
'user',
'company' => [],
'loginUrl' => null
])
<x-email.email-header
:title="'Bem-vindo ao ' . ($company['name'] ?? 'Easy Budget')"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero welcome-hero">
<h2 class="hero-title">Bem-vindo ao {{ $company['name'] ?? 'Easy Budget' }}!</h2>
<p class="hero-subtitle">Olá {{ $user->name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>Sua Jornada Começa Aqui</h3>
<div class="welcome-content">
<p>
Seja muito bem-vindo(a) ao {{ $company['name'] ?? 'Easy Budget' }}!
Estamos entusiasmados em tê-lo(a) como parte da nossa comunidade.
</p>
<p>
Aqui você encontrará tudo o que precisa para gerenciar seu negócio de forma simples e eficiente.
</p>
</div>
</div>
<!-- Benefícios -->
<div class="content-section">
<h3>O que você pode fazer</h3>
<div class="benefits-list">
<div class="benefit-item">
<i class="bi bi-check-circle"></i>
<div class="benefit-content">
<h4>Gestão de Clientes</h4>
<p>Cadastre e organize seus clientes de forma simples e rápida.</p>
</div>
</div>
<div class="benefit-item">
<i class="bi bi-check-circle"></i>
<div class="benefit-content">
<h4>Emissão de Orçamentos</h4>
<p>Crie e envie orçamentos profissionais em minutos.</p>
</div>
</div>
<div class="benefit-item">
<i class="bi bi-check-circle"></i>
<div class="benefit-content">
<h4>Controle de Estoque</h4>
<p>Gerencie seu estoque e acompanhe movimentações em tempo real.</p>
</div>
</div>
<div class="benefit-item">
<i class="bi bi-check-circle"></i>
<div class="benefit-content">
<h4>Relatórios e Analytics</h4>
<p>Acompanhe o desempenho do seu negócio com relatórios completos.</p>
</div>
</div>
</div>
</div>
<!-- Primeiros Passos -->
@if($loginUrl)
<div class="content-section">
<h3>Primeiros Passos</h3>
<div class="steps-list">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<h4>Faça login</h4>
<p>Acesse sua conta usando seu e-mail e senha.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
<h4>Configure seu perfil</h4>
<p>Complete seu perfil para personalizar sua experiência.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
<h4>Comece a usar</h4>
<p>Explore as funcionalidades e comece a gerenciar seu negócio.</p>
</div>
</div>
</div>
<div class="action-buttons">
<a href="{{ $loginUrl }}" class="btn-primary">
Fazer Login
</a>
<a href="{{ route('provider.dashboard') }}" class="btn-secondary">
Explorar Sistema
</a>
</div>
</div>
@endif
<!-- Suporte -->
<div class="content-section">
<h3>Precisa de Ajuda?</h3>
<div class="support-content">
<p>Estamos aqui para ajudar você a tirar o máximo proveito do nosso sistema.</p>
<div class="support-info">
<div class="support-item">
<i class="bi bi-question-circle"></i>
<div class="support-content">
<h4>Central de Ajuda</h4>
<p>Acesse nossa documentação completa.</p>
</div>
</div>
<div class="support-item">
<i class="bi bi-chat-dots"></i>
<div class="support-content">
<h4>Suporte ao Cliente</h4>
<p>Entre em contato com nossa equipe.</p>
</div>
</div>
<div class="support-item">
<i class="bi bi-book"></i>
<div class="support-content">
<h4>Tutoriais</h4>
<p>Assista a vídeos explicativos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<x-email.email-footer :company="$company" />
8. Email Verification Component
Componente para template de e-mail de verificação.
Uso Básico
<x-email.email-verification :user="$user" :verificationUrl="$verificationUrl" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
user |
User |
Usuário que precisa verificar | Obrigatório |
verificationUrl |
string |
URL de verificação | Obrigatório |
company |
array |
Dados da empresa | [] |
expiresAt |
string |
Data de expiração do token | null |
Estrutura
@props([
'user',
'verificationUrl',
'company' => [],
'expiresAt' => null
])
<x-email.email-header
:title="'Verifique seu E-mail - ' . ($company['name'] ?? 'Easy Budget')"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero verification-hero">
<h2 class="hero-title">Verifique seu E-mail</h2>
<p class="hero-subtitle">Olá {{ $user->name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>Confirme seu Endereço de E-mail</h3>
<div class="verification-content">
<p>
Obrigado por se cadastrar no {{ $company['name'] ?? 'Easy Budget' }}!
Para concluir seu cadastro, precisamos verificar seu endereço de e-mail.
</p>
<p>
Clique no botão abaixo para confirmar seu e-mail:
</p>
</div>
</div>
<!-- Botão de Verificação -->
<div class="content-section">
<div class="verification-action">
<a href="{{ $verificationUrl }}" class="btn-primary verification-btn">
Verificar E-mail
</a>
</div>
</div>
<!-- Informações Importantes -->
<div class="content-section">
<h3>Informações Importantes</h3>
<div class="verification-info">
<ul>
<li>Este link expira em {{ $expiresAt ?? '24 horas' }}</li>
<li>Se você não se cadastrou no {{ $company['name'] ?? 'Easy Budget' }}, ignore este e-mail</li>
<li>Este é um e-mail automático, não é necessário respondê-lo</li>
</ul>
</div>
</div>
<!-- Alternativa -->
<div class="content-section">
<h3>Problemas com o Botão?</h3>
<div class="alternative-info">
<p>Se o botão acima não funcionar, copie e cole este link no seu navegador:</p>
<div class="verification-link">{{ $verificationUrl }}</div>
</div>
</div>
<!-- Contato -->
<div class="content-section">
<h3>Precisa de Ajuda?</h3>
<div class="contact-info">
<p>Se você tiver algum problema com a verificação de e-mail, entre em contato conosco:</p>
@if(!empty($company['email']))
<div class="contact-item">
<i class="bi bi-envelope"></i>
<a href="mailto:{{ $company['email'] }}">{{ $company['email'] }}</a>
</div>
@endif
</div>
</div>
</div>
</main>
<x-email.email-footer :company="$company" />
9. Email Password Component
Componente para template de e-mail de senha.
Uso Básico
<x-email.email-password :type="$type" :user="$user" :resetUrl="$resetUrl" :company="$company" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
type |
string |
Tipo de e-mail (reset, changed) | Obrigatório |
user |
User |
Usuário que solicitou | Obrigatório |
resetUrl |
string |
URL de redefinição | Obrigatório |
company |
array |
Dados da empresa | [] |
expiresAt |
string |
Data de expiração do token | null |
Estrutura
@props([
'type',
'user',
'resetUrl',
'company' => [],
'expiresAt' => null
])
@php
$emailType = match($type) {
'reset' => 'Redefinição de Senha',
'changed' => 'Senha Alterada',
default => 'Alteração de Senha'
};
$emailMessage = match($type) {
'reset' => 'Recebemos uma solicitação para redefinir a senha da sua conta.',
'changed' => 'Sua senha foi alterada com sucesso.',
default => 'Sua senha foi alterada recentemente.'
};
@endphp
<x-email.email-header
:title="$emailType . ' - ' . ($company['name'] ?? 'Easy Budget')"
:company="$company" />
<!-- Conteúdo Principal -->
<main class="email-main">
<div class="email-hero password-hero">
<h2 class="hero-title">{{ $emailType }}</h2>
<p class="hero-subtitle">Olá {{ $user->name }},</p>
</div>
<div class="email-content">
<div class="content-section">
<h3>{{ $emailType }}</h3>
<div class="password-content">
<p>{{ $emailMessage }}</p>
@if($type === 'reset')
<p>
Para redefinir sua senha, clique no botão abaixo:
</p>
@endif
</div>
</div>
<!-- Ação -->
@if($type === 'reset')
<div class="content-section">
<div class="password-action">
<a href="{{ $resetUrl }}" class="btn-primary password-btn">
Redefinir Senha
</a>
</div>
</div>
@endif
<!-- Informações -->
<div class="content-section">
<h3>Informações Importantes</h3>
<div class="password-info">
@if($type === 'reset')
<ul>
<li>Este link expira em {{ $expiresAt ?? '1 hora' }}</li>
<li>Se você não solicitou a redefinição de senha, ignore este e-mail</li>
<li>Sua senha permanecerá a mesma até que você acesse o link acima</li>
</ul>
@else
<ul>
<li>Se você não fez esta alteração, entre em contato conosco imediatamente</li>
<li>Recomendamos usar uma senha forte e única</li>
<li>Nunca compartilhe sua senha com terceiros</li>
</ul>
@endif
</div>
</div>
<!-- Segurança -->
<div class="content-section">
<h3>Dicas de Segurança</h3>
<div class="security-tips">
<ul>
<li>Use senhas fortes e únicas</li>
<li>Ative a autenticação de dois fatores</li>
<li>Nunca compartilhe suas credenciais</li>
<li>Altere sua senha periodicamente</li>
</ul>
</div>
</div>
<!-- Contato -->
<div class="content-section">
<h3>Precisa de Ajuda?</h3>
<div class="contact-info">
<p>Se você tiver algum problema ou suspeitar de atividade não autorizada:</p>
@if(!empty($company['email']))
<div class="contact-item">
<i class="bi bi-envelope"></i>
<a href="mailto:{{ $company['email'] }}">{{ $company['email'] }}</a>
</div>
@endif
</div>
</div>
</div>
</main>
<x-email.email-footer :company="$company" />
10. Email Support Component
Componente para template de e-mail de suporte
…(truncated)