139 lines
8.6 KiB
PHP
139 lines
8.6 KiB
PHP
<x-layouts.base>
|
|
<div class="min-h-screen flex flex-col">
|
|
{{-- NAV --}}
|
|
<nav class="border-b border-white/5 backdrop-blur-md sticky top-0 z-40">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
|
|
<a href="{{ route('home') }}" class="flex items-center gap-2 text-lg font-bold">
|
|
<span class="text-2xl">🤖</span>
|
|
<span class="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">DummyBot</span>
|
|
</a>
|
|
@auth
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('app') }}" class="btn btn-ghost text-sm">App</a>
|
|
<a href="{{ route('settings') }}" class="btn btn-ghost text-sm">Ajustes</a>
|
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
|
@csrf
|
|
<button class="btn btn-ghost text-sm">Salir</button>
|
|
</form>
|
|
</div>
|
|
@else
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('login') }}" class="btn btn-ghost text-sm">Login</a>
|
|
<a href="{{ route('register') }}" class="btn btn-primary text-sm">Empezar</a>
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</nav>
|
|
|
|
{{-- HERO --}}
|
|
<main class="flex-1 flex items-center">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-16 grid lg:grid-cols-2 gap-12 items-center">
|
|
<div class="anim-in">
|
|
<div class="inline-block chip prio-low mb-4">Para cerebros que van a 200 km/h</div>
|
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
|
|
Tus tareas, en una
|
|
<span class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">pantalla</span>
|
|
con
|
|
<span class="bg-gradient-to-r from-pink-400 to-yellow-400 bg-clip-text text-transparent">cara</span>.
|
|
</h1>
|
|
<p class="mt-6 text-lg text-zinc-300 max-w-xl">
|
|
Un bot físico que te recuerda lo que tienes que hacer, vibrando y haciendo muecas.
|
|
Diseñado para personas con TDAH que se pierden entre 14 pestañas del navegador.
|
|
</p>
|
|
<div class="mt-8 flex flex-wrap gap-3">
|
|
<a href="{{ route('register') }}" class="btn btn-primary">
|
|
Crear cuenta gratis
|
|
<span class="text-xs opacity-80 ml-1">→</span>
|
|
</a>
|
|
<a href="{{ route('login') }}" class="btn btn-ghost">Ya tengo cuenta</a>
|
|
</div>
|
|
<div class="mt-10 flex items-center gap-6 text-sm text-zinc-400">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-green-400"></span> Open source
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-indigo-400"></span> Self-hosted
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-pink-400"></span> Hecho con cariño
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- PREVIEW --}}
|
|
<div class="anim-in" style="animation-delay: .15s">
|
|
<div class="relative">
|
|
<div class="absolute -inset-8 bg-gradient-to-tr from-indigo-500/20 via-purple-500/20 to-pink-500/20 blur-3xl"></div>
|
|
<div class="relative glass rounded-2xl p-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="w-3 h-3 rounded-full bg-red-400/70"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400/70"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-400/70"></div>
|
|
<div class="ml-auto text-xs text-zinc-500">dummybot.local</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="task-card flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center text-xl">😰</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Revisar PR de cliente X</div>
|
|
<div class="text-xs text-zinc-500 flex gap-2 mt-1">
|
|
<span class="chip prio-high">alta</span>
|
|
<span>~25 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="task-card flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center text-xl">😐</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Llamar al dentista</div>
|
|
<div class="text-xs text-zinc-500 flex gap-2 mt-1">
|
|
<span class="chip prio-med">media</span>
|
|
<span>5 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="task-card flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-300 to-emerald-500 flex items-center justify-center text-xl">😊</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold line-through text-zinc-500">Comprar café</div>
|
|
<div class="text-xs text-zinc-500 mt-1">✓ hecha hace 12 min</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{{-- FEATURES --}}
|
|
<section class="border-t border-white/5 py-16 bg-black/20">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@php
|
|
$features = [
|
|
['icon' => '⚡', 'title' => 'Sin fricción', 'desc' => 'Abre la app, escribe la tarea, listo. Tu DummyBot la muestra en la pantalla.'],
|
|
['icon' => '🔁', 'title' => 'Tareas recurrentes', 'desc' => 'Llamar al dentista cada lunes. Se autogeneran al marcarlas como hechas.'],
|
|
['icon' => '🏷️', 'title' => 'Proyectos y tags', 'desc' => 'Agrupa por cliente, contexto o lo que sea. Filtros al vuelo.'],
|
|
['icon' => '⌨️', 'title' => 'Atajos de teclado', 'desc' => 'n = nueva · d = done · s = snooze · / = buscar. Sin tocar el ratón.'],
|
|
['icon' => '📊', 'title' => 'Stats honestas', 'desc' => 'Sin gamificación tóxica. Solo datos para que veas cómo vas.'],
|
|
['icon' => '🔌', 'title' => 'API abierta', 'desc' => 'Webhook, JSON, importa de Notion, etc. Si lo puedes describir, lo puedes hacer.'],
|
|
];
|
|
@endphp
|
|
@foreach ($features as $f)
|
|
<div class="glass rounded-xl p-6">
|
|
<div class="text-3xl">{{ $f['icon'] }}</div>
|
|
<h3 class="mt-3 font-semibold text-lg">{{ $f['title'] }}</h3>
|
|
<p class="mt-1 text-sm text-zinc-400">{{ $f['desc'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="border-t border-white/5 py-6 text-center text-xs text-zinc-500">
|
|
DummyBot · Hecho con
|
|
<span class="text-pink-400">♥</span>
|
|
para cerebros no neurotípicos
|
|
</footer>
|
|
</div>
|
|
</x-layouts.base>
|