Merge pull request #43 from Crudzaso/develop

Develop
Crudzaso · Nov 6, 2024 · 69ef388 · 69ef388
2 parents 8cca47b + 3b459a5
commit 69ef388
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 27 deletions.
diff --git a/resources/js/Pages/About.vue b/resources/js/Pages/About.vue
@@ -1,33 +1,39 @@
 <template>
-  <div :style="{ backgroundColor: theme.background, color: theme.textPrimary }" class="min-h-screen transition-colors duration-500">
+  <div :style="{ backgroundColor: theme.background, color: theme.textPrimary }"
+    class="min-h-screen transition-colors duration-500">
     <!-- Encabezado de la página -->
-    <header :style="{ background: theme.primary }" class="p-8 text-center">
-      <h1 class="text-4xl font-bold mb-2">Acerca de Gananza</h1>
+    <header :style="{ background: theme.gradient }" class="p-6 border-b text-center relative">
+      <h1 class="text-4xl font-bold mb-2" :style="{ color: theme.textPrimary }">Acerca de Gananza</h1>
       <p class="text-lg">Más cerca de ganar</p>
 
-      <a href="/" class="absolute left-8 top-4">
-        <img src="/assets/media/logo/gananzaLogo.png" alt="Logo de Gananza" class="w-32 h-32 object-contain cursor-pointer" />
+      <a href="/" class="absolute left-8 top-9">
+        <img :src="isDarkMode ? '/assets/media/auth/Logo-Gananza1.svg' : '/assets/media/auth/Logo-Gananza2.svg'"
+          alt="Gananza Logo" class="h-12" />
       </a>
     </header>
 
     <!-- Descripción del proyecto -->
     <section class="py-12 px-6 max-w-4xl mx-auto text-center">
       <h2 class="text-3xl font-semibold mb-4" :style="{ color: theme.accent }">¿Qué es Gananza?</h2>
       <p class="text-lg leading-relaxed" :style="{ color: theme.textSecondary }">
-        Gananza es una plataforma innovadora que revoluciona la forma en que organizamos y participamos en rifas, conectando personas y sueños a través de la tecnología.
+        Gananza es una plataforma innovadora que revoluciona la forma en que organizamos y participamos en rifas,
+        conectando personas y sueños a través de la tecnología.
       </p>
       <p class="text-lg leading-relaxed mt-4" :style="{ color: theme.textSecondary }">
-        Con valores de confianza, transparencia, innovación y accesibilidad, Gananza ofrece una experiencia única, donde cada ticket representa una oportunidad de ganar y hacer realidad tus sueños.
+        Con valores de confianza, transparencia, innovación y accesibilidad, Gananza ofrece una experiencia única, donde
+        cada ticket representa una oportunidad de ganar y hacer realidad tus sueños.
       </p>
     </section>
 
     <!-- Sección de Equipo -->
     <section class="py-12 px-6 max-w-6xl mx-auto text-center">
       <h2 class="text-3xl font-semibold mb-8" :style="{ color: theme.accent }">Nuestro Equipo</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div v-for="(member, index) in teamMembers" :key="index" class="text-center p-6 rounded-lg shadow-lg transition-transform duration-300 hover:scale-105" :style="{ background: theme.cardBackground }">
-          <img :src="member.photo" alt="Foto de {{ member.name }}" class="w-40 h-40 mx-auto rounded-full mb-4 object-cover" />
-
+        <div v-for="(member, index) in teamMembers" :key="index"
+          class="text-center p-6 rounded-lg shadow-lg transition-transform duration-300 hover:scale-105"
+          :style="{ background: theme.cardBackground, borderColor: theme.border }">
+          <img :src="member.photo" :alt="`Foto de ${member.name}`"
+            class="w-40 h-40 mx-auto rounded-full mb-4 object-cover" />
           <h3 class="text-2xl font-semibold" :style="{ color: theme.textPrimary }">{{ member.name }}</h3>
           <p class="text-lg" :style="{ color: theme.textSecondary }">{{ member.role }}</p>
           <p class="mt-2" :style="{ color: theme.textSecondary }">{{ member.bio }}</p>
@@ -36,22 +42,49 @@
     </section>
 
     <!-- Toggle de Modo Oscuro/Claro -->
