From bdc1f299da6c5fa3489a2f56a881df6e6f508837 Mon Sep 17 00:00:00 2001
From: idevakk <219866223+idevakk@users.noreply.github.com>
Date: Tue, 3 Mar 2026 18:45:32 +0530
Subject: [PATCH] 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
---
 app/Livewire/LandingPage.php                  |  15 +
 app/Livewire/PrivacyPolicy.php                |  15 +
 resources/css/app.css                         |  11 +-
 .../views/components/bento/card.blade.php     |  45 ++
 .../components/bento/code-window.blade.php    |  19 +
 .../views/components/bento/cta.blade.php      |  83 ++++
 .../components/bento/dynamic-layout.blade.php |  76 ++++
 .../views/components/bento/faq.blade.php      | 178 ++++++++
 .../views/components/bento/footer.blade.php   |  77 ++++
 .../views/components/bento/grid.blade.php     |  22 +
 .../views/components/bento/hero.blade.php     | 223 +++++++++
 .../views/components/bento/nav.blade.php      |  84 ++++
 .../components/bento/page-header.blade.php    |  35 ++
 .../views/components/bento/pricing.blade.php  | 170 +++++++
 .../views/components/bento/steps.blade.php    | 132 ++++++
 .../components/bento/testimonials.blade.php   | 151 +++++++
 .../components/layouts/marketing.blade.php    |  56 +++
 .../views/livewire/landing-page.blade.php     | 424 ++++++++++++++++++
 .../views/livewire/privacy-policy.blade.php   |  36 ++
 routes/web.php                                |   3 +-
 tests/Feature/LandingPageTest.php             |  15 +
 21 files changed, 1867 insertions(+), 3 deletions(-)
 create mode 100644 app/Livewire/LandingPage.php
 create mode 100644 app/Livewire/PrivacyPolicy.php
 create mode 100644 resources/views/components/bento/card.blade.php
 create mode 100644 resources/views/components/bento/code-window.blade.php
 create mode 100644 resources/views/components/bento/cta.blade.php
 create mode 100644 resources/views/components/bento/dynamic-layout.blade.php
 create mode 100644 resources/views/components/bento/faq.blade.php
 create mode 100644 resources/views/components/bento/footer.blade.php
 create mode 100644 resources/views/components/bento/grid.blade.php
 create mode 100644 resources/views/components/bento/hero.blade.php
 create mode 100644 resources/views/components/bento/nav.blade.php
 create mode 100644 resources/views/components/bento/page-header.blade.php
 create mode 100644 resources/views/components/bento/pricing.blade.php
 create mode 100644 resources/views/components/bento/steps.blade.php
 create mode 100644 resources/views/components/bento/testimonials.blade.php
 create mode 100644 resources/views/components/layouts/marketing.blade.php
 create mode 100644 resources/views/livewire/landing-page.blade.php
 create mode 100644 resources/views/livewire/privacy-policy.blade.php
 create mode 100644 tests/Feature/LandingPageTest.php

