bdc1f299da
- Create highly responsive bento layouts (grid, card, pages) - Integrate Livewire with Alpine and complex GSAP animations. - Implement DevTool Dark theme values across Blade components. - Enhance interactive elements, micro-interactions, API snippets logic natively. - Apply semantic HTML and properly linked responsive Nav\/Footers sections structure
425 lines
24 KiB
PHP
425 lines
24 KiB
PHP
<div>
|
|
<x-bento.hero />
|
|
|
|
<x-bento.grid>
|
|
<!-- Feature 1: Secure Temporary Email (Span 2 to make it wider) -->
|
|
<x-bento.card
|
|
title="Secure Temporary Email"
|
|
subtitle="Any temp mail that you create on our website is valid for as long we support that domain. We delete emails every 24 hours to ensure a reliable and clean inbox."
|
|
span="col-span-1 md:col-span-2 lg:col-span-2"
|
|
>
|
|
<x-slot:icon>
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</x-slot:icon>
|
|
<div class="mt-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 font-mono text-sm text-zinc-300"
|
|
x-data="{
|
|
text: 'Encryption Enabled',
|
|
display: '',
|
|
chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()',
|
|
index: 0,
|
|
typing: true,
|
|
init() {
|
|
this.animate();
|
|
},
|
|
animate() {
|
|
let step = 0;
|
|
const final = this.text;
|
|
const interval = setInterval(() => {
|
|
if (step < final.length * 2) {
|
|
let result = '';
|
|
for (let i = 0; i < final.length; i++) {
|
|
if (i < Math.floor(step / 2)) {
|
|
result += final[i];
|
|
} else {
|
|
result += this.chars[Math.floor(Math.random() * this.chars.length)];
|
|
}
|
|
}
|
|
this.display = result;
|
|
step++;
|
|
} else {
|
|
this.display = final;
|
|
clearInterval(interval);
|
|
setTimeout(() => this.animate(), 4000);
|
|
}
|
|
}, 50);
|
|
}
|
|
}"
|
|
>
|
|
<div class="flex items-center gap-2 mb-2 text-green-400">
|
|
<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="M5 13l4 4L19 7"></path></svg>
|
|
<span class="flex items-center">
|
|
<span x-text="display"></span>
|
|
<span class="w-2 h-4 bg-green-400/50 ml-1 animate-[pulse_0.8s_infinite]">_</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-zinc-400 animate-[pulse_2s_infinite]">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<span>Auto-delete: 24h</span>
|
|
</div>
|
|
</div>
|
|
</x-bento.card>
|
|
|
|
<!-- Feature 2: Developer API / Code Window -->
|
|
<x-bento.card
|
|
title="API Ready for Devs"
|
|
subtitle="Integrate disposable emails into your testing suites instantly. Perfect for E2E testing."
|
|
span="col-span-1 md:col-span-1 lg:col-span-2"
|
|
rowSpan="row-span-1 md:row-span-2 lg:row-span-2"
|
|
>
|
|
<x-slot:icon>
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</x-slot:icon>
|
|
|
|
<div class="mt-4 relative h-[380px] w-full group/stack perspective-2000"
|
|
x-data="{
|
|
active: 0,
|
|
snippets: [
|
|
{ name: 'sdk_example.py', lang: 'python' },
|
|
{ name: 'client.php', lang: 'php' },
|
|
{ name: 'api_bash.sh', lang: 'bash' }
|
|
],
|
|
interval: null,
|
|
init() {
|
|
this.interval = setInterval(() => {
|
|
this.active = (this.active + 1) % this.snippets.length;
|
|
}, 3000);
|
|
}
|
|
}"
|
|
>
|
|
<!-- Snippet 1: Python (Initial Front) -->
|
|
<div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
|
|
:class="{
|
|
'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 0,
|
|
'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 1,
|
|
'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 2
|
|
}">
|
|
<x-bento.code-window filename="sdk_example.py">
|
|
<span class="text-pink-400">import</span> imail
|
|
<span class="text-pink-400">def</span> <span class="text-blue-400">test_signup</span>():
|
|
inbox = imail.<span class="text-blue-400">create_inbox</span>()
|
|
requests.<span class="text-blue-400">post</span>(<span class="text-green-400">'/register'</span>, json={
|
|
<span class="text-green-400">'email'</span>: inbox.address
|
|
})
|
|
msg = inbox.<span class="text-blue-400">wait_for_email</span>()
|
|
<span class="text-pink-400">assert</span> <span class="text-green-400">"Verify"</span> <span class="text-pink-400">in</span> msg.subject
|
|
</x-bento.code-window>
|
|
</div>
|
|
|
|
<!-- Snippet 2: PHP (Initial Mid) -->
|
|
<div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
|
|
:class="{
|
|
'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 1,
|
|
'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 2,
|
|
'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 0
|
|
}">
|
|
<x-bento.code-window filename="client.php">
|
|
<span class="text-pink-400"><?php</span>
|
|
<span class="text-pink-400">use</span> Imail\Client;
|
|
|
|
<span class="text-zinc-500">// Initialize instant client</span>
|
|
<span class="text-blue-400">$imail</span> = <span class="text-pink-400">new</span> <span class="text-blue-300">Client</span>(<span class="text-green-400">'sk_test_...'</span>);
|
|
<span class="text-blue-400">$inbox</span> = <span class="text-blue-400">$imail</span>-><span class="text-blue-400">createInbox</span>();
|
|
|
|
<span class="text-blue-400">$msg</span> = <span class="text-blue-400">$inbox</span>-><span class="text-blue-400">waitForEmail</span>();
|
|
<span class="text-pink-400">assert</span>(<span class="text-blue-400">str_contains</span>(<span class="text-blue-400">$msg</span>->subject, <span class="text-green-400">'Welcome'</span>));
|
|
</x-bento.code-window>
|
|
</div>
|
|
|
|
<!-- Snippet 3: cURL (Initial Back) -->
|
|
<div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
|
|
:class="{
|
|
'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 2,
|
|
'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 0,
|
|
'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 1
|
|
}">
|
|
<x-bento.code-window filename="api_bash.sh">
|
|
<span class="text-zinc-500"># Create a new inbox via REST API</span>
|
|
curl -X POST https://api.imail.com/v1/inbox \
|
|
-H <span class="text-green-400">"Authorization: Bearer $API_TOKEN"</span>
|
|
|
|
<span class="text-zinc-500"># Listen for instant callbacks</span>
|
|
curl https://api.imail.com/v1/inbox/$ID/events \
|
|
-H <span class="text-green-400">"Accept: text/event-stream"</span>
|
|
</x-bento.code-window>
|
|
</div>
|
|
</div>
|
|
</x-bento.card>
|
|
|
|
<!-- Feature 3: Instant Disposable Email -->
|
|
<x-bento.card
|
|
title="Instant Disposable Email"
|
|
subtitle="Also known as tempmail, 10minutemail, or throwaway email. Your inbox is ready instantly, no registration required."
|
|
span="col-span-1 md:col-span-2 lg:col-span-1"
|
|
>
|
|
<x-slot:icon>
|
|
<div class="relative w-full h-full text-pink-500">
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
|
</svg>
|
|
</div>
|
|
</x-slot:icon>
|
|
|
|
<!-- Animated Address Shuffle Wrapper -->
|
|
<div class="h-full flex flex-col justify-center py-4">
|
|
<div class="mx-auto h-[34px] flex items-center gap-2 px-3 bg-white/5 border border-white/10 rounded-lg group-hover:border-pink-500/30 transition-colors"
|
|
x-data="{
|
|
addresses: ['user_82@imail.com', 'test_qa@imail.com', 'dev_99@imail.com', 'anon_7@imail.com'],
|
|
current: 0,
|
|
init() {
|
|
setInterval(() => {
|
|
this.current = (this.current + 1) % this.addresses.length;
|
|
}, 3000);
|
|
}
|
|
}">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
|
|
<span class="text-[10px] sm:text-xs font-mono text-zinc-400 transition-all duration-500" x-text="addresses[current]"></span>
|
|
<span class="ml-auto text-[8px] text-emerald-500/60 font-mono tracking-tighter uppercase">Ready</span>
|
|
</div>
|
|
</div>
|
|
</x-bento.card>
|
|
|
|
<!-- Feature 4: Premium Domains/Gmail -->
|
|
<x-bento.card
|
|
title="Premium Domains"
|
|
subtitle="Access to dedicated premium domains and genuine Gmail addresses to bypass tricky email filters."
|
|
span="col-span-1 md:col-span-1 lg:col-span-1"
|
|
>
|
|
<x-slot:icon>
|
|
<div class="relative w-full h-full text-pink-500">
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
|
</svg>
|
|
</div>
|
|
</x-slot:icon>
|
|
|
|
<!-- Premium Domain Ticker Wrapper -->
|
|
<div class="h-full flex flex-col justify-center py-4">
|
|
<div class="mx-auto overflow-hidden h-[34px] bg-white/5 border border-white/10 rounded-lg group-hover:border-yellow-500/30 transition-colors"
|
|
x-data="{
|
|
domains: ['@gmail.com', '@outlook.com', '@pro.imail.me', '@vip.mail.com', '@apple.com'],
|
|
active: 0,
|
|
transitioning: true,
|
|
init() {
|
|
setInterval(() => {
|
|
this.transitioning = true;
|
|
this.active++;
|
|
if (this.active === this.domains.length) {
|
|
setTimeout(() => {
|
|
this.transitioning = false;
|
|
this.active = 0;
|
|
}, 1000); // match duration
|
|
}
|
|
}, 3000);
|
|
}
|
|
}">
|
|
<div class="flex flex-col flex-nowrap"
|
|
:class="transitioning ? 'transition-transform duration-1000 ease-in-out' : ''"
|
|
:style="`transform: translateY(-${active * 34}px)`">
|
|
<!-- Original Items -->
|
|
<template x-for="(domain, index) in domains" :key="index">
|
|
<div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
|
|
<span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domain"></span>
|
|
<span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
|
|
</div>
|
|
</template>
|
|
<!-- Cloned First Item for seamless loop -->
|
|
<div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
|
|
<span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domains[0]"></span>
|
|
<span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-bento.card>
|
|
|
|
<!-- Feature 5: Fast Delivery -->
|
|
<x-bento.card
|
|
title="Blazing Fast Delivery"
|
|
subtitle="Experience fast message delivery without delays or restrictions, directly over Websockets."
|
|
span="col-span-1 md:col-span-2 lg:col-span-2"
|
|
>
|
|
<x-slot:icon>
|
|
<div class="relative w-full h-full text-pink-500">
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
|
|
</svg>
|
|
</div>
|
|
</x-slot:icon>
|
|
|
|
<div class="mt-4 flex flex-col gap-6" x-data="{
|
|
latency: 24,
|
|
init() {
|
|
setInterval(() => {
|
|
this.latency = Math.floor(Math.random() * (48 - 12 + 1)) + 12;
|
|
}, 1500);
|
|
}
|
|
}">
|
|
<!-- Data Stream Visualization -->
|
|
<div class="relative py-8 flex items-center justify-between">
|
|
<!-- Progress Line -->
|
|
<div class="absolute inset-x-0 h-0.5 bg-zinc-800"></div>
|
|
<div class="absolute inset-x-0 h-0.5 bg-gradient-to-r from-pink-500/20 via-pink-500/50 to-emerald-500/20"></div>
|
|
|
|
<!-- Rapid Packets -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_ease-in]"></div>
|
|
<div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.3s_ease-in]"></div>
|
|
<div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.6s_ease-in]"></div>
|
|
</div>
|
|
|
|
<!-- Nodes -->
|
|
<div class="relative z-10 w-3 h-3 rounded-full bg-pink-500 shadow-[0_0_12px_rgba(236,72,153,0.5)]"></div>
|
|
<div class="relative z-10 w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]"></div>
|
|
</div>
|
|
|
|
<!-- Latency Stats -->
|
|
<div class="flex items-center justify-between px-4 py-2 border border-white/5 bg-white/5 rounded-lg font-mono">
|
|
<div class="flex flex-col">
|
|
<span class="text-[10px] text-zinc-500 uppercase tracking-wider">Protocol</span>
|
|
<span class="text-xs text-zinc-300">WSS://STREAM</span>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-[10px] text-zinc-500 uppercase tracking-wider">Latency</span>
|
|
<span class="text-xs text-emerald-400 font-bold" x-text="latency + 'ms'"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slide-right {
|
|
0% { left: 0%; opacity: 0; }
|
|
20% { opacity: 1; }
|
|
80% { opacity: 1; }
|
|
100% { left: 100%; opacity: 0; }
|
|
}
|
|
</style>
|
|
</x-bento.card>
|
|
|
|
<!-- Feature 6: Secure Attachments -->
|
|
<x-bento.card
|
|
title="Secure Attachments"
|
|
subtitle="Instantly view and securely download attachments received in your ephemeral inbox. Fully encrypted and private."
|
|
span="col-span-1 md:col-span-3 lg:col-span-2"
|
|
>
|
|
<x-slot:icon>
|
|
<div class="relative w-full h-full text-pink-500">
|
|
<svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
|
|
</svg>
|
|
</div>
|
|
</x-slot:icon>
|
|
|
|
<div class="mt-4 flex flex-col gap-3 group/scan"
|
|
x-data="{
|
|
scanning: false,
|
|
verified: false,
|
|
meta: '2.4 MB • PDF Document',
|
|
displayMeta: 'Encrypting...',
|
|
chars: '01',
|
|
init() {
|
|
this.displayMeta = this.meta.split('').map(() => this.chars[Math.floor(Math.random()*2)]).join('');
|
|
this.startScan();
|
|
},
|
|
startScan() {
|
|
this.scanning = true;
|
|
this.verified = false;
|
|
|
|
// 1. Scanning Down-Up (2 seconds)
|
|
// 2. Text Scrambling Reveal (starts after scan return)
|
|
|
|
setTimeout(() => {
|
|
// Start revealing text after scan return sweep is nearly done (at 1.6s)
|
|
let step = 0;
|
|
let revealInterval = setInterval(() => {
|
|
let result = '';
|
|
for(let i=0; i<this.meta.length; i++) {
|
|
if (i < step) {
|
|
result += this.meta[i];
|
|
} else {
|
|
result += this.chars[Math.floor(Math.random()*2)];
|
|
}
|
|
}
|
|
this.displayMeta = result;
|
|
step++;
|
|
|
|
if (step > this.meta.length) {
|
|
clearInterval(revealInterval);
|
|
this.verified = true;
|
|
this.scanning = false;
|
|
|
|
// Restart loop after 4 seconds
|
|
setTimeout(() => this.startScan(), 4000);
|
|
}
|
|
}, 40);
|
|
}, 1600); // 60% of return trip (total 2s down-up, so 1s+(0.6*1s) = 1.6s)
|
|
}
|
|
}">
|
|
<div class="relative overflow-hidden p-3 rounded-lg bg-white/5 border transition-all duration-500"
|
|
:class="verified ? 'border-pink-500/30' : 'border-white/10'">
|
|
|
|
<!-- Scanning Line (Pink) -->
|
|
<div class="absolute inset-x-0 h-0.5 bg-pink-500/50 blur-[2px] z-20 pointer-events-none"
|
|
:class="scanning ? 'animate-[scan-down-up_2s_linear_infinite]' : 'opacity-0'"></div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded bg-pink-500/10 flex items-center justify-center text-pink-500 transition-colors">
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<div class="text-xs font-medium text-zinc-200 truncate">contract_summary.pdf</div>
|
|
<span x-show="verified" x-transition class="text-[8px] px-1 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded font-bold tracking-tighter uppercase">Verified</span>
|
|
</div>
|
|
<div class="text-[10px] font-mono text-zinc-500 h-4 flex items-center" x-text="displayMeta"></div>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 transition-all cursor-pointer hover:bg-pink-500/20"
|
|
:class="verified ? 'text-pink-400' : 'hover:text-white'">
|
|
<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="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes scan-down-up {
|
|
0% { top: 0%; opacity: 0; }
|
|
5% { opacity: 1; }
|
|
50% { top: 100%; opacity: 1; }
|
|
95% { opacity: 1; }
|
|
100% { top: 0%; opacity: 0; }
|
|
}
|
|
</style>
|
|
</x-bento.card>
|
|
</x-bento.grid>
|
|
|
|
<div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out' })">
|
|
<x-bento.steps />
|
|
</div>
|
|
|
|
<div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
|
|
<x-bento.testimonials />
|
|
</div>
|
|
|
|
<div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
|
|
<x-bento.pricing />
|
|
</div>
|
|
|
|
<div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
|
|
<x-bento.faq />
|
|
</div>
|
|
|
|
<div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
|
|
<x-bento.cta />
|
|
</div>
|
|
|
|
<x-bento.footer />
|
|
</div>
|