Branding
| Qué | Dónde |
|---|---|
| Metadata del sitio (title, description) | app/layout.tsx |
| Contenido de la landing | app/page.tsx |
| Colores y tema | styles/main.css y tailwind.config.js |
| Logo | components/ui/Navbar/ |
Los colores usan variables CSS (tokens de tema en styles/theme-tokens.css), así que cambiar la paleta —incluido el modo oscuro— es editar un solo archivo.
Añadir páginas nuevas
Página protegida básica (solo requiere login):
// app/settings/page.tsx
import { requireAuth } from '@/utils/auth-helpers/access';
export default async function Settings() {
const { user } = await requireAuth();
return <div>Ajustes de {user.email}</div>;
}
Página premium (login + suscripción activa):
// app/dashboard/page.tsx
import { requireAccess } from '@/utils/auth-helpers/access';
export default async function Dashboard() {
const { user, supabase } = await requireAccess();
return <div>Dashboard premium</div>;
}
Más detalle sobre estos helpers en Autenticación.
Mensajes flash
Para notificar al usuario después de una redirección (login exitoso, error de validación…), pasa el mensaje por la URL con createFlashURL:
import { createFlashURL } from '@/components/ui/FlashMessage';
// Mensaje de éxito
redirect(
createFlashURL.success('/dashboard', '¡Bienvenido!', 'Ya has iniciado sesión.')
);
// Mensaje de error
redirect(createFlashURL.error('/signin', 'Error', 'Credenciales inválidas.'));
El componente FlashMessage los muestra como toast (con Sonner) y limpia la URL automáticamente.
Siguiente paso
Lleva tu app a producción: Despliegue.