create-nara 0.1.0

package/templates/svelte/resources/js/pages/auth/login.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { inertia, router } from '@inertiajs/svelte'
+  import { Toast } from '../../Components/helper';
+  import NaraIcon from '../../Components/NaraIcon.svelte';
+  import { fade, fly } from 'svelte/transition';
+
+  onMount(() => {
+      // Logic for onMount if needed in future
+  });
+
+  interface LoginForm {
+    email: string;
+    password: string;
+  }
+
+  let form: LoginForm = {
+    email: '',
+    password: '',
+  }
+
+  let { error }: { error?: string } = $props();
+
+  $effect(() => {
+    if (error) Toast(error, 'error');
+  });
+
+  function submitForm(): void {
+    router.post("/login", { email: form.email, password: form.password })
+  }
+</script>
+
+<div class="min-h-screen bg-white dark:bg-black text-slate-900 dark:text-slate-100 flex overflow-hidden">
+  
+  <!-- Left Panel: Form -->
+  <div class="w-full lg:w-1/2 flex flex-col justify-between p-8 lg:p-12 z-10 relative">
+      <div>
+          <a href="/" class="text-2xl font-bold tracking-tighter flex items-center gap-2">
+              <NaraIcon />
+              <span>NARA.</span>
+          </a>
+      </div>
+
+      <div class="max-w-md w-full mx-auto" in:fly={{ y: 20, duration: 800 }}>
+          <h1 class="text-4xl lg:text-5xl font-bold tracking-tight mb-2">Welcome Back.</h1>
+          <p class="text-slate-500 dark:text-slate-400 mb-10 text-lg">Enter your credentials to access the grid.</p>
+
+          <!-- Google Login Button -->
+          <div class="flex flex-col space-y-4 mb-8">
+              <a href="/google/redirect" 
+                 class="group relative w-full flex items-center justify-center px-6 py-4 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 transition-all duration-300">
+                  <svg class="h-5 w-5 mr-3 transition-transform group-hover:scale-110" viewBox="0 0 24 24">
+                      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                  </svg>
+                  <span class="font-medium text-slate-700 dark:text-slate-200">Continue with Google</span>
+              </a>
+              
+              <div class="relative py-2">
+                  <div class="absolute inset-0 flex items-center">
+                      <div class="w-full border-t border-slate-200 dark:border-white/10"></div>
+                  </div>
+                  <div class="relative flex justify-center text-xs uppercase tracking-widest">
+                      <span class="bg-white dark:bg-black px-4 text-slate-400">Or via email</span>
+                  </div>
+              </div>
+          </div>
+
+          <form class="space-y-5" on:submit|preventDefault={submitForm}>
+              <div class="space-y-1">
+                  <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Email</label>
+                  <input bind:value={form.email} required type="text" name="email" id="email" 
+                      class="w-full px-5 py-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500 outline-none transition-all dark:text-white placeholder:text-slate-400" 
+                      placeholder="nara@example.com" >
+              </div>
+              
+              <div class="space-y-1">
+                  <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Password</label>
+                  <input bind:value={form.password} required type="password" name="password" id="password" 
+                      placeholder="••••••••" 
+                      class="w-full px-5 py-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500 outline-none transition-all dark:text-white placeholder:text-slate-400" >
+              </div>  
+
+              <div class="flex items-center justify-end">
+                  <a href="/forgot-password" use:inertia class="text-sm font-medium text-slate-500 hover:text-primary-500 transition-colors">Forgot password?</a>
+              </div>
+
+              <button type="submit" 
+                  class="group w-full relative overflow-hidden rounded-xl bg-slate-900 dark:bg-white text-white dark:text-black font-bold text-lg py-4 transition-transform active:scale-[0.98]">
+                  <span class="relative z-10">LOGIN</span>
+                  <div class="absolute inset-0 bg-primary-500 transform translate-y-full transition-transform duration-300 group-hover:translate-y-0"></div>
+              </button>
+
+              <p class="text-center text-slate-500 dark:text-slate-400 mt-6">
+                  Don't have an account? <a href="/register" use:inertia class="font-bold text-primary-600 dark:text-primary-400 hover:underline">Sign up</a>
+              </p>
+          </form>
+      </div>
+
+      <div class="text-xs text-slate-400 dark:text-slate-600">
+          © 2025 NARA INC.
+      </div>
+  </div>
+
+  <!-- Right Panel: Visual -->
+  <div class="hidden lg:flex w-1/2 bg-surface-card-dark relative overflow-hidden items-center justify-center">
+      <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-30"></div>
+      
+      <!-- Abstract blobs -->
+      <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-primary-500/20 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2"></div>
+      <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-accent-500/10 rounded-full blur-[120px] translate-y-1/2 -translate-x-1/2"></div>
+
+      <div class="relative z-10 max-w-lg text-center p-12">
+          <h2 class="text-6xl font-bold tracking-tighter text-white mb-6 leading-[0.9]">
+            PURE <br/> 
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-info-300">VELOCITY</span>
+          </h2>
+          <p class="text-xl text-slate-400 font-serif italic">
+            "The only thing faster than Nara is the thought of using it."
+          </p>
+
+          <!-- Code Snippet Decoration -->
+          <div class="mt-12 text-left bg-black/50 backdrop-blur-md rounded-xl border border-white/10 p-6 font-mono text-xs text-slate-300 shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
+             <div class="flex gap-2 mb-4">
+               <div class="w-3 h-3 rounded-full bg-red-500"></div>
+               <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+               <div class="w-3 h-3 rounded-full bg-green-500"></div>
+             </div>
+             <div>
+                <span class="text-purple-400">const</span> <span class="text-blue-400">future</span> = <span class="text-purple-400">await</span> nara.<span class="text-yellow-300">load</span>();<br/>
+                <span class="text-slate-500">// Welcome to the new standard.</span>
+             </div>
+          </div>
+      </div>
+  </div>
+</div>

