fix: clear email selection when returning to list on mobile

- 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,305 @@
+<?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 $viewMode = 'text'; // text | html
+
+    public $allowRemoteContent = false;
+
+    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
+        $baseEmails = [
+            1 => [ // Inbox
+                [
+                    '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.',
+                    'body_html' => '<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>',
+                    'body_text' => "Hi @idevakk,\n\nA new personal access token (classic) was recently added to your account IDEVAKK.\n\nIf this was you, you can safely ignore this email.\n\nIf this was not you, please visit https://github.com/settings/tokens to revoke the token.",
+                    '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...',
+                    'body_html' => '<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>',
+                    'body_text' => "Hello,\n\nYou have been assigned to [UI-124] Fix sidebar overflow in mobile view.\n\nPriority: High\nProject: Imail Revamp\n\nView details at https://linear.app/imail/issue/UI-124",
+                    'time' => '11:45 AM',
+                    'unread' => true,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+                [
+                    'id' => 104,
+                    'from_name' => 'Unsplash Updates',
+                    'from_email' => 'hello@unsplash.com',
+                    'subject' => 'Featured Photos: Cinematic Landscapes',
+                    'preview' => 'Check out this week\'s curated collection of cinematic landscape photography...',
+                    'body_html' => '<p>Hello Zemailer,</p><p>We have curated some new cinematic landscapes for your next project:</p><div style="margin: 20px 0;"><img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=800&q=80" style="width: 100%; border-radius: 12px; margin-bottom: 15px;" alt="Mountain Landscape"><img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80" style="width: 100%; border-radius: 12px;" alt="Lake Landscape"></div><p>Feel free to use them in your designs!</p>',
+                    'body_text' => "Hello Zemailer,\n\nWe have curated some new cinematic landscapes for your next project.\n\n[Images are blocked by default in privacy mode]\n\nCheck them out on Unsplash!",
+                    'time' => '7:45 AM',
+                    'unread' => true,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+                // Generated Inbox items to reach 15
+            ],
+            2 => [ // Sent
+                [
+                    '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.',
+                    'body_html' => '<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>',
+                    'body_text' => "Hello,\n\nYour weekly report for the period of Feb 24 - Mar 2 is now available in your dashboard.\n\nTotal Volume: $12,450.00\n\nView the full report details online.",
+                    'time' => 'Yesterday',
+                    'unread' => false,
+                    'flagged' => false,
+                    'attachments' => [['name' => 'report_mar_02.pdf', 'size' => '1.2 MB']],
+                ],
+            ],
+            3 => [ // Notifications
+                [
+                    '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..."',
+                    'body_html' => '<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>',
+                    'body_text' => "You have new activity in Slack.\n\n#dev-chat: 8 new messages\n#announcements: 4 new messages",
+                    'time' => 'Mar 1',
+                    'unread' => true,
+                    'flagged' => false,
+                    'attachments' => [],
+                ],
+            ],
+        ];
+
+        // Fill Inbox (MB 1) to 15
+        for ($i = 5; $i <= 18; $i++) {
+            $baseEmails[1][] = [
+                'id' => 1000 + $i,
+                'from_name' => "Partner $i",
+                'from_email' => "partner-$i@example.com",
+                'subject' => "Follow-up proposal #$i",
+                'preview' => "I wanted to check in regarding our previous discussion on project $i...",
+                'body_html' => "<p>Hello,</p><p>This is a follow-up email #$i regarding our partnership.</p>",
+                'body_text' => "Hello,\n\nThis is a follow-up email #$i regarding our partnership.",
+                'time' => 'Mar 1',
+                'unread' => $i % 3 === 0,
+                'flagged' => $i % 5 === 0,
+                'attachments' => [],
+            ];
+        }
+
+        // Fill Sent (MB 2) to 15
+        for ($i = 1; $i <= 14; $i++) {
+            $baseEmails[2][] = [
+                'id' => 2000 + $i,
+                'from_name' => 'Me',
+                'from_email' => 'idevakk@imail.com',
+                'subject' => "Re: Project Sync $i",
+                'preview' => "Sounds good, let's proceed with the plan we discussed for sprint $i.",
+                'body_html' => "<p>Hi team,</p><p>Update on project $i: everything is on track.</p>",
+                'body_text' => "Hi team,\n\nUpdate on project $i: everything is on track.",
+                'time' => 'Feb 26',
+                'unread' => false,
+                'flagged' => $i % 4 === 0,
+                'attachments' => [],
+            ];
+        }
+
+        // Fill Others (MB 3) to 15
+        for ($i = 1; $i <= 14; $i++) {
+            $baseEmails[3][] = [
+                'id' => 3000 + $i,
+                'from_name' => "System Notification $i",
+                'from_email' => 'noreply@system.com',
+                'subject' => "Security Alert $i: New Login",
+                'preview' => "We detected a new login to your account from a new device on day $i...",
+                'body_html' => "<p>A new login was detected on your account.</p><p>Location: City $i</p>",
+                'body_text' => "A new login was detected on your account.\n\nLocation: City $i",
+                'time' => 'Feb 25',
+                'unread' => $i % 2 === 0,
+                'flagged' => false,
+                'attachments' => [],
+            ];
+        }
+
+        $allData = $baseEmails[$this->currentMailboxId] ?? $baseEmails[3];
+        $total = count($allData);
+        $this->totalPages = ceil($total / 10);
+
+        // Ensure page is within bounds
+        if ($this->page > $this->totalPages && $this->totalPages > 0) {
+            $this->page = $this->totalPages;
+        }
+
+        return array_slice($allData, ($this->page - 1) * 10, 10);
+    }
+
+    public function selectEmail($id)
+    {
+        $this->selectedEmailId = $id;
+        $this->viewMode = 'text';
+        $this->allowRemoteContent = false;
+
+        // Simulate cinematic loading
+        usleep(500000); // 500ms
+    }
+
+    public function switchMailbox($id)
+    {
+        $this->currentMailboxId = $id;
+        $this->selectedEmailId = null;
+        $this->search = '';
+        $this->page = 1;
+    }
+
+    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++;
+            $this->selectedEmailId = null;
+        }
+    }
+
+    public function previousPage()
+    {
+        if ($this->page > 1) {
+            $this->page--;
+            $this->selectedEmailId = null;
+        }
+    }
+
+    public function generateQrCode($address)
+    {
+        // Mock QR generation with a slight delay
+        usleep(800000); // 800ms
+        $this->dispatch('qrCodeGenerated', address: $address);
+    }
+
+    public function getProcessedContent($email)
+    {
+        $content = $email['body_html'];
+        $isText = $this->viewMode === 'text';
+
+        // Fallback to HTML if text is selected but body_text is empty
+        if ($isText && ! empty($email['body_text'])) {
+            return trim(e($email['body_text']));
+        }
+
+        if ($isText) {
+            // If fallback occurred, we sanitize the HTML to text
+            return trim(strip_tags($content));
+        }
+
+        if (! $this->allowRemoteContent) {
+            // Block remote assets by replacing src with data-src for img tags
+            return preg_replace('/<img\s[^>]*?\bsrc\s*=\s*([\'"])(.*?)\1/i', '<img $2 data-blocked-src=$1$2$1 src="data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1 1\'%3E%3C/svg%3E" class="blocked-remote-asset shadow-sm border border-white/5 opacity-50"', $content);
+        }
+
+        return $content;
+    }
+
+    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"
     ]
 }

