admin/imail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cinematic branding for Zemail

Browse Source
This commit is contained in:
idevakk
2026-03-04 10:09:25 +05:30
parent 41c1e7ad54
commit e73342f1fb
14 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/components/bento/dynamic-layout.blade.php
View File

@@ -1,5 +1,5 @@
<div>
<x-slot:title>{{ $title }} — Imail</x-slot:title>
<x-slot:title>{{ $title }} — Zemail</x-slot:title>
<div class="flex-1">
<!-- Reusable Cinematic Header -->

8
resources/views/components/bento/faq.blade.php
View File

@@ -13,7 +13,7 @@
Common <span class="text-pink-500">questions.</span>
</h2>
<p class="text-zinc-400 text-sm md:text-lg leading-relaxed">
Everything you need to know about Imail, privacy, and temporary communication.
Everything you need to know about Zemail, privacy, and temporary communication.
</p>
</div>
@@ -35,7 +35,7 @@
x-collapse
class="px-6 pb-6">
<p class="text-sm text-zinc-400 leading-relaxed">
Yes! Imail uses a sophisticated backend to route communications through temporary, high-reputation Gmail and Outlook nodes. This ensures that you can bypass "Disposable Email" filters while maintaining 100% privacy.
Yes! Zemail uses a sophisticated backend to route communications through temporary, high-reputation Gmail and Outlook nodes. This ensures that you can bypass "Disposable Email" filters while maintaining 100% privacy.
</p>
</div>
</div>
@@ -66,7 +66,7 @@
:class="active === 3 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
<button @click="active = active === 3 ? null : 3"
class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
<span class="font-bold text-zinc-100 group-hover:text-white">Is Imail secure for sensitive data?</span>
<span class="font-bold text-zinc-100 group-hover:text-white">Is Zemail secure for sensitive data?</span>
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
:class="active === 3 ? 'rotate-180 text-pink-500' : ''"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -140,7 +140,7 @@
x-collapse
class="px-6 pb-6">
<p class="text-sm text-zinc-400 leading-relaxed">
No. Imail is a 100% web-based service. It is accessible across all modern browsers and devices (Desktop, Mobile, Tablet) without the need for any apps or browser extensions.
No. Zemail is a 100% web-based service. It is accessible across all modern browsers and devices (Desktop, Mobile, Tablet) without the need for any apps or browser extensions.
</p>
</div>
</div>

4
resources/views/components/bento/footer.blade.php
View File

@@ -6,8 +6,8 @@
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">
<!-- Brand & Status -->
<div class="col-span-1 md:col-span-5">
<div class="flex items-center gap-3 mb-6">
<h2 class="text-2xl font-black tracking-tighter text-white">Imail</h2>
<div class="flex items-center gap-6 mb-6">
<x-bento.logo size="sm" />
<div class="flex items-center gap-2 px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1.5s_infinite]"></div>
<span class="text-[9px] font-bold text-emerald-500 uppercase tracking-widest">Systems Operational</span>

2
resources/views/components/bento/grid.blade.php
View File

@@ -10,7 +10,7 @@
Everything you need, <span class="text-zinc-500">nothing you don't.</span>
</h2>
<p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed">
Imail is built for the modern web. From instant API access to premium Gmail domains,
Zemail is built for the modern web. From instant API access to premium Gmail domains,
we've automated the friction out of temporary email management.
</p>
</div>

12
resources/views/components/bento/hero.blade.php
View File

@@ -13,7 +13,7 @@
<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
Zemail 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'})">
@@ -34,7 +34,7 @@
</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>
Zemail 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>
@@ -163,10 +163,10 @@
{
id: 1,
sender: 'admin@imail.local',
subject: 'Hello World! I am Imail',
snippet: 'Click me to discover what makes Imail so special...',
subject: 'Hello World! I am Zemail',
snippet: 'Click me to discover what makes Zemail 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!'
content: 'Welcome to Zemail! ✨<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,
@@ -186,7 +186,7 @@
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.`
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 Zemail inbox, your emails appear instantly like this as soon as they hit our SMTP servers, bypassing typical polling delays.`
});
}
}, 5000);

