feat: implement adaptive multi-pane mailbox with utilities and security gates

- Added fully responsive 3-pane layout for Mailbox
- Integrated global cinematic Toast system in app shell
- Implemented Copy to Clipboard and QR Code modal utilities
- Added diverse mock email data for premium demonstration
- Implemented security gates for custom mailboxes and attachments
- Fixed critical 500 error for orphaned email selection
- Refined landing page hero CTA text

.agents/skills/bento-landing-page-generator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: bento-landing-page-generator
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+---
+
+
+# Laravel Bento SaaS Builder (Livewire Edition)
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, you must execute the following steps in exact order:
+
+1. **Context Initialization (Silent):** Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., `.cursorrules`, `.ai/rules`, or `.ai/architecture`). Ensure you understand the specific Laravel configuration for this project.
+2. **Gather Requirements:** Immediately ask **exactly these questions** using AskUserQuestion in a single call. Do not ask follow-ups.
+    * "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
+    * "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
+    * "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
+    * "What are 4 key features we can put into an asymmetric Bento Grid?"
+    * "What is the primary CTA?"
+3. **Execution:** Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions & State
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Snappy UI (Alpine.js):** All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (`x-data`, `x-on:click`, `x-transition`). The UI must never wait for a server round-trip to update visually.
+- **Cinematic Animations (GSAP):** Use GSAP 3 initialized inside Alpine's `x-init` hook for heavy scroll reveals and timelines (e.g., `x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })"`).
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.
+
+- **Stack:** Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
+- **Routing:** Define the route in `routes/web.php` pointing to a full-page Livewire component (e.g., `Route::get('/', App\Livewire\LandingPage::class);`).
+- **Frontend Directory:** - Main page: `app/Livewire/LandingPage.php` and `resources/views/livewire/landing-page.blade.php`.
+  - Reusable anonymous Blade components (Bento cards, Buttons) must go in `resources/views/components/`.
+- **Livewire Background Syncing:** For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's `$wire` object to make background calls without interrupting the user's flow (e.g., `@click="$wire.submitEmail(email)"` or using `@entangle`).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Livewire page component.
+2. Create the Livewire class (`app/Livewire/LandingPage.php`) and its corresponding Blade view.
+3. Scaffold the UI components in `resources/views/components/` (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
+4. Wire up Alpine.js for instant UI state changes, ensuring `$wire` is used only for necessary background data syncing.
+5. Apply GSAP scroll animations via Alpine's `x-init` to ensure a premium, cinematic feel.
+6. Provide the complete Laravel/Livewire code ready to run.

.agents/skills/cinematic-landing-page-builder/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: cinematic-landing-page-builder
+description: Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+---
+
+
+# Cinematic Landing Page Builder
+
+
+
+## Role
+
+
+Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
+2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
+3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
+4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
+
+---
+
+
+## Aesthetic Presets
+
+
+Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
+
+
+### Preset A — "Organic Tech" (Clinical Boutique)
+
+- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
+- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
+- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
+- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
+- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
+
+
+### Preset B — "Midnight Luxe" (Dark Editorial)
+
+- **Identity:** A private members' club meets a high-end watchmaker's atelier.
+- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
+- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
+- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
+- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
+
+
+### Preset C — "Brutalist Signal" (Raw Precision)
+
+- **Identity:** A control room for the future — no decoration, pure information density.
+- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
+- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
+- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
+- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
+
+
+### Preset D — "Vapor Clinic" (Neon Biotech)
+
+- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
+- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
+- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
+- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
+- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+These rules apply to ALL presets. They are what make the output premium.
+
+
+### Visual Texture
+
+- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
+- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
+
+
+### Micro-Interactions
+
+- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
+- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
+- Links and interactive elements get a `translateY(-1px)` lift on hover.
+
+
+### Animation Lifecycle
+
+- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
+- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
+- Stagger value: `0.08` for text, `0.15` for cards/containers.
+
+---
+
+
+## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
+
+
+
+### A. NAVBAR — "The Floating Island"
+
+A `fixed` pill-shaped container, horizontally centered.
+- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
+- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
+
+
+### B. HERO SECTION — "The Opening Shot"
+
+- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
+- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
+- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
+- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
+- CTA button below the headline, using the accent color.
+
+
+### C. FEATURES — "Interactive Functional Artifacts"
+
+Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
+
+**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
+
+**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
+
+**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
+
+All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
+
+
+### D. PHILOSOPHY — "The Manifesto"
+
+- Full-width section with the **dark color** as background.
+- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
+- **Typography:** Two contrasting statements. Pattern:
+  - "Most [industry] focuses on: [common approach]." — neutral, smaller.
+  - "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
+- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
+
+
+### E. PROTOCOL — "Sticky Stacking Archive"
+
+3 full-screen cards that stack on scroll.
+- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
+- **Each card gets a unique canvas/SVG animation:**
+  1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
+  2. A scanning horizontal laser-line moving across a grid of dots/cells.
+  3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
+- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
+
+
+### F. MEMBERSHIP / PRICING
+
+- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
+- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
+- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
+
+
+### G. FOOTER
+
+- Deep dark-colored background, `rounded-t-[4rem]`.
+- Grid layout: Brand name + tagline, navigation columns, legal links.
+- **"System Operational" status indicator** with a pulsing green dot and monospace label.
+
+---
+
+
+## Technical Requirements (NEVER CHANGE)
+
+
+- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
+- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
+- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
+- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
+- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
+- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 4 questions:
+
+1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
+2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
+3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
+4. Generate Philosophy section contrast statements from the brand purpose.
+5. Generate Protocol steps from the brand's process/methodology.
+6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
+7. Ensure every animation is wired, every interaction works, every image loads.
+
+**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."

.agents/skills/laravel-bento-saas-builder/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: laravel-bento-saas-builder
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
+---
+
+
+# Laravel Bento SaaS Builder
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What is the SaaS product name and one-line elevator pitch?"**
+2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards).
+3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode).
+4. **"What are 4 key features we can put into an asymmetric Bento Grid?"**
+5. **"What is the primary CTA?"**
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`.
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app.
+
+- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React.
+- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`.
+- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Inertia page.
+2. Create the main page component at `resources/js/Pages/Welcome.jsx`.
+3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer).
+4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel.
+5. Provide the complete Laravel/Inertia code ready to run.