laravel_webhook_handover.md

@@ -0,0 +1,162 @@
+# MailOps Webhook Handover Document
+
+This document provides the exact specifications needed to implement the receiving end of the MailOps email synchronization system within the Laravel application.
+
+## 1. Webhook Endpoint Specification
+
+The MailOps worker will push new emails to this exact endpoint on your Laravel server:
+
+*   **URL:** `POST https://your-laravel-app.com/api/webhooks/incoming_email`
+*   **Headers:**
+    *   `Content-Type: application/json`
+    *   `Authorization: Bearer <CONFIGURED_WEBHOOK_SECRET>` (You must configure this secret in both MailOps and Laravel).
+
+### A. Expected JSON Payload (With Attachments)
+
+```json
+{
+  "hash": "a1b2c3d4e5f6g7h8i9j0...",
+  "metadata": {
+    "hash": "a1b2c3d4e5f6g7h8i9j0...",
+    "recipientEmail": "user@example.com",
+    "recipientName": "John Doe",
+    "senderEmail": "alert@service.com",
+    "senderName": "Service Alerts",
+    "domain": "example.com",
+    "subject": "Important Notification",
+    "received_at": "2026-02-26T17:35:00Z", 
+    "attachments": [
+      {
+        "filename": "invoice.pdf",
+        "mimeType": "application/pdf",
+        "size": 102400,
+        "s3_path": "mail-attachments/2026/02/26/hash_invoice.pdf"
+      }
+    ],
+    "attachmentSize": 102400
+  },
+  "bodyText": "Plain text content...",
+  "bodyHtml": "<html>HTML content...</html>" 
+}
+```
+*(Note: `received_at` is in ISO 8601 format ending with `Z` to explicitly denote UTC. `bodyHtml` and `bodyText` are completely separated from the metadata to optimize database payload sizes).*
+
+### B. Expected JSON Payload (NO Attachments)
+When an email has no attachments, the `attachments` array will be empty and `attachmentSize` will be zero. Also, depending on the email client, `bodyHtml` or `bodyText` might be `null`.
+
+```json
+{
+  "hash": "b2c3d4e5f6g7h8i9j0a1...",
+  "metadata": {
+    "hash": "b2c3d4e5f6g7h8i9j0a1...",
+    "recipientEmail": "user@example.com",
+    "recipientName": "",
+    "senderEmail": "friend@service.com",
+    "senderName": "Friend",
+    "domain": "example.com",
+    "subject": "Quick Question",
+    "received_at": "2026-02-26T17:38:12Z",
+    "attachments": [],
+    "attachmentSize": 0
+  },
+  "bodyText": "Hey, are we still fast approaching the deadline?",
+  "bodyHtml": null 
+}
+```
+
+---
+
+## 2. Laravel Implementation Checklist
+
+When you switch to the Laravel project, you need to build the following:
+
+### Step 1: Route & Middleware
+Define the API route and protect it with a simple Bearer token check.
+```php
+// routes/api.php
+Route::post('/webhooks/incoming_email', [EmailWebhookController::class, 'handle'])
+    ->middleware('verify.webhook.secret');
+```
+
+### Step 2: The Controller
+The controller persists the metadata to MariaDB and the heavy body to MongoDB. **Crucially**, it also checks if the MongoDB TTL index exists, and if not, automatically creates it using the value defined in your Laravel `.env` file (e.g., `EMAIL_BODY_TTL_SECONDS=259200`).
+
+```php
+// app/Http/Controllers/EmailWebhookController.php
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Cache;
+
+public function handle(Request $request)
+{
+    $payload = $request->all();
+    $meta = $payload['metadata'];
+    $hash = $payload['hash'];
+
+    // 1. Auto-Setup MongoDB TTL Index (Executes only once via Cache)
+    $this->ensureMongoTtlIndexExists();
+
+    // 2. MariaDB: Save Metadata
+    Email::updateOrCreate(
+        ['unique_id_hash' => $hash],
+        [
+            'recipient_email' => $meta['recipientEmail'],
+            'sender_email'    => $meta['senderEmail'],
+            'subject'         => $meta['subject'] ?? '',
+            'is_read'         => false,
+            // Parse the ISO 8601 UTC timestamp format explicitly for SQL
+            'received_at'     => Carbon::parse($meta['received_at'])->setTimezone('UTC')->toDateTimeString(),
+            // Store attachments JSON. If empty, ensure it's saved as an empty array '[]'
+            'attachments'     => !empty($meta['attachments']) ? json_encode($meta['attachments']) : '[]',
+            'attachment_size' => $meta['attachmentSize'] ?? 0
+        ]
+    );
+
+    // 3. MongoDB: Save the heavy body with TTL
+    // Assuming you have the jenssegers/mongodb package installed
+    RecentEmailBody::updateOrCreate(
+        ['unique_id_hash' => $hash],
+        [
+            // Handle cases where the sender only sends Text or only HTML
+            'body_text'  => $payload['bodyText'] ?? '',
+            'body_html'  => $payload['bodyHtml'] ?? '',
+            'created_at' => new \MongoDB\BSON\UTCDateTime(now()->timestamp * 1000), // BSON required for TTL
+        ]
+    );
+
+    return response()->json(['status' => 'success'], 200);
+}
+
+/**
+ * Ensures the TTL index is created on the MongoDB collection.
+ * Uses Laravel Cache to avoid checking the database on every single webhook.
+ */
+private function ensureMongoTtlIndexExists()
+{
+    Cache::rememberForever('mongo_ttl_index_created', function () {
+        // Fetch TTL from Laravel .env (Default: 72 hours / 259200 seconds)
+        $ttlSeconds = (int) env('EMAIL_BODY_TTL_SECONDS', 259200);
+        
+        $collection = DB::connection('mongodb')->getCollection('recent_email_bodies');
+        
+        // Background creation prevents locking the database during webhook execution
+        $collection->createIndex(
+            ['created_at' => 1],
+            [
+                'expireAfterSeconds' => $ttlSeconds,
+                'background' => true,
+                'name' => 'ttl_created_at_index' // Named index prevents duplicate recreation errors
+            ]
+        );
+        
+        return true;
+    });
+}
+```
+
+---
+
+## 3. Resiliency Notes
+
+*   **Idempotency:** The MailOps worker might retry a webhook if a network timeout occurs even after Laravel successfully saved it. Your Laravel code MUST use `updateOrCreate` or `INSERT IGNORE` (like the example above) so it doesn't create duplicate emails if the same payload hash is received twice.
+*   **Timeouts:** The MailOps worker expects a response within 5 to 10 seconds. Do not perform long-running synchronous tasks (like connecting to external APIs or sending heavy push notifications) inside the webhook controller. Dispatch those to a Laravel Queue instead.

