110 lines
5.2 KiB
Vue
110 lines
5.2 KiB
Vue
<script setup>
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
|
|
|
|
defineProps({
|
|
canLogin: {
|
|
type: Boolean,
|
|
},
|
|
canRegister: {
|
|
type: Boolean,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Gestor de tareas" />
|
|
|
|
<div class="landing-shell min-vh-100">
|
|
<div class="container py-4 py-lg-5">
|
|
<header class="hero-card rounded-4 px-3 px-lg-4 py-3 mb-4">
|
|
<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<ApplicationLogo style="height: 48px; width: 48px;" />
|
|
<div>
|
|
<h1 class="h4 mb-1">Gestor de Tareas</h1>
|
|
<p class="text-muted mb-0 small">Organiza proyectos, prioriza tareas y avanza sin perder el control.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav v-if="canLogin" class="d-flex flex-wrap gap-2 align-items-center">
|
|
<template v-if="$page.props.auth.user">
|
|
<Link :href="route('dashboard')" class="btn btn-primary btn-sm px-3">
|
|
Ir al panel
|
|
</Link>
|
|
</template>
|
|
<template v-else>
|
|
<Link :href="route('login')" class="btn btn-outline-primary btn-sm px-3">
|
|
Iniciar sesión
|
|
</Link>
|
|
<Link v-if="canRegister" :href="route('register')" class="btn btn-primary btn-sm px-3">
|
|
Registrarse
|
|
</Link>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="row align-items-center g-4">
|
|
<section class="col-lg-7">
|
|
<div class="hero-card rounded-4 p-4 p-lg-5">
|
|
<span class="badge rounded-pill text-bg-primary-subtle text-primary mb-3">Productividad clara</span>
|
|
<h2 class="display-6 fw-bold mb-3">Tu espacio para gestionar proyectos y tareas con calma.</h2>
|
|
<p class="lead text-secondary mb-4">
|
|
Crea proyectos, organiza las prioridades, divide cada trabajo en subtareas y lleva un seguimiento visual de cada avance.
|
|
</p>
|
|
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<Link v-if="$page.props.auth.user" :href="route('projects.index')" class="btn btn-primary btn-lg">
|
|
Abrir proyectos
|
|
</Link>
|
|
<template v-else>
|
|
<Link :href="route('register')" class="btn btn-primary btn-lg">
|
|
Empieza gratis
|
|
</Link>
|
|
<Link :href="route('login')" class="btn btn-outline-primary btn-lg">
|
|
Ya tengo cuenta
|
|
</Link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="col-lg-5">
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="hero-card rounded-4 p-4 h-100">
|
|
<div class="feature-icon mb-3">
|
|
<i class="bi bi-kanban"></i>
|
|
</div>
|
|
<h3 class="h5">Tablero visual</h3>
|
|
<p class="text-secondary mb-0">Mueve tareas entre estados y visualiza el progreso desde una sola vista.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="hero-card rounded-4 p-4 h-100">
|
|
<div class="feature-icon mb-3">
|
|
<i class="bi bi-list-check"></i>
|
|
</div>
|
|
<h3 class="h5">Subtareas y prioridades</h3>
|
|
<p class="text-secondary mb-0">Desglosa cada trabajo y marca lo importante para completar todo sin ruido.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="hero-card rounded-4 p-4 h-100">
|
|
<div class="feature-icon mb-3">
|
|
<i class="bi bi-shield-check"></i>
|
|
</div>
|
|
<h3 class="h5">Acceso seguro</h3>
|
|
<p class="text-secondary mb-0">Tu sesión se mantiene protegida y tu panel está disponible cuando quieras entrar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|