package/templates/svelte/resources/js/pages/auth/register.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { inertia, router } from '@inertiajs/svelte'
+  import { password_generator, Toast } from '../../Components/helper';
+  import NaraIcon from '../../Components/NaraIcon.svelte';
+  import { fade, fly } from 'svelte/transition';
+
+  onMount(() => {
+      // Logic for onMount if needed in future
+  });
+
+  interface RegisterForm {
+    email: string;
+    password: string;
+    name: string;
+    phone: string;
+    password_confirmation: string;
+  }
+
+  let form: RegisterForm = {
+    email: '',
+    password: '',
+    name: '',
+    phone: '',
+    password_confirmation: '', 
+  }
+
+  let { error }: { error?: string } = $props();
+
+  $effect(() => {
+    if (error) Toast(error, 'error');
+  });
+
+  function submitForm(): void {
+    if (form.password != form.password_confirmation) {
+      Toast("Password dan konfirmasi password harus sama", "error");
+      return;
+    }
+ 
+    form.phone = form.phone.toString()
+    router.post("/register", form as any)
+  }
+
+  function generatePassword(): void { 
+    const retVal = password_generator(10); 
+    form.password = retVal
+    form.password_confirmation = retVal
+  }
+</script>
+
+<div class="min-h-screen bg-white dark:bg-black text-slate-900 dark:text-slate-100 flex overflow-hidden">
+  
+  <!-- Right Panel: Visual (Swapped for Register) -->
+  <div class="hidden lg:flex w-1/2 bg-surface-card-dark relative overflow-hidden items-center justify-center order-2 lg:order-1">
+      <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-30"></div>
+      
+      <!-- Abstract blobs -->
+      <div class="absolute top-0 left-0 w-[600px] h-[600px] bg-info-500/20 rounded-full blur-[120px] -translate-y-1/2 -translate-x-1/2"></div>
+      <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-primary-500/10 rounded-full blur-[120px] translate-y-1/2 translate-x-1/2"></div>
+
+      <div class="relative z-10 max-w-lg text-center p-12">
+          <h2 class="text-6xl font-bold tracking-tighter text-white mb-6 leading-[0.9]">
+            JOIN THE <br/> 
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-info-400 to-accent-300">REVOLUTION</span>
+          </h2>
+          <p class="text-xl text-slate-400 font-serif italic">
+            "Build what others can't. Ship when others don't."
+          </p>
+
+          <!-- Terminal Decoration -->
+          <div class="mt-12 text-left bg-black/50 backdrop-blur-md rounded-xl border border-white/10 p-6 font-mono text-xs text-slate-300 shadow-2xl transform -rotate-2 hover:rotate-0 transition-transform duration-500">
+             <div class="flex gap-2 mb-4">
+               <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+               <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+               <div class="w-3 h-3 rounded-full bg-slate-700"></div>
+             </div>
+             <div class="space-y-2">
+                <div><span class="text-primary-400">$</span> init user --new</div>
+                <div class="text-slate-500">Creating workspace...</div>
+                <div class="text-slate-500">Allocating resources...</div>
+                <div><span class="text-info-400">✓</span> User created successfully.</div>
+             </div>
+          </div>
+      </div>
+  </div>
+
+  <!-- Left Panel: Form -->
+  <div class="w-full lg:w-1/2 flex flex-col justify-between p-8 lg:p-12 z-10 relative overflow-y-auto order-1 lg:order-2">
+      <div>
+          <a href="/" class="text-2xl font-bold tracking-tighter flex items-center gap-2 justify-end lg:justify-start">
+              <NaraIcon />
+              <span>NARA.</span>
+          </a>
+      </div>
+
+      <div class="max-w-md w-full mx-auto mt-8 lg:mt-0" in:fly={{ y: 20, duration: 800 }}>
+          <h1 class="text-4xl lg:text-5xl font-bold tracking-tight mb-2">Create Account.</h1>
+          <p class="text-slate-500 dark:text-slate-400 mb-8 text-lg">Start building your legacy.</p>
+
+          <!-- Google Signup Button -->
+          <div class="flex flex-col space-y-4 mb-8">
+              <a href="/google/redirect" 
+                 class="group relative w-full flex items-center justify-center px-6 py-4 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 transition-all duration-300">
+                  <svg class="h-5 w-5 mr-3 transition-transform group-hover:scale-110" viewBox="0 0 24 24">
+                      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                  </svg>
+                  <span class="font-medium text-slate-700 dark:text-slate-200">Sign up with Google</span>
+              </a>
+              
+              <div class="relative py-2">
+                  <div class="absolute inset-0 flex items-center">
+                      <div class="w-full border-t border-slate-200 dark:border-white/10"></div>
+                  </div>
+                  <div class="relative flex justify-center text-xs uppercase tracking-widest">
+                      <span class="bg-white dark:bg-black px-4 text-slate-400">Or via email</span>
+                  </div>
+              </div>
+          </div>
+
+          <form class="space-y-4" on:submit|preventDefault={submitForm}>
+              <div class="space-y-1">
+                  <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Full Name</label>
+                  <input bind:value={form.name} required type="text" name="name" id="name" 
+                      class="w-full px-5 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-info-500/50 focus:border-info-500 outline-none transition-all dark:text-white placeholder:text-slate-400" 
+                      placeholder="Rama Ren" >
+              </div>
+
+              <div class="space-y-1">
+                  <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Email</label>
+                  <input bind:value={form.email} required type="text" name="email" id="email" 
+                      class="w-full px-5 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-info-500/50 focus:border-info-500 outline-none transition-all dark:text-white placeholder:text-slate-400" 
+                      placeholder="nara@example.com" >
+              </div> 
+
+              <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                      <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Password</label>
+                      <input bind:value={form.password} required type="password" name="password" id="password" 
+                          placeholder="••••••••" 
+                          class="w-full px-5 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-info-500/50 focus:border-info-500 outline-none transition-all dark:text-white placeholder:text-slate-400" >
+                  </div>
+                  <div class="space-y-1">
+                      <label for="confirm-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Confirm</label>
+                      <input bind:value={form.password_confirmation} type="password" name="confirm-password" id="confirm-password" 
+                          placeholder="••••••••" 
+                          class="w-full px-5 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-info-500/50 focus:border-info-500 outline-none transition-all dark:text-white placeholder:text-slate-400" >
+                  </div>
+              </div>
+
+              <div class="flex justify-end">
+                <button type="button" on:click="{generatePassword}" class="text-xs font-mono text-info-400 hover:text-info-300 transition-colors flex items-center gap-1">
+                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12V7C21 6.46957 20.7893 5.96086 20.4142 5.58579C20.0391 5.21071 19.5304 5 19 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19H12" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    GENERATE SECURE PASSWORD
+                </button>
+              </div>
+           
+              <button type="submit" 
+                  class="group w-full relative overflow-hidden rounded-xl bg-slate-900 dark:bg-white text-white dark:text-black font-bold text-lg py-4 transition-transform active:scale-[0.98] mt-4">
+                  <span class="relative z-10">CREATE ACCOUNT</span>
+                  <div class="absolute inset-0 bg-info-500 transform translate-y-full transition-transform duration-300 group-hover:translate-y-0"></div>
+              </button>
+
+              <p class="text-center text-slate-500 dark:text-slate-400 mt-6">
+                  Already have an account? <a href="/login" use:inertia class="font-bold text-info-500 dark:text-info-400 hover:underline">Login</a>
+              </p>
+          </form>
+      </div>
+
+      <div class="text-xs text-slate-400 dark:text-slate-600 mt-8 lg:mt-0 text-right lg:text-left">
+          © 2025 NARA INC.
+      </div>
+  </div>
+</div>