public/favicon.svg

@@ -1,3 +1,5 @@
-<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M162.041 38.7592C162.099 38.9767 162.129 39.201 162.13 39.4264V74.4524C162.13 74.9019 162.011 75.3435 161.786 75.7325C161.561 76.1216 161.237 76.4442 160.847 76.6678L131.462 93.5935V127.141C131.462 128.054 130.977 128.897 130.186 129.357L68.8474 164.683C68.707 164.763 68.5538 164.814 68.4007 164.868C68.3432 164.887 68.289 164.922 68.2284 164.938C67.7996 165.051 67.3489 165.051 66.9201 164.938C66.8499 164.919 66.7861 164.881 66.7191 164.855C66.5787 164.804 66.4319 164.76 66.2979 164.683L4.97219 129.357C4.58261 129.133 4.2589 128.81 4.0337 128.421C3.8085 128.032 3.68976 127.591 3.68945 127.141L3.68945 22.0634C3.68945 21.8336 3.72136 21.6101 3.7788 21.393C3.79794 21.3196 3.84262 21.2526 3.86814 21.1791C3.91601 21.0451 3.96068 20.9078 4.03088 20.7833C4.07874 20.7003 4.14894 20.6333 4.20638 20.5566C4.27977 20.4545 4.34678 20.3491 4.43293 20.2598C4.50632 20.1863 4.60205 20.1321 4.68501 20.0682C4.77755 19.9916 4.86051 19.9086 4.96581 19.848L35.6334 2.18492C36.0217 1.96139 36.4618 1.84375 36.9098 1.84375C37.3578 1.84375 37.7979 1.96139 38.1862 2.18492L68.8506 19.848H68.857C68.9591 19.9118 69.0452 19.9916 69.1378 20.065C69.2207 20.1289 69.3133 20.1863 69.3867 20.2566C69.476 20.3491 69.5398 20.4545 69.6164 20.5566C69.6707 20.6333 69.7441 20.7003 69.7887 20.7833C69.8621 20.911 69.9036 21.0451 69.9546 21.1791C69.9802 21.2526 70.0248 21.3196 70.044 21.3962C70.1027 21.6138 70.1328 21.8381 70.1333 22.0634V87.6941L95.686 72.9743V39.4232C95.686 39.1997 95.7179 38.9731 95.7753 38.7592C95.7977 38.6826 95.8391 38.6155 95.8647 38.5421C95.9157 38.408 95.9604 38.2708 96.0306 38.1463C96.0785 38.0633 96.1487 37.9962 96.2029 37.9196C96.2795 37.8175 96.3433 37.7121 96.4326 37.6227C96.506 37.5493 96.5986 37.495 96.6815 37.4312C96.7773 37.3546 96.8602 37.2716 96.9623 37.2109L127.633 19.5479C128.021 19.324 128.461 19.2062 128.91 19.2062C129.358 19.2062 129.798 19.324 130.186 19.5479L160.85 37.2109C160.959 37.2748 161.042 37.3546 161.137 37.428C161.217 37.4918 161.31 37.5493 161.383 37.6195C161.473 37.7121 161.536 37.8175 161.613 37.9196C161.67 37.9962 161.741 38.0633 161.785 38.1463C161.859 38.2708 161.9 38.408 161.951 38.5421C161.98 38.6155 162.021 38.6826 162.041 38.7592ZM157.018 72.9743V43.8477L146.287 50.028L131.462 58.5675V87.6941L157.021 72.9743H157.018ZM126.354 125.663V96.5176L111.771 104.85L70.1301 128.626V158.046L126.354 125.663ZM8.80126 26.4848V125.663L65.0183 158.043V128.629L35.6494 112L35.6398 111.994L35.6271 111.988C35.5281 111.93 35.4452 111.847 35.3526 111.777C35.2729 111.713 35.1803 111.662 35.1101 111.592L35.1038 111.582C35.0208 111.502 34.9634 111.403 34.8932 111.314C34.8293 111.228 34.7528 111.154 34.7017 111.065L34.6985 111.055C34.6411 110.96 34.606 110.845 34.5645 110.736C34.523 110.64 34.4688 110.551 34.4432 110.449C34.4113 110.328 34.4049 110.197 34.3922 110.072C34.3794 109.976 34.3539 109.881 34.3539 109.785V109.778V41.2045L19.5322 32.6619L8.80126 26.4848ZM36.913 7.35007L11.3635 22.0634L36.9066 36.7768L62.4529 22.0602L36.9066 7.35007H36.913ZM50.1999 99.1736L65.0215 90.6374V26.4848L54.2906 32.6651L39.4657 41.2045V105.357L50.1999 99.1736ZM128.91 24.713L103.363 39.4264L128.91 54.1397L154.453 39.4232L128.91 24.713ZM126.354 58.5675L111.529 50.028L100.798 43.8477V72.9743L115.619 81.5106L126.354 87.6941V58.5675ZM67.5711 124.205L105.042 102.803L123.772 92.109L98.2451 77.4053L68.8538 94.3341L42.0663 109.762L67.5711 124.205Z" fill="#FF2D20"/>
+    <rect width="32" height="32" rx="8" fill="#18181b"/>
+    <path d="M8 24L24 8M8 24H18M24 8H14" stroke="#ec4899" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="26" cy="6" r="2" fill="#10b981"/>
 </svg>

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/confirm-modal.blade.php

