create-nara 0.1.0

package/templates/vue/resources/js/components/UserModal.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+
+interface UserForm {
+  name: string;
+  email: string;
+  phone?: string;
+  is_admin: boolean;
+  is_verified: boolean;
+  password?: string;
+}
+
+const props = defineProps<{
+  show: boolean;
+  mode?: 'create' | 'edit';
+  form: UserForm;
+  isSubmitting?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', form: UserForm): void;
+}>();
+
+const handleClose = () => {
+  emit('close');
+};
+
+const handleSubmit = () => {
+  emit('submit', props.form);
+};
+
+const handleBackdropClick = (e: MouseEvent) => {
+  if (e.target === e.currentTarget) {
+    handleClose();
+  }
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.show) {
+    handleClose();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+        @click="handleBackdropClick"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        tabindex="-1"
+      >
+        <!-- Background Blur & Overlay -->
+        <div class="absolute inset-0 bg-black/70 backdrop-blur-md"></div>
+
+        <!-- Decorative Elements -->
+        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl pointer-events-none"></div>
+        <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary-500/10 rounded-full blur-3xl pointer-events-none"></div>
+
+        <!-- Modal Container -->
+        <Transition
+          appear
+          enter-active-class="transition duration-500 ease-out-back"
+          enter-from-class="opacity-0 translate-y-12 scale-95"
+          enter-to-class="opacity-100 translate-y-0 scale-100"
+        >
+          <div class="relative w-full max-w-lg">
+            <!-- Glowing Border Effect -->
+            <div class="absolute -inset-px bg-gradient-to-br from-accent-500/50 via-transparent to-primary-500/50 rounded-3xl blur-sm opacity-60"></div>
+
+            <!-- Modal Content -->
+            <div class="relative bg-white dark:bg-surface-dark rounded-3xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-2xl">
+
+              <!-- Header -->
+              <div class="relative px-8 pt-8 pb-6 border-b border-slate-100 dark:border-white/5">
+                <!-- Decorative Line -->
+                <div class="absolute top-0 left-8 right-8 h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent"></div>
+
+                <div class="flex items-start justify-between">
+                  <div>
+                    <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-accent-600 dark:text-accent-400 mb-2">
+                      {{ mode === 'create' ? 'New Entry' : 'Edit Entry' }}
+                    </p>
+                    <h3 id="modal-title" class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
+                      {{ mode === 'create' ? 'Create User' : 'Update User' }}
+                    </h3>
+                  </div>
+
+                  <!-- Close Button -->
+                  <button
+                    class="group w-10 h-10 flex items-center justify-center rounded-full border border-slate-200 dark:border-white/10 hover:border-red-500/50 hover:bg-red-500/5 transition-all duration-300"
+                    @click="handleClose"
+                    :disabled="isSubmitting"
+                    aria-label="Close modal"
+                  >
+                    <svg class="w-4 h-4 text-slate-400 group-hover:text-red-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Form -->
+              <form class="p-8 space-y-6" @submit.prevent="handleSubmit">
+
+                <!-- Name Field -->
+                <div class="group">
+                  <label for="user-name" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+                    Full Name
+                  </label>
+                  <div class="relative">
+                    <input
+                      id="user-name"
+                      class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                      type="text"
+                      v-model="form.name"
+                      placeholder="Enter full name"
+                    />
+                    <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-accent-500 group-focus-within:w-full transition-all duration-500"></div>
+                  </div>
+                </div>
+
+                <!-- Email Field -->
+                <div class="group">
+                  <label for="user-email" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+                    Email Address
+                  </label>
+                  <div class="relative">
+                    <input
+                      id="user-email"
+                      class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                      type="email"
+                      v-model="form.email"
+                      placeholder="user@example.com"
+                    />
+                  </div>
+                </div>
+
+                <!-- Phone Field -->
+                <div class="group">
+                  <label for="user-phone" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+                    Phone Number
+                    <span class="text-slate-400 dark:text-slate-600 font-normal normal-case tracking-normal ml-1">(optional)</span>
+                  </label>
+                  <div class="relative">
+                    <input
+                      id="user-phone"
+                      class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-0 outline-none transition-colors font-mono"
+                      type="text"
+                      v-model="form.phone"
+                      placeholder="+62 xxx xxxx xxxx"
+                    />
+                  </div>
+                </div>
+
+                <!-- Role & Status Toggles -->
+                <div class="grid grid-cols-2 gap-4 pt-2">
+                  <!-- Admin Toggle -->
+                  <label class="group relative flex items-center gap-4 p-4 rounded-2xl border border-slate-200 dark:border-white/10 hover:border-accent-500/30 cursor-pointer transition-all duration-300" :class="{ 'bg-accent-500/5 border-accent-500/30': form.is_admin }">
+                    <div class="relative">
+                      <input
+                        type="checkbox"
+                        class="sr-only peer"
+                        v-model="form.is_admin"
+                      />
+                      <div class="w-12 h-7 bg-slate-200 dark:bg-white/10 rounded-full peer-checked:bg-accent-500 transition-colors"></div>
+                      <div class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
+                    </div>
+                    <div>
+                      <p class="text-sm font-bold text-slate-900 dark:text-white">Admin</p>
+                      <p class="text-[10px] text-slate-400 dark:text-slate-500">Full access</p>
+                    </div>
+                  </label>
+
+                  <!-- Verified Toggle -->
+                  <label class="group relative flex items-center gap-4 p-4 rounded-2xl border border-slate-200 dark:border-white/10 hover:border-primary-500/30 cursor-pointer transition-all duration-300" :class="{ 'bg-primary-500/5 border-primary-500/30': form.is_verified }">
+                    <div class="relative">
+                      <input
+                        type="checkbox"
+                        class="sr-only peer"
+                        v-model="form.is_verified"
+                      />
+                      <div class="w-12 h-7 bg-slate-200 dark:bg-white/10 rounded-full peer-checked:bg-primary-500 transition-colors"></div>
+                      <div class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
+                    </div>
+                    <div>
+                      <p class="text-sm font-bold text-slate-900 dark:text-white">Verified</p>
+                      <p class="text-[10px] text-slate-400 dark:text-slate-500">Email confirmed</p>
+                    </div>
+                  </label>
+                </div>
+
+                <!-- Password Field -->
+                <div class="group pt-2">
+                  <label for="user-password" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+                    {{ mode === 'create' ? 'Password' : 'New Password' }}
+                    <span class="text-slate-400 dark:text-slate-600 font-normal normal-case tracking-normal ml-1">(optional)</span>
+                  </label>
+                  <div class="relative">
+                    <input
+                      id="user-password"
+                      class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                      type="password"
+                      v-model="form.password"
+                      :placeholder="mode === 'create' ? 'Leave empty to use email' : 'Leave empty to keep current'"
+                    />
+                  </div>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex items-center justify-end gap-4 pt-6 border-t border-slate-100 dark:border-white/5">
+                  <button
+                    type="button"
+                    class="px-6 py-3 text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors disabled:opacity-50"
+                    @click="handleClose"
+                    :disabled="isSubmitting"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    class="group relative px-8 py-3 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full overflow-hidden hover:scale-105 active:scale-95 transition-transform disabled:opacity-50 disabled:hover:scale-100"
+                    :disabled="isSubmitting"
+                  >
+                    <span class="relative z-10 flex items-center gap-2">
+                      <template v-if="isSubmitting">
+                        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        Saving...
+                      </template>
+                      <template v-else>
+                        {{ mode === 'create' ? 'Create User' : 'Save Changes' }}
+                        <svg class="w-4 h-4 transform 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>
+                      </template>
+                    </span>
+                    <div class="absolute inset-0 bg-gradient-to-r from-accent-500 to-primary-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ease-out-back {
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+</style>

package/templates/vue/resources/js/components/index.ts

@@ -0,0 +1,5 @@
+export { default as DarkModeToggle } from './DarkModeToggle.vue';
+export { default as Header } from './Header.vue';
+export { default as NaraIcon } from './NaraIcon.vue';
+export { default as Pagination } from './Pagination.vue';
+export { default as UserModal } from './UserModal.vue';

package/templates/vue/resources/js/pages/auth/forgot-password.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import axios from 'axios';
+import { api, Toast } from '../../utils/helper';
+import NaraIcon from '../../components/NaraIcon.vue';
+import DarkModeToggle from '../../components/DarkModeToggle.vue';
+
+const props = defineProps<{
+  error?: string;
+}>();
+
+const form = ref({
+  email: '',
+  phone: '',
+});
+
+const success = ref(false);
+const processing = ref(false);
+
+onMounted(() => {
+  if (props.error) {
+    Toast(props.error, 'error');
+  }
+});
+
+watch(() => props.error, (newError) => {
+  if (newError) {
+    Toast(newError, 'error');
+  }
+});
+
+async function submit() {
+  processing.value = true;
+  const result = await api(() => axios.post("/forgot-password", form.value));
+  processing.value = false;
+
+  if (result.success) {
+    success.value = true;
+    form.value.email = "";
+    form.value.phone = "";
+  }
+}
+</script>
+
+<template>
+  <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">
+        <Link href="/" class="flex items-center gap-2">
+          <img src="/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>
+        </Link>
+        <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 />
+      </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>
+
+          <div v-if="success" class="p-4 mb-4 text-sm text-green-400 rounded-lg bg-green-900/50" role="alert">
+            Link reset password telah dikirim ke email atau nomor telepon Anda.
+          </div>
+
+          <form class="space-y-4 md:space-y-6" @submit.prevent="submit">
+            <div>
+              <label for="email" class="block mb-2 text-sm font-medium text-slate-200">Email atau Nomor Telepon</label>
+              <input
+                v-model="form.email"
+                type="text"
+                name="email"
+                id="email"
+                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"
+                placeholder="email@example.com atau 08xxxxxxxxxx"
+                required
+              />
+            </div>
+
+            <button type="submit" :disabled="processing"
+                    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 disabled:opacity-50">
+              {{ processing ? 'Mengirim...' : 'Kirim Link Reset Password' }}
+            </button>
+
+            <p class="text-sm font-light text-slate-400">
+              Ingat password Anda? <Link href="/login" class="font-medium text-primary-400 hover:underline">Login disini</Link>
+            </p>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { useForm, Link } from '@inertiajs/vue3';
+import { Toast } from '../../utils/helper';
+import NaraIcon from '../../components/NaraIcon.vue';
+
+const props = defineProps<{
+  error?: string;
+}>();
+
+const form = useForm({
+  email: '',
+  password: '',
+});
+
+onMounted(() => {
+  if (props.error) {
+    Toast(props.error, 'error');
+  }
+});
+
+watch(() => props.error, (newError) => {
+  if (newError) {
+    Toast(newError, 'error');
+  }
+});
+
+function submit() {
+  form.post('/login');
+}
+</script>
+
+<template>
+  <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>
+        <Link href="/" class="text-2xl font-bold tracking-tighter flex items-center gap-2">
+          <NaraIcon />
+          <span>NARA.</span>
+        </Link>
+      </div>
+
+      <div class="max-w-md w-full mx-auto">
+        <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" @submit.prevent="submit">
+          <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 v-model="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" >
+            <span v-if="form.errors.email" class="text-xs text-red-500 ml-1">{{ form.errors.email }}</span>
+          </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 v-model="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" >
+            <span v-if="form.errors.password" class="text-xs text-red-500 ml-1">{{ form.errors.password }}</span>
+          </div>
+
+          <div class="flex items-center justify-end">
+            <Link href="/forgot-password" class="text-sm font-medium text-slate-500 hover:text-primary-500 transition-colors">Forgot password?</Link>
+          </div>
+
+          <button type="submit" :disabled="form.processing"
+                  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">{{ form.processing ? 'LOGGING IN...' : '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? <Link href="/register" class="font-bold text-primary-600 dark:text-primary-400 hover:underline">Sign up</Link>
+          </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>
+</template>