-    <div class="fixed top-4 right-4">
-      <button @click="toggleDarkMode" class="p-3 rounded-full transition-colors duration-200 hover:scale-105" :style="{ background: theme.cardBackground }">
+    <div class="fixed top-9 right-4">
+      <button @click="toggleDarkMode" class="p-3 rounded-full transition-colors duration-200 hover:scale-105"
+        :style="{ background: theme.cardBackground }">
         <Sun v-if="isDarkMode" :size="24" :color="theme.accent" />
         <Moon v-else :size="24" :color="theme.primary" />
       </button>
     </div>
   </div>
 </template>
 
+
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { Sun, Moon } from 'lucide-vue-next';
 
 // Estado de modo oscuro
 const isDarkMode = ref(false);
 
+// Definición del tema
+const themes = {
+  light: {
+    background: '#F9FAFB',
+    textPrimary: '#212121',
+    textSecondary: '#757575',
+    primary: '#1565C0',
+    accent: '#FFC107',
+    cardBackground: '#FFFFFF',
+    border: '#E0E0E0',
+    gradient: 'linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%)'
+  },
+  dark: {
+    background: '#121212',
+    textPrimary: '#E0E0E0',
+    textSecondary: '#B0BEC5',
+    primary: '#42A5F5',
+    accent: '#FFCA28',
+    cardBackground: '#1E1E1E',
+    border: '#424242',
+    gradient: 'linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)'
+  }
+};
+const theme = computed(() => (isDarkMode.value ? themes.dark : themes.light));
+
 // Función para alternar el modo oscuro/claro
 const toggleDarkMode = () => {
   isDarkMode.value = !isDarkMode.value;
@@ -64,18 +97,8 @@ onMounted(() => {
   isDarkMode.value = savedMode === 'true';
 });
 
-// Definición del tema dinámico
-const theme = computed(() => ({
-  background: isDarkMode.value ? '#121212' : '#FFFFFF',
-  textPrimary: isDarkMode.value ? '#E0E0E0' : '#2C3E50',
-  textSecondary: isDarkMode.value ? '#B0BEC5' : '#757575',
-  primary: isDarkMode.value ? '#5DADE2' : '#5DADE2', // Azul suave en ambos modos
-  accent: isDarkMode.value ? '#F4D03F' : '#58D68D', // Dorado y Verde Suave
-  cardBackground: isDarkMode.value ? '#1E1E1E' : '#FFFFFF'
-}));
-
 // Información del equipo
-const teamMembers = ref([
+const teamMembers = [
   {
     name: 'Alejandro Velasquez',
     role: 'Full Stack Developer',
@@ -94,5 +117,5 @@ const teamMembers = ref([
     bio: 'Especializado en el diseño de componentes y en la experiencia de usuario, su trabajo se centra en crear interfaces intuitivas y atractivas para los usuarios de la plataforma de rifas.',
     photo: '/assets/team/member3.jpeg'
   }
-]);
-</script>
+];
+</script>
diff --git a/resources/js/Pages/HomePage.vue b/resources/js/Pages/HomePage.vue
@@ -0,0 +1,18 @@
+<template>
+    <NavBar />
+    <Aside />
+
+</template>
+<script>
+import { router } from '@inertiajs/vue3';
+import Aside from '@/Components/aside.vue';
+import NavBar from '@/Components/NavBar.vue';
+
+export default {
+    methods: {
+        logout() {
+            router.post(route('logout'));
+        }
+    }
+};
+</script>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
@@ -315,8 +315,9 @@ onBeforeUnmount(() => {
                     Repositorio en GitHub</Link>
                     <Link href="/contact" class="hover:underline transition-colors duration-200"
                         :style="{ color: theme.textSecondary }">Contáctanos</Link>
-                    <Link :href="route('about')" class="hover:underline transition-colors duration-200" :style="{ color: theme.textSecondary }">
-                        Sobre Nosotros</Link>
+                    <Link :href="route('about')" class="hover:underline transition-colors duration-200"
+                        :style="{ color: theme.textSecondary }">
+                    Sobre Nosotros</Link>
                 </div>
                 <p class="text-sm mt-4">Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})</p>
             </div>