@ma7moudsalama/falak-app 1.0.0

package/template/src/i18n/locales/en.json

@@ -0,0 +1,121 @@
+{
+  "app": {
+    "name": "Falak App",
+    "tagline": "Built with Vue 3 & Firebase"
+  },
+  "nav": {
+    "home": "Home",
+    "dashboard": "Dashboard",
+    "profile": "Profile",
+    "admin": "Admin",
+    "login": "Sign In",
+    "register": "Create Account",
+    "logout": "Sign Out",
+    "settings": "Settings"
+  },
+  "auth": {
+    "email": "Email Address",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "displayName": "Full Name",
+    "forgotPassword": "Forgot password?",
+    "rememberMe": "Remember me",
+    "noAccount": "Don't have an account?",
+    "hasAccount": "Already have an account?",
+    "orContinueWith": "Or continue with",
+    "signInWithGoogle": "Sign in with Google",
+    "signInWithFacebook": "Sign in with Facebook",
+    "resetPassword": "Reset Password",
+    "resetPasswordDesc": "We'll send you a link to reset your password.",
+    "backToLogin": "Back to sign in",
+    "emailVerification": "Please verify your email address. Check your inbox.",
+    "passwordMismatch": "Passwords do not match.",
+    "weakPassword": "Password must be at least 8 characters.",
+    "loginSuccess": "Welcome back!",
+    "logoutSuccess": "You have been signed out.",
+    "registerSuccess": "Account created! Please verify your email."
+  },
+  "user": {
+    "role": "Role",
+    "roles": {
+      "super_admin": "Super Admin",
+      "admin": "Admin",
+      "user": "User",
+      "guest": "Guest"
+    },
+    "profile": "Profile",
+    "editProfile": "Edit Profile",
+    "changePassword": "Change Password",
+    "deleteAccount": "Delete Account",
+    "deleteAccountConfirm": "Are you sure you want to delete your account? This action is irreversible.",
+    "avatar": "Profile Picture",
+    "memberSince": "Member since"
+  },
+  "subscription": {
+    "title": "Subscription",
+    "currentPlan": "Current Plan",
+    "upgradePlan": "Upgrade Plan",
+    "cancelPlan": "Cancel Subscription",
+    "renewPlan": "Renew",
+    "expiresOn": "Expires on",
+    "status": {
+      "active": "Active",
+      "expired": "Expired",
+      "cancelled": "Cancelled",
+      "pending": "Pending"
+    },
+    "plans": {
+      "free": "Free",
+      "basic": "Basic",
+      "pro": "Pro",
+      "enterprise": "Enterprise"
+    },
+    "payNow": "Pay Now",
+    "paymentSuccess": "Payment successful! Your plan has been upgraded.",
+    "paymentFailed": "Payment failed. Please try again."
+  },
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "confirm": "Confirm",
+    "close": "Close",
+    "back": "Back",
+    "next": "Next",
+    "loading": "Loading...",
+    "search": "Search",
+    "filter": "Filter",
+    "reset": "Reset",
+    "submit": "Submit",
+    "yes": "Yes",
+    "no": "No",
+    "or": "or",
+    "and": "and",
+    "error": "An error occurred",
+    "success": "Operation successful",
+    "noData": "No data available",
+    "required": "This field is required",
+    "darkMode": "Dark Mode",
+    "lightMode": "Light Mode"
+  },
+  "offline": {
+    "title": "You're Offline",
+    "message": "Data is read-only while you're offline. Changes will resume when you reconnect.",
+    "reconnected": "Back online! You can make changes again."
+  },
+  "errors": {
+    "404": "Page not found",
+    "403": "You don't have permission to view this page.",
+    "500": "Something went wrong on our end.",
+    "network": "Network error. Please check your connection.",
+    "unknown": "An unexpected error occurred."
+  },
+  "ai": {
+    "title": "AI Assistant",
+    "placeholder": "Ask me anything...",
+    "thinking": "Thinking...",
+    "clearChat": "Clear Chat",
+    "send": "Send"
+  }
+}

