Initial commit: SIBU 2.0 MISSION

frontend/src/views/AuthView.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import LoginForm from '@/components/auth/LoginForm.vue'
+import RegisterForm from '@/components/auth/RegisterForm.vue'
+
+const isLogin = ref(true)
+
+const toggleAuth = () => {
+  isLogin.value = !isLogin.value
+}
+</script>
+
+<template>
+  <div class="auth-view">
+    <div class="auth-box">
+      <div class="auth-header">
+        <img src="/icon-192.png" alt="SIBU Logo" class="logo" />
+        <h1 class="brand-name">SIBU</h1>
+        <p class="brand-tagline">Moviendo a tu comunidad</p>
+      </div>
+      
+      <transition name="fade" mode="out-in">
+        <LoginForm v-if="isLogin" :on-toggle="toggleAuth" />
+        <RegisterForm v-else :on-toggle="toggleAuth" :on-success="() => isLogin = true" />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auth-view {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #42b983 0%, #2c3e50 100%);
+  padding: 20px;
+}
+
+.auth-box {
+  background: var(--card-bg);
+  width: 100%;
+  max-width: 440px;
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+.brand-name {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.brand-tagline {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 4px 0 0 0;
+}
+
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>