996ae20bbb
- Added fully responsive 3-pane layout for Mailbox - Integrated global cinematic Toast system in app shell - Implemented Copy to Clipboard and QR Code modal utilities - Added diverse mock email data for premium demonstration - Implemented security gates for custom mailboxes and attachments - Fixed critical 500 error for orphaned email selection - Refined landing page hero CTA text
224 lines
18 KiB
PHP
224 lines
18 KiB
PHP
<section id="hero" class="relative pt-32 lg:pt-48 pb-20 overflow-hidden">
|
|
<!-- Background Glow - shift to the left for the new layout -->
|
|
<div class="absolute inset-x-0 top-0 -z-10 h-full w-full bg-app-bg bg-[radial-gradient(ellipse_80%_80%_at_20%_-20%,rgba(236,72,153,0.15),rgba(255,255,255,0))]"></div>
|
|
|
|
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
|
|
<!-- Left Side: Copy -->
|
|
<div class="flex flex-col items-start text-left relative z-10">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm text-pink-400 bg-pink-500/10 border border-pink-500/20 rounded-full mb-6 opacity-0 translate-y-8" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, ease: 'power3.out'})">
|
|
<span class="flex h-2 w-2 relative">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-pink-500"></span>
|
|
</span>
|
|
Imail Beta Live
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-white to-zinc-500 mb-6 opacity-0 translate-y-8 leading-tight" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, delay: 0.1, ease: 'power3.out'})">
|
|
Built for the modern tester_
|
|
</h1>
|
|
|
|
<p class="text-lg md:text-xl text-zinc-400 max-w-xl mb-10 opacity-0 translate-y-8" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, delay: 0.2, ease: 'power3.out'})">
|
|
Generate instant, secure, and ephemeral temporary inboxes for Developers, Privacy Users, and QA Teams. Lightning fast Websocket delivery built-in.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row items-center gap-4 opacity-0" x-init="gsap.to($el, {opacity: 1, duration: 1, delay: 0.4})">
|
|
<a href="/mailbox" class="group relative inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-pink-600 rounded-full overflow-hidden transition-all hover:bg-pink-500 hover:shadow-[0_0_20px_rgba(236,72,153,0.5)]">
|
|
<span class="relative flex items-center gap-2">
|
|
Create mailbox for free
|
|
<svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<a href="/api-docs" class="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-white/5 border border-white/10 rounded-full transition-all hover:bg-white/10">
|
|
Imail in 100 seconds <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Animated Screen -->
|
|
<div class="relative opacity-0 perspective-1000 mt-12 lg:mt-0" x-init="gsap.fromTo($el, {opacity: 0, rotateY: 15, x: 50}, {opacity: 1, rotateY: 0, x: 0, duration: 1.2, delay: 0.3, ease: 'power3.out'})">
|
|
<!-- App Window Wrapper -->
|
|
<div class="relative rounded-xl border border-white/10 shadow-2xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-gradient-to-br from-app-surface to-app-bg">
|
|
<!-- Window Header -->
|
|
<div class="flex items-center px-4 py-3 border-b border-white/5 bg-app-surface/50">
|
|
<div class="flex space-x-2">
|
|
<div class="w-3 h-3 rounded-full bg-app-red"></div>
|
|
<div class="w-3 h-3 rounded-full bg-app-yellow"></div>
|
|
<div class="w-3 h-3 rounded-full bg-app-green"></div>
|
|
</div>
|
|
<div class="mx-auto flex items-center space-x-2 px-3 py-1.5 bg-black/40 rounded-md border border-white/5">
|
|
<svg class="w-3 h-3 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" /></svg>
|
|
<span class="text-xs text-zinc-400 font-mono tracking-wider">imail.local/inbox</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App UI Body -->
|
|
<div class="flex h-[420px]" x-data="mailApp()">
|
|
<!-- Sidebar -->
|
|
<div class="w-[30%] border-r border-white/5 bg-app-surface/30 p-4 hidden sm:block">
|
|
<div class="space-y-2 text-sm font-medium text-zinc-400">
|
|
<div class="flex items-center gap-3 text-white px-3 py-2 bg-white/5 rounded-lg border border-white/5">
|
|
<svg class="w-4 h-4 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" /></svg>
|
|
Inbox
|
|
<span class="ml-auto text-[10px] font-mono bg-pink-500/20 text-pink-400 border border-pink-500/30 rounded-full px-2" x-text="emails.length"></span>
|
|
</div>
|
|
<div class="flex items-center gap-3 px-3 py-2 hover:bg-white/5 rounded-lg cursor-pointer transition-colors">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
|
Drafts
|
|
</div>
|
|
<div class="flex items-center gap-3 px-3 py-2 hover:bg-white/5 rounded-lg cursor-pointer transition-colors">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
|
|
Sent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 flex flex-col relative overflow-hidden bg-app-bg/50">
|
|
<!-- INBOX LIST VIEW -->
|
|
<div x-show="view === 'inbox'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-4" x-transition:enter-end="opacity-100 translate-x-0" class="absolute inset-0 overflow-y-auto custom-scrollbar">
|
|
<div class="p-4 border-b border-white/5 flex items-center justify-between sticky top-0 bg-app-bg z-20">
|
|
<h3 class="text-white font-medium flex items-center gap-2">
|
|
Active Inbox
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
|
|
</h3>
|
|
<div class="text-[10px] uppercase tracking-wider text-pink-400 font-semibold bg-pink-500/10 px-2 py-1 rounded border border-pink-500/20">Auto-refresh</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col relative pb-4">
|
|
<template x-for="(email, index) in emails" :key="email.id">
|
|
<div @click="openEmail(email)"
|
|
class="p-4 border-b border-white/5 hover:bg-zinc-800/40 cursor-pointer transition-all group relative overflow-hidden"
|
|
x-transition:enter="transition ease-out duration-500 transform"
|
|
x-transition:enter-start="opacity-0 -translate-y-4 bg-emerald-500/10"
|
|
x-transition:enter-end="opacity-100 translate-y-0 bg-transparent"
|
|
x-transition:leave="transition ease-in duration-300 transform"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 translate-x-10">
|
|
|
|
<!-- Hover Highlight -->
|
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
|
|
<div class="flex justify-between items-baseline mb-1 relative z-10">
|
|
<span class="text-sm font-semibold text-zinc-100 truncate pr-4" x-text="email.sender"></span>
|
|
<span class="text-xs text-zinc-500 whitespace-nowrap" x-text="email.time"></span>
|
|
</div>
|
|
<div class="text-sm text-zinc-300 font-medium mb-1 relative z-10" x-text="email.subject"></div>
|
|
<div class="text-[13px] text-zinc-500 truncate relative z-10" x-text="email.snippet"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EMAIL READING VIEW -->
|
|
<div x-show="view === 'reading'" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 translate-x-8" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4" class="absolute inset-0 bg-app-bg flex flex-col z-20" style="display: none;">
|
|
<div class="px-4 py-3 border-b border-white/5 flex items-center justify-between bg-app-surface/40">
|
|
<button @click="view = 'inbox'; selectedEmail = null" class="flex items-center text-sm font-medium text-zinc-400 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-md border border-white/5">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
|
|
Back
|
|
</button>
|
|
<button @click="deleteEmail()" class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-red-400 bg-red-500/10 hover:bg-red-500/20 hover:text-red-300 border border-red-500/20 rounded-md transition-all" title="Permanently Delete">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<div class="px-5 py-6 flex-1 overflow-y-auto custom-scrollbar">
|
|
<template x-if="selectedEmail">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-white mb-6 leading-tight" x-text="selectedEmail.subject"></h2>
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-indigo-500 flex items-center justify-center text-white font-bold text-lg shadow-[0_0_15px_rgba(236,72,153,0.3)]" x-text="selectedEmail.sender.charAt(0).toUpperCase()"></div>
|
|
<div>
|
|
<div class="text-sm font-semibold text-zinc-200" x-text="selectedEmail.sender"></div>
|
|
<div class="text-xs text-zinc-500 mt-0.5">to me · <span x-text="selectedEmail.time"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="prose prose-sm prose-invert text-zinc-300 max-w-none leading-relaxed">
|
|
<p x-html="selectedEmail.content"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alpine JS Component Logic for Mail App -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('mailApp', () => ({
|
|
view: 'inbox',
|
|
selectedEmail: null,
|
|
emails: [
|
|
{
|
|
id: 1,
|
|
sender: 'admin@imail.local',
|
|
subject: 'Hello World! I am Imail',
|
|
snippet: 'Click me to discover what makes Imail so special...',
|
|
time: '1m ago',
|
|
content: 'Welcome to Imail! ✨<br><br>We provide instantly created, highly reliable temporary email addresses that just work.<br><br><strong>Features:</strong><br><ul class="list-disc pl-5 mt-2 space-y-1"><li>Instant Inbox creation without sign-up.</li><li>Access to Premium & Generic Domains.</li><li>Real-time Websocket syncing for 0 delay.</li><li>Developer APIs ready for E2E automated testing.</li></ul><br>Enjoy your clean, spam-free inbox today!'
|
|
}
|
|
],
|
|
counter: 2,
|
|
init() {
|
|
// Simulate receiving new emails to show off "auto refresh" capability
|
|
setInterval(() => {
|
|
if(this.view === 'inbox' && this.emails.length < 5) {
|
|
const senders = ['security@github.com', 'noreply@slack.com', 'auth@stripe.com', 'billing@aws.amazon.com'];
|
|
const subjects = ['Please verify your new device', 'Confirm your email address', 'Your receipt is ready', 'Login attempt blocked'];
|
|
const snippets = ['We noticed a new login attempt...', 'Click the link below to verify...', 'Thanks for your purchase...', 'We prevented a suspicious login...'];
|
|
|
|
const idx = Math.floor(Math.random() * senders.length);
|
|
|
|
this.emails.unshift({
|
|
id: this.counter++,
|
|
sender: senders[idx],
|
|
subject: subjects[idx],
|
|
snippet: snippets[idx],
|
|
time: 'Just now',
|
|
content: `This is a simulated email received via our ultra-fast websocket delivery system.<br><br><strong>Action:</strong> ${subjects[idx]}<br><strong>Time Received:</strong> ${new Date().toLocaleTimeString()}<br><br>In a real Imail inbox, your emails appear instantly like this as soon as they hit our SMTP servers, bypassing typical polling delays.`
|
|
});
|
|
}
|
|
}, 5000);
|
|
},
|
|
openEmail(email) {
|
|
this.selectedEmail = email;
|
|
this.view = 'reading';
|
|
},
|
|
deleteEmail() {
|
|
if (this.selectedEmail) {
|
|
this.emails = this.emails.filter(e => e.id !== this.selectedEmail.id);
|
|
this.selectedEmail = null;
|
|
this.view = 'inbox';
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
<style>
|
|
/* Custom Scrollbar for Mail App */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
</style>
|