package/templates/svelte/resources/js/pages/auth/reset-password.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { inertia, router } from '@inertiajs/svelte'
+  import NaraIcon from '../../Components/NaraIcon.svelte';
+  import DarkModeToggle from '../../Components/DarkModeToggle.svelte';
+  import { password_generator, Toast } from '../../Components/helper';
+
+  interface ResetPasswordForm {
+    password: string;
+    password_confirmation: string;
+    id: string;
+  }
+
+  let { id, error }: { id: string, error?: string } = $props();
+
+  $effect(() => {
+    if (error) Toast(error, 'error');
+  });
+
+  let form: ResetPasswordForm = {
+    password: '',
+    password_confirmation: '',
+    id
+  }
+ 
+  function generatePassword(): void { 
+    const retVal = password_generator(10); 
+    form.password = retVal
+    form.password_confirmation = retVal
+  }
+
+  function submitForm(): void {
+    if (form.password != form.password_confirmation) {
+      Toast("Password dan konfirmasi password harus sama", "error")
+      return;
+    }
+
+    router.post(`/reset-password`, form as any)
+  }
+</script>
+
+<section class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-slate-50">
+  <!-- Header with dark mode toggle -->
+  <header class="fixed inset-x-0 top-0 z-40 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur-xl">
+      <div class="max-w-6xl mx-auto flex h-16 items-center justify-between px-4 sm:h-20 sm:px-6 lg:px-8">
+          <a href="/" use:inertia class="flex items-center gap-2">
+              <img src="/public/nara.png" alt="Nara logo" class="h-7 w-7 rounded-lg object-cover" />
+              <div class="flex flex-col leading-tight">
+                  <span class="text-sm font-semibold tracking-tight text-slate-50">Nara</span>
+                  <span class="text-[10px] uppercase tracking-[0.22em] text-slate-500">TypeScript framework</span>
+              </div>
+          </a>
+          <div class="flex items-center gap-3">
+              <DarkModeToggle />
+          </div>
+      </div>
+  </header>
+
+  <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto min-h-screen lg:py-0">
+    <div class="flex items-center mb-6 text-2xl font-semibold text-slate-50">
+      <NaraIcon></NaraIcon>
+    </div>
+    <div class="w-full max-w-md rounded-3xl border border-slate-800/80 bg-slate-900/70 backdrop-blur-xl shadow-[0_24px_80px_rgba(15,23,42,0.8)] md:mt-0 sm:max-w-md xl:p-0">
+      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+        <h1 class="text-xl font-bold leading-tight tracking-tight text-slate-50 md:text-2xl">
+          Reset Password
+        </h1>
+
+        <form class="space-y-4 md:space-y-6" on:submit|preventDefault={submitForm}>
+          <div>
+            <label for="password" class="block mb-2 text-sm font-medium text-slate-200">Password Baru</label>
+            <input 
+              bind:value={form.password}
+              type="password" 
+              name="password" 
+              id="password" 
+              placeholder="••••••••" 
+              class="bg-slate-900/70 border border-slate-700 text-slate-50 sm:text-sm rounded-lg focus:ring-2 focus:ring-primary-400 focus:border-primary-400 focus:outline-none block w-full py-2.5 px-3 placeholder-slate-500"
+              required
+            >
+            <button type="button" on:click={generatePassword} class="text-xs text-slate-400 mt-1">Generate Password</button>
+          </div>
+          <div>
+            <label for="confirm-password" class="block mb-2 text-sm font-medium text-slate-200">Konfirmasi Password</label>
+            <input 
+              bind:value={form.password_confirmation}
+              type="password" 
+              name="confirm-password" 
+              id="confirm-password" 
+              placeholder="••••••••" 
+              class="bg-slate-900/70 border border-slate-700 text-slate-50 sm:text-sm rounded-lg focus:ring-2 focus:ring-primary-400 focus:border-primary-400 focus:outline-none block w-full py-2.5 px-3 placeholder-slate-500"
+              required
+            >
+          </div>
+
+          <button type="submit" class="w-full text-sm font-medium rounded-full px-5 py-2.5 text-slate-950 bg-primary-400 hover:bg-primary-300 focus:ring-4 focus:outline-none focus:ring-primary-300">
+            Reset Password
+          </button>
+
+          <p class="text-sm font-light text-slate-400">
+            Ingat password Anda? <a href="/login" use:inertia class="font-medium text-primary-400 hover:underline">Login disini</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>