diff --git a/app/Livewire/LandingPage.php b/app/Livewire/LandingPage.php
new file mode 100644
index 0000000..90e7729
--- /dev/null
+++ b/app/Livewire/LandingPage.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.marketing')]
+class LandingPage extends Component
+{
+    public function render()
+    {
+        return view('livewire.landing-page');
+    }
+}
diff --git a/app/Livewire/PrivacyPolicy.php b/app/Livewire/PrivacyPolicy.php
new file mode 100644
index 0000000..28d803c
--- /dev/null
+++ b/app/Livewire/PrivacyPolicy.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.marketing')]
+class PrivacyPolicy extends Component
+{
+    public function render()
+    {
+        return view('livewire.privacy-policy');
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index 4049939..98e8245 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -23,6 +23,13 @@
     --color-zinc-900: #171717;
     --color-zinc-950: #0a0a0a;
 
+    --color-app-bg: #09090B;
+    --color-app-surface: #18181B;
+    --color-app-border: #27272A;
+    --color-app-red: #EC6A5F;
+    --color-app-yellow: #F4BF4F;
+    --color-app-green: #61C554;
+
     --color-accent: var(--color-neutral-800);
     --color-accent-content: var(--color-neutral-800);
     --color-accent-foreground: var(--color-white);
@@ -77,7 +84,7 @@
 }
 
 [data-flux-label] {
-    @apply  !mb-0 !leading-tight;
+    @apply !mb-0 !leading-tight;
 }
 
 input:focus[data-flux-control],
@@ -88,4 +95,4 @@ select:focus[data-flux-control] {
 
 /* \[:where(&)\]:size-4 {
     @apply size-4;
-} */
+} */
\ No newline at end of file
diff --git a/resources/views/components/bento/card.blade.php b/resources/views/components/bento/card.blade.php
new file mode 100644
index 0000000..6a70ad4
--- /dev/null
+++ b/resources/views/components/bento/card.blade.php
@@ -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>
diff --git a/resources/views/components/bento/code-window.blade.php b/resources/views/components/bento/code-window.blade.php
new file mode 100644
index 0000000..b4d43cc
--- /dev/null
+++ b/resources/views/components/bento/code-window.blade.php
@@ -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>
diff --git a/resources/views/components/bento/cta.blade.php b/resources/views/components/bento/cta.blade.php
new file mode 100644
index 0000000..5f08979
--- /dev/null
+++ b/resources/views/components/bento/cta.blade.php
@@ -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>
diff --git a/resources/views/components/bento/dynamic-layout.blade.php b/resources/views/components/bento/dynamic-layout.blade.php
new file mode 100644
index 0000000..9af157c
--- /dev/null
+++ b/resources/views/components/bento/dynamic-layout.blade.php
@@ -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>
diff --git a/resources/views/components/bento/faq.blade.php b/resources/views/components/bento/faq.blade.php
new file mode 100644
index 0000000..419d5e7
--- /dev/null
+++ b/resources/views/components/bento/faq.blade.php
@@ -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>
diff --git a/resources/views/components/bento/footer.blade.php b/resources/views/components/bento/footer.blade.php
new file mode 100644
index 0000000..fa4aa07
--- /dev/null
+++ b/resources/views/components/bento/footer.blade.php
@@ -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">
+                &copy; 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>
diff --git a/resources/views/components/bento/grid.blade.php b/resources/views/components/bento/grid.blade.php
new file mode 100644
index 0000000..65c9f5b
--- /dev/null
+++ b/resources/views/components/bento/grid.blade.php
@@ -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>
diff --git a/resources/views/components/bento/hero.blade.php b/resources/views/components/bento/hero.blade.php
new file mode 100644
index 0000000..aa1d39f
--- /dev/null
+++ b/resources/views/components/bento/hero.blade.php
@@ -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 &middot; <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>
diff --git a/resources/views/components/bento/nav.blade.php b/resources/views/components/bento/nav.blade.php
new file mode 100644
index 0000000..e88ce3f
--- /dev/null
+++ b/resources/views/components/bento/nav.blade.php
@@ -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>
diff --git a/resources/views/components/bento/page-header.blade.php b/resources/views/components/bento/page-header.blade.php
new file mode 100644
index 0000000..935ae25
--- /dev/null
+++ b/resources/views/components/bento/page-header.blade.php
@@ -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>
diff --git a/resources/views/components/bento/pricing.blade.php b/resources/views/components/bento/pricing.blade.php
new file mode 100644
index 0000000..77e156e
--- /dev/null
+++ b/resources/views/components/bento/pricing.blade.php
@@ -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>
diff --git a/resources/views/components/bento/steps.blade.php b/resources/views/components/bento/steps.blade.php
new file mode 100644
index 0000000..829792a
--- /dev/null
+++ b/resources/views/components/bento/steps.blade.php
@@ -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>
diff --git a/resources/views/components/bento/testimonials.blade.php b/resources/views/components/bento/testimonials.blade.php
new file mode 100644
index 0000000..5e77de6
--- /dev/null
+++ b/resources/views/components/bento/testimonials.blade.php
@@ -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>
diff --git a/resources/views/components/layouts/marketing.blade.php b/resources/views/components/layouts/marketing.blade.php
new file mode 100644
index 0000000..a61469a
--- /dev/null
+++ b/resources/views/components/layouts/marketing.blade.php
@@ -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>
diff --git a/resources/views/livewire/landing-page.blade.php b/resources/views/livewire/landing-page.blade.php
new file mode 100644
index 0000000..ce3809a
--- /dev/null
+++ b/resources/views/livewire/landing-page.blade.php
@@ -0,0 +1,424 @@
+<div>
+    <x-bento.hero />
+    
+    <x-bento.grid>
+        <!-- Feature 1: Secure Temporary Email (Span 2 to make it wider) -->
+        <x-bento.card 
+            title="Secure Temporary Email" 
+            subtitle="Any temp mail that you create on our website is valid for as long we support that domain. We delete emails every 24 hours to ensure a reliable and clean inbox."
+            span="col-span-1 md:col-span-2 lg:col-span-2"
+        >
+            <x-slot:icon>
+                <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+            </x-slot:icon>
+            <div class="mt-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 font-mono text-sm text-zinc-300"
+                 x-data="{ 
+                    text: 'Encryption Enabled',
+                    display: '',
+                    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()',
+                    index: 0,
+                    typing: true,
+                    init() {
+                        this.animate();
+                    },
+                    animate() {
+                        let step = 0;
+                        const final = this.text;
+                        const interval = setInterval(() => {
+                            if (step < final.length * 2) {
+                                let result = '';
+                                for (let i = 0; i < final.length; i++) {
+                                    if (i < Math.floor(step / 2)) {
+                                        result += final[i];
+                                    } else {
+                                        result += this.chars[Math.floor(Math.random() * this.chars.length)];
+                                    }
+                                }
+                                this.display = result;
+                                step++;
+                            } else {
+                                this.display = final;
+                                clearInterval(interval);
+                                setTimeout(() => this.animate(), 4000);
+                            }
+                        }, 50);
+                    }
+                 }"
+            >
+                <div class="flex items-center gap-2 mb-2 text-green-400">
+                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                    <span class="flex items-center">
+                        <span x-text="display"></span>
+                        <span class="w-2 h-4 bg-green-400/50 ml-1 animate-[pulse_0.8s_infinite]">_</span>
+                    </span>
+                </div>
+                <div class="flex items-center gap-2 text-zinc-400 animate-[pulse_2s_infinite]">
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    <span>Auto-delete: 24h</span>
+                </div>
+            </div>
+        </x-bento.card>
+
+        <!-- Feature 2: Developer API / Code Window -->
+        <x-bento.card 
+            title="API Ready for Devs" 
+            subtitle="Integrate disposable emails into your testing suites instantly. Perfect for E2E testing."
+            span="col-span-1 md:col-span-1 lg:col-span-2"
+            rowSpan="row-span-1 md:row-span-2 lg:row-span-2"
+        >
+            <x-slot:icon>
+                <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                </svg>
+            </x-slot:icon>
+            
+            <div class="mt-4 relative h-[380px] w-full group/stack perspective-2000" 
+                 x-data="{ 
+                    active: 0, 
+                    snippets: [
+                        { name: 'sdk_example.py', lang: 'python' },
+                        { name: 'client.php', lang: 'php' },
+                        { name: 'api_bash.sh', lang: 'bash' }
+                    ],
+                    interval: null,
+                    init() {
+                        this.interval = setInterval(() => {
+                            this.active = (this.active + 1) % this.snippets.length;
+                        }, 3000);
+                    }
+                 }"
+            >
+                <!-- Snippet 1: Python (Initial Front) -->
+                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
+                     :class="{
+                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 0,
+                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 1,
+                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 2
+                     }">
+                    <x-bento.code-window filename="sdk_example.py">
+<span class="text-pink-400">import</span> imail
+<span class="text-pink-400">def</span> <span class="text-blue-400">test_signup</span>():
+    inbox = imail.<span class="text-blue-400">create_inbox</span>()
+    requests.<span class="text-blue-400">post</span>(<span class="text-green-400">'/register'</span>, json={
+        <span class="text-green-400">'email'</span>: inbox.address
+    })
+    msg = inbox.<span class="text-blue-400">wait_for_email</span>()
+    <span class="text-pink-400">assert</span> <span class="text-green-400">"Verify"</span> <span class="text-pink-400">in</span> msg.subject
+                    </x-bento.code-window>
+                </div>
+
+                <!-- Snippet 2: PHP (Initial Mid) -->
+                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
+                     :class="{
+                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 1,
+                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 2,
+                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 0
+                     }">
+                    <x-bento.code-window filename="client.php">
+<span class="text-pink-400">&lt;?php</span>
+<span class="text-pink-400">use</span> Imail\Client;
+
+<span class="text-zinc-500">// Initialize instant client</span>
+<span class="text-blue-400">$imail</span> = <span class="text-pink-400">new</span> <span class="text-blue-300">Client</span>(<span class="text-green-400">'sk_test_...'</span>);
+<span class="text-blue-400">$inbox</span> = <span class="text-blue-400">$imail</span>-><span class="text-blue-400">createInbox</span>();
+
+<span class="text-blue-400">$msg</span> = <span class="text-blue-400">$inbox</span>-><span class="text-blue-400">waitForEmail</span>();
+<span class="text-pink-400">assert</span>(<span class="text-blue-400">str_contains</span>(<span class="text-blue-400">$msg</span>->subject, <span class="text-green-400">'Welcome'</span>));
+                    </x-bento.code-window>
+                </div>
+
+                <!-- Snippet 3: cURL (Initial Back) -->
+                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
+                     :class="{
+                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 2,
+                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 0,
+                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 1
+                     }">
+                    <x-bento.code-window filename="api_bash.sh">
+<span class="text-zinc-500"># Create a new inbox via REST API</span>
+curl -X POST https://api.imail.com/v1/inbox \
+     -H <span class="text-green-400">"Authorization: Bearer $API_TOKEN"</span>
+
+<span class="text-zinc-500"># Listen for instant callbacks</span>
+curl https://api.imail.com/v1/inbox/$ID/events \
+     -H <span class="text-green-400">"Accept: text/event-stream"</span>
+                    </x-bento.code-window>
+                </div>
+            </div>
+        </x-bento.card>
+
+        <!-- Feature 3: Instant Disposable Email -->
+        <x-bento.card 
+            title="Instant Disposable Email" 
+            subtitle="Also known as tempmail, 10minutemail, or throwaway email. Your inbox is ready instantly, no registration required."
+            span="col-span-1 md:col-span-2 lg:col-span-1"
+        >
+            <x-slot:icon>
+                <div class="relative w-full h-full text-pink-500">
+                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                    </svg>
+                </div>
+            </x-slot:icon>
+            
+            <!-- Animated Address Shuffle Wrapper -->
+            <div class="h-full flex flex-col justify-center py-4">
+                <div class="mx-auto h-[34px] flex items-center gap-2 px-3 bg-white/5 border border-white/10 rounded-lg group-hover:border-pink-500/30 transition-colors"
+                     x-data="{ 
+                        addresses: ['user_82@imail.com', 'test_qa@imail.com', 'dev_99@imail.com', 'anon_7@imail.com'],
+                        current: 0,
+                        init() {
+                            setInterval(() => {
+                                this.current = (this.current + 1) % this.addresses.length;
+                            }, 3000);
+                        }
+                     }">
+                    <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
+                    <span class="text-[10px] sm:text-xs font-mono text-zinc-400 transition-all duration-500" x-text="addresses[current]"></span>
+                    <span class="ml-auto text-[8px] text-emerald-500/60 font-mono tracking-tighter uppercase">Ready</span>
+                </div>
+            </div>
+        </x-bento.card>
+
+        <!-- Feature 4: Premium Domains/Gmail -->
+        <x-bento.card 
+            title="Premium Domains" 
+            subtitle="Access to dedicated premium domains and genuine Gmail addresses to bypass tricky email filters."
+            span="col-span-1 md:col-span-1 lg:col-span-1"
+        >
+            <x-slot:icon>
+                <div class="relative w-full h-full text-pink-500">
+                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                    </svg>
+                </div>
+            </x-slot:icon>
+
+            <!-- Premium Domain Ticker Wrapper -->
+            <div class="h-full flex flex-col justify-center py-4">
+                <div class="mx-auto overflow-hidden h-[34px] bg-white/5 border border-white/10 rounded-lg group-hover:border-yellow-500/30 transition-colors"
+                     x-data="{ 
+                        domains: ['@gmail.com', '@outlook.com', '@pro.imail.me', '@vip.mail.com', '@apple.com'],
+                        active: 0,
+                        transitioning: true,
+                        init() {
+                            setInterval(() => {
+                                this.transitioning = true;
+                                this.active++;
+                                if (this.active === this.domains.length) {
+                                    setTimeout(() => {
+                                        this.transitioning = false;
+                                        this.active = 0;
+                                    }, 1000); // match duration
+                                }
+                            }, 3000);
+                        }
+                     }">
+                    <div class="flex flex-col flex-nowrap" 
+                         :class="transitioning ? 'transition-transform duration-1000 ease-in-out' : ''"
+                         :style="`transform: translateY(-${active * 34}px)`">
+                        <!-- Original Items -->
+                        <template x-for="(domain, index) in domains" :key="index">
+                            <div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
+                                <span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domain"></span>
+                                <span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
+                            </div>
+                        </template>
+                        <!-- Cloned First Item for seamless loop -->
+                        <div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
+                            <span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domains[0]"></span>
+                            <span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </x-bento.card>
+        
+        <!-- Feature 5: Fast Delivery -->
+        <x-bento.card 
+            title="Blazing Fast Delivery" 
+            subtitle="Experience fast message delivery without delays or restrictions, directly over Websockets."
+            span="col-span-1 md:col-span-2 lg:col-span-2"
+        >
+            <x-slot:icon>
+                <div class="relative w-full h-full text-pink-500">
+                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+                    </svg>
+                </div>
+            </x-slot:icon>
+            
+            <div class="mt-4 flex flex-col gap-6" x-data="{ 
+                latency: 24,
+                init() {
+                    setInterval(() => {
+                        this.latency = Math.floor(Math.random() * (48 - 12 + 1)) + 12;
+                    }, 1500);
+                }
+            }">
+                <!-- Data Stream Visualization -->
+                <div class="relative py-8 flex items-center justify-between">
+                    <!-- Progress Line -->
+                    <div class="absolute inset-x-0 h-0.5 bg-zinc-800"></div>
+                    <div class="absolute inset-x-0 h-0.5 bg-gradient-to-r from-pink-500/20 via-pink-500/50 to-emerald-500/20"></div>
+                    
+                    <!-- Rapid Packets -->
+                    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_ease-in]"></div>
+                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.3s_ease-in]"></div>
+                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.6s_ease-in]"></div>
+                    </div>
+
+                    <!-- Nodes -->
+                    <div class="relative z-10 w-3 h-3 rounded-full bg-pink-500 shadow-[0_0_12px_rgba(236,72,153,0.5)]"></div>
+                    <div class="relative z-10 w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]"></div>
+                </div>
+
+                <!-- Latency Stats -->
+                <div class="flex items-center justify-between px-4 py-2 border border-white/5 bg-white/5 rounded-lg font-mono">
+                    <div class="flex flex-col">
+                        <span class="text-[10px] text-zinc-500 uppercase tracking-wider">Protocol</span>
+                        <span class="text-xs text-zinc-300">WSS://STREAM</span>
+                    </div>
+                    <div class="flex flex-col items-end">
+                        <span class="text-[10px] text-zinc-500 uppercase tracking-wider">Latency</span>
+                        <span class="text-xs text-emerald-400 font-bold" x-text="latency + 'ms'"></span>
+                    </div>
+                </div>
+            </div>
+
+            <style>
+                @keyframes slide-right {
+                    0% { left: 0%; opacity: 0; }
+                    20% { opacity: 1; }
+                    80% { opacity: 1; }
+                    100% { left: 100%; opacity: 0; }
+                }
+            </style>
+        </x-bento.card>
+
+        <!-- Feature 6: Secure Attachments -->
+        <x-bento.card 
+            title="Secure Attachments" 
+            subtitle="Instantly view and securely download attachments received in your ephemeral inbox. Fully encrypted and private."
+            span="col-span-1 md:col-span-3 lg:col-span-2"
+        >
+            <x-slot:icon>
+                <div class="relative w-full h-full text-pink-500">
+                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                    </svg>
+                </div>
+            </x-slot:icon>
+            
+            <div class="mt-4 flex flex-col gap-3 group/scan" 
+                 x-data="{ 
+                    scanning: false,
+                    verified: false,
+                    meta: '2.4 MB • PDF Document',
+                    displayMeta: 'Encrypting...',
+                    chars: '01',
+                    init() {
+                        this.displayMeta = this.meta.split('').map(() => this.chars[Math.floor(Math.random()*2)]).join('');
+                        this.startScan();
+                    },
+                    startScan() {
+                        this.scanning = true;
+                        this.verified = false;
+                        
+                        // 1. Scanning Down-Up (2 seconds)
+                        // 2. Text Scrambling Reveal (starts after scan return)
+                        
+                        setTimeout(() => {
+                            // Start revealing text after scan return sweep is nearly done (at 1.6s)
+                            let step = 0;
+                            let revealInterval = setInterval(() => {
+                                let result = '';
+                                for(let i=0; i<this.meta.length; i++) {
+                                    if (i < step) {
+                                        result += this.meta[i];
+                                    } else {
+                                        result += this.chars[Math.floor(Math.random()*2)];
+                                    }
+                                }
+                                this.displayMeta = result;
+                                step++;
+                                
+                                if (step > this.meta.length) {
+                                    clearInterval(revealInterval);
+                                    this.verified = true;
+                                    this.scanning = false;
+                                    
+                                    // Restart loop after 4 seconds
+                                    setTimeout(() => this.startScan(), 4000);
+                                }
+                            }, 40);
+                        }, 1600); // 60% of return trip (total 2s down-up, so 1s+(0.6*1s) = 1.6s)
+                    }
+                 }">
+                <div class="relative overflow-hidden p-3 rounded-lg bg-white/5 border transition-all duration-500"
+                     :class="verified ? 'border-pink-500/30' : 'border-white/10'">
+                    
+                    <!-- Scanning Line (Pink) -->
+                    <div class="absolute inset-x-0 h-0.5 bg-pink-500/50 blur-[2px] z-20 pointer-events-none"
+                         :class="scanning ? 'animate-[scan-down-up_2s_linear_infinite]' : 'opacity-0'"></div>
+
+                    <div class="flex items-center gap-3">
+                        <div class="w-10 h-10 rounded bg-pink-500/10 flex items-center justify-center text-pink-500 transition-colors">
+                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                            </svg>
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2">
+                                <div class="text-xs font-medium text-zinc-200 truncate">contract_summary.pdf</div>
+                                <span x-show="verified" x-transition class="text-[8px] px-1 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded font-bold tracking-tighter uppercase">Verified</span>
+                            </div>
+                            <div class="text-[10px] font-mono text-zinc-500 h-4 flex items-center" x-text="displayMeta"></div>
+                        </div>
+                        <div class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 transition-all cursor-pointer hover:bg-pink-500/20"
+                             :class="verified ? 'text-pink-400' : 'hover:text-white'">
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <style>
+                @keyframes scan-down-up {
+                    0% { top: 0%; opacity: 0; }
+                    5% { opacity: 1; }
+                    50% { top: 100%; opacity: 1; }
+                    95% { opacity: 1; }
+                    100% { top: 0%; opacity: 0; }
+                }
+            </style>
+        </x-bento.card>
+    </x-bento.grid>
+
+    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out' })">
+        <x-bento.steps />
+    </div>
+
+    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
+        <x-bento.testimonials />
+    </div>
+
+    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
+        <x-bento.pricing />
+    </div>
+
+    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
+        <x-bento.faq />
+    </div>
+
+    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
+        <x-bento.cta />
+    </div>
+
+    <x-bento.footer />
+</div>
diff --git a/resources/views/livewire/privacy-policy.blade.php b/resources/views/livewire/privacy-policy.blade.php
new file mode 100644
index 0000000..16da4e5
--- /dev/null
+++ b/resources/views/livewire/privacy-policy.blade.php
@@ -0,0 +1,36 @@
+<x-bento.dynamic-layout 
+    title="Privacy Policy" 
+    subtitle="We take your data security as seriously as your inbox's privacy. Here's how we protect you."
+    breadcrumb="Privacy"
+>
+    <!-- Content Slot -->
+    <div class="legal-content">
+        <h2>1. Data Collection</h2>
+        <p>
+            Imail is designed to be privacy-first. We do not collect personal information like your name, physical address, or phone number. When you create a disposable inbox, we only generate a temporary identifier to route your mail.
+        </p>
+        <ul>
+            <li>No user registration required</li>
+            <li>No tracking cookies on your inbox</li>
+            <li>No persistent logs of sender metadata</li>
+        </ul>
+
+        <h2>2. Data Retention</h2>
+        <p>
+            Our core mission is ephemerality. All incoming emails and attachments are subject to our automated hard-wipe policy.
+        </p>
+        <p>
+            <strong>Default Policy:</strong> Emails are deleted after 24 hours. Once deleted, they are cryptographically unrecoverable.
+        </p>
+
+        <h2>3. Third-Party Services</h2>
+        <p>
+            We use high-reputation nodes (Gmail, Outlook) to provide a reliable service. These providers only see the outgoing traffic from our infrastructure and have no access to your individual temporary inbox contents.
+        </p>
+
+        <h2>4. Security Measures</h2>
+        <p>
+            All data at rest is encrypted using AES-256. Connections to our servers are strictly over TLS 1.3 to ensure your data is never intercepted in transit.
+        </p>
+    </div>
+</x-bento.dynamic-layout>
diff --git a/routes/web.php b/routes/web.php
index d357b6d..c990de9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,7 +7,8 @@ use App\Livewire\Settings\TwoFactor;
 use Illuminate\Support\Facades\Route;
 use Laravel\Fortify\Features;
 
-Route::get('/', fn(): \Illuminate\Contracts\View\View|\Illuminate\Contracts\View\Factory => view('welcome'))->name('home');
+Route::get('/', \App\Livewire\LandingPage::class)->name('home');
+Route::get('/privacy-policy', \App\Livewire\PrivacyPolicy::class)->name('privacy');
 
 Route::view('dashboard', 'dashboard')
     ->middleware(['auth', 'verified'])
diff --git a/tests/Feature/LandingPageTest.php b/tests/Feature/LandingPageTest.php
new file mode 100644
index 0000000..cc1c0c7
--- /dev/null
+++ b/tests/Feature/LandingPageTest.php
@@ -0,0 +1,15 @@
+<?php
+
+use App\Livewire\LandingPage;
+use Livewire\Livewire;
+
+it('loads the landing page component', function () {
+    $this->get('/')
+        ->assertOk()
+        ->assertSeeLivewire(LandingPage::class);
+});
+
+it('can render the landing page view', function () {
+    Livewire::test(LandingPage::class)
+        ->assertStatus(200);
+});