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
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>
|
||||
Reference in New Issue
Block a user