43534c74e3
Some checks are pending
Deploy DummyBot / Build & Deploy to ${{ env.DEPLOY_HOST }} (push) Waiting to run
Frontend: - Layout base con design system (Inter+JetBrains Mono, glass, mesh, animaciones) - Landing con hero, mockup OLED, 6 features, 3 pasos - Auth unificado (login+register) con split-screen - App con sidebar fijo, filtros con contadores, stats, modal rediseñado - Settings con 4 tabs (devices/projects/tags/API) - Iconos SVG inline (sin emojis excepto el logo) - Skeletons, pulse-dot, toggle switch, toasts - Unificada vista auth.blade.php (elimina login/register separados) Deploy: - Workflow de Gitea Actions: build + push a /root/dummybot en 157.180.77.232 - Trigger: push a main (también workflow_dispatch) - SSH key dedicada ed25519 dummybot_deploy - /root/dummybot.env preserva .env real (no se commitea) - Healthcheck en /up tras migrar - Rollback state en .last_deploy Backend: - LoginController usa nueva vista auth con mode=login|register
233 lines
14 KiB
PHP
233 lines
14 KiB
PHP
@extends('layouts.base')
|
|
@section('title', 'DummyBot — Tu compañero de tareas')
|
|
|
|
@section('content')
|
|
<div x-data="{ mobileOpen: false }" class="min-h-screen flex flex-col">
|
|
|
|
{{-- NAV --}}
|
|
<nav class="sticky top-0 z-40 border-b border-white/5 glass-strong">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-glow">
|
|
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="4" y="8" width="16" height="12" rx="2"></rect>
|
|
<circle cx="9" cy="14" r="1.5" fill="currentColor"></circle>
|
|
<circle cx="15" cy="14" r="1.5" fill="currentColor"></circle>
|
|
<path d="M12 4v4"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="font-bold text-base">DummyBot</span>
|
|
</a>
|
|
|
|
<div class="hidden md:flex items-center gap-1">
|
|
<a href="#features" class="btn btn-ghost btn-sm">Funciones</a>
|
|
<a href="#how" class="btn btn-ghost btn-sm">Cómo funciona</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
@auth
|
|
<a href="{{ route('app') }}" class="btn btn-primary btn-sm">Abrir app →</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn btn-ghost btn-sm">Entrar</a>
|
|
<a href="{{ route('register') }}" class="btn btn-primary btn-sm">Empezar gratis</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{{-- HERO --}}
|
|
<section class="flex-1 flex items-center">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-20 md:py-32 grid md:grid-cols-2 gap-12 items-center">
|
|
<div class="anim-up">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-xs font-medium mb-6">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-indigo-400 pulse-dot"></span>
|
|
Para personas con TDAH
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl font-extrabold leading-[1.05] tracking-tight mb-6">
|
|
Tu lista de tareas, <span class="bg-gradient-to-br from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">hecha física.</span>
|
|
</h1>
|
|
|
|
<p class="text-lg text-zinc-400 leading-relaxed mb-8 max-w-lg">
|
|
Un bot con carita kawaii y una pantalla OLED que vive en tu escritorio.
|
|
Te recuerda lo que tienes que hacer, sin pantallas, sin notificaciones,
|
|
sin agobio. Solo lo importante.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
@auth
|
|
<a href="{{ route('app') }}" class="btn btn-primary">Ir a la app →</a>
|
|
@else
|
|
<a href="{{ route('register') }}" class="btn btn-primary">Crear cuenta gratis</a>
|
|
<a href="#how" class="btn btn-ghost">Ver cómo funciona</a>
|
|
@endauth
|
|
</div>
|
|
|
|
<div class="mt-8 flex items-center gap-4 text-xs text-zinc-500">
|
|
<div class="flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Sin gamificación tóxica
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Open source
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
|
|
Privado por defecto
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Hero device mockup --}}
|
|
<div class="anim-up" style="animation-delay: 0.1s">
|
|
<div class="relative">
|
|
{{-- Glow --}}
|
|
<div class="absolute -inset-8 bg-gradient-to-br from-indigo-500/20 via-purple-500/20 to-pink-500/10 blur-3xl rounded-full"></div>
|
|
|
|
{{-- Device --}}
|
|
<div class="relative">
|
|
<div class="mx-auto w-72 h-72 rounded-3xl bg-gradient-to-br from-zinc-800 to-zinc-900 shadow-2xl border border-white/10 flex items-center justify-center p-6">
|
|
<div class="w-full aspect-square rounded-2xl bg-black border-4 border-zinc-800 flex flex-col items-center justify-center p-3 text-center">
|
|
<div class="text-[8px] text-zinc-500 mb-1">DummyBot [high]</div>
|
|
<div class="w-12 h-px bg-zinc-800 mb-2"></div>
|
|
<div class="text-xl font-bold text-white">Revisar</div>
|
|
<div class="text-xl font-bold text-white">PR urgente</div>
|
|
<div class="text-[8px] text-zinc-500 mt-2">Vence: 12 min</div>
|
|
</div>
|
|
</div>
|
|
{{-- Buttons --}}
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5">
|
|
<div class="w-8 h-2 rounded-full bg-zinc-700"></div>
|
|
<div class="w-8 h-2 rounded-full bg-zinc-700"></div>
|
|
<div class="w-8 h-2 rounded-full bg-zinc-700"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Floating notifications --}}
|
|
<div class="hidden md:block absolute -left-12 top-12 glass rounded-xl p-3 anim-fade" style="animation-delay: 0.5s">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-medium">Tarea hecha</div>
|
|
<div class="text-[10px] text-zinc-500">hace 2 min</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:block absolute -right-8 top-32 glass rounded-xl p-3 anim-fade" style="animation-delay: 0.7s">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-medium">Snooze 5 min</div>
|
|
<div class="text-[10px] text-zinc-500">Nueva tarea</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- FEATURES --}}
|
|
<section id="features" class="border-t border-white/5">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-20">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-3">Diseñado para tu cerebro</h2>
|
|
<p class="text-zinc-400 max-w-xl mx-auto">No más apps infinitas. Solo lo que necesitas, cuando lo necesitas.</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@php
|
|
$features = [
|
|
['icon' => 'check', 'color' => 'indigo', 'title' => 'Sin agobio', 'desc' => 'Solo ves la siguiente tarea. Sin scroll infinito ni listas de 47 elementos compitiendo por tu atención.'],
|
|
['icon' => 'eye', 'color' => 'purple', 'title' => 'Sin pantallas', 'desc' => 'Un OLED pequeño, sin notificaciones, sin badges rojos. Cuando miras, miras con intención.'],
|
|
['icon' => 'heart', 'color' => 'pink', 'title' => 'No judgemental', 'desc' => '¿Sin tareas? Emoji festivo, no mensaje triste. Snooze es válido. Hecho es celebrado.'],
|
|
['icon' => 'keyboard', 'color' => 'blue', 'title' => 'Atajos de teclado', 'desc' => 'n para nueva, / para buscar, s para snooze. Sin tocar el ratón. Hecho para teclado.'],
|
|
['icon' => 'zap', 'color' => 'amber', 'title' => 'Sincronización instantánea', 'desc' => 'Crea en la web → aparece en el bot en menos de 30s. Marca en el bot → se ve en la web al instante.'],
|
|
['icon' => 'lock', 'color' => 'green', 'title' => 'Tus datos son tuyos', 'desc' => 'Open source, self-hostable, sin tracking. Tu lista de tareas no es un producto.'],
|
|
];
|
|
$icons = [
|
|
'check' => '<path d="M20 6L9 17l-5-5"/>',
|
|
'eye' => '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
|
|
'heart' => '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>',
|
|
'keyboard' => '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M6 16h.01M18 16h.01M10 16h4"/>',
|
|
'zap' => '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
|
|
'lock' => '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
|
];
|
|
@endphp
|
|
@foreach($features as $f)
|
|
<div class="task-card group">
|
|
<div class="w-10 h-10 rounded-lg bg-{{ $f['color'] }}-500/10 border border-{{ $f['color'] }}-500/20 flex items-center justify-center mb-4">
|
|
<svg class="w-5 h-5 text-{{ $f['color'] }}-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
{!! $icons[$f['icon']] !!}
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-semibold mb-1.5">{{ $f['title'] }}</h3>
|
|
<p class="text-sm text-zinc-400 leading-relaxed">{{ $f['desc'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- HOW IT WORKS --}}
|
|
<section id="how" class="border-t border-white/5">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-20">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-3">Cómo funciona</h2>
|
|
<p class="text-zinc-400 max-w-xl mx-auto">De la web al escritorio en 3 pasos.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
@php
|
|
$steps = [
|
|
['n' => 1, 'title' => 'Crea tareas en la web', 'desc' => 'Desde cualquier navegador, con teclado rápido. Sin instalar nada.'],
|
|
['n' => 2, 'title' => 'Tu DummyBot se sincroniza', 'desc' => 'Cada 30 segundos el bot pide nuevas tareas. Sin empuje de notificaciones.'],
|
|
['n' => 3, 'title' => 'Pulsa un botón. Hecho.', 'desc' => 'El bot tiene 3 botones: siguiente, hecha, snooze. Vibra cuando llega algo nuevo.'],
|
|
];
|
|
@endphp
|
|
@foreach($steps as $s)
|
|
<div class="relative">
|
|
<div class="task-card">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-sm font-bold">{{ $s['n'] }}</div>
|
|
<h3 class="font-semibold">{{ $s['title'] }}</h3>
|
|
</div>
|
|
<p class="text-sm text-zinc-400 leading-relaxed">{{ $s['desc'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- CTA --}}
|
|
<section class="border-t border-white/5">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 py-20 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">¿Listo para tener menos pantallas?</h2>
|
|
<p class="text-zinc-400 mb-8 max-w-lg mx-auto">Empieza gratis. Sin tarjeta. Sin tracking. Open source.</p>
|
|
@guest
|
|
<a href="{{ route('register') }}" class="btn btn-primary">Crear cuenta gratis →</a>
|
|
@endguest
|
|
</div>
|
|
</section>
|
|
|
|
{{-- FOOTER --}}
|
|
<footer class="border-t border-white/5">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-500">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-5 h-5 rounded bg-gradient-to-br from-indigo-500 to-purple-500"></div>
|
|
<span>DummyBot · Open source · MIT</span>
|
|
</div>
|
|
<div>Hecho con 🧠 para cerebros que olvidan</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
@endsection
|