feat: Add logo and enhance login functionality

- Introduce a new logo asset for branding.
- Update LoginDialog.vue to include routing for successful login and registration.
- Modify Navbar.vue to integrate LoginDialog and manage its visibility.
- Revise Login.vue to update the logo and welcome title, along with routing enhancements post-login and registration.

src/components/auth/LoginDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Button } from '@/components/ui/button'
@@ -18,6 +19,7 @@ interface Emits {
   (e: 'success'): void
 }
 
+const router = useRouter()
 defineProps<Props>()
 const emit = defineEmits<Emits>()
 
@@ -64,6 +66,8 @@ async function handleLogin() {
     toast.success('Login successful!')
     emit('success')
     handleClose()
+    // Redirect to home page after successful login
+    router.push('/')
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Login failed'
     toast.error('Login failed. Please check your credentials.')
@@ -89,6 +93,8 @@ async function handleRegister() {
     toast.success('Registration successful!')
     emit('success')
     handleClose()
+    // Redirect to home page after successful registration
+    router.push('/')
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Registration failed'
     toast.error('Registration failed. Please try again.')

src/components/layout/Navbar.vue

@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/badge'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Sun, Moon, Menu, X, User, LogOut } from 'lucide-vue-next'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { auth } from '@/composables/useAuth'
 
 interface NavigationItem {
@@ -17,6 +18,7 @@ interface NavigationItem {
 const { t } = useI18n()
 const { theme, setTheme } = useTheme()
 const isOpen = ref(false)
+const showLoginDialog = ref(false)
 
 const navigation = computed<NavigationItem[]>(() => [
   { name: t('nav.home'), href: '/' },
@@ -32,6 +34,11 @@ const toggleTheme = () => {
   setTheme(theme.value === 'dark' ? 'light' : 'dark')
 }
 
+const openLoginDialog = () => {
+  showLoginDialog.value = true
+  isOpen.value = false // Close mobile menu
+}
+
 const handleLogout = async () => {
   try {
     await auth.logout()
@@ -89,7 +96,7 @@ const handleLogout = async () => {
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <Button v-else variant="outline" size="sm" class="gap-2">
+          <Button v-else variant="outline" size="sm" @click="openLoginDialog" class="gap-2">
             <User class="h-4 w-4" />
             Login
           </Button>
@@ -124,6 +131,7 @@ const handleLogout = async () => {
         <!-- Authentication in mobile menu -->
         <div class="mb-4 px-2">
           <Button v-if="!auth.isAuthenticated.value" variant="outline" size="sm"
+            @click="openLoginDialog"
             class="w-full gap-2 min-h-[44px] touch-manipulation">
             <User class="h-4 w-4" />
             Login
@@ -168,5 +176,7 @@ const handleLogout = async () => {
       </div>
     </div>
 
+    <!-- Login Dialog -->
+    <LoginDialog v-model:is-open="showLoginDialog" />
   </nav>
 </template>

src/pages/Login.vue

@@ -4,9 +4,9 @@
       <!-- Welcome Section -->
       <div class="text-center space-y-4">
         <div class="flex justify-center">
-          <img src="@/assets/logo-72px.png" alt="Logo" class="h-24 w-24" />
+          <img src="@/assets/logo.png" alt="Logo" class="h-36 w-36" />
         </div>
-        <h1 class="text-4xl font-bold tracking-tight">Welcome to Ario</h1>
+        <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
         <p class="text-xl text-muted-foreground max-w-md">
           Your secure platform for events and community management
         </p>
@@ -137,6 +137,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -144,6 +145,7 @@ import { Label } from '@/components/ui/label'
 import { auth } from '@/composables/useAuth'
 import { toast } from 'vue-sonner'
 
+const router = useRouter()
 const showRegister = ref(false)
 const isLoading = ref(false)
 const error = ref('')
@@ -184,6 +186,8 @@ async function handleLogin() {
     })
 
     toast.success('Login successful!')
+    // Redirect to home page after successful login
+    router.push('/')
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Login failed'
     toast.error('Login failed. Please check your credentials.')
@@ -207,6 +211,8 @@ async function handleRegister() {
     })
 
     toast.success('Registration successful!')
+    // Redirect to home page after successful registration
+    router.push('/')
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Registration failed'
     toast.error('Registration failed. Please try again.')
@@ -214,4 +220,4 @@ async function handleRegister() {
     isLoading.value = false
   }
 }
-</script> 
+</script>