package/template/src/main.js

@@ -0,0 +1,59 @@
+/**
+ * Falak App — main.js
+ * ─────────────────────
+ * Bootstraps Vue, PrimeVue, Pinia, Vue Router, and Vue I18n.
+ */
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+// PrimeVue
+import PrimeVue from 'primevue/config'
+import Aura from '@primevue/themes/aura'
+import ToastService from 'primevue/toastservice'
+import ConfirmationService from 'primevue/confirmationservice'
+import DialogService from 'primevue/dialogservice'
+import Tooltip from 'primevue/tooltip'
+import 'primeicons/primeicons.css'
+
+// Router & i18n
+import router from '@/router/index.js'
+import i18n from '@/i18n/index.js'
+
+// Styles
+import '@/assets/main.css'
+
+// Root Component
+import App from './App.vue'
+
+const app = createApp(App)
+
+// ── Pinia ──────────────────────────────────────
+app.use(createPinia())
+
+// ── PrimeVue ───────────────────────────────────
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      prefix:     'p',
+      darkModeSelector: '.dark',
+      cssLayer: false
+    }
+  },
+  ripple: true,
+  inputVariant: 'filled'
+})
+app.use(ToastService)
+app.use(ConfirmationService)
+app.use(DialogService)
+app.directive('tooltip', Tooltip)
+
+// ── Router ─────────────────────────────────────
+app.use(router)
+
+// ── i18n ───────────────────────────────────────
+app.use(i18n)
+
+// ── Mount ──────────────────────────────────────
+app.mount('#app')

package/template/src/router/index.js

@@ -0,0 +1,127 @@
+/**
+ * Vue Router Configuration
+ * ─────────────────────────
+ * Routes are organized by feature.
+ * Auth guard is applied via meta.requiresAuth and meta.requiresRole.
+ */
+
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuth } from '@/composables/useAuth.js'
+
+// ── Lazy-loaded route components ──────────────
+const HomeView      = () => import('@/views/HomeView.vue')
+const LoginView     = () => import('@/views/auth/LoginView.vue')
+const RegisterView  = () => import('@/views/auth/RegisterView.vue')
+const ForgotView    = () => import('@/views/auth/ForgotView.vue')
+const DashboardView = () => import('@/views/DashboardView.vue')
+const ProfileView   = () => import('@/views/ProfileView.vue')
+const AdminView     = () => import('@/views/AdminView.vue')
+const NotFoundView  = () => import('@/views/NotFoundView.vue')
+
+const routes = [
+  // ── Public ──────────────────────────────────
+  {
+    path:      '/',
+    name:      'home',
+    component: HomeView,
+    meta:      { title: 'Home' }
+  },
+  {
+    path:      '/login',
+    name:      'login',
+    component: LoginView,
+    meta:      { title: 'Sign In', guestOnly: true }
+  },
+  {
+    path:      '/register',
+    name:      'register',
+    component: RegisterView,
+    meta:      { title: 'Create Account', guestOnly: true }
+  },
+  {
+    path:      '/forgot-password',
+    name:      'forgot-password',
+    component: ForgotView,
+    meta:      { title: 'Reset Password', guestOnly: true }
+  },
+
+  // ── Authenticated ────────────────────────────
+  {
+    path:      '/dashboard',
+    name:      'dashboard',
+    component: DashboardView,
+    meta:      { title: 'Dashboard', requiresAuth: true }
+  },
+  {
+    path:      '/profile',
+    name:      'profile',
+    component: ProfileView,
+    meta:      { title: 'Profile', requiresAuth: true }
+  },
+
+  // ── Admin ────────────────────────────────────
+  {
+    path:      '/admin',
+    name:      'admin',
+    component: AdminView,
+    meta:      { title: 'Admin', requiresAuth: true, requiresRole: ['admin', 'super_admin'] }
+  },
+
+  // ── 404 ──────────────────────────────────────
+  {
+    path:      '/:pathMatch(.*)*',
+    name:      'not-found',
+    component: NotFoundView,
+    meta:      { title: '404 Not Found' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) return savedPosition
+    return { top: 0, behavior: 'smooth' }
+  }
+})
+
+// ── Navigation Guard ──────────────────────────
+router.beforeEach(async (to, from, next) => {
+  const { isAuthenticated, isAuthReady, userRole } = useAuth()
+
+  // Wait for Firebase auth to initialize
+  if (!isAuthReady.value) {
+    await new Promise((resolve) => {
+      const { getAuth } = require('firebase/auth')  // eslint-disable-line
+      // Actually handled via the composable's onAuthStateChanged
+      const stop = setInterval(() => {
+        if (isAuthReady.value) { clearInterval(stop); resolve() }
+      }, 50)
+      setTimeout(() => { clearInterval(stop); resolve() }, 3000)
+    })
+  }
+
+  // Set document title
+  document.title = to.meta.title
+    ? `${to.meta.title} — ${import.meta.env.VITE_APP_NAME || 'Falak App'}`
+    : import.meta.env.VITE_APP_NAME || 'Falak App'
+
+  // Guest-only routes (redirect logged-in users)
+  if (to.meta.guestOnly && isAuthenticated.value) {
+    return next({ name: 'dashboard' })
+  }
+
+  // Auth required
+  if (to.meta.requiresAuth && !isAuthenticated.value) {
+    return next({ name: 'login', query: { redirect: to.fullPath } })
+  }
+
+  // Role required
+  if (to.meta.requiresRole && !to.meta.requiresRole.includes(userRole.value)) {
+    return next({ name: 'dashboard' })
+  }
+
+  next()
+})
+
+export default router

