feat/ui: cinematic landing page and dynamic devtool-friendly bento structures
- 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
This commit is contained in:
idevakk
45
resources/views/components/bento/card.blade.php
Normal file
45
resources/views/components/bento/card.blade.php
Normal file
@@ -0,0 +1,45 @@
|
||||
@props(['span' => 'col-span-1', 'rowSpan' => 'row-span-1', 'title', 'subtitle' => null])
|
||||
<div
|
||||
class="relative group rounded-3xl bg-app-surface border border-app-border p-8 lg:p-10 transition-all {{ $span }} {{ $rowSpan }} opacity-0 translate-y-10"
|
||||
x-data="{ x: 0, y: 0 }"
|
||||
x-on:mousemove="
|
||||
const rect = $el.getBoundingClientRect();
|
||||
x = $event.clientX - rect.left;
|
||||
y = $event.clientY - rect.top;
|
||||
"
|
||||
x-init="gsap.to($el, {
|
||||
scrollTrigger: { trigger: $el, start: 'top 85%' },
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.8,
|
||||
ease: 'power3.out'
|
||||
})"
|
||||
>
|
||||
<!-- Hover Spotlight -->
|
||||
<div class="pointer-events-none absolute -inset-px rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100 mix-blend-screen"
|
||||
x-bind:style="`background: radial-gradient(600px circle at ${x}px ${y}px, rgba(236,72,153,0.1), transparent 40%);`">
|
||||
</div>
|
||||
|
||||
<!-- Active Spotlight Glow inside border -->
|
||||
<div class="pointer-events-none absolute inset-0 rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100"
|
||||
x-bind:style="`background: radial-gradient(400px circle at ${x}px ${y}px, rgba(255,255,255,0.06), transparent 40%);`">
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex flex-col h-full">
|
||||
@if(isset($icon))
|
||||
<div class="mb-4 text-pink-500 w-8 h-8">
|
||||
{{ $icon }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<h3 class="text-xl font-semibold text-white mb-2">{{ $title }}</h3>
|
||||
|
||||
@if($subtitle)
|
||||
<p class="text-zinc-400 text-sm leading-relaxed mb-6">{{ $subtitle }}</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-auto relative w-full flex-grow flex flex-col justify-end">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
resources/views/components/bento/code-window.blade.php
Normal file
19
resources/views/components/bento/code-window.blade.php
Normal file
@@ -0,0 +1,19 @@
|
||||
@props(['filename' => 'api-request.sh'])
|
||||
<div class="rounded-xl overflow-hidden border border-app-border bg-app-bg/80 backdrop-blur-sm shadow-2xl relative w-full mx-auto">
|
||||
<!-- Window Controls -->
|
||||
<div class="flex items-center px-4 py-3 border-b border-app-border bg-app-surface/50">
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
||||
</div>
|
||||
<div class="ml-4 flex-1 text-center font-mono text-xs text-zinc-500 select-none">
|
||||
{{ $filename }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Content -->
|
||||
<div class="p-4 sm:p-6 overflow-x-auto font-mono text-sm leading-relaxed text-zinc-300">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
83
resources/views/components/bento/cta.blade.php
Normal file
83
resources/views/components/bento/cta.blade.php
Normal file
@@ -0,0 +1,83 @@
|
||||
<section id="cta" class="pt-16 pb-12 relative overflow-hidden">
|
||||
<!-- Massive Cinematic Background Glows -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[600px] bg-gradient-to-r from-pink-500/10 to-emerald-500/10 rounded-full blur-[160px] -z-10"></div>
|
||||
<div class="absolute -bottom-24 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<div class="relative p-12 md:p-20 rounded-[40px] bg-zinc-900/40 border border-white/5 backdrop-blur-3xl overflow-hidden flex flex-col items-center text-center shadow-2xl">
|
||||
<!-- Decorative Inner Glow -->
|
||||
<div class="absolute -top-24 -left-24 w-48 h-48 bg-pink-500/10 rounded-full blur-[40px]"></div>
|
||||
<div class="absolute -bottom-24 -right-24 w-48 h-48 bg-emerald-500/10 rounded-full blur-[40px]"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-8">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1s_infinite]"></div>
|
||||
<span class="text-[10px] font-bold tracking-widest text-emerald-500 uppercase">Live Metrics</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl font-black tracking-tighter text-white mb-6 leading-tight">
|
||||
Ready to take back <br class="hidden md:block"> your <span class="bg-gradient-to-r from-pink-500 to-emerald-500 bg-clip-text text-transparent">privacy?</span>
|
||||
</h2>
|
||||
|
||||
<p class="text-zinc-400 text-lg md:text-xl max-w-xl mx-auto mb-12 leading-relaxed font-medium">
|
||||
Create your first disposable Gmail in seconds. <br class="hidden sm:block text-zinc-600">
|
||||
No credit card, no registration, no tracking.
|
||||
</p>
|
||||
|
||||
<!-- Live Counters -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] gap-6 md:gap-12 mb-12 max-w-2xl mx-auto items-center justify-center text-center"
|
||||
x-data="{
|
||||
mailboxes: 1248920,
|
||||
emails: 48291032,
|
||||
numberFormat(val) {
|
||||
return new Intl.NumberFormat().format(val);
|
||||
},
|
||||
init() {
|
||||
setInterval(() => {
|
||||
this.mailboxes += Math.floor(Math.random() * 3) + 1;
|
||||
this.emails += Math.floor(Math.random() * 12) + 2;
|
||||
}, 2000);
|
||||
}
|
||||
}">
|
||||
<!-- Counter 1: Mailboxes -->
|
||||
<div class="flex flex-col items-center sm:items-end">
|
||||
<div class="text-2xl md:text-4xl font-black text-white tabular-nums tracking-tighter" x-text="numberFormat(mailboxes)">1,248,920</div>
|
||||
<div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Mailboxes Created</div>
|
||||
</div>
|
||||
<!-- Divider -->
|
||||
<div class="hidden sm:block w-px h-12 bg-white/10"></div>
|
||||
<!-- Counter 2: Emails -->
|
||||
<div class="flex flex-col items-center sm:items-start">
|
||||
<div class="text-2xl md:text-4xl font-black text-emerald-500 tabular-nums tracking-tighter" x-text="numberFormat(emails)">48,291,032</div>
|
||||
<div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Email Received</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final CTA Button -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href="#hero" class="group relative px-10 py-5 bg-white text-black font-black text-lg rounded-2xl transition-all hover:scale-105 active:scale-95 shadow-[0_0_30px_rgba(255,255,255,0.2)]">
|
||||
<span class="relative z-10 flex items-center gap-2">
|
||||
Get Started for Free
|
||||
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 flex items-center justify-center gap-6 text-zinc-500">
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
|
||||
<svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||
No CC Required
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
|
||||
<svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||||
100% Private
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
76
resources/views/components/bento/dynamic-layout.blade.php
Normal file
76
resources/views/components/bento/dynamic-layout.blade.php
Normal file
@@ -0,0 +1,76 @@
|
||||
<div>
|
||||
<x-slot:title>{{ $title }} — Imail</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>
|
||||
178
resources/views/components/bento/faq.blade.php
Normal file
178
resources/views/components/bento/faq.blade.php
Normal file
@@ -0,0 +1,178 @@
|
||||
<section id="faq" class="py-24 relative overflow-hidden" x-data="{ active: null }">
|
||||
<!-- Background Accents -->
|
||||
<div class="absolute top-1/2 left-0 w-[500px] h-[500px] bg-pink-500/5 rounded-full blur-[100px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-16 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
|
||||
<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">Support</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Accordion -->
|
||||
<div class="space-y-4">
|
||||
<!-- Q1 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 1 ? '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 === 1 ? null : 1"
|
||||
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">Are these real Gmail addresses?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 1 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 1"
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q2 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 2 ? '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 === 2 ? null : 2"
|
||||
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">How long do emails stay in my inbox?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 2 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 2"
|
||||
x-collapse
|
||||
class="px-6 pb-6">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
By default, emails and their attachments are purged automatically after 24 hours. Pro users can extend this retention period up to 7 days for more complex workflows or testing cycles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q3 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
: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>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 3"
|
||||
x-collapse
|
||||
class="px-6 pb-6">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
Absolutely. All incoming data is encrypted at rest using industry-standard AES-256. Our "Auto-Delete" mechanism is a hard wipe, meaning that once the retention period ends, the data is cryptographically unrecoverable even by us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q4 (Existing) -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 4 ? '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 === 4 ? null : 4"
|
||||
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">Can I use my own domain?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 4 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 4"
|
||||
x-collapse
|
||||
class="px-6 pb-6">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
Yes, but this is a Pro feature. Pro users can connect their own domains via custom MX records, allowing you to generate infinite temporary addresses on your own brand.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q5 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 5 ? '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 === 5 ? null : 5"
|
||||
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">Why isn't my email arriving?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 5 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 5"
|
||||
x-collapse
|
||||
class="px-6 pb-6">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
Most emails arrive instantly, but high traffic or sender-side filters may cause delays. If it takes longer than 15 minutes, try generating an email using a different domain suffix, as some domains may be temporarily throttled by external providers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q6 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 6 ? '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 === 6 ? null : 6"
|
||||
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">Do I need to install any software?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 6 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 6"
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Q7 -->
|
||||
<div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
|
||||
:class="active === 7 ? '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 === 7 ? null : 7"
|
||||
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">How many email addresses can I create?</span>
|
||||
<svg class="w-5 h-5 text-zinc-500 transition-transform duration-300"
|
||||
:class="active === 7 ? 'rotate-180 text-pink-500' : ''"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="active === 7"
|
||||
x-collapse
|
||||
class="px-6 pb-6">
|
||||
<p class="text-sm text-zinc-400 leading-relaxed">
|
||||
Free users can have up to 5 active addresses simultaneously. If you need more, you can either delete old ones or upgrade to **Pro** for unlimited active addresses and dedicated premium domains.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Note -->
|
||||
<div class="mt-12 text-center">
|
||||
<p class="text-sm text-zinc-500">
|
||||
Still have questions?
|
||||
<a href="mailto:support@imail.me" class="text-pink-500/80 hover:text-pink-500 font-bold transition-colors underline decoration-pink-500/20 underline-offset-4">Chat with our team</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
77
resources/views/components/bento/footer.blade.php
Normal file
77
resources/views/components/bento/footer.blade.php
Normal file
@@ -0,0 +1,77 @@
|
||||
<footer class="relative pb-20 pt-16 mt-12 overflow-hidden border-t border-white/5 bg-zinc-950">
|
||||
<!-- Final Bottom Glow (Emerald Bookend) -->
|
||||
<div class="absolute -bottom-48 -right-48 w-96 h-96 bg-emerald-500/10 rounded-full blur-[100px] pointer-events-none -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<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-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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-zinc-400 max-w-sm mb-8 leading-relaxed">
|
||||
High-performance disposable email infrastructure for modern developers.
|
||||
Built for privacy, automation, and speed.
|
||||
</p>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="https://github.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||
</a>
|
||||
<a href="https://twitter.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="X (Twitter)">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
|
||||
</a>
|
||||
<a href="https://discord.com" class="p-2 rounded-lg bg-zinc-900 border border-white/5 text-zinc-400 hover:text-white hover:border-white/20 transition-all" title="Discord">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.23 10.23 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links Grid -->
|
||||
<div class="col-span-1 md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Product</h3>
|
||||
<ul class="space-y-4">
|
||||
<li><a href="#features" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Features</a></li>
|
||||
<li><a href="#how-it-works" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">How it Works</a></li>
|
||||
<li><a href="#reviews" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Reviews</a></li>
|
||||
<li><a href="#pricing" class="text-zinc-500 hover:text-emerald-500 transition-colors text-sm font-medium">Pricing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Resources</h3>
|
||||
<ul class="space-y-4">
|
||||
<li><a href="#faq" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">FAQ</a></li>
|
||||
<li><a href="/api-docs" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">API Docs</a></li>
|
||||
<li><a href="/blog" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">Privacy Blog</a></li>
|
||||
<li><a href="mailto:support@imail.me" class="text-zinc-500 hover:text-pink-500 transition-colors text-sm font-medium">Help Center</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white text-sm uppercase tracking-widest mb-6">Legal</h3>
|
||||
<ul class="space-y-4">
|
||||
<li><a href="/privacy-policy" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Privacy Policy</a></li>
|
||||
<li><a href="/terms" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Terms of Service</a></li>
|
||||
<li><a href="/refund" class="text-zinc-500 hover:text-white transition-colors text-sm font-medium">Refund Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<p class="text-zinc-600 text-[11px] font-bold tracking-widest uppercase">
|
||||
© 2026 IMAIL. ALL RIGHTS RESERVED.
|
||||
</p>
|
||||
<div class="flex items-center gap-4 text-zinc-600 text-[10px] font-bold uppercase tracking-tight">
|
||||
<span>V2.4.1</span>
|
||||
<span class="w-1 h-1 rounded-full bg-zinc-800"></span>
|
||||
<span>GLOBAL EDGE DEPLOYMENT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
22
resources/views/components/bento/grid.blade.php
Normal file
22
resources/views/components/bento/grid.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
<section id="features" class="py-20 relative z-10">
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Section Header -->
|
||||
<div class="mb-12 md:mb-20 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6 group/badge">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse ring-4 ring-pink-500/20"></div>
|
||||
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Capabilities</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-6">
|
||||
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,
|
||||
we've automated the friction out of temporary email management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 auto-rows-auto md:auto-rows-[minmax(320px,auto)]">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
223
resources/views/components/bento/hero.blade.php
Normal file
223
resources/views/components/bento/hero.blade.php
Normal file
@@ -0,0 +1,223 @@
|
||||
<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})">
|
||||
<button wire:click="generateEmail" 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">
|
||||
Start building 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>
|
||||
</button>
|
||||
<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>
|
||||
84
resources/views/components/bento/nav.blade.php
Normal file
84
resources/views/components/bento/nav.blade.php
Normal file
@@ -0,0 +1,84 @@
|
||||
<div class="fixed top-0 inset-x-0 z-50 w-full transition-all duration-300"
|
||||
x-data="{ scrolled: false, mobileMenuOpen: false }"
|
||||
@scroll.window="scrolled = (window.pageYOffset > 20)"
|
||||
:class="scrolled ? 'bg-app-bg/80 backdrop-blur-xl border-b border-white/10 shadow-lg' : 'bg-app-bg/40 backdrop-blur-md border-b border-white/5'">
|
||||
|
||||
<nav class="container mx-auto px-4 lg:px-8 py-4 flex items-center justify-between max-w-7xl">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Desktop Links -->
|
||||
<div class="hidden md:flex items-center space-x-6">
|
||||
<a href="#features" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Features</a>
|
||||
<a href="#how-it-works" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">How it Works</a>
|
||||
<a href="#reviews" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Reviews</a>
|
||||
<a href="#pricing" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">Pricing</a>
|
||||
<a href="#faq" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">FAQ</a>
|
||||
<a href="/api-docs" class="text-sm font-medium text-zinc-300 hover:text-white transition-colors">API</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: CTA + Mobile Toggle -->
|
||||
<div class="flex items-center gap-4 z-50">
|
||||
<!-- CTA Button (Desktop & Mobile) -->
|
||||
<a href="#hero" class="relative inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-white bg-zinc-900 border border-zinc-700/80 rounded-full overflow-hidden transition-all group hover:border-pink-500 hover:shadow-[0_0_15px_rgba(236,72,153,0.4)]">
|
||||
<span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out opacity-0 bg-gradient-to-r from-pink-500 to-purple-500 group-hover:opacity-20"></span>
|
||||
<span class="relative flex items-center gap-2 text-zinc-100 group-hover:text-white group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
|
||||
<span class="hidden sm:inline">Get Temporary Email</span>
|
||||
<span class="sm:hidden">Get Email</span>
|
||||
<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>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 -mr-2 text-zinc-400 hover:text-white focus:outline-none transition-colors">
|
||||
<svg x-show="!mobileMenuOpen" 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="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg x-show="mobileMenuOpen" style="display: none;" 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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Drawer -->
|
||||
<div x-show="mobileMenuOpen"
|
||||
style="display: none;"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 -translate-y-full"
|
||||
x-transition:enter-end="opacity-100 translate-y-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-full"
|
||||
class="absolute top-0 left-0 w-full h-screen bg-app-bg/95 backdrop-blur-2xl border-b border-white/10 pt-24 px-6 md:hidden">
|
||||
|
||||
<div class="flex flex-col space-y-6 text-center">
|
||||
<a href="#features" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Features</a>
|
||||
<a href="#how-it-works" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">How it Works</a>
|
||||
<a href="#reviews" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Reviews</a>
|
||||
<a href="#pricing" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">Pricing</a>
|
||||
<a href="#faq" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">FAQ</a>
|
||||
<a href="/api-docs" @click="mobileMenuOpen = false" class="text-2xl font-semibold text-zinc-300 hover:text-white transition-colors">API</a>
|
||||
|
||||
@if (Route::has('login'))
|
||||
<div class="h-px w-12 bg-white/10 mx-auto my-4"></div>
|
||||
@auth
|
||||
<a href="{{ url('/dashboard') }}" @click="mobileMenuOpen = false" class="text-xl font-medium text-zinc-400 hover:text-white transition-colors">Dashboard</a>
|
||||
@else
|
||||
<a href="{{ route('login') }}" @click="mobileMenuOpen = false" class="text-xl font-medium text-zinc-400 hover:text-white transition-colors">Log in</a>
|
||||
@endauth
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
resources/views/components/bento/page-header.blade.php
Normal file
35
resources/views/components/bento/page-header.blade.php
Normal file
@@ -0,0 +1,35 @@
|
||||
@props([
|
||||
'title',
|
||||
'subtitle' => null,
|
||||
'breadcrumb' => null,
|
||||
])
|
||||
|
||||
<div class="relative pt-32 pb-8 md:pt-48 md:pb-12 overflow-hidden border-b border-white/5 bg-zinc-950/50">
|
||||
<!-- Cinematic Background Glow -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-pink-500/10 via-emerald-500/10 to-pink-500/10 rounded-full blur-[120px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl relative z-10"
|
||||
x-init="gsap.from($el, { y: 20, opacity: 0, duration: 1, ease: 'power3.out' })">
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
@if($breadcrumb)
|
||||
<nav class="flex items-center gap-2 mb-8" aria-label="Breadcrumb">
|
||||
<a href="/" class="text-[10px] font-bold tracking-widest text-zinc-500 uppercase hover:text-pink-500 transition-colors">Home</a>
|
||||
<svg class="w-3 h-3 text-zinc-800" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">{{ $breadcrumb }}</span>
|
||||
</nav>
|
||||
@endif
|
||||
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter text-white mb-6 leading-[0.9]">
|
||||
{{ $title }}
|
||||
</h1>
|
||||
|
||||
@if($subtitle)
|
||||
<p class="text-zinc-400 text-lg md:text-xl leading-relaxed font-medium">
|
||||
{{ $subtitle }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
170
resources/views/components/bento/pricing.blade.php
Normal file
170
resources/views/components/bento/pricing.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
<section id="pricing" class="py-24 relative overflow-hidden" x-data="{ yearly: false }">
|
||||
<!-- Background Accents -->
|
||||
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-pink-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
<div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-16 md:mb-20 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
|
||||
<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">Pricing</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Simple, <span class="text-emerald-500">transparent</span> pricing.
|
||||
</h2>
|
||||
<p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed mb-10">
|
||||
Choose the plan that fits your needs. No hidden fees, no complicated contracts.
|
||||
Switch or cancel anytime.
|
||||
</p>
|
||||
|
||||
<!-- Billing Toggle -->
|
||||
<div class="flex items-center gap-4 p-1 bg-zinc-900 border border-white/5 rounded-full">
|
||||
<button
|
||||
@click="yearly = false"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300"
|
||||
:class="!yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
@click="yearly = true"
|
||||
class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 relative"
|
||||
:class="yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
|
||||
>
|
||||
Yearly
|
||||
<span class="absolute -top-6 -right-4 px-2 py-0.5 bg-emerald-500 text-[10px] font-bold text-black rounded-md rotate-12 animate-bounce">
|
||||
SAVE 20%
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Free Plan -->
|
||||
<div class="relative group">
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Free</h3>
|
||||
<p class="text-zinc-500 text-sm">Perfect for individuals starting out.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white">$0</span>
|
||||
<span class="text-zinc-500 text-sm">/mo</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Up to 5 active addresses
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
24h retention period
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Standard delivery speeds
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300/40">
|
||||
<svg class="w-5 h-5 text-zinc-800" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
Custom domain support
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pro Plan (Most Popular) -->
|
||||
<div class="relative group md:scale-105 z-10">
|
||||
<!-- Glowing Border Effect (Balanced) -->
|
||||
<div class="absolute -inset-[1px] bg-gradient-to-b from-pink-500 via-pink-500/40 to-emerald-500/40 rounded-[25px] blur-[3px] opacity-40 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-900 border border-white/10 backdrop-blur-2xl flex flex-col relative transition-all duration-500 hover:translate-y-[-4px]">
|
||||
<div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-pink-500 text-[10px] font-black text-white uppercase tracking-tighter shadow-[0_0_15px_rgba(236,72,153,0.5)]">
|
||||
Most Popular
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Pro</h3>
|
||||
<p class="text-zinc-500 text-sm">Advanced privacy for power users.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white" x-text="yearly ? '$12' : '$15'">$15</span>
|
||||
<span class="text-zinc-500 text-sm" x-text="yearly ? '/mo (billed yearly)' : '/mo'">/mo</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Unlimited active addresses
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
7-day retention period
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Blazing fast SMTP delivery
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Custom domain support
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-200">
|
||||
<svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
API access for developers
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white text-black font-black text-sm transition-all hover:bg-zinc-200 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
|
||||
Upgrade to Pro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Plan -->
|
||||
<div class="relative group">
|
||||
<div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
|
||||
<p class="text-zinc-500 text-sm">Custom solutions for organizations.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold text-white">Custom</span>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mb-10 flex-1">
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Everything in Pro
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
SLA-backed uptime
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Dedicated support manager
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Custom security audits
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
|
||||
Contact Sales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
132
resources/views/components/bento/steps.blade.php
Normal file
132
resources/views/components/bento/steps.blade.php
Normal file
@@ -0,0 +1,132 @@
|
||||
<section id="how-it-works" class="py-24 relative overflow-hidden">
|
||||
<!-- Background Accents -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-pink-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-16 md:mb-24 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-6">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
|
||||
<span class="text-[10px] font-bold tracking-widest text-emerald-500 uppercase">Process</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Three steps to <span class="text-pink-500">total privacy.</span>
|
||||
</h2>
|
||||
<p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed">
|
||||
We've distilled complex identity protection into a seamless,
|
||||
automated workflow that takes seconds to master.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Steps Grid / Timeline -->
|
||||
<div class="relative grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-12">
|
||||
<!-- Connecting Line (Desktop: Horizontal) -->
|
||||
<div class="hidden md:block absolute top-[45px] left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-zinc-800 to-transparent -z-10">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/50 to-transparent animate-[data-flow-h_3s_linear_infinite]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Connecting Line (Mobile: Vertical) -->
|
||||
<div class="md:hidden absolute left-[45px] top-4 bottom-4 w-px bg-gradient-to-b from-transparent via-zinc-800 to-transparent -z-10">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-pink-500/50 to-transparent animate-[data-flow-v_4s_linear_infinite]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Generate -->
|
||||
<div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ email: 'generating...', active: true }">
|
||||
<div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-pink-500/50 group-hover:shadow-[0_0_30px_rgba(236,72,153,0.15)] shadow-xl">
|
||||
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-pink-500 transition-colors">01</div>
|
||||
<svg class="w-10 h-10 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col pt-2 md:items-center">
|
||||
<h3 class="text-xl font-bold text-white mb-3">Instant Generate</h3>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
|
||||
Click one button to mint a unique, randomized Gmail address instantly. No signups required.
|
||||
</p>
|
||||
<div class="w-full max-w-[200px] h-10 bg-white/5 border border-white/10 rounded-lg flex items-center justify-center px-4 overflow-hidden relative md:mx-auto">
|
||||
<span class="text-[11px] font-mono text-pink-400/80 truncate italic"
|
||||
x-init="setInterval(() => {
|
||||
const domains = ['@gmail.com', '@outlook.com', '@imail.com'];
|
||||
const prefix = Math.random().toString(36).substring(7);
|
||||
email = prefix + domains[Math.floor(Math.random()*domains.length)];
|
||||
}, 2500)" x-text="email"></span>
|
||||
<div class="absolute inset-x-0 bottom-0 h-[1px] bg-pink-500/30 scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Receive -->
|
||||
<div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ items: [1] }">
|
||||
<div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-emerald-500/50 group-hover:shadow-[0_0_30px_rgba(16,185,129,0.15)] shadow-xl">
|
||||
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-emerald-500 transition-colors">02</div>
|
||||
<svg class="w-10 h-10 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
||||
<div class="flex flex-col pt-2 md:items-center">
|
||||
<h3 class="text-xl font-bold text-white mb-3">Live Reception</h3>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
|
||||
Emails arrive in real-time. View attachments, links, and HTML content securely in your dashboard.
|
||||
</p>
|
||||
<div class="w-full max-w-[240px] md:mx-auto min-h-[40px]">
|
||||
<template x-for="i in items" :key="i">
|
||||
<div class="h-10 bg-white/5 border border-white/10 rounded-lg flex items-center gap-3 px-3 animate-[fade-in-right_0.5s_ease-out]">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
|
||||
<div class="flex-1 space-y-1 text-left">
|
||||
<div class="w-16 h-1.5 bg-zinc-700 rounded-full"></div>
|
||||
<div class="w-24 h-1 bg-zinc-800 rounded-full"></div>
|
||||
</div>
|
||||
<span class="text-[9px] font-bold text-emerald-500 uppercase tracking-tighter">New</span>
|
||||
</div>
|
||||
</template>
|
||||
<div x-init="setInterval(() => { items = [Date.now()] }, 5000)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Auto-Delete -->
|
||||
<div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ progress: 100 }">
|
||||
<div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-zinc-500/50 group-hover:shadow-[0_0_30px_rgba(255,255,255,0.05)] shadow-xl">
|
||||
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-white transition-colors">03</div>
|
||||
<svg class="w-10 h-10 text-zinc-400 group-hover:rotate-12 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
||||
</div>
|
||||
<div class="flex flex-col pt-2 md:items-center">
|
||||
<h3 class="text-xl font-bold text-white mb-3">Self Destruction</h3>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
|
||||
After 24 hours, all data is purged from our servers forever. No digital footprint left behind.
|
||||
</p>
|
||||
<div class="w-full max-w-[200px] h-2 bg-white/5 border border-white/10 rounded-full overflow-hidden md:mx-auto">
|
||||
<div class="h-full bg-gradient-to-r from-pink-500 to-emerald-500"
|
||||
:style="`width: ${progress}%; transition: width ${progress === 0 ? '0s' : '5s'} linear`"
|
||||
x-init="
|
||||
progress = 0;
|
||||
setTimeout(() => progress = 100, 100);
|
||||
setInterval(() => {
|
||||
progress = 0;
|
||||
setTimeout(() => progress = 100, 100);
|
||||
}, 6000);
|
||||
"></div>
|
||||
</div>
|
||||
<div class="mt-3 text-[10px] font-mono text-zinc-500 uppercase tracking-widest leading-none">Wiping Data...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes data-flow-h {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
@keyframes data-flow-v {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100%); }
|
||||
}
|
||||
@keyframes fade-in-right {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
151
resources/views/components/bento/testimonials.blade.php
Normal file
151
resources/views/components/bento/testimonials.blade.php
Normal file
@@ -0,0 +1,151 @@
|
||||
<section id="reviews" class="py-24 relative overflow-hidden">
|
||||
<!-- Background Accents -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-emerald-500/5 rounded-full blur-[120px] -z-10"></div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:px-8 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-16 md:mb-24 flex flex-col items-center text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
|
||||
<svg class="w-3 h-3 text-pink-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
<span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Wall of Love</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Testimonials Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-pink-500/30 hover:shadow-[0_0_40px_rgba(236,72,153,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=Alex+Rivers&background=18181b&color=ec4899" alt="Alex Rivers">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">Alex Rivers</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Security Researcher</p>
|
||||
</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."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-pink-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-emerald-500/30 hover:shadow-[0_0_40px_rgba(16,185,129,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=18181b&color=10b981" alt="Sarah Chen">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">Sarah Chen</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Full-stack Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed italic">
|
||||
"Setting up the API for our automated test suite took minutes. We can now spin up unique addresses for every CI/CD run. Truly a game-changer for our QA flow."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-emerald-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-pink-500/30 hover:shadow-[0_0_40px_rgba(236,72,153,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=Marco+V&background=18181b&color=ec4899" alt="Marco V">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">Marco V.</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Privacy Advocate</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed italic">
|
||||
"I love that I can have addresses on real Gmail nodes. It makes signing up for newsletters and trials so much smoother as they never get blocked by standard heuristics."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-pink-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 4 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-emerald-500/30 hover:shadow-[0_0_40px_rgba(16,185,129,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=James+Wynn&background=18181b&color=10b981" alt="James Wynn">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">James Wynn</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Head of QA at DevCo</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed italic">
|
||||
"The Premium Domains feature is worth every penny. Being able to use our internal domain for staging tests while keeping the emails temporary and private is exactly what we needed."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-emerald-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 5 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-pink-500/30 hover:shadow-[0_0_40px_rgba(236,72,153,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=Lila+K&background=18181b&color=ec4899" alt="Lila K">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">Lila K.</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Independent Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-zinc-400 text-sm leading-relaxed italic">
|
||||
"I love the clean UI. No cluttered ads, just my inbox and the emails I need. The auto-delete feature is perfect for someone like me who forgets to clear their test data."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-pink-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 6 -->
|
||||
<div class="group p-8 rounded-3xl bg-zinc-900/30 border border-white/5 backdrop-blur-xl relative transition-all duration-500 hover:border-emerald-500/30 hover:shadow-[0_0_40px_rgba(16,185,129,0.05)] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-12 h-12 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-500 overflow-hidden">
|
||||
<img src="https://ui-avatars.com/api/?name=David+L&background=18181b&color=10b981" alt="David L">
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">David L.</h4>
|
||||
<p class="text-[11px] text-zinc-500 uppercase tracking-widest font-medium">Platform Architect</p>
|
||||
</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."
|
||||
</p>
|
||||
<div class="mt-6 flex gap-1">
|
||||
@for($i=0; $i<5; $i++)
|
||||
<svg class="w-3 h-3 text-emerald-500/80" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
56
resources/views/components/layouts/marketing.blade.php
Normal file
56
resources/views/components/layouts/marketing.blade.php
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark scroll-smooth">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title ?? 'Imail — 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">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700|jetbrains-mono:400,500" rel="stylesheet" />
|
||||
|
||||
<!-- Vite -->
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
|
||||
<!-- GSAP -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script>
|
||||
// Clean-URL Smooth Scrolling
|
||||
document.addEventListener('click', (e) => {
|
||||
const anchor = e.target.closest('a[href^="#"]');
|
||||
if (anchor && anchor.getAttribute('href') !== '#') {
|
||||
e.preventDefault();
|
||||
const targetId = anchor.getAttribute('href').substring(1);
|
||||
const target = document.getElementById(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
||||
|
||||
/* Hide scrollbar for bento grid if needed */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 min-h-screen flex flex-col" x-data>
|
||||
<x-bento.nav />
|
||||
{{ $slot }}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user