package/templates/svelte/resources/js/pages/dashboard.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { page as inertiaPage, inertia } from '@inertiajs/svelte';
+  import Header from '../Components/Header.svelte';
+  import type { User } from '../types';
+
+  export let users: User[] = [];
+  export let search: string = '';
+  export let filter: string = 'all';
+  export let total: number = 0;
+  export let page: number = 1;
+  export let limit: number = 10;
+  export let totalPages: number = 1;
+  export let hasNext: boolean = false;
+  export let hasPrev: boolean = false;
+
+  const currentUser = $inertiaPage.props.user as User | undefined;
+
+  // Get current hour for greeting
+  const hour = new Date().getHours();
+  const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+</script>
+
+<Header group="dashboard" />
+
+<div class="min-h-screen bg-surface-light dark:bg-surface-dark text-slate-900 dark:text-slate-100 transition-colors duration-500 overflow-x-hidden selection:bg-primary-400 selection:text-black">
+  
+  <!-- Background Effects -->
+  <div class="fixed inset-0 pointer-events-none z-0">
+    <div class="absolute top-0 right-0 w-[800px] h-[800px] bg-primary-500/5 rounded-full blur-3xl -mr-96 -mt-96"></div>
+    <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-accent-500/5 rounded-full blur-3xl -ml-64 -mb-64"></div>
+  </div>
+
+  <!-- Hero Section -->
+  <section class="relative px-6 sm:px-12 lg:px-24 pt-24 pb-20">
+    <div class="max-w-[90rem] mx-auto">
+      
+      <!-- Giant Welcome -->
+      <div class="mb-16" in:fly={{ y: 50, duration: 800 }}>
+        <p class="text-xs font-bold uppercase tracking-[0.3em] text-primary-600 dark:text-primary-400 mb-6">
+          {greeting}
+        </p>
+        <h1 class="text-[8vw] sm:text-[6vw] lg:text-[5vw] leading-[0.9] font-bold tracking-tighter">
+          Welcome back,
+          <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-info-300 dark:from-primary-400 dark:to-info-300">
+            {$inertiaPage.props.user?.name || 'Commander'}
+          </span>
+        </h1>
+      </div>
+
+      <!-- Stats Grid - Radical Cards -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-20" in:fly={{ y: 30, duration: 800, delay: 200 }}>
+        
+        <!-- Card: Total Users -->
+        <div class="group relative h-48 bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-primary-500/50 dark:hover:border-primary-500/30 p-6 flex flex-col justify-between transition-all duration-500 overflow-hidden rounded-2xl">
+          <div class="absolute top-0 right-0 p-24 bg-primary-500/5 rounded-full blur-3xl -mr-12 -mt-12 group-hover:bg-primary-500/10 transition-colors duration-500"></div>
+          
+          <div class="relative z-10 flex justify-between items-start">
+            <div class="p-2 bg-white dark:bg-white/5 rounded-lg border border-slate-200 dark:border-white/10 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="9" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <span class="text-[10px] font-mono opacity-40 uppercase">Users</span>
+          </div>
+
+          <div class="relative z-10">
+            <p class="text-4xl font-bold tracking-tight mb-1">{total || users?.length || 0}</p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">Total registered</p>
+          </div>
+        </div>
+
+        <!-- Card: Current Page -->
+        <div class="group relative h-48 bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-accent-500/50 dark:hover:border-accent-500/30 p-6 flex flex-col justify-between transition-all duration-500 overflow-hidden rounded-2xl">
+          <div class="absolute top-0 right-0 p-24 bg-accent-500/5 rounded-full blur-3xl -mr-12 -mt-12 group-hover:bg-accent-500/10 transition-colors duration-500"></div>
+          
+          <div class="relative z-10 flex justify-between items-start">
+            <div class="p-2 bg-white dark:bg-white/5 rounded-lg border border-slate-200 dark:border-white/10 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 h-5 text-accent-600 dark:text-accent-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round" stroke-linejoin="round"/>
+                <polyline points="14 2 14 8 20 8" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <span class="text-[10px] font-mono opacity-40 uppercase">Page</span>
+          </div>
+
+          <div class="relative z-10">
+            <p class="text-4xl font-bold tracking-tight mb-1">{page}<span class="text-lg text-slate-400">/{totalPages}</span></p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">Current view</p>
+          </div>
+        </div>
+
+        <!-- Card: Filter Status -->
+        <div class="group relative h-48 bg-surface-card-light dark:bg-surface-card-dark border border-slate-200 dark:border-white/5 hover:border-warning-500/50 dark:hover:border-warning-500/30 p-6 flex flex-col justify-between transition-all duration-500 overflow-hidden rounded-2xl">
+          <div class="absolute top-0 right-0 p-24 bg-warning-500/5 rounded-full blur-3xl -mr-12 -mt-12 group-hover:bg-warning-500/10 transition-colors duration-500"></div>
+          
+          <div class="relative z-10 flex justify-between items-start">
+            <div class="p-2 bg-white dark:bg-white/5 rounded-lg border border-slate-200 dark:border-white/10 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 h-5 text-warning-600 dark:text-warning-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <span class="text-[10px] font-mono opacity-40 uppercase">Filter</span>
+          </div>
+
+          <div class="relative z-10">
+            <p class="text-2xl font-bold tracking-tight mb-1 capitalize">{filter}</p>
+            <p class="text-xs text-slate-500 dark:text-slate-400">Active filter</p>
+          </div>
+        </div>
+
+        <!-- Card: Account Status -->
+        <div class="group relative h-48 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 p-6 flex flex-col justify-between transition-all duration-500 overflow-hidden rounded-2xl">
+          <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
+          
+          <div class="relative z-10 flex justify-between items-start">
+            <div class="p-2 bg-white/10 dark:bg-black/5 rounded-lg border border-white/10 dark:border-black/5 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <span class="text-[10px] font-mono opacity-60 uppercase">Status</span>
+          </div>
+
+          <div class="relative z-10">
+            <p class="text-2xl font-bold tracking-tight mb-1">{$inertiaPage.props.user?.is_admin ? 'Admin' : 'User'}</p>
+            <div class="flex items-center gap-2">
+              <span class="inline-flex h-2 w-2 rounded-full bg-primary-400 animate-pulse"></span>
+              <p class="text-xs opacity-80">{$inertiaPage.props.user?.is_verified ? 'Verified' : 'Unverified'}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Account Details Section -->
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8" in:fly={{ y: 30, duration: 800, delay: 400 }}>
+        
+        <!-- Left: Quick Info -->
+        <div class="lg:col-span-5">
+          <span class="block text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-6">Account Details</span>
+          
+          <div class="space-y-4">
+            <div class="group p-6 border border-slate-200 dark:border-white/5 rounded-2xl hover:bg-slate-50 dark:hover:bg-white/5 transition-all duration-300">
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="text-[10px] uppercase tracking-[0.2em] text-slate-400 mb-2">Email Address</p>
+                  <p class="text-lg font-medium">{$inertiaPage.props.user?.email}</p>
+                </div>
+                <span class="px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-full {$inertiaPage.props.user?.is_verified ? 'bg-primary-500/10 text-primary-600 dark:text-primary-400' : 'bg-warning-500/10 text-warning-600 dark:text-warning-400'}">
+                  {$inertiaPage.props.user?.is_verified ? 'Verified' : 'Pending'}
+                </span>
+              </div>
+            </div>
+
+            <div class="group p-6 border border-slate-200 dark:border-white/5 rounded-2xl hover:bg-slate-50 dark:hover:bg-white/5 transition-all duration-300">
+              <p class="text-[10px] uppercase tracking-[0.2em] text-slate-400 mb-2">Search Query</p>
+              <p class="text-lg font-medium font-mono">{search || '—'}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Quick Actions -->
+        <div class="lg:col-span-7">
+          <span class="block text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-6">Quick Actions</span>
+          
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <a 
+              href="/users" 
+              use:inertia
+              class="group relative p-6 border border-slate-200 dark:border-white/5 rounded-2xl hover:border-primary-500/50 transition-all duration-300 overflow-hidden"
+            >
+              <div class="absolute inset-0 bg-primary-500/5 transform translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div>
+              <div class="relative z-10">
+                <div class="flex items-center justify-between mb-4">
+                  <div class="h-10 w-10 bg-primary-500/10 rounded-full flex items-center justify-center">
+                    <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke-linecap="round" stroke-linejoin="round"/>
+                      <circle cx="9" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </div>
+                  <svg class="w-4 h-4 text-slate-400 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+                <h3 class="text-lg font-bold mb-1">Manage Users</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400">View and manage all registered users</p>
+              </div>
+            </a>
+
+            <a 
+              href="/profile" 
+              use:inertia
+              class="group relative p-6 border border-slate-200 dark:border-white/5 rounded-2xl hover:border-accent-500/50 transition-all duration-300 overflow-hidden"
+            >
+              <div class="absolute inset-0 bg-accent-500/5 transform translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div>
+              <div class="relative z-10">
+                <div class="flex items-center justify-between mb-4">
+                  <div class="h-10 w-10 bg-accent-500/10 rounded-full flex items-center justify-center">
+                    <svg class="w-5 h-5 text-accent-600 dark:text-accent-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke-linecap="round" stroke-linejoin="round"/>
+                      <circle cx="12" cy="7" r="4" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </div>
+                  <svg class="w-4 h-4 text-slate-400 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+                <h3 class="text-lg font-bold mb-1">Edit Profile</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400">Update your account information</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+</div>