feat: cinematic branding for Zemail
This commit is contained in:
idevakk
@@ -1,3 +1,5 @@
|
||||
<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.041 38.7592C162.099 38.9767 162.129 39.201 162.13 39.4264V74.4524C162.13 74.9019 162.011 75.3435 161.786 75.7325C161.561 76.1216 161.237 76.4442 160.847 76.6678L131.462 93.5935V127.141C131.462 128.054 130.977 128.897 130.186 129.357L68.8474 164.683C68.707 164.763 68.5538 164.814 68.4007 164.868C68.3432 164.887 68.289 164.922 68.2284 164.938C67.7996 165.051 67.3489 165.051 66.9201 164.938C66.8499 164.919 66.7861 164.881 66.7191 164.855C66.5787 164.804 66.4319 164.76 66.2979 164.683L4.97219 129.357C4.58261 129.133 4.2589 128.81 4.0337 128.421C3.8085 128.032 3.68976 127.591 3.68945 127.141L3.68945 22.0634C3.68945 21.8336 3.72136 21.6101 3.7788 21.393C3.79794 21.3196 3.84262 21.2526 3.86814 21.1791C3.91601 21.0451 3.96068 20.9078 4.03088 20.7833C4.07874 20.7003 4.14894 20.6333 4.20638 20.5566C4.27977 20.4545 4.34678 20.3491 4.43293 20.2598C4.50632 20.1863 4.60205 20.1321 4.68501 20.0682C4.77755 19.9916 4.86051 19.9086 4.96581 19.848L35.6334 2.18492C36.0217 1.96139 36.4618 1.84375 36.9098 1.84375C37.3578 1.84375 37.7979 1.96139 38.1862 2.18492L68.8506 19.848H68.857C68.9591 19.9118 69.0452 19.9916 69.1378 20.065C69.2207 20.1289 69.3133 20.1863 69.3867 20.2566C69.476 20.3491 69.5398 20.4545 69.6164 20.5566C69.6707 20.6333 69.7441 20.7003 69.7887 20.7833C69.8621 20.911 69.9036 21.0451 69.9546 21.1791C69.9802 21.2526 70.0248 21.3196 70.044 21.3962C70.1027 21.6138 70.1328 21.8381 70.1333 22.0634V87.6941L95.686 72.9743V39.4232C95.686 39.1997 95.7179 38.9731 95.7753 38.7592C95.7977 38.6826 95.8391 38.6155 95.8647 38.5421C95.9157 38.408 95.9604 38.2708 96.0306 38.1463C96.0785 38.0633 96.1487 37.9962 96.2029 37.9196C96.2795 37.8175 96.3433 37.7121 96.4326 37.6227C96.506 37.5493 96.5986 37.495 96.6815 37.4312C96.7773 37.3546 96.8602 37.2716 96.9623 37.2109L127.633 19.5479C128.021 19.324 128.461 19.2062 128.91 19.2062C129.358 19.2062 129.798 19.324 130.186 19.5479L160.85 37.2109C160.959 37.2748 161.042 37.3546 161.137 37.428C161.217 37.4918 161.31 37.5493 161.383 37.6195C161.473 37.7121 161.536 37.8175 161.613 37.9196C161.67 37.9962 161.741 38.0633 161.785 38.1463C161.859 38.2708 161.9 38.408 161.951 38.5421C161.98 38.6155 162.021 38.6826 162.041 38.7592ZM157.018 72.9743V43.8477L146.287 50.028L131.462 58.5675V87.6941L157.021 72.9743H157.018ZM126.354 125.663V96.5176L111.771 104.85L70.1301 128.626V158.046L126.354 125.663ZM8.80126 26.4848V125.663L65.0183 158.043V128.629L35.6494 112L35.6398 111.994L35.6271 111.988C35.5281 111.93 35.4452 111.847 35.3526 111.777C35.2729 111.713 35.1803 111.662 35.1101 111.592L35.1038 111.582C35.0208 111.502 34.9634 111.403 34.8932 111.314C34.8293 111.228 34.7528 111.154 34.7017 111.065L34.6985 111.055C34.6411 110.96 34.606 110.845 34.5645 110.736C34.523 110.64 34.4688 110.551 34.4432 110.449C34.4113 110.328 34.4049 110.197 34.3922 110.072C34.3794 109.976 34.3539 109.881 34.3539 109.785V109.778V41.2045L19.5322 32.6619L8.80126 26.4848ZM36.913 7.35007L11.3635 22.0634L36.9066 36.7768L62.4529 22.0602L36.9066 7.35007H36.913ZM50.1999 99.1736L65.0215 90.6374V26.4848L54.2906 32.6651L39.4657 41.2045V105.357L50.1999 99.1736ZM128.91 24.713L103.363 39.4264L128.91 54.1397L154.453 39.4232L128.91 24.713ZM126.354 58.5675L111.529 50.028L100.798 43.8477V72.9743L115.619 81.5106L126.354 87.6941V58.5675ZM67.5711 124.205L105.042 102.803L123.772 92.109L98.2451 77.4053L68.8538 94.3341L42.0663 109.762L67.5711 124.205Z" fill="#FF2D20"/>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="8" fill="#18181b"/>
|
||||
<path d="M8 24L24 8M8 24H18M24 8H14" stroke="#ec4899" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="26" cy="6" r="2" fill="#10b981"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 334 B |
BIN
public/images/logo-dark.webp
Normal file
BIN
public/images/logo-dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -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 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
50
resources/views/components/bento/logo.blade.php
Normal 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>
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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++)
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title ?? 'Mailbox — Imail' }}</title>
|
||||
<title>{{ $title ?? 'Mailbox — Zemail' }}</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title ?? 'Imail — Instant Disposable Gmail & Temporary Email' }}</title>
|
||||
<title>{{ $title ?? 'Zemail — Instant Disposable Gmail & Temporary Email' }}</title>
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
@@ -46,12 +46,8 @@
|
||||
'xl:w-20': !sidebarOpen && window.innerWidth >= 1280
|
||||
}">
|
||||
<!-- Sidebar Header -->
|
||||
<div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-pink-500 flex items-center justify-center text-white shadow-[0_0_15px_rgba(236,72,153,0.3)]">
|
||||
<svg class="w-5 h-5" 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>
|
||||
</div>
|
||||
<span class="font-bold text-lg tracking-tight text-white transition-opacity" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">Imail</span>
|
||||
<x-bento.logo size="sm" x-data="{ showText: sidebarOpen }" />
|
||||
</div>
|
||||
|
||||
<!-- Mobile Close Button -->
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="legal-content">
|
||||
<h2>1. Data Collection</h2>
|
||||
<p>
|
||||
Imail is designed to be privacy-first. We do not collect personal information like your name, physical address, or phone number. When you create a disposable inbox, we only generate a temporary identifier to route your mail.
|
||||
Zemail is designed to be privacy-first. We do not collect personal information like your name, physical address, or phone number. When you create a disposable inbox, we only generate a temporary identifier to route your mail.
|
||||
</p>
|
||||
<ul>
|
||||
<li>No user registration required</li>
|
||||
|
||||
Reference in New Issue
Block a user