.ai/skills/bento-landing-page-generator/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: bento-landing-page-generator
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+---
+
+# Laravel Bento SaaS Builder (Livewire Edition)
+
+## Role
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.
+
+## Agent Flow — MUST FOLLOW
+
+When the user asks to build a SaaS site, you must execute the following steps in exact order:
+
+1. **Context Initialization (Silent):** Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., `.cursorrules`, `.ai/rules`, or `.ai/architecture`). Ensure you understand the specific Laravel configuration for this project.
+2. **Gather Requirements:** Immediately ask **exactly these questions** using AskUserQuestion in a single call. Do not ask follow-ups.
+    * "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
+    * "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
+    * "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
+    * "What are 4 key features we can put into an asymmetric Bento Grid?"
+    * "What is the primary CTA?"
+3. **Execution:** Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.
+
+---
+
+## Aesthetic Presets
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+## Fixed Design System (NEVER CHANGE)
+
+### The "Bento" Rules
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+### Micro-Interactions & State
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Snappy UI (Alpine.js):** All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (`x-data`, `x-on:click`, `x-transition`). The UI must never wait for a server round-trip to update visually.
+- **Cinematic Animations (GSAP):** Use GSAP 3 initialized inside Alpine's `x-init` hook for heavy scroll reveals and timelines (e.g., `x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })"`).
+
+---
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.
+
+- **Stack:** Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
+- **Routing:** Define the route in `routes/web.php` pointing to a full-page Livewire component (e.g., `Route::get('/', App\Livewire\LandingPage::class);`).
+- **Frontend Directory:** - Main page: `app/Livewire/LandingPage.php` and `resources/views/livewire/landing-page.blade.php`.
+  - Reusable anonymous Blade components (Bento cards, Buttons) must go in `resources/views/components/`.
+- **Livewire Background Syncing:** For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's `$wire` object to make background calls without interrupting the user's flow (e.g., `@click="$wire.submitEmail(email)"` or using `@entangle`).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+## Build Sequence
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Livewire page component.
+2. Create the Livewire class (`app/Livewire/LandingPage.php`) and its corresponding Blade view.
+3. Scaffold the UI components in `resources/views/components/` (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
+4. Wire up Alpine.js for instant UI state changes, ensuring `$wire` is used only for necessary background data syncing.
+5. Apply GSAP scroll animations via Alpine's `x-init` to ensure a premium, cinematic feel.
+6. Provide the complete Laravel/Livewire code ready to run.

.ai/skills/cinematic-landing-page-builder/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: cinematic-landing-page-builder
+description: Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+---
+
+# Cinematic Landing Page Builder
+
+## Role
+
+Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
+
+## Agent Flow — MUST FOLLOW
+
+When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
+
+### Questions (all in one AskUserQuestion call)
+
+1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
+2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
+3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
+4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
+
+---
+
+## Aesthetic Presets
+
+Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
+
+### Preset A — "Organic Tech" (Clinical Boutique)
+- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
+- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
+- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
+- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
+- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
+
+### Preset B — "Midnight Luxe" (Dark Editorial)
+- **Identity:** A private members' club meets a high-end watchmaker's atelier.
+- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
+- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
+- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
+- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
+
+### Preset C — "Brutalist Signal" (Raw Precision)
+- **Identity:** A control room for the future — no decoration, pure information density.
+- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
+- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
+- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
+- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
+
+### Preset D — "Vapor Clinic" (Neon Biotech)
+- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
+- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
+- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
+- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
+- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
+
+---
+
+## Fixed Design System (NEVER CHANGE)
+
+These rules apply to ALL presets. They are what make the output premium.
+
+### Visual Texture
+- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
+- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
+
+### Micro-Interactions
+- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
+- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
+- Links and interactive elements get a `translateY(-1px)` lift on hover.
+
+### Animation Lifecycle
+- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
+- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
+- Stagger value: `0.08` for text, `0.15` for cards/containers.
+
+---
+
+## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
+
+### A. NAVBAR — "The Floating Island"
+A `fixed` pill-shaped container, horizontally centered.
+- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
+- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
+
+### B. HERO SECTION — "The Opening Shot"
+- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
+- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
+- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
+- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
+- CTA button below the headline, using the accent color.
+
+### C. FEATURES — "Interactive Functional Artifacts"
+Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
+
+**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
+
+**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
+
+**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
+
+All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
+
+### D. PHILOSOPHY — "The Manifesto"
+- Full-width section with the **dark color** as background.
+- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
+- **Typography:** Two contrasting statements. Pattern:
+  - "Most [industry] focuses on: [common approach]." — neutral, smaller.
+  - "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
+- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
+
+### E. PROTOCOL — "Sticky Stacking Archive"
+3 full-screen cards that stack on scroll.
+- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
+- **Each card gets a unique canvas/SVG animation:**
+  1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
+  2. A scanning horizontal laser-line moving across a grid of dots/cells.
+  3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
+- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
+
+### F. MEMBERSHIP / PRICING
+- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
+- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
+- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
+
+### G. FOOTER
+- Deep dark-colored background, `rounded-t-[4rem]`.
+- Grid layout: Brand name + tagline, navigation columns, legal links.
+- **"System Operational" status indicator** with a pulsing green dot and monospace label.
+
+---
+
+## Technical Requirements (NEVER CHANGE)
+
+- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
+- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
+- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
+- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
+- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
+- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
+
+---
+
+## Build Sequence
+
+After receiving answers to the 4 questions:
+
+1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
+2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
+3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
+4. Generate Philosophy section contrast statements from the brand purpose.
+5. Generate Protocol steps from the brand's process/methodology.
+6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
+7. Ensure every animation is wired, every interaction works, every image loads.
+
+**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."

.ai/skills/laravel-bento-saas-builder/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: laravel-bento-saas-builder
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
+---
+
+# Laravel Bento SaaS Builder
+
+## Role
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's ecosystem conventions.
+
+## Agent Flow — MUST FOLLOW
+
+When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build.
+
+### Questions (all in one AskUserQuestion call)
+
+1. **"What is the SaaS product name and one-line elevator pitch?"**
+2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards).
+3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode).
+4. **"What are 4 key features we can put into an asymmetric Bento Grid?"**
+5. **"What is the primary CTA?"**
+
+---
+
+## Aesthetic Presets
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+## Fixed Design System (NEVER CHANGE)
+
+### The "Bento" Rules
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+### Micro-Interactions
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`.
+
+---
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app.
+
+- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React.
+- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`.
+- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+## Build Sequence
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Inertia page.
+2. Create the main page component at `resources/js/Pages/Welcome.jsx`.
+3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer).
+4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel.
+5. Provide the complete Laravel/Inertia code ready to run.

.claude/skills/bento-landing-page-generator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: bento-landing-page-generator
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+---
+
+
+# Laravel Bento SaaS Builder (Livewire Edition)
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, you must execute the following steps in exact order:
+
+1. **Context Initialization (Silent):** Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., `.cursorrules`, `.ai/rules`, or `.ai/architecture`). Ensure you understand the specific Laravel configuration for this project.
+2. **Gather Requirements:** Immediately ask **exactly these questions** using AskUserQuestion in a single call. Do not ask follow-ups.
+    * "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
+    * "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
+    * "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
+    * "What are 4 key features we can put into an asymmetric Bento Grid?"
+    * "What is the primary CTA?"
+3. **Execution:** Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions & State
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Snappy UI (Alpine.js):** All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (`x-data`, `x-on:click`, `x-transition`). The UI must never wait for a server round-trip to update visually.
+- **Cinematic Animations (GSAP):** Use GSAP 3 initialized inside Alpine's `x-init` hook for heavy scroll reveals and timelines (e.g., `x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })"`).
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.
+
+- **Stack:** Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
+- **Routing:** Define the route in `routes/web.php` pointing to a full-page Livewire component (e.g., `Route::get('/', App\Livewire\LandingPage::class);`).
+- **Frontend Directory:** - Main page: `app/Livewire/LandingPage.php` and `resources/views/livewire/landing-page.blade.php`.
+  - Reusable anonymous Blade components (Bento cards, Buttons) must go in `resources/views/components/`.
+- **Livewire Background Syncing:** For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's `$wire` object to make background calls without interrupting the user's flow (e.g., `@click="$wire.submitEmail(email)"` or using `@entangle`).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Livewire page component.
+2. Create the Livewire class (`app/Livewire/LandingPage.php`) and its corresponding Blade view.
+3. Scaffold the UI components in `resources/views/components/` (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
+4. Wire up Alpine.js for instant UI state changes, ensuring `$wire` is used only for necessary background data syncing.
+5. Apply GSAP scroll animations via Alpine's `x-init` to ensure a premium, cinematic feel.
+6. Provide the complete Laravel/Livewire code ready to run.

.claude/skills/cinematic-landing-page-builder/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: cinematic-landing-page-builder
+description: Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+---
+
+
+# Cinematic Landing Page Builder
+
+
+
+## Role
+
+
+Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
+2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
+3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
+4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
+
+---
+
+
+## Aesthetic Presets
+
+
+Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
+
+
+### Preset A — "Organic Tech" (Clinical Boutique)
+
+- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
+- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
+- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
+- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
+- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
+
+
+### Preset B — "Midnight Luxe" (Dark Editorial)
+
+- **Identity:** A private members' club meets a high-end watchmaker's atelier.
+- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
+- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
+- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
+- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
+
+
+### Preset C — "Brutalist Signal" (Raw Precision)
+
+- **Identity:** A control room for the future — no decoration, pure information density.
+- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
+- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
+- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
+- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
+
+
+### Preset D — "Vapor Clinic" (Neon Biotech)
+
+- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
+- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
+- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
+- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
+- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+These rules apply to ALL presets. They are what make the output premium.
+
+
+### Visual Texture
+
+- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
+- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
+
+
+### Micro-Interactions
+
+- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
+- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
+- Links and interactive elements get a `translateY(-1px)` lift on hover.
+
+
+### Animation Lifecycle
+
+- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
+- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
+- Stagger value: `0.08` for text, `0.15` for cards/containers.
+
+---
+
+
+## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
+
+
+
+### A. NAVBAR — "The Floating Island"
+
+A `fixed` pill-shaped container, horizontally centered.
+- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
+- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
+
+
+### B. HERO SECTION — "The Opening Shot"
+
+- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
+- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
+- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
+- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
+- CTA button below the headline, using the accent color.
+
+
+### C. FEATURES — "Interactive Functional Artifacts"
+
+Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
+
+**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
+
+**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
+
+**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
+
+All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
+
+
+### D. PHILOSOPHY — "The Manifesto"
+
+- Full-width section with the **dark color** as background.
+- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
+- **Typography:** Two contrasting statements. Pattern:
+  - "Most [industry] focuses on: [common approach]." — neutral, smaller.
+  - "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
+- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
+
+
+### E. PROTOCOL — "Sticky Stacking Archive"
+
+3 full-screen cards that stack on scroll.
+- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
+- **Each card gets a unique canvas/SVG animation:**
+  1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
+  2. A scanning horizontal laser-line moving across a grid of dots/cells.
+  3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
+- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
+
+
+### F. MEMBERSHIP / PRICING
+
+- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
+- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
+- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
+
+
+### G. FOOTER
+
+- Deep dark-colored background, `rounded-t-[4rem]`.
+- Grid layout: Brand name + tagline, navigation columns, legal links.
+- **"System Operational" status indicator** with a pulsing green dot and monospace label.
+
+---
+
+
+## Technical Requirements (NEVER CHANGE)
+
+
+- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
+- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
+- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
+- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
+- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
+- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 4 questions:
+
+1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
+2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
+3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
+4. Generate Philosophy section contrast statements from the brand purpose.
+5. Generate Protocol steps from the brand's process/methodology.
+6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
+7. Ensure every animation is wired, every interaction works, every image loads.
+
+**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."

.claude/skills/laravel-bento-saas-builder/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: laravel-bento-saas-builder
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
+---
+
+
+# Laravel Bento SaaS Builder
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What is the SaaS product name and one-line elevator pitch?"**
+2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards).
+3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode).
+4. **"What are 4 key features we can put into an asymmetric Bento Grid?"**
+5. **"What is the primary CTA?"**
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`.
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app.
+
+- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React.
+- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`.
+- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Inertia page.
+2. Create the main page component at `resources/js/Pages/Welcome.jsx`.
+3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer).
+4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel.
+5. Provide the complete Laravel/Inertia code ready to run.

