feat/ui: cinematic landing page and dynamic devtool-friendly bento structures

- Create highly responsive bento layouts (grid, card, pages)
- Integrate Livewire with Alpine and complex GSAP animations.
- Implement DevTool Dark theme values across Blade components.
- Enhance interactive elements, micro-interactions, API snippets logic natively.
- Apply semantic HTML and properly linked responsive Nav\/Footers sections structure

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>