50
resources/views/components/bento/logo.blade.php Normal file
View File

@@ -0,0 +1,50 @@
@props([
'size' => 'md', // sm, md, lg
'withText' => true,
'class' => ''
])
@php
$dimensions = match($size) {
'sm' => ['box' => 'w-8 h-8', 'icon' => 'w-4 h-4', 'text' => 'text-base'],
'md' => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
'lg' => ['box' => 'w-12 h-12', 'icon' => 'w-6 h-6', 'text' => 'text-2xl'],
default => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
};
@endphp
<div x-data="{ showText: {{ $withText ? 'true' : 'false' }} }" {{ $attributes }} class="flex items-center gap-3 {{ $class }}">
<!-- Logo Symbol -->
<div class="relative group">
<!-- Outer Glow -->
<div class="absolute -inset-2 bg-gradient-to-tr from-pink-500/20 to-emerald-500/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<!-- Icon Container -->
<div class="{{ $dimensions['box'] }} bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center relative overflow-hidden shadow-xl">
<!-- Subtle Mesh Background -->
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(236,72,153,0.1),transparent)]"></div>
<!-- Stylized "Z" / Envelope Fold -->
<svg class="{{ $dimensions['icon'] }} text-transparent" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ec4899" />
<stop offset="100%" style="stop-color:#be185d" />
</linearGradient>
</defs>
<path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#logo-gradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 5L20 19" stroke="white" stroke-opacity="0.1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- Activity Pulsar (Top Right) -->
<div class="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]">
<div class="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-75"></div>
</div>
</div>
</div>
<div class="flex items-center" x-show="showText" x-transition:opacity>
<span class="{{ $dimensions['text'] }} font-black tracking-tighter text-white italic uppercase">zemail</span>
<span class="{{ $dimensions['text'] }} font-black tracking-tighter text-pink-500 leading-none italic uppercase">.me</span>
</div>
</div>

7
resources/views/components/bento/nav.blade.php
View File

@@ -8,11 +8,8 @@
<!-- Left Side: Logo + Links -->
<div class="flex items-center gap-8">
<!-- Logo -->
<a href="/" class="flex items-center gap-2 group z-50">
<svg class="w-6 h-6 text-white group-hover:text-pink-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span class="text-lg font-bold tracking-wide text-white">Imail</span>
<a href="/" class="z-50">
<x-bento.logo size="sm" />
</a>
<!-- Desktop Links -->

6
resources/views/components/bento/testimonials.blade.php
View File

@@ -15,7 +15,7 @@
Trusted by <span class="text-emerald-500">thousands</span> of devs.
</h2>
<p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed">
Join the community of privacy-first developers, QA testers, and power users who rely on Imail every day.
Join the community of privacy-first developers, QA testers, and power users who rely on Zemail every day.
</p>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
<p class="text-zinc-400 text-sm leading-relaxed italic">
"Imail is my go-to for checking transactional emails on our staging environment. The attachments scanning gives me peace of mind when testing file delivery systems."
"Zemail is my go-to for checking transactional emails on our staging environment. The attachments scanning gives me peace of mind when testing file delivery systems."
</p>
<div class="mt-6 flex gap-1">
@for($i=0; $i<5; $i++)
@@ -138,7 +138,7 @@
</div>
</div>
<p class="text-zinc-400 text-sm leading-relaxed italic">
"Reliability is key for our automation suite, and Imail hasn't let us down. The speed of reception is nearly identical to our production Gmail setup."
"Reliability is key for our automation suite, and Zemail hasn't let us down. The speed of reception is nearly identical to our production Gmail setup."
</p>
<div class="mt-6 flex gap-1">
@for($i=0; $i<5; $i++)