@@ -0,0 +1,103 @@
+@props([
+    'name' => 'confirm-modal',
+])
+
+<div x-show="show" 
+     x-data="{ 
+        show: false, 
+        title: '', 
+        message: '', 
+        confirmLabel: 'Confirm', 
+        type: 'danger',
+        action: null,
+        open(data) {
+            this.title = data.title || 'Are you sure?';
+            this.message = data.message || 'This action cannot be undone.';
+            this.confirmLabel = data.confirmLabel || 'Confirm';
+            this.type = data.type || 'danger';
+            this.action = data.action || null;
+            this.show = true;
+        },
+        confirm() {
+            if (this.action) {
+                this.action();
+            }
+            this.show = false;
+        }
+     }"
+     x-on:open-{{ $name }}.window="open($event.detail)"
+     class="fixed inset-0 z-[110] flex items-center justify-center p-4 lg:p-8"
+     style="display: none;"
+     x-cloak>
+    
+    <!-- Backdrop -->
+    <div x-show="show" 
+         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="show = false"
+         class="absolute inset-0 bg-zinc-950/80 backdrop-blur-xl"></div>
+
+    <!-- Modal Card -->
+    <div x-show="show" 
+         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-[400px] bg-zinc-900 border border-white/10 rounded-[32px] p-8 relative overflow-hidden shadow-2xl">
+        
+        <!-- Background Glow based on type -->
+        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 rounded-full blur-[80px] -z-10 opacity-20"
+             :class="{
+                 'bg-rose-500': type === 'danger',
+                 'bg-blue-500': type === 'info',
+                 'bg-amber-500': type === 'warning',
+                 'bg-emerald-500': type === 'success'
+             }"></div>
+        
+        <div class="text-center">
+            <!-- Icon -->
+            <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl"
+                 :class="{
+                     'bg-rose-500/10 text-rose-500': type === 'danger',
+                     'bg-blue-500/10 text-blue-500': type === 'info',
+                     'bg-amber-500/10 text-amber-500': type === 'warning',
+                     'bg-emerald-500/10 text-emerald-500': type === 'success'
+                 }">
+                <!-- Danger Icon -->
+                <svg x-show="type === 'danger'" class="w-8 h-8" 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>
+                <!-- Warning Icon -->
+                <svg x-show="type === 'warning'" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+                <!-- Info Icon -->
+                <svg x-show="type === 'info'" class="w-8 h-8" 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>
+                <!-- Success Icon -->
+                <svg x-show="type === 'success'" class="w-8 h-8" 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>
+            </div>
+            
+            <h3 class="text-2xl font-black text-white mb-2 tracking-tight uppercase italic" x-text="title"></h3>
+            <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest leading-relaxed mb-8 px-4" x-text="message"></p>
+            
+            <div class="grid grid-cols-2 gap-4">
+                <button @click="show = false" 
+                        class="py-4 rounded-2xl bg-white/5 border border-white/10 text-zinc-400 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-white/10 hover:text-white transition-all">
+                    Cancel
+                </button>
+                <button @click="confirm()" 
+                        class="py-4 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl transition-all"
+                        :class="{
+                            'bg-rose-600 text-white hover:bg-rose-500 shadow-rose-900/20': type === 'danger',
+                            'bg-blue-600 text-white hover:bg-blue-500 shadow-blue-900/20': type === 'info',
+                            'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-900/20': type === 'warning',
+                            'bg-emerald-600 text-white hover:bg-emerald-500 shadow-emerald-900/20': type === 'success'
+                        }"
+                        x-text="confirmLabel">
+                </button>
+            </div>
+        </div>
+    </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 }} — Zemail</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 Zemail, 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! Zemail uses a sophisticated backend to route communications through temporary, high-reputation Gmail and Outlook nodes. This ensures that you can bypass "Disposable Email" filters while maintaining 100% privacy.
+                    </p>
+                </div>
+            </div>
+
+            <!-- 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 Zemail secure for sensitive data?</span>
+                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
+                         :class="active === 3 ? 'rotate-180 text-pink-500' : ''" 
+                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <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. Zemail is a 100% web-based service. It is accessible across all modern browsers and devices (Desktop, Mobile, Tablet) without the need for any apps or browser extensions.
+                    </p>
+                </div>
+            </div>
+
+            <!-- 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-6 mb-6">
+                    <x-bento.logo size="sm" />
+                    <div class="flex items-center gap-2 px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20">
+                        <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1.5s_infinite]"></div>
+                        <span class="text-[9px] font-bold text-emerald-500 uppercase tracking-widest">Systems Operational</span>
+                    </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">
+                Zemail is built for the modern web. From instant API access to premium Gmail domains, 
+                we've automated the friction out of temporary email management.
+            </p>
+        </div>
+
+        <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>
+                    Zemail Beta Live
+                </div>
+                
+                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-white to-zinc-500 mb-6 opacity-0 translate-y-8 leading-tight" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, delay: 0.1, ease: 'power3.out'})">
+                    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">
+                        Zemail in 100 seconds <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </a>
+                </div>
+            </div>
+
+            <!-- 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 Zemail', 
+                    snippet: 'Click me to discover what makes Zemail so special...', 
+                    time: '1m ago', 
+                    content: 'Welcome to Zemail! ✨<br><br>We provide instantly created, highly reliable temporary email addresses that just work.<br><br><strong>Features:</strong><br><ul class="list-disc pl-5 mt-2 space-y-1"><li>Instant Inbox creation without sign-up.</li><li>Access to Premium & Generic Domains.</li><li>Real-time Websocket syncing for 0 delay.</li><li>Developer APIs ready for E2E automated testing.</li></ul><br>Enjoy your clean, spam-free inbox today!'
+                }
+            ],
+            counter: 2,
+            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 Zemail 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/logo.blade.php