package/template/src/stores/auth.js

@@ -0,0 +1,14 @@
+/**
+ * Auth Store (Pinia)
+ * ───────────────────
+ * Wraps the useAuth composable for global state access.
+ * Useful when you need auth state outside of components (e.g., in other stores).
+ */
+
+import { defineStore } from 'pinia'
+import { useAuth } from '@/composables/useAuth.js'
+
+export const useAuthStore = defineStore('auth', () => {
+  const auth = useAuth()
+  return { ...auth }
+})

package/template/src/views/AdminView.vue

@@ -0,0 +1,67 @@
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white">{{ $t('nav.admin') }}</h2>
+
+      <div class="card">
+        <h3 class="font-semibold mb-4 text-gray-900 dark:text-white">Users</h3>
+        <DataTable :value="userList" :loading="loading" stripedRows size="small" class="w-full">
+          <Column field="email"       header="Email"   />
+          <Column field="displayName" header="Name"    />
+          <Column field="role"        header="Role">
+            <template #body="{ data }">
+              <Select
+                :model-value="data.role"
+                :options="roleOptions"
+                optionLabel="label"
+                optionValue="value"
+                size="small"
+                @change="(e) => updateRole(data.uid, e.value)"
+              />
+            </template>
+          </Column>
+          <Column field="createdAt" header="Joined">
+            <template #body="{ data }">
+              {{ data.createdAt ? new Date(data.createdAt).toLocaleDateString() : '—' }}
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Select from 'primevue/select'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import { useAuth, ROLES } from '@/composables/useAuth.js'
+import { useDatabase } from '@/composables/useDatabase.js'
+
+const toast = useToast()
+const { setUserRole } = useAuth()
+const db    = useDatabase()
+
+const loading  = ref(true)
+const userList = ref([])
+
+const roleOptions = Object.values(ROLES).map(r => ({ label: r.replace('_', ' '), value: r }))
+
+const { items, unsubscribe } = db.listenList('users')
+onUnmounted(unsubscribe)
+
+import { watch } from 'vue'
+watch(items, (val) => {
+  userList.value = Object.values(val || {})
+  loading.value  = false
+}, { immediate: true })
+
+async function updateRole(uid, role) {
+  const result = await setUserRole(uid, role)
+  if (result.success) toast.add({ severity: 'success', summary: 'Role updated', life: 2000 })
+  else toast.add({ severity: 'error', summary: result.error, life: 3000 })
+}
+</script>