.github/workflows/tests.yml

@@ -15,6 +15,13 @@ jobs:
     runs-on: ubuntu-latest
     environment: Testing
 
+    services:
+      mailhog:
+        image: mailhog/mailhog
+        ports:
+          - 2525:1025
+          - 8025:8025
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -50,5 +57,8 @@ jobs:
       - name: Build Assets
         run: npm run build
 
+      - name: Wait for Mailhog
+        run: sleep 5
+
       - name: Run Tests
         run: ./vendor/bin/pest

.junie/guidelines.md

@@ -37,6 +37,9 @@ This project has domain-specific skills available. You MUST activate the relevan
 - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
 - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests.
 - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications.
+- `bento-landing-page-generator` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+- `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
 
 ## Conventions
 

.junie/skills/bento-landing-page-generator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: bento-landing-page-generator
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+---
+
+
+# Laravel Bento SaaS Builder (Livewire Edition)
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, you must execute the following steps in exact order:
+
+1. **Context Initialization (Silent):** Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., `.cursorrules`, `.ai/rules`, or `.ai/architecture`). Ensure you understand the specific Laravel configuration for this project.
+2. **Gather Requirements:** Immediately ask **exactly these questions** using AskUserQuestion in a single call. Do not ask follow-ups.
+    * "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
+    * "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
+    * "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
+    * "What are 4 key features we can put into an asymmetric Bento Grid?"
+    * "What is the primary CTA?"
+3. **Execution:** Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions & State
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Snappy UI (Alpine.js):** All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (`x-data`, `x-on:click`, `x-transition`). The UI must never wait for a server round-trip to update visually.
+- **Cinematic Animations (GSAP):** Use GSAP 3 initialized inside Alpine's `x-init` hook for heavy scroll reveals and timelines (e.g., `x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })"`).
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.
+
+- **Stack:** Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
+- **Routing:** Define the route in `routes/web.php` pointing to a full-page Livewire component (e.g., `Route::get('/', App\Livewire\LandingPage::class);`).
+- **Frontend Directory:** - Main page: `app/Livewire/LandingPage.php` and `resources/views/livewire/landing-page.blade.php`.
+  - Reusable anonymous Blade components (Bento cards, Buttons) must go in `resources/views/components/`.
+- **Livewire Background Syncing:** For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's `$wire` object to make background calls without interrupting the user's flow (e.g., `@click="$wire.submitEmail(email)"` or using `@entangle`).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Livewire page component.
+2. Create the Livewire class (`app/Livewire/LandingPage.php`) and its corresponding Blade view.
+3. Scaffold the UI components in `resources/views/components/` (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
+4. Wire up Alpine.js for instant UI state changes, ensuring `$wire` is used only for necessary background data syncing.
+5. Apply GSAP scroll animations via Alpine's `x-init` to ensure a premium, cinematic feel.
+6. Provide the complete Laravel/Livewire code ready to run.

.junie/skills/cinematic-landing-page-builder/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: cinematic-landing-page-builder
+description: Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+---
+
+
+# Cinematic Landing Page Builder
+
+
+
+## Role
+
+
+Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a site (or this file is loaded into a fresh project), immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
+2. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
+3. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
+4. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
+
+---
+
+
+## Aesthetic Presets
+
+
+Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
+
+
+### Preset A — "Organic Tech" (Clinical Boutique)
+
+- **Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
+- **Palette:** Moss `#2E4036` (Primary), Clay `#CC5833` (Accent), Cream `#F2F0E9` (Background), Charcoal `#1A1A1A` (Text/Dark)
+- **Typography:** Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: `"IBM Plex Mono"`.
+- **Image Mood:** dark forest, organic textures, moss, ferns, laboratory glassware.
+- **Hero line pattern:** "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)
+
+
+### Preset B — "Midnight Luxe" (Dark Editorial)
+
+- **Identity:** A private members' club meets a high-end watchmaker's atelier.
+- **Palette:** Obsidian `#0D0D12` (Primary), Champagne `#C9A84C` (Accent), Ivory `#FAF8F5` (Background), Slate `#2A2A35` (Text/Dark)
+- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
+- **Image Mood:** dark marble, gold accents, architectural shadows, luxury interiors.
+- **Hero line pattern:** "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)
+
+
+### Preset C — "Brutalist Signal" (Raw Precision)
+
+- **Identity:** A control room for the future — no decoration, pure information density.
+- **Palette:** Paper `#E8E4DD` (Primary), Signal Red `#E63B2E` (Accent), Off-white `#F5F3EE` (Background), Black `#111111` (Text/Dark)
+- **Typography:** Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: `"Space Mono"`.
+- **Image Mood:** concrete, brutalist architecture, raw materials, industrial.
+- **Hero line pattern:** "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)
+
+
+### Preset D — "Vapor Clinic" (Neon Biotech)
+
+- **Identity:** A genome sequencing lab inside a Tokyo nightclub.
+- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Ghost `#F0EFF4` (Background), Graphite `#18181B` (Text/Dark)
+- **Typography:** Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: `"Fira Code"`.
+- **Image Mood:** bioluminescence, dark water, neon reflections, microscopy.
+- **Hero line pattern:** "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+These rules apply to ALL presets. They are what make the output premium.
+
+
+### Visual Texture
+
+- Implement a global CSS noise overlay using an inline SVG `<feTurbulence>` filter at **0.05 opacity** to eliminate flat digital gradients.
+- Use a `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. No sharp corners anywhere.
+
+
+### Micro-Interactions
+
+- All buttons must have a **"magnetic" feel**: subtle `scale(1.03)` on hover with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.
+- Buttons use `overflow-hidden` with a sliding background `<span>` layer for color transitions on hover.
+- Links and interactive elements get a `translateY(-1px)` lift on hover.
+
+
+### Animation Lifecycle
+
+- Use `gsap.context()` within `useEffect` for ALL animations. Return `ctx.revert()` in the cleanup function.
+- Default easing: `power3.out` for entrances, `power2.inOut` for morphs.
+- Stagger value: `0.08` for text, `0.15` for cards/containers.
+
+---
+
+
+## Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)
+
+
+
+### A. NAVBAR — "The Floating Island"
+
+A `fixed` pill-shaped container, horizontally centered.
+- **Morphing Logic:** Transparent with light text at hero top. Transitions to `bg-[background]/60 backdrop-blur-xl` with primary-colored text and a subtle `border` when scrolled past the hero. Use `IntersectionObserver` or ScrollTrigger.
+- Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).
+
+
+### B. HERO SECTION — "The Opening Shot"
+
+- `100dvh` height. Full-bleed background image (sourced from Unsplash matching preset's `imageMood`) with a heavy **primary-to-black gradient overlay** (`bg-gradient-to-t`).
+- **Layout:** Content pushed to the **bottom-left third** using flex + padding.
+- **Typography:** Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
+- **Animation:** GSAP staggered `fade-up` (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
+- CTA button below the headline, using the accent color.
+
+
+### C. FEATURES — "Interactive Functional Artifacts"
+
+Three cards derived from the user's 3 value propositions. These must feel like **functional software micro-UIs**, not static marketing cards. Each card gets one of these interaction patterns:
+
+**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards that cycle vertically using `array.unshift(array.pop())` logic every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels derived from user's first value prop (generate 3 sub-labels).
+
+**Card 2 — "Telemetry Typewriter":** A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.
+
+**Card 3 — "Cursor Protocol Scheduler":** A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual `scale(0.95)` press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.
+
+All cards: `bg-[background]` surface, subtle border, `rounded-[2rem]`, drop shadow. Each card has a heading (sans bold) and a brief descriptor.
+
+
+### D. PHILOSOPHY — "The Manifesto"
+
+- Full-width section with the **dark color** as background.
+- A parallaxing organic texture image (Unsplash, `imageMood` keywords) at low opacity behind the text.
+- **Typography:** Two contrasting statements. Pattern:
+  - "Most [industry] focuses on: [common approach]." — neutral, smaller.
+  - "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
+- **Animation:** GSAP `SplitText`-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.
+
+
+### E. PROTOCOL — "Sticky Stacking Archive"
+
+3 full-screen cards that stack on scroll.
+- **Stacking Interaction:** Using GSAP ScrollTrigger with `pin: true`. As a new card scrolls into view, the card underneath scales to `0.9`, blurs to `20px`, and fades to `0.5`.
+- **Each card gets a unique canvas/SVG animation:**
+  1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
+  2. A scanning horizontal laser-line moving across a grid of dots/cells.
+  3. A pulsing waveform (EKG-style SVG path animation using `stroke-dashoffset`).
+- Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.
+
+
+### F. MEMBERSHIP / PRICING
+
+- Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
+- **Middle card pops:** Primary-colored background with an accent CTA button. Slightly larger scale or `ring` border.
+- If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.
+
+
+### G. FOOTER
+
+- Deep dark-colored background, `rounded-t-[4rem]`.
+- Grid layout: Brand name + tagline, navigation columns, legal links.
+- **"System Operational" status indicator** with a pulsing green dot and monospace label.
+
+---
+
+
+## Technical Requirements (NEVER CHANGE)
+
+
+- **Stack:** React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
+- **Fonts:** Load via Google Fonts `<link>` tags in `index.html` based on the selected preset.
+- **Images:** Use real Unsplash URLs. Select images matching the preset's `imageMood`. Never use placeholder URLs.
+- **File structure:** Single `App.jsx` with components defined in the same file (or split into `components/` if >600 lines). Single `index.css` for Tailwind directives + noise overlay + custom utilities.
+- **No placeholders.** Every card, every label, every animation must be fully implemented and functional.
+- **Responsive:** Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 4 questions:
+
+1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
+2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
+3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
+4. Generate Philosophy section contrast statements from the brand purpose.
+5. Generate Protocol steps from the brand's process/methodology.
+6. Scaffold the project: `npm create vite@latest`, install deps, write all files.
+7. Ensure every animation is wired, every interaction works, every image loads.
+
+**Execution Directive:** "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."

.junie/skills/laravel-bento-saas-builder/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: laravel-bento-saas-builder
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
+---
+
+
+# Laravel Bento SaaS Builder
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build.
+
+
+### Questions (all in one AskUserQuestion call)
+
+
+1. **"What is the SaaS product name and one-line elevator pitch?"**
+2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards).
+3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode).
+4. **"What are 4 key features we can put into an asymmetric Bento Grid?"**
+5. **"What is the primary CTA?"**
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`.
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app.
+
+- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React.
+- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`.
+- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Inertia page.
+2. Create the main page component at `resources/js/Pages/Welcome.jsx`.
+3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer).
+4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel.
+5. Provide the complete Laravel/Inertia code ready to run.

CLAUDE.md

@@ -37,6 +37,9 @@ This project has domain-specific skills available. You MUST activate the relevan
 - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
 - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests.
 - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications.
+- `bento-landing-page-generator` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+- `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
 
 ## Conventions
 

GEMINI.md

@@ -37,6 +37,9 @@ This project has domain-specific skills available. You MUST activate the relevan
 - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
 - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests.
 - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications.
+- `bento-landing-page-generator` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+- `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
+- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
 
 ## Conventions
 

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');
+    }
+}

app/Livewire/Mailbox.php

@@ -0,0 +1,255 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.app')]
+class Mailbox extends Component
+{
+    public $activeMailboxes = [
+        ['id' => 1, 'address' => 'idevakk@imail.com', 'expires_at' => '23:59:12', 'progress' => 90],
+        ['id' => 2, 'address' => 'tester_99@devmail.ai', 'expires_at' => '45:12:05', 'progress' => 40],
+    ];
+
+    public $currentMailboxId = 1;
+
+    public $activeFolder = 'inbox';
+
+    public $selectedEmailId = null;
+
+    public $search = '';
+
+    public $page = 1;
+
+    public $totalPages = 5;
+
+    // Create State
+    public $showCreateModal = false;
+
+    public $createType = 'random'; // random | custom
+
+    public $customUsername = '';
+
+    public $customDomain = 'imail.com';
+
+    public $availableDomains = ['imail.com', 'devmail.ai', 'temp-inbox.net'];
+
+    public function getEmailsProperty()
+    {
+        // Mock emails based on mailbox ID for demonstration
+        $emails = [
+            1 => [
+                [
+                    'id' => 1,
+                    'from_name' => 'GitHub Security',
+                    'from_email' => 'noreply@github.com',
+                    'subject' => '[GitHub] A new personal access token was created',
+                    'preview' => 'A new personal access token (classic) was recently added to your account.',
+                    'content' => '<p>Hi @idevakk,</p><p>A new personal access token (classic) was recently added to your account IDEVAKK.</p><p>If this was you, you can safely ignore this email.</p><p>If this was not you, please visit https://github.com/settings/tokens to revoke the token.</p>',
+                    'time' => '10:24 AM',
+                    'unread' => true,
+                    'flagged' => true,
+                    'attachments' => [],
+                ],
+                [
+                    'id' => 101,
+                    'from_name' => 'Linear',
+                    'from_email' => 'updates@linear.app',
+                    'subject' => 'New issue assigned: [UI-124] Fix sidebar overflow',
+                    'preview' => 'You have been assigned to a new issue in the UI project. Please review the details...',
+                    'content' => '<p>Hello,</p><p>You have been assigned to <strong>[UI-124] Fix sidebar overflow in mobile view</strong>.</p><p>Priority: High</p><p>Project: Imail Revamp</p><p>View details at https://linear.app/imail/issue/UI-124</p>',
+                    'time' => '11:45 AM',
+                    'unread' => true,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+                [
+                    'id' => 102,
+                    'from_name' => 'Canva',
+                    'from_email' => 'design@canva.com',
+                    'subject' => 'Your design "Imail Presentation" is ready',
+                    'preview' => 'Collaborate with your team on your latest design for the Imail product launch.',
+                    'content' => '<p>Hey there!</p><p>Your team is waiting for your feedback on the <strong>Imail Presentation</strong> design.</p><p>Check the latest comments and approve the final version.</p>',
+                    'time' => '9:12 AM',
+                    'unread' => false,
+                    'flagged' => false,
+                    'attachments' => [
+                        ['name' => 'presentation_v1.pdf', 'size' => '4.2 MB'],
+                    ],
+                ],
+                [
+                    'id' => 103,
+                    'from_name' => 'Figma',
+                    'from_email' => 'notifications@figma.com',
+                    'subject' => 'Atul Kumar mentioned you in "Mobile App (Draft)"',
+                    'preview' => '"@idevakk take a look at the revised QR modal design, let me know if..."',
+                    'content' => '<p><strong>Atul Kumar</strong> mentioned you in a comment on <strong>Mobile App (Draft)</strong>:</p><blockquote>"@idevakk take a look at the revised QR modal design, let me know if the proportions look right to you."</blockquote><p>Reply in Figma or view the comment online.</p>',
+                    'time' => '8:30 AM',
+                    'unread' => false,
+                    'flagged' => true,
+                    'attachments' => [],
+                ],
+            ],
+            2 => [
+                [
+                    'id' => 2,
+                    'from_name' => 'Stripe',
+                    'from_email' => 'support@stripe.com',
+                    'subject' => 'Your weekly payment report',
+                    'preview' => 'Your weekly report for the period of Feb 24 - Mar 2 is now available.',
+                    'content' => '<p>Hello,</p><p>Your weekly report for the period of Feb 24 - Mar 2 is now available in your dashboard.</p><p>Total Volume: $12,450.00</p><p>View the full report details online.</p>',
+                    'time' => 'Yesterday',
+                    'unread' => false,
+                    'flagged' => false,
+                    'attachments' => [
+                        ['name' => 'report_mar_02.pdf', 'size' => '1.2 MB'],
+                    ],
+                ],
+                [
+                    'id' => 201,
+                    'from_name' => 'Postmark',
+                    'from_email' => 'alerts@postmarkapp.com',
+                    'subject' => 'Outbound volume spike detected',
+                    'preview' => 'We noticed a sudden increase in outbound emails from your "Production" server.',
+                    'content' => '<p>Alert: Outbound volume spike.</p><p>Server: Production</p><p>We detected 5,000+ emails sent in the last hour. Please ensure this is expected activity.</p>',
+                    'time' => 'Yesterday',
+                    'unread' => true,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+                [
+                    'id' => 202,
+                    'from_name' => 'Vercel',
+                    'from_email' => 'deployments@vercel.com',
+                    'subject' => 'Team "idevakk" deployment successful',
+                    'preview' => 'Production deployment for the imail-frontend project has completed.',
+                    'content' => '<p>Your deployment is live!</p><p>Project: imail-frontend</p><p>Command: <code>npm run build</code></p><p>View your deployment here: https://imail.app</p>',
+                    'time' => 'Mar 2',
+                    'unread' => false,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+            ],
+        ];
+
+        return $emails[$this->currentMailboxId] ?? [
+            [
+                'id' => 3,
+                'from_name' => 'Slack',
+                'from_email' => 'notifications@slack.com',
+                'subject' => 'You have 12 unread messages from your team',
+                'preview' => 'Atul Kumar: "Did you check the new API endpoints? We need them for..."',
+                'content' => '<p>You have new activity in Slack.</p><ul><li><strong>#dev-chat</strong>: 8 new messages</li><li><strong>#announcements</strong>: 4 new messages</li></ul>',
+                'time' => 'Mar 1',
+                'unread' => true,
+                'flagged' => false,
+                'attachments' => [],
+            ],
+            [
+                'id' => 301,
+                'from_name' => 'Zoom',
+                'from_email' => 'no-reply@zoom.us',
+                'subject' => 'Meeting Reminder: "Sprint Planning"',
+                'preview' => 'Your Sprint Planning meeting is scheduled to start in 15 minutes.',
+                'content' => '<p>Friendly reminder that your Sprint Planning call starts soon.</p><p>Link: https://zoom.us/j/123456789</p>',
+                'time' => 'Feb 28',
+                'unread' => false,
+                'flagged' => false,
+                'attachments' => [],
+            ],
+        ];
+    }
+
+    public function selectEmail($id)
+    {
+        $this->selectedEmailId = $id;
+    }
+
+    public function switchMailbox($id)
+    {
+        $this->currentMailboxId = $id;
+        $this->selectedEmailId = null;
+        $this->search = '';
+    }
+
+    public function createMailbox()
+    {
+        $newAddress = $this->createType === 'random'
+            ? fake()->userName().'_'.rand(10, 99).'@'.$this->availableDomains[array_rand($this->availableDomains)]
+            : $this->customUsername.'@'.$this->customDomain;
+
+        $newId = count($this->activeMailboxes) + 1;
+        $this->activeMailboxes[] = [
+            'id' => $newId,
+            'address' => $newAddress,
+            'expires_at' => '24:00:00',
+            'progress' => 100,
+        ];
+
+        $this->currentMailboxId = $newId;
+        $this->showCreateModal = false;
+        $this->customUsername = '';
+    }
+
+    public function deleteMailbox($id)
+    {
+        $this->activeMailboxes = array_filter($this->activeMailboxes, fn ($m) => $m['id'] !== $id);
+
+        if ($this->currentMailboxId === $id) {
+            $this->currentMailboxId = count($this->activeMailboxes) > 0 ? reset($this->activeMailboxes)['id'] : null;
+            $this->selectedEmailId = null;
+        }
+    }
+
+    public function downloadEmail($id)
+    {
+        // Mock download logic
+        $this->js("alert('Downloading email #{$id}... (Mock Action)')");
+    }
+
+    public function printEmail($id)
+    {
+        // Mock print logic
+        $this->js('window.print()');
+    }
+
+    public function deleteEmail($id)
+    {
+        // Mock delete logic
+        $this->js("alert('Email #{$id} deleted successfully! (Mock Action)')");
+        $this->selectedEmailId = null;
+    }
+
+    public function nextPage()
+    {
+        if ($this->page < $this->totalPages) {
+            $this->page++;
+        }
+    }
+
+    public function previousPage()
+    {
+        if ($this->page > 1) {
+            $this->page--;
+        }
+    }
+
+    public function generateQrCode($address)
+    {
+        // Mock QR generation with a slight delay
+        usleep(800000); // 800ms
+        $this->dispatch('qrCodeGenerated', address: $address);
+    }
+
+    public function render()
+    {
+        $currentMailbox = collect($this->activeMailboxes)->firstWhere('id', $this->currentMailboxId);
+
+        return view('livewire.mailbox', [
+            'emails' => $this->getEmailsProperty(),
+            'currentMailbox' => $currentMailbox,
+        ]);
+    }
+}

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');
+    }
+}

boost.json

@@ -20,6 +20,9 @@
         "pest-testing",
         "tailwindcss-development",
         "filament-db-config",
-        "developing-with-fortify"
+        "developing-with-fortify",
+        "bento-landing-page-generator",
+        "cinematic-landing-page-builder",
+        "laravel-bento-saas-builder"
     ]
 }

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);

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>

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>

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>

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>

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>

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>

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>

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})">
+                    <a href="/mailbox" 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">
+                            Create mailbox 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>
+                    </a>
+                    <a href="/api-docs" class="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-white/5 border border-white/10 rounded-full transition-all hover:bg-white/10">
+                        Imail in 100 seconds <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </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>

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="/mailbox" 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>

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>

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>

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>

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>

resources/views/components/layouts/app.blade.php

@@ -1,5 +1,95 @@
-<x-layouts.app.sidebar :title="$title ?? null">
+<!DOCTYPE html>
-    <flux:main>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark h-full">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{{ $title ?? 'Mailbox — Imail' }}</title>
+        
+        <!-- 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>
+
+        <style>
+            body { font-family: 'Inter', sans-serif; }
+            .font-mono { font-family: 'JetBrains Mono', monospace; }
+        </style>
+    </head>
+    <body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 h-full overflow-hidden"
+          x-data="{ 
+            toasts: [],
+            addToast(msg, type = 'success') {
+                const id = Date.now();
+                this.toasts.push({ id, msg, type });
+                setTimeout(() => {
+                    this.toasts = this.toasts.filter(t => t.id !== id);
+                }, 4000);
+            }
+          }"
+          @notify.window="addToast($event.detail.message, $event.detail.type)">
+        
         {{ $slot }}
-    </flux:main>
+
-</x-layouts.app.sidebar>
+        <!-- Global Toast Notifications -->
+        <div class="fixed bottom-6 right-6 z-[100] flex flex-col gap-3 pointer-events-none">
+            <template x-for="toast in toasts" :key="toast.id">
+                <div x-show="true"
+                     x-transition:enter="transition ease-out duration-500"
+                     x-transition:enter-start="opacity-0 translate-x-12 scale-95"
+                     x-transition:enter-end="opacity-100 translate-x-0 scale-100"
+                     x-transition:leave="transition ease-in duration-300"
+                     x-transition:leave-start="opacity-100 scale-100"
+                     x-transition:leave-end="opacity-0 scale-90"
+                     class="pointer-events-auto min-w-[320px] p-4 rounded-2xl border backdrop-blur-xl shadow-2xl flex items-center gap-4 relative overflow-hidden group"
+                     :class="{
+                         'bg-emerald-500/10 border-emerald-500/20 text-emerald-100': toast.type === 'success',
+                         'bg-blue-500/10 border-blue-500/20 text-blue-100': toast.type === 'info',
+                         'bg-amber-500/10 border-amber-500/20 text-amber-100': toast.type === 'warning',
+                         'bg-rose-500/10 border-rose-500/20 text-rose-100': toast.type === 'danger'
+                     }">
+                    <!-- Background Glow -->
+                    <div class="absolute inset-0 opacity-20 group-hover:opacity-30 transition-opacity"
+                         :class="{
+                             'bg-emerald-500/10': toast.type === 'success',
+                             'bg-blue-400/10': toast.type === 'info',
+                             'bg-amber-400/10': toast.type === 'warning',
+                             'bg-rose-400/10': toast.type === 'danger'
+                         }"></div>
+
+                    <!-- Icon -->
+                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 shadow-lg"
+                         :class="{
+                             'bg-emerald-500/20 text-emerald-400': toast.type === 'success',
+                             'bg-blue-500/20 text-blue-400': toast.type === 'info',
+                             'bg-amber-500/20 text-amber-400': toast.type === 'warning',
+                             'bg-rose-500/20 text-rose-400': toast.type === 'danger'
+                         }">
+                        <svg x-show="toast.type === 'success'" class="w-5 h-5" 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>
+                        <svg x-show="toast.type === 'info'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                        <svg x-show="toast.type === 'warning'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                        <svg x-show="toast.type === 'danger'" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                    </div>
+
+                    <div class="flex-1 min-w-0">
+                        <div class="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-0.5" x-text="toast.type"></div>
+                        <div class="text-[11px] font-bold tracking-wide" x-text="toast.msg"></div>
+                    </div>
+
+                    <button @click="toasts = toasts.filter(t => t.id !== toast.id)" 
+                            class="p-1.5 rounded-lg hover:bg-white/5 text-zinc-600 hover:text-white transition-all">
+                        <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="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
+            </template>
+        </div>
+
+        <!-- Lightweight QR Code Library -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
+    </body>
+</html>

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>

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>

resources/views/livewire/mailbox.blade.php

@@ -0,0 +1,600 @@
+<div class="flex h-full bg-zinc-950 overflow-hidden relative" 
+     x-data="{ 
+        sidebarOpen: window.innerWidth >= 1280, 
+        selectedId: @entangle('selectedEmailId'), 
+        mobileView: 'list',
+        qrModal: false,
+        qrAddress: '',
+        generateQR(address) {
+            this.qrAddress = address;
+            this.qrModal = true;
+            this.$nextTick(() => {
+                new QRious({
+                    element: document.getElementById('qr-canvas'),
+                    value: address,
+                    size: 200,
+                    background: 'transparent',
+                    foreground: '#09090b',
+                    level: 'H'
+                });
+            });
+        }
+     }"
+     x-init="$watch('selectedId', value => { if(value && window.innerWidth < 1024) mobileView = 'detail' })"
+     @resize.window="if (window.innerWidth >= 1280) sidebarOpen = true">
+    
+    <!-- Mobile Sidebar Backdrop -->
+    <div x-show="sidebarOpen" 
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="sidebarOpen = false"
+         class="fixed inset-0 bg-zinc-950/60 backdrop-blur-sm z-40 xl:hidden"></div>
+
+    <!-- Component Sidebar -->
+    <aside class="fixed xl:relative inset-y-0 left-0 flex-shrink-0 bg-zinc-900/40 border-r border-white/5 flex flex-col transition-all duration-300 z-50 xl:z-30"
+           :class="{
+               'w-64 translate-x-0 shadow-2xl xl:shadow-none': sidebarOpen,
+               '-translate-x-full xl:translate-x-0': !sidebarOpen,
+               'xl:w-64': sidebarOpen && window.innerWidth >= 1280,
+               'xl:w-20': !sidebarOpen && window.innerWidth >= 1280
+           }">
+        <!-- Sidebar Header -->
+        <div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-lg bg-pink-500 flex items-center justify-center text-white shadow-[0_0_15px_rgba(236,72,153,0.3)]">
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+                </div>
+                <span class="font-bold text-lg tracking-tight text-white transition-opacity" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">Imail</span>
+            </div>
+            
+            <!-- Mobile Close Button -->
+            <button @click="sidebarOpen = false" class="xl:hidden p-1.5 rounded-lg hover:bg-white/5 text-zinc-500 hover:text-white transition-all">
+                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+        </div>
+
+        <!-- Sidebar Content -->
+        <div class="flex-1 overflow-y-auto py-6 px-4 space-y-8 scrollbar-hide">
+            <!-- Navigation -->
+            <nav class="space-y-1">
+                <button @click="$wire.set('activeFolder', 'inbox')" 
+                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group"
+                        :class="$wire.activeFolder === 'inbox' ? 'bg-pink-500/10 text-pink-500 border border-pink-500/20 shadow-[0_0_20px_rgba(236,72,153,0.05)]' : 'text-zinc-500 hover:text-zinc-300 hover:bg-white/5'">
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
+                    <span class="font-medium text-sm" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">Inbox</span>
+                    <span class="ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded bg-pink-500/20 text-pink-500" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">1</span>
+                </button>
+            </nav>
+
+            <!-- Active Mailbox Control -->
+            <div :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
+                @if($currentMailbox)
+                    <div class="p-4 rounded-2xl bg-zinc-900 border border-white/5 relative overflow-hidden group mb-4">
+                        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div>
+                         <div class="flex items-center justify-between mb-3">
+                            <div class="flex items-center gap-2">
+                                <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+                                <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <button @click="generateQR('{{ $currentMailbox['address'] }}')"
+                                        class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all"
+                                        title="QR Code">
+                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                        <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
+                                    </svg>
+                                </button>
+                                <button @click="navigator.clipboard.writeText('{{ $currentMailbox['address'] }}'); addToast('Address copied to clipboard', 'success')"
+                                        class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all"
+                                        title="Copy Address">
+                                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                                </button>
+                                <button wire:click="deleteMailbox({{ $currentMailbox['id'] }})" 
+                                        wire:confirm="Are you sure you want to delete this session? All emails will be lost."
+                                        class="p-1.5 rounded-lg bg-rose-500/10 text-rose-500/60 hover:text-rose-500 hover:bg-rose-500/20 transition-all"
+                                        title="Delete Session">
+                                    <svg class="w-3.5 h-3.5" 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>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="text-[11px] font-mono text-white break-all mb-4">{{ $currentMailbox['address'] }}</div>
+                        <div class="space-y-2">
+                            <div class="flex items-center justify-between text-[10px]">
+                                <span class="text-zinc-500 uppercase font-black tracking-tighter">Expires In</span>
+                                <span class="text-pink-500 font-mono">{{ $currentMailbox['expires_at'] }}</span>
+                            </div>
+                            <div class="h-1 bg-white/5 rounded-full overflow-hidden">
+                                <div class="h-full bg-gradient-to-r from-pink-500 to-emerald-500" style="width: {{ $currentMailbox['progress'] }}%"></div>
+                            </div>
+                        </div>
+                    </div>
+                @endif
+
+                <!-- Controls Layout -->
+                <div class="space-y-6">
+                    <!-- Create New Button -->
+                    <button @click="$wire.set('showCreateModal', true)" 
+                            class="w-full py-3 px-4 rounded-2xl bg-white/5 border border-white/10 text-white text-xs font-bold flex items-center justify-center gap-2 hover:bg-white/10 hover:border-pink-500/30 transition-all group">
+                        <div class="w-5 h-5 rounded-lg bg-pink-500/20 text-pink-500 flex items-center justify-center group-hover:scale-110 transition-transform">
+                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+                        </div>
+                        Create New Mailbox
+                    </button>
+
+                    <!-- Active List -->
+                    <div class="space-y-3">
+                        <h4 class="text-[10px] font-bold text-zinc-600 uppercase tracking-[0.2em] px-3 mb-4">Your Sessions</h4>
+                        <div class="space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-hide">
+                            @foreach($activeMailboxes as $mailbox)
+                                @if($mailbox['id'] !== $currentMailboxId)
+                                    <button wire:click="switchMailbox({{ $mailbox['id'] }})" 
+                                            class="w-full p-3 rounded-xl bg-zinc-900/40 border border-white/5 text-left group hover:border-white/20 transition-all flex items-center justify-between">
+                                        <div class="min-w-0 flex-1">
+                                            <div class="text-[10px] font-mono text-zinc-400 truncate group-hover:text-white transition-colors">{{ $mailbox['address'] }}</div>
+                                            <div class="text-[9px] text-zinc-600 font-bold uppercase mt-1">{{ $mailbox['expires_at'] }} remaining</div>
+                                        </div>
+                                        <svg class="w-4 h-4 text-zinc-700 group-hover:text-pink-500 translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all" 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>
+                                    </button>
+                                @endif
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Sidebar Footer -->
+        <a href="{{ auth()->check() ? route('settings.profile') : route('login') }}" 
+           class="p-4 border-t border-white/5 flex items-center gap-4 hover:bg-white/5 transition-all group">
+            <div class="w-10 h-10 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-400 group-hover:border-pink-500/30 group-hover:bg-pink-500/10 group-hover:text-pink-500 transition-all">
+                @auth
+                    <span class="text-xs font-bold">{{ auth()->user()->initials() }}</span>
+                @else
+                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+                @endauth
+            </div>
+            <div class="flex-1 min-w-0" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
+                <div class="text-xs font-bold text-white truncate group-hover:text-pink-500 transition-colors">
+                    @auth
+                        {{ auth()->user()->name ?? auth()->user()->email }}
+                    @else
+                        Anonymous
+                    @endauth
+                </div>
+                <div class="text-[9px] text-zinc-500 uppercase font-black tracking-tighter">
+                    @auth
+                        {{ auth()->user()->hasRole('admin') ? 'ADMIN USER' : (auth()->user()->hasRole('premium') ? 'PREMIUM USER' : 'FREE USER') }}
+                    @else
+                        GUEST USER
+                    @endauth
+                </div>
+            </div>
+        </a>
+    </aside>
+
+    <!-- Email List Column -->
+    <div class="w-full lg:w-96 flex-shrink-0 bg-app-bg border-r border-white/5 flex flex-col z-20 transition-all duration-300"
+         :class="{'hidden lg:flex': mobileView === 'detail' && selectedId}">
+        
+        <!-- List Header -->
+        <div class="h-16 flex items-center px-4 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10 gap-3">
+            <!-- Sidebar Toggle (Mobile/Tablet) -->
+            <button @click="sidebarOpen = !sidebarOpen" 
+                    class="xl:hidden p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400 hover:text-white transition-all">
+                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+
+            <div class="flex-1 relative group">
+                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 group-focus-within: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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                <input type="text" placeholder="Search mail..." 
+                       class="w-full h-10 bg-white/5 border border-white/5 rounded-xl pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/30 focus:border-pink-500/20 transition-all placeholder:text-zinc-600">
+            </div>
+            <button wire:click="$refresh()" 
+                    class="w-10 h-10 rounded-xl bg-white/5 border border-white/5 flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/10 transition-all group overflow-hidden"
+                    x-data="{ refreshing: false }"
+                    @click="refreshing = true; setTimeout(() => refreshing = false, 750)">
+                <svg class="w-5 h-5" 
+                     :class="{ 'animate-cinematic-spin': refreshing }"
+                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                </svg>
+            </button>
+        </div>
+
+        <!-- List Content -->
+        <div class="flex-1 overflow-y-auto divide-y divide-white/5 scrollbar-hide">
+            @foreach($emails as $email)
+                <div @click="$wire.selectEmail({{ $email['id'] }}); mobileView = 'detail'"
+                     class="p-5 cursor-pointer transition-all relative group"
+                     :class="selectedId === {{ $email['id'] }} ? 'bg-pink-500/5' : 'hover:bg-white/[0.02]'">
+                    <!-- Active Indicator -->
+                    <div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 transition-transform duration-300"
+                         :class="selectedId === {{ $email['id'] }} ? 'scale-y-100' : 'scale-y-0'"></div>
+                    
+                    <div class="flex items-start justify-between gap-4 mb-2">
+                        <div class="flex items-center gap-3 min-w-0">
+                            @if($email['unread'])
+                                <div class="w-2 h-2 rounded-full bg-pink-500 shadow-[0_0_8px_rgba(236,72,153,0.5)] flex-shrink-0"></div>
+                            @endif
+                            <h4 class="text-sm font-bold truncate transition-colors" :class="selectedId === {{ $email['id'] }} ? 'text-white' : 'text-zinc-200 group-hover:text-white'">
+                                {{ $email['from_name'] }}
+                            </h4>
+                        </div>
+                        <span class="text-[10px] font-bold text-zinc-600 uppercase whitespace-nowrap">{{ $email['time'] }}</span>
+                    </div>
+
+                    <div class="text-xs font-semibold text-zinc-300 mb-2 truncate group-hover:text-zinc-100 transition-colors">
+                        {{ $email['subject'] }}
+                    </div>
+                    
+                    <p class="text-[11px] text-zinc-500 line-clamp-2 leading-relaxed font-medium">
+                        {{ $email['preview'] }}
+                    </p>
+
+                    @if(count($email['attachments']) > 0)
+                        <div class="mt-3 flex items-center gap-2">
+                            <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-white/5 border border-white/5 text-[9px] font-mono text-zinc-400">
+                                <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="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"></path></svg>
+                                {{ $email['attachments'][0]['name'] }}
+                            </div>
+                        </div>
+                    @endif
+                </div>
+            @endforeach
+        </div>
+
+        <!-- Sticky Pagination -->
+        <div class="h-14 flex items-center justify-between px-4 border-t border-white/5 bg-zinc-950/40 backdrop-blur-xl shrink-0">
+            <button wire:click="previousPage" 
+                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest"
+                    {{ $page <= 1 ? 'disabled' : '' }}>
+                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+                Prev
+            </button>
+            
+            <div class="flex items-center gap-1.5">
+                <span class="text-[10px] font-black text-white/90 uppercase tracking-[0.2em]">{{ $page }}</span>
+                <span class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">/</span>
+                <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{{ $totalPages }}</span>
+            </div>
+
+            <button wire:click="nextPage" 
+                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest"
+                    {{ $page >= $totalPages ? 'disabled' : '' }}>
+                Next
+                <svg class="w-3 h-3" 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>
+            </button>
+        </div>
+    </div>
+        <!-- QR Code Modal -->
+    <div x-show="qrModal" 
+         class="fixed inset-0 z-[100] flex items-center justify-center p-4 lg:p-8"
+         x-cloak>
+        <div x-show="qrModal" 
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             @click="qrModal = false"
+             class="absolute inset-0 bg-zinc-950/80 backdrop-blur-xl"></div>
+
+        <div x-show="qrModal" 
+             x-transition:enter="transition ease-out duration-500"
+             x-transition:enter-start="opacity-0 scale-95 translate-y-8"
+             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+             x-transition:leave="transition ease-in duration-300"
+             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
+             x-transition:leave-end="opacity-0 scale-95 translate-y-8"
+             class="w-full max-w-[320px] bg-zinc-900 border border-white/10 rounded-[32px] p-6 relative overflow-hidden shadow-2xl">
+            
+            <!-- Glow Background -->
+            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-48 h-48 bg-pink-500/10 rounded-full blur-[60px] -z-10"></div>
+            
+            <div class="text-center">
+                <div class="w-12 h-12 rounded-xl bg-pink-500/10 text-pink-500 flex items-center justify-center mx-auto mb-4">
+                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
+                    </svg>
+                </div>
+                
+                <h3 class="text-lg font-black text-white mb-1 tracking-tight uppercase">Mailbox QR</h3>
+                <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-6">Scan to access</p>
+                
+                <div class="p-4 bg-white rounded-2xl mb-6 flex justify-center shadow-inner inline-block">
+                    <canvas id="qr-canvas"></canvas>
+                </div>
+
+                <div class="p-3 rounded-xl bg-zinc-950/50 border border-white/5 font-mono text-[9px] text-zinc-400 break-all mb-6" x-text="qrAddress"></div>
+
+                <button @click="qrModal = false" 
+                        class="w-full py-3.5 rounded-xl bg-white text-zinc-950 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-zinc-100 transition-all">
+                    Dismiss
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Email Detail Column -->
+    <main class="flex-1 flex flex-col min-w-0 bg-zinc-950/50 backdrop-blur-md relative z-10 transition-all duration-300"
+          :class="{'hidden lg:flex': mobileView === 'list' || !selectedId}">
+        
+        @php $currentEmail = $selectedEmailId ? collect($emails)->firstWhere('id', $selectedEmailId) : null; @endphp
+        @if($currentEmail)
+            
+            <!-- Detail Header -->
+            <div class="h-16 flex items-center px-6 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10">
+                <button @click="mobileView = 'list'" class="lg:hidden mr-4 p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400">
+                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+                </button>
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-2">
+                        <button wire:click="downloadEmail({{ $selectedEmailId }})" 
+                                class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group" title="Download Email">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                        </button>
+                        <button wire:click="printEmail({{ $selectedEmailId }})"
+                                class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group" title="Print Email">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2m8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg>
+                        </button>
+                    </div>
+                    <div class="h-6 w-px bg-white/5"></div>
+                    <button wire:click="deleteEmail({{ $selectedEmailId }})"
+                            class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-rose-500 hover:bg-rose-500/10 transition-all" title="Delete Email">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Detail Content -->
+            <div class="flex-1 overflow-y-auto p-8 lg:p-12 scrollbar-hide">
+                <div class="max-w-3xl">
+                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
+                        <div class="flex items-center gap-4">
+                            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white shadow-xl">
+                                {{ substr($currentEmail['from_name'], 0, 1) }}
+                            </div>
+                            <div>
+                                <h2 class="text-xl font-bold text-white mb-1">{{ $currentEmail['from_name'] }}</h2>
+                                <div class="text-xs font-mono text-zinc-500 uppercase tracking-widest">{{ $currentEmail['from_email'] }}</div>
+                            </div>
+                        </div>
+                        <div class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest px-3 py-1.5 rounded-full border border-white/5 bg-white/5">
+                            Received {{ $currentEmail['time'] }}
+                        </div>
+                    </div>
+
+                    <h1 class="text-2xl md:text-3xl font-black tracking-tight text-white mb-8 leading-tight">
+                        {{ $currentEmail['subject'] }}
+                    </h1>
+
+                    <div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4 font-medium mb-12">
+                        {!! $currentEmail['content'] !!}
+                    </div>
+
+                    @if(count($currentEmail['attachments']) > 0)
+                        <div class="mt-12 pt-8 border-t border-white/5">
+                            <h4 class="text-[10px] font-bold text-white uppercase tracking-[0.2em] mb-4">Attachments ({{ count($currentEmail['attachments']) }})</h4>
+                            
+                            <div class="relative group/attachments">
+                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 @guest blur-[3px] pointer-events-none select-none grayscale opacity-60 @endguest">
+                                    @foreach($currentEmail['attachments'] as $attachment)
+                                        <div class="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-pink-500/30 transition-all group">
+                                            <div class="flex items-center gap-4">
+                                                <div class="w-10 h-10 rounded-xl bg-zinc-900 flex items-center justify-center text-pink-500">
+                                                    <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>
+                                                    <div class="text-xs font-bold text-white truncate">{{ $attachment['name'] }}</div>
+                                                    <div class="text-[9px] font-mono text-zinc-500 uppercase">{{ $attachment['size'] }}</div>
+                                                </div>
+                                            </div>
+                                            @auth
+                                                <button class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-400 hover:text-white transition-all">
+                                                    <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>
+                                                </button>
+                                            @endauth
+                                        </div>
+                                    @endforeach
+                                </div>
+
+                                @guest
+                                    <div class="absolute inset-0 flex items-center justify-center z-20">
+                                        <a href="{{ route('login') }}" class="group/btn relative px-6 py-3 rounded-2xl bg-pink-500 text-white font-bold text-xs uppercase tracking-widest shadow-[0_0_20px_rgba(236,72,153,0.3)] hover:scale-105 transition-all">
+                                            <span class="relative z-10 flex items-center gap-2">
+                                                <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+                                                Login to Download
+                                            </span>
+                                        </a>
+                                    </div>
+                                @endguest
+                            </div>
+                        </div>
+                    @endif
+                </div>
+            </div>
+        @else
+            <!-- Empty State -->
+            <div class="flex-1 flex flex-col items-center justify-center p-12 text-center">
+                <div class="w-24 h-24 rounded-3xl bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-700 mb-8 relative">
+                    <div class="absolute inset-0 bg-pink-500/5 rounded-3xl blur-2xl"></div>
+                    <svg class="w-12 h-12 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
+                <h3 class="text-xl font-bold text-white mb-3">Select an email to read</h3>
+                <p class="text-zinc-500 max-w-xs text-sm leading-relaxed">Choose one of your disposable emails from the list to view its full content and secure attachments.</p>
+            </div>
+        @endif
+    </main>
+        <!-- Create Mailbox Modal -->
+        <div x-show="$wire.showCreateModal" 
+             style="display: none;"
+             x-data="{ tab: @entangle('createType') }"
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-zinc-950/80 backdrop-blur-sm">
+            
+            <div @click.away="$wire.set('showCreateModal', false)"
+                 class="w-full max-w-md bg-zinc-900 border border-white/10 rounded-[32px] overflow-hidden shadow-2xl relative">
+                <div class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-emerald-500/5 pointer-events-none"></div>
+                
+                <div class="p-8 relative z-10">
+                    <div class="flex items-center justify-between mb-8">
+                        <div>
+                            <h3 class="text-xl font-bold text-white mb-1">New Mailbox</h3>
+                            <p class="text-xs text-zinc-500 font-medium">Create a new secure disposable identity.</p>
+                        </div>
+                        <button @click="$wire.set('showCreateModal', false)" class="text-zinc-500 hover:text-white 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="M6 18L18 6M6 6l12 12" /></svg>
+                        </button>
+                    </div>
+
+                    <!-- Type Selector -->
+                    <div class="flex p-1 bg-zinc-950 rounded-2xl mb-8 border border-white/5">
+                        <button @click="tab = 'random'" 
+                                class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300"
+                                :class="tab === 'random' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
+                            Random
+                        </button>
+                        <button @click="tab = 'custom'" 
+                                class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300 flex items-center justify-center gap-2"
+                                :class="tab === 'custom' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
+                            Custom
+                            @if(!auth()->check())
+                                <svg class="w-3.5 h-3.5 text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+                            @endif
+                        </button>
+                    </div>
+
+                    <!-- Tab Content Container -->
+                    <div class="grid grid-cols-1 grid-rows-1 min-h-[220px]">
+                        <div x-show="tab === 'custom'" 
+                             x-transition:enter="transition ease-out duration-300 delay-150"
+                             x-transition:enter-start="opacity-0 translate-y-2"
+                             x-transition:enter-end="opacity-100 translate-y-0"
+                             x-transition:leave="transition ease-in duration-150"
+                             x-transition:leave-start="opacity-100 translate-y-0"
+                             x-transition:leave-end="opacity-0 -translate-y-2"
+                             wire:key="tab-custom"
+                             class="col-start-1 row-start-1  relative">
+                            
+                            @auth
+                                <div class="space-y-6">
+                                    <div>
+                                        <label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Username</label>
+                                        <input type="text" wire:model="customUsername" placeholder="e.g. dev-test-01" 
+                                               class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all font-mono">
+                                    </div>
+                                    <div>
+                                        <label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Domain Selection</label>
+                                        <div class="relative group">
+                                            <select wire:model="customDomain" 
+                                                    class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all appearance-none text-zinc-300 cursor-pointer">
+                                                @foreach($availableDomains as $domain)
+                                                    <option value="{{ $domain }}">@ {{ $domain }}</option>
+                                                @endforeach
+                                            </select>
+                                            <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" 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>
+                                        </div>
+                                    </div>
+                                </div>
+                            @else
+                                <div class="h-full min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
+                                    <div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
+                                    <div class="relative z-10 flex flex-col items-center">
+                                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)]">
+                                            <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+                                            </svg>
+                                        </div>
+                                        <h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Login Required</h4>
+                                        <p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">Sign in to create custom aliases and use premium domains.</p>
+                                    </div>
+                                </div>
+                            @endauth
+                        </div>
+
+                        <div x-show="tab === 'random'" 
+                             x-transition:enter="transition ease-out duration-300 delay-150"
+                             x-transition:enter-start="opacity-0 translate-y-2"
+                             x-transition:enter-end="opacity-100 translate-y-0"
+                             x-transition:leave="transition ease-in duration-150"
+                             x-transition:leave-start="opacity-100 translate-y-0"
+                             x-transition:leave-end="opacity-0 -translate-y-2"
+                             wire:key="tab-random"
+                             class="col-start-1 row-start-1 min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
+                            <div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
+                            <div class="relative z-10 flex flex-col items-center">
+                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)] group-hover:scale-110 transition-transform duration-500">
+                                    <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.456-2.454L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+                                    </svg>
+                                </div>
+                                <h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Random Identity</h4>
+                                <p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">We'll generate a secure, high-entropy unique address for you instantly.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Global Action / Login Button -->
+                    <div class="mt-8">
+                        @if(!auth()->check())
+                            <div x-show="tab === 'custom'">
+                                <a href="{{ route('login') }}" class="w-full py-4 rounded-2xl bg-white text-zinc-950 font-black text-sm uppercase tracking-widest hover:bg-zinc-100 hover:shadow-[0_0_30px_rgba(255,255,255,0.1)] transition-all flex items-center justify-center gap-3 relative z-10">
+                                    <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+                                    Login to Unlock
+                                </a>
+                            </div>
+                            <button wire:click="createMailbox" 
+                                    x-show="tab === 'random'"
+                                    class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10">
+                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                                Generate Mailbox
+                            </button>
+                        @else
+                            <button wire:click="createMailbox" 
+                                    class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10">
+                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                                Generate Mailbox
+                            </button>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    <style>
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        
+        @keyframes slide-right {
+            from { opacity: 0; transform: translateX(-10px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+
+        .animate-cinematic-spin {
+            animation: cinematic-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes cinematic-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</div>

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>

routes/web.php

@@ -7,7 +7,9 @@ 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('/mailbox', \App\Livewire\Mailbox::class)->name('mailbox');
+Route::get('/privacy-policy', \App\Livewire\PrivacyPolicy::class)->name('privacy');
 
 Route::view('dashboard', 'dashboard')
     ->middleware(['auth', 'verified'])

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);
+});