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/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>