package/template/src/views/DashboardView.vue

@@ -0,0 +1,253 @@
+<template>
+  <AppLayout>
+    <div class="space-y-6">
+      <!-- Welcome -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-xl font-bold text-gray-900 dark:text-white">
+            {{ $t('nav.dashboard') }} 👋
+          </h2>
+          <p class="text-sm text-gray-500">{{ currentUser?.displayName || currentUser?.email }}</p>
+        </div>
+        <span :class="subStatus === 'active' ? 'badge-success' : 'badge-warning'" class="badge">
+          {{ $t(`subscription.plans.${subPlan || 'free'}`) }}
+        </span>
+      </div>
+
+      <!-- Stats grid -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div v-for="stat in stats" :key="stat.label" class="card flex items-center gap-4">
+          <div :class="`w-12 h-12 rounded-xl ${stat.bg} flex items-center justify-center shrink-0`">
+            <i :class="`pi ${stat.icon} ${stat.color} text-xl`" />
+          </div>
+          <div>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stat.value }}</p>
+            <p class="text-xs text-gray-500">{{ stat.label }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Live data + AI assistant -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Live feed from RTDB -->
+        <div class="card">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+              <span class="inline-block w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              Live Feed
+            </h3>
+            <Button size="small" outlined @click="addTestEntry" :disabled="!isOnline">
+              <i class="pi pi-plus me-1" /> Add Entry
+            </Button>
+          </div>
+
+          <div v-if="!isOnline" class="badge-warning badge mb-3">
+            <i class="pi pi-wifi-off me-1 text-xs" /> Offline — read only
+          </div>
+
+          <div class="space-y-2 max-h-64 overflow-y-auto">
+            <div
+              v-for="(item, key) in feedItems"
+              :key="key"
+              class="flex items-start gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-800 text-sm"
+            >
+              <i class="pi pi-circle-fill text-primary-500 text-xs mt-1" />
+              <div class="flex-1 min-w-0">
+                <p class="font-medium text-gray-800 dark:text-gray-200 truncate">{{ item.text }}</p>
+                <p class="text-xs text-gray-400">{{ formatTime(item.createdAt) }}</p>
+              </div>
+            </div>
+            <p v-if="!Object.keys(feedItems).length" class="text-sm text-gray-400 text-center py-4">
+              {{ $t('common.noData') }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Groq AI chat -->
+        <div class="card flex flex-col h-80">
+          <h3 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+            <i class="pi pi-sparkles text-primary-500" />
+            {{ $t('ai.title') }}
+          </h3>
+
+          <div ref="chatEl" class="flex-1 overflow-y-auto space-y-2 mb-3 text-sm">
+            <div v-for="(msg, i) in chatHistory" :key="i"
+                 :class="['rounded-lg px-3 py-2 max-w-[85%]',
+                   msg.role === 'user'
+                     ? 'ms-auto bg-primary-600 text-white'
+                     : 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200']">
+              <span v-if="msg.role === 'assistant' && groq.isLoading.value && i === chatHistory.length - 1">
+                <i class="pi pi-spin pi-spinner me-1" />{{ $t('ai.thinking') }}
+              </span>
+              <span v-else>{{ msg.content }}</span>
+            </div>
+            <p v-if="!chatHistory.length" class="text-gray-400 text-xs text-center mt-4">
+              {{ $t('ai.placeholder') }}
+            </p>
+          </div>
+
+          <div class="flex gap-2">
+            <InputText
+              v-model="aiInput"
+              :placeholder="$t('ai.placeholder')"
+              class="flex-1 text-sm"
+              @keyup.enter="sendAI"
+            />
+            <Button size="small" @click="sendAI" :loading="groq.isLoading.value" icon="pi pi-send" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Subscription card -->
+      <div class="card border-primary-200 dark:border-primary-800">
+        <div class="flex items-center justify-between flex-wrap gap-4">
+          <div>
+            <h3 class="font-semibold text-gray-900 dark:text-white">{{ $t('subscription.title') }}</h3>
+            <p class="text-sm text-gray-500 mt-1">
+              {{ $t('subscription.currentPlan') }}:
+              <strong>{{ $t(`subscription.plans.${subPlan || 'free'}`) }}</strong>
+              <span v-if="subExpiry" class="ms-2">
+                · {{ $t('subscription.expiresOn') }} {{ new Date(subExpiry).toLocaleDateString() }}
+              </span>
+            </p>
+          </div>
+          <Button
+            v-if="subPlan !== 'enterprise'"
+            :label="$t('subscription.upgradePlan')"
+            icon="pi pi-arrow-up"
+            @click="upgradeVisible = true"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Upgrade Dialog -->
+    <Dialog v-model:visible="upgradeVisible" :header="$t('subscription.upgradePlan')" modal class="w-full max-w-lg">
+      <div class="grid grid-cols-2 gap-4 py-4">
+        <div
+          v-for="(plan, key) in PLANS"
+          :key="key"
+          class="border rounded-xl p-4 cursor-pointer transition-all hover:border-primary-500"
+          :class="{ 'border-primary-500 bg-primary-50 dark:bg-primary-900/20': selectedPlan === key }"
+          @click="selectedPlan = key"
+        >
+          <p class="font-bold text-gray-900 dark:text-white">{{ plan.name }}</p>
+          <p class="text-lg font-bold text-primary-600 mt-1">
+            {{ plan.amountCents === 0 ? 'Free' : (plan.amountCents / 100).toFixed(2) + ' EGP' }}
+          </p>
+          <p class="text-xs text-gray-500 mt-2">{{ plan.features.join(', ') }}</p>
+        </div>
+      </div>
+      <template #footer>
+        <Button :label="$t('common.cancel')" text @click="upgradeVisible = false" />
+        <Button :label="$t('subscription.payNow')" :loading="payLoading" @click="handlePayment" />
+      </template>
+    </Dialog>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'primevue/usetoast'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import { useAuth } from '@/composables/useAuth.js'
+import { useDatabase } from '@/composables/useDatabase.js'
+import { useGroq } from '@/composables/useGroq.js'
+import { usePaymob, useSubscription, PLANS } from '@/composables/usePaymob.js'
+
+const { t }          = useI18n()
+const toast          = useToast()
+const { currentUser } = useAuth()
+const db             = useDatabase()
+const groq           = useGroq('You are a helpful assistant embedded in Falak App. Keep answers concise.')
+const paymob         = usePaymob()
+const sub            = useSubscription()
+
+const { isOnline }   = db
+
+// ── Live feed ──────────────────────────────────
+const { items: feedItems, unsubscribe } = db.listenList('demo_feed')
+onUnmounted(unsubscribe)
+
+async function addTestEntry() {
+  await db.push('demo_feed', { text: `Entry at ${new Date().toLocaleTimeString()}` })
+}
+
+function formatTime(ts) {
+  if (!ts) return ''
+  return new Date(ts).toLocaleTimeString()
+}
+
+// ── Subscription ───────────────────────────────
+const subData       = sub.listenSubscription(currentUser.value?.uid || 'none')
+const subPlan       = computed(() => subData.data.value?.planId)
+const subStatus     = computed(() => subData.data.value?.status)
+const subExpiry     = computed(() => subData.data.value?.expiresAt)
+
+// ── Stats ──────────────────────────────────────
+const stats = [
+  { label: 'Plan', value: computed(() => subPlan.value || 'Free'), icon: 'pi-star', bg: 'bg-yellow-100 dark:bg-yellow-900/30', color: 'text-yellow-600' },
+  { label: 'Status', value: computed(() => subStatus.value || '—'), icon: 'pi-check-circle', bg: 'bg-green-100 dark:bg-green-900/30', color: 'text-green-600' },
+  { label: 'Feed Items', value: computed(() => Object.keys(feedItems.value).length), icon: 'pi-database', bg: 'bg-blue-100 dark:bg-blue-900/30', color: 'text-blue-600' },
+  { label: 'Network', value: computed(() => isOnline.value ? 'Online' : 'Offline'), icon: 'pi-wifi', bg: 'bg-purple-100 dark:bg-purple-900/30', color: 'text-purple-600' }
+]
+
+// ── AI Chat ────────────────────────────────────
+const aiInput    = ref('')
+const chatHistory = ref([])
+const chatEl      = ref(null)
+
+async function sendAI() {
+  const msg = aiInput.value.trim()
+  if (!msg || groq.isLoading.value) return
+  aiInput.value = ''
+  chatHistory.value.push({ role: 'user', content: msg })
+  chatHistory.value.push({ role: 'assistant', content: '' })
+  await nextTick(() => chatEl.value?.scrollTo({ top: 99999, behavior: 'smooth' }))
+
+  let full = ''
+  await groq.streamChat(msg, (chunk) => {
+    full += chunk
+    chatHistory.value[chatHistory.value.length - 1].content = full
+  })
+}
+
+// ── Payment / Upgrade ──────────────────────────
+const upgradeVisible = ref(false)
+const selectedPlan   = ref('PRO')
+const payLoading     = ref(false)
+
+async function handlePayment() {
+  const plan = PLANS[selectedPlan.value]
+  if (!plan || plan.amountCents === 0) {
+    toast.add({ severity: 'info', summary: 'Free plan activated', life: 2000 })
+    await sub.activateSubscription(currentUser.value.uid, selectedPlan.value)
+    upgradeVisible.value = false
+    return
+  }
+  payLoading.value = true
+  const result = await paymob.openPaymentTab({
+    amountCents: plan.amountCents,
+    billingData: {
+      first_name: currentUser.value?.displayName?.split(' ')[0] || 'Customer',
+      last_name:  currentUser.value?.displayName?.split(' ')[1] || 'User',
+      email:      currentUser.value?.email || 'user@example.com',
+      phone_number: '+20xxxxxxxxxx',
+      apartment: 'NA', floor: 'NA', street: 'NA',
+      building: 'NA', city: 'Cairo', country: 'EG',
+      state: 'NA', postal_code: 'NA', shipping_method: 'NA'
+    }
+  })
+  payLoading.value = false
+  if (!result.success) {
+    toast.add({ severity: 'error', summary: t('subscription.paymentFailed'), life: 3000 })
+  } else {
+    toast.add({ severity: 'info', summary: 'Complete payment in the new tab', life: 4000 })
+    upgradeVisible.value = false
+  }
+}
+</script>

package/template/src/views/HomeView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="min-h-screen bg-white dark:bg-gray-950 flex flex-col items-center justify-center p-8 text-center">
+    <div class="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-primary-600 mb-6 shadow-lg">
+      <span class="text-white font-bold text-4xl">F</span>
+    </div>
+    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3">{{ $t('app.name') }}</h1>
+    <p class="text-gray-500 mb-8 max-w-md">{{ $t('app.tagline') }}</p>
+    <div class="flex gap-3">
+      <RouterLink to="/login" class="btn-secondary">{{ $t('nav.login') }}</RouterLink>
+      <RouterLink to="/register" class="btn-primary">{{ $t('nav.register') }}</RouterLink>
+    </div>
+  </div>
+</template>

package/template/src/views/NotFoundView.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center p-8 text-center bg-white dark:bg-gray-950">
+    <p class="text-8xl font-black text-primary-100 dark:text-primary-900 mb-4">404</p>
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ $t('errors.404') }}</h1>
+    <p class="text-gray-500 mb-8">The page you're looking for doesn't exist.</p>
+    <RouterLink to="/" class="btn-primary">← Back to Home</RouterLink>
+  </div>
+</template>