@@ -0,0 +1,50 @@
+@props([
+    'size' => 'md', // sm, md, lg
+    'withText' => true,
+    'class' => ''
+])
+
+@php
+    $dimensions = match($size) {
+        'sm' => ['box' => 'w-8 h-8', 'icon' => 'w-4 h-4', 'text' => 'text-base'],
+        'md' => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
+        'lg' => ['box' => 'w-12 h-12', 'icon' => 'w-6 h-6', 'text' => 'text-2xl'],
+        default => ['box' => 'w-10 h-10', 'icon' => 'w-5 h-5', 'text' => 'text-xl'],
+    };
+@endphp
+
+<div x-data="{ showText: {{ $withText ? 'true' : 'false' }} }" {{ $attributes }} class="flex items-center gap-3 {{ $class }}">
+    <!-- Logo Symbol -->
+    <div class="relative group">
+        <!-- Outer Glow -->
+        <div class="absolute -inset-2 bg-gradient-to-tr from-pink-500/20 to-emerald-500/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        
+        <!-- Icon Container -->
+        <div class="{{ $dimensions['box'] }} bg-zinc-900 border border-white/10 rounded-xl flex items-center justify-center relative overflow-hidden shadow-xl">
+            <!-- Subtle Mesh Background -->
+            <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(236,72,153,0.1),transparent)]"></div>
+            
+            <!-- Stylized "Z" / Envelope Fold -->
+            <svg class="{{ $dimensions['icon'] }} text-transparent" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" style="stop-color:#ec4899" />
+                        <stop offset="100%" style="stop-color:#be185d" />
+                    </linearGradient>
+                </defs>
+                <path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#logo-gradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M4 5L20 19" stroke="white" stroke-opacity="0.1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+
+            <!-- Activity Pulsar (Top Right) -->
+            <div class="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]">
+                <div class="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-75"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex items-center" x-show="showText" x-transition:opacity>
+        <span class="{{ $dimensions['text'] }} font-black tracking-tighter text-white italic uppercase">zemail</span>
+        <span class="{{ $dimensions['text'] }} font-black tracking-tighter text-pink-500 leading-none italic uppercase">.me</span>
+    </div>
+</div>

