77 lines
4.6 KiB
PHP
77 lines
4.6 KiB
PHP
<div>
|
|
<x-slot:title>{{ $title }} — Zemail</x-slot:title>
|
|
|
|
<div class="flex-1">
|
|
<!-- Reusable Cinematic Header -->
|
|
<x-bento.page-header
|
|
:title="$title"
|
|
:subtitle="$subtitle"
|
|
:breadcrumb="$breadcrumb"
|
|
/>
|
|
|
|
<!-- Content Area -->
|
|
<main class="pt-12 pb-12 bg-app-bg relative overflow-hidden">
|
|
<!-- Background Decorations -->
|
|
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-emerald-500/[0.03] rounded-full blur-[120px] -z-10"></div>
|
|
<div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-pink-500/[0.03] rounded-full blur-[120px] -z-10"></div>
|
|
|
|
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
|
<!-- Main Legal Content (Full Width Alignment) -->
|
|
<article class="w-full" x-init="gsap.from($el, { y: 30, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
|
|
<div class="relative p-10 md:p-16 rounded-[40px] bg-zinc-900/40 border border-white/5 backdrop-blur-3xl shadow-2xl overflow-hidden">
|
|
<!-- Inner Decorative Glows -->
|
|
<div class="absolute -top-24 -left-24 w-48 h-48 bg-pink-500/10 rounded-full blur-[40px]"></div>
|
|
|
|
<!-- Last Updated Badge (Pulsing) -->
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-12">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
|
|
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Last Updated: {{ $lastUpdated ?? date('F d, Y') }}</span>
|
|
</div>
|
|
|
|
<!-- Styled Content Slots -->
|
|
<div class="legal-content relative z-10">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
<!-- Subtle "Proof of Secure" Watermark -->
|
|
<div class="absolute bottom-8 right-8 pointer-events-none opacity-5">
|
|
<h2 class="text-6xl font-black text-white tracking-widest leading-none rotate-12">SECURE</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Helpful Footer Note -->
|
|
<div class="mt-12 flex flex-col md:flex-row items-center justify-between gap-6 p-8 rounded-3xl bg-zinc-900/20 border border-white/5 backdrop-blur-xl">
|
|
<div class="flex items-center gap-4 text-center md:text-left">
|
|
<div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-bold text-white mb-1">Need legal clarification?</h4>
|
|
<p class="text-xs text-zinc-500 font-medium tracking-tight">Our compliance team is available to answer any questions.</p>
|
|
</div>
|
|
</div>
|
|
<a href="mailto:legal@imail.me" class="px-6 py-3 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-[11px] uppercase tracking-widest hover:bg-white/10 transition-all">
|
|
Send Email
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Final CTA Footer -->
|
|
<x-bento.cta />
|
|
<x-bento.footer />
|
|
|
|
<!-- Enhanced Style Overrides for Legal Content -->
|
|
<style>
|
|
.legal-content h2 { @apply text-2xl md:text-3xl font-black text-zinc-200 tracking-tighter mb-6 mt-16 first:mt-0; }
|
|
.legal-content p { @apply text-zinc-500 leading-relaxed mb-8 text-base md:text-lg; }
|
|
.legal-content ul { @apply space-y-4 mb-8; }
|
|
.legal-content li { @apply flex gap-4 text-zinc-500 text-sm md:text-base leading-relaxed; }
|
|
.legal-content li::before { content: '→'; @apply text-emerald-500/60 font-black mt-1 flex-shrink-0; }
|
|
.legal-content strong { @apply text-zinc-300 font-bold; }
|
|
.legal-content a { @apply text-pink-500 decoration-pink-500/30 underline decoration-2 underline-offset-4 hover:text-pink-400 transition-colors; }
|
|
</style>
|
|
</div>
|