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/css/app.css

@@ -23,6 +23,13 @@
     --color-zinc-900: #171717;
     --color-zinc-950: #0a0a0a;
 
+    --color-app-bg: #09090B;
+    --color-app-surface: #18181B;
+    --color-app-border: #27272A;
+    --color-app-red: #EC6A5F;
+    --color-app-yellow: #F4BF4F;
+    --color-app-green: #61C554;
+
     --color-accent: var(--color-neutral-800);
     --color-accent-content: var(--color-neutral-800);
     --color-accent-foreground: var(--color-white);
@@ -77,7 +84,7 @@
 }
 
 [data-flux-label] {
-    @apply  !mb-0 !leading-tight;
+    @apply !mb-0 !leading-tight;
 }
 
 input:focus[data-flux-control],
@@ -88,4 +95,4 @@ select:focus[data-flux-control] {
 
 /* \[:where(&)\]:size-4 {
     @apply size-4;
-} */
+} */