resources/views/components/bento/nav.blade.php

@@ -0,0 +1,81 @@
+<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="z-50">
+                <x-bento.logo size="sm" />
+            </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 Zemail 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">
+                    "Zemail is my go-to for checking transactional emails on our staging environment. The attachments scanning gives me peace of mind when testing file delivery systems."
+                </p>
+                <div class="mt-6 flex gap-1">
+                    @for($i=0; $i<5; $i++)
+                        <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 Zemail hasn't let us down. The speed of reception is nearly identical to our production Gmail setup."
+                </p>
+                <div class="mt-6 flex gap-1">
+                    @for($i=0; $i<5; $i++)
+                        <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,96 @@
-<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 — Zemail' }}</title>
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+        
+        <!-- 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 ?? 'Zemail — Instant Disposable Gmail & Temporary Email' }}</title>
+        <link rel="icon" href="/favicon.ico" sizes="any">
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+        
+        <!-- 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,700 @@
+<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' }); $watch('mobileView', value => { if(value === 'list' && window.innerWidth < 1024) selectedId = null })"
+     @resize.window="if (window.innerWidth >= 1280) sidebarOpen = true">
+
+    <!-- Global Confirmation Modal -->
+    <x-bento.confirm-modal />
+    
+    <!-- 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
+           }">
+        <div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
+            <a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+                <x-bento.logo size="sm" x-data="{ showText: sidebarOpen }" />
+            </a>
+            
+            <!-- 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 @click="$dispatch('open-confirm-modal', {
+                                            title: 'Burn Mailbox?',
+                                            message: 'Are you sure you want to delete this mailbox? All emails will be permanently lost.',
+                                            confirmLabel: 'Burn Now',
+                                            type: 'danger',
+                                            action: () => $wire.deleteMailbox({{ $currentMailbox['id'] }})
+                                        })" 
+                                        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" x-ref="listContainer">
+            @foreach($emails as $email)
+                <div wire:key="email-{{ $email['id'] }}"
+                     @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]'">
+                    <div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 scale-y-0 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" 
+                    @click="$refs.listContainer.scrollTop = 0"
+                    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" 
+                    @click="$refs.listContainer.scrollTop = 0"
+                    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 h-full overflow-hidden"
+          :class="{'hidden lg:flex': mobileView === 'list' || !selectedId}">
+        
+        <!-- Cinematic Loading Overlay -->
+        <div wire:loading.flex wire:target="selectEmail" class="absolute inset-0 z-[100] bg-zinc-950/60 backdrop-blur-xl items-center justify-center">
+            <div class="flex flex-col items-center justify-center">
+                <div class="w-20 h-20 relative mb-8">
+                    <div class="absolute inset-0 border-4 border-pink-500/10 rounded-full"></div>
+                    <div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-spin rounded-full shadow-[0_0_20px_rgba(236,72,153,0.2)]"></div>
+                    <div class="absolute inset-4 bg-pink-500/20 rounded-full blur-2xl animate-pulse"></div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <svg class="w-8 h-8 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+                    </div>
+                </div>
+                <div class="flex flex-col items-center">
+                    <span class="text-[10px] font-black text-white uppercase tracking-[0.4em] mb-2 animate-pulse">Establishing Secure Channel</span>
+                    <div class="flex gap-1">
+                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
+                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
+                        <div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        @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 @click="$dispatch('open-confirm-modal', {
+                                title: 'Burn Email?',
+                                message: 'Are you sure you want to delete this email? This action is permanent.',
+                                confirmLabel: 'Burn Now',
+                                type: 'danger',
+                                action: () => $wire.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>
+
+                <!-- Privacy Toggles -->
+                <div class="ml-auto flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
+                    <button wire:click="$set('viewMode', 'text')" 
+                            class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all"
+                            :class="$wire.viewMode === 'text' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
+                        Text
+                    </button>
+                    <button wire:click="$set('viewMode', 'html')" 
+                            class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all"
+                            :class="$wire.viewMode === 'html' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
+                        HTML
+                    </button>
+                </div>
+            </div>
+
+            <!-- Detail Content -->
+            <div class="flex-1 relative overflow-hidden">
+                <div class="h-full overflow-y-auto p-8 lg:p-12 scrollbar-hide" wire:loading.remove wire:target="selectEmail">
+                    <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>
+
+                    @if($viewMode === 'html')
+                        <div class="mb-8 p-4 rounded-2xl border transition-all duration-500 @if(!$allowRemoteContent) bg-amber-500/5 border-amber-500/20 @else bg-emerald-500/5 border-emerald-500/20 @endif flex flex-col sm:flex-row items-center justify-between gap-4 group">
+                            <div class="flex items-center gap-3">
+                                @if(!$allowRemoteContent)
+                                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
+                                        <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="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>
+                                        <div class="text-xs font-bold text-amber-500 uppercase tracking-widest leading-none mb-1">Remote assets blocked</div>
+                                        <p class="text-[10px] text-zinc-500 font-medium">For your privacy, Zemail has disabled automatic loading of remote images.</p>
+                                    </div>
+                                @else
+                                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center shrink-0">
+                                        <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
+                                    </div>
+                                    <div>
+                                        <div class="text-xs font-bold text-emerald-500 uppercase tracking-widest leading-none mb-1">Remote content enabled</div>
+                                        <p class="text-[10px] text-zinc-500 font-medium">Images and remote resources are currently active for this email.</p>
+                                    </div>
+                                @endif
+                            </div>
+                            
+                            @if(!$allowRemoteContent)
+                                <button wire:click="$set('allowRemoteContent', true)" 
+                                        class="px-4 py-2 rounded-xl bg-amber-500 text-zinc-950 font-black text-[10px] uppercase tracking-wider hover:bg-amber-400 transition-all flex items-center gap-2">
+                                    <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                                    Load Content
+                                </button>
+                            @else
+                                <button wire:click="$set('allowRemoteContent', false)" 
+                                        class="px-4 py-2 rounded-xl bg-zinc-800 text-zinc-400 font-bold text-[10px] uppercase tracking-wider hover:text-white transition-all flex items-center gap-2 border border-white/5">
+                                    <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
+                                    Re-Block
+                                </button>
+                            @endif
+                        </div>
+                    @endif
+
+                    @if($viewMode === 'text' && empty($currentEmail['body_text']))
+                        <div class="mb-8 p-4 rounded-2xl bg-zinc-900 border border-white/5 flex items-center gap-4">
+                            <div class="w-10 h-10 rounded-xl bg-white/5 text-zinc-400 flex items-center justify-center shrink-0">
+                                <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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            </div>
+                            <div>
+                                <div class="text-[10px] font-bold text-zinc-300 uppercase tracking-widest leading-none mb-1">Plain text version missing</div>
+                                <p class="text-[9px] text-zinc-500 font-medium">Viewing sanitized HTML version instead.</p>
+                            </div>
+                        </div>
+                    @endif
+
+                    <div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed font-medium mb-12 {{ $viewMode === 'text' ? 'whitespace-pre-wrap font-mono text-[13px] shadow-[inset_0_20px_50px_rgba(0,0,0,0.1)] p-8 bg-zinc-900/30 rounded-3xl border border-white/5 tracking-tight' : 'space-y-4' }}">{!! $this->getProcessedContent($currentEmail) !!}</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>
+            </div>
+        @else
+            <!-- Empty State -->
+            <div class="flex-1 flex flex-col items-center justify-center p-12 text-center" wire:loading.remove wire:target="selectEmail">
+                <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>
+            Zemail is designed to be privacy-first. We do not collect personal information like your name, physical address, or phone number. When you create a disposable inbox, we only generate a temporary identifier to route your mail.
+        </p>
+        <ul>
+            <li>No user registration required</li>
+            <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);
+});