feat: public landing page with magic login, brand palette and demo build flag
Adds a public funnel landing at `/` and moves the login to `/login`, rebuilt around the panel's own colors instead of an invented palette. Landing (`src/components/landing/`, one section per file, no props): - Seven funnel sections composed by `LandingPage`. The hero's eight swatches are literally `PIE_COLORS` from `DashboardPage`, the same hex values the seed hands to avatars and services, so "your colors become your numbers" is literal. - `BrandMark` becomes the single source for the logo, replicating `public/favicon.svg`. Blue is the action surface, orange only ever marks. - `NotebookVisual` is the one deliberate exception to the palette: it is what the product replaces. - Copy drops all system vocabulary; motion comes from `src/lib/motion.ts` with a single easing, and reduced-motion resolves `initial` to the final state so a never-firing `whileInView` cannot leave a section invisible forever. Routing and bundle: - `homePathFor` is the single definition of each role's destination. - Landing, login, dashboard and calendar load lazily. Eager, the login dragged framer-motion (~40 KB gz) into every panel load and the landing downloaded recharts + FullCalendar (~187 KB gz) without charting anything. `clsx` is pinned to the `react` chunk because Rollup otherwise assigns it to `charts`, making the entry import 111 KB gz for a 200-byte utility. Responsiveness (iPhone/iPad), verified with `npm run audit:responsive`: - No touch form field below 16px, `dvh` height utilities, safe-area insets, and 40px touch targets keyed off `pointer: coarse` rather than `sm:`. - New `.ld-gutter`: `.safe-x` lives outside `@layer` and beats Tailwind's `px-*`, so it left the login's side padding at 0 on anything but an iPhone in landscape. No overflow check could see it — there was no overflow, just zero margin. The audit now guards it with a `gutter` check. - `shell-height` no longer fires on pages that legitimately scroll; the static `raw-viewport-unit` scan covers those instead. Production build: - The Dockerfile now sets `VITE_DEMO_UI=1` as a build arg. `DEMO` is a build-time constant, so without it Vite eliminated the magic login and the "Ver como…" switcher: the deployed landing promised "no registration" and led to an empty form. Verified by building both ways and diffing the bundle. - Service worker cache bumped to v2 so the orphaned pre-landing chunks get purged from returning visitors' caches. Verified: typecheck clean; unit 39/39, e2e 33/33, admin 17/17, booking 12/12, landing 13/13 (WebKit), PWA passed against the real production build. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
AgendaPro Dev
co-authored by
Claude Opus 5
Claude Opus 5
parent
0b466f33f3
commit
4c19244df9
+109
-36
@@ -12,13 +12,19 @@ import type {
|
||||
import type { EventResizeDoneArg } from "@fullcalendar/interaction";
|
||||
import esLocale from "@fullcalendar/core/locales/es";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { CalendarDays, Plus, Filter, RotateCcw, AlertTriangle } from "lucide-react";
|
||||
import { Plus, Filter, RotateCcw, AlertTriangle } from "lucide-react";
|
||||
import { api } from "../lib/api";
|
||||
import { useAuth } from "../lib/auth";
|
||||
import type { Appointment } from "../../shared/types";
|
||||
import { PageHeader, Spinner, EmptyState } from "../components/ui";
|
||||
import { PageHeader, Spinner } from "../components/ui";
|
||||
import { AppointmentModal } from "../components/AppointmentModal";
|
||||
import { statusColor } from "../lib/format";
|
||||
import { useBreakpoint } from "../lib/useBreakpoint";
|
||||
|
||||
/** Aire bajo el calendario (padding inferior del contenedor + respiro visual). */
|
||||
const CAL_BOTTOM_GAP = 20;
|
||||
/** Por debajo de esto la grilla es inservible: mejor que la página scrollee. */
|
||||
const CAL_MIN_HEIGHT = 360;
|
||||
|
||||
const STATUS_FILTERS = [
|
||||
{ value: "all", label: "Todas" },
|
||||
@@ -38,15 +44,13 @@ export function CalendarPage() {
|
||||
const [draftSlot, setDraftSlot] = useState<{ start: string; end: string } | null>(null);
|
||||
const [employeeFilter, setEmployeeFilter] = useState<number | "all">("all");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [isMobile, setIsMobile] = useState(
|
||||
typeof window !== "undefined" ? window.matchMedia("(max-width: 640px)").matches : false
|
||||
);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(max-width: 640px)");
|
||||
const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
}, []);
|
||||
const bp = useBreakpoint();
|
||||
const isMobile = bp === "phone";
|
||||
const isTablet = bp === "tablet";
|
||||
|
||||
const calWrapRef = useRef<HTMLDivElement>(null);
|
||||
const chromeRef = useRef<HTMLDivElement>(null);
|
||||
const [calHeight, setCalHeight] = useState<number | null>(null);
|
||||
|
||||
const isOwner = user?.role === "owner";
|
||||
// Employees see only their own by default
|
||||
@@ -75,6 +79,39 @@ export function CalendarPage() {
|
||||
},
|
||||
});
|
||||
|
||||
// La altura del calendario se le pasa como número en lugar de height="100%":
|
||||
// FullCalendar mide su contenedor una sola vez al montar y solo re-mide en
|
||||
// resize de ventana, así que se quedaba con una altura vieja cuando el layout
|
||||
// cambiaba después (en un iPhone 12 daba 360px dentro de un contenedor de
|
||||
// 525px). Se mide contra el viewport —posición real del contenedor e
|
||||
// innerHeight— y no contra el contenedor flex, cuya altura se resuelve más
|
||||
// tarde que el primer ciclo de medición.
|
||||
useEffect(() => {
|
||||
const compute = () => {
|
||||
const el = calWrapRef.current;
|
||||
if (!el) return;
|
||||
const top = el.getBoundingClientRect().top;
|
||||
const available = Math.round(window.innerHeight - top - CAL_BOTTOM_GAP);
|
||||
setCalHeight(Math.max(CAL_MIN_HEIGHT, available));
|
||||
};
|
||||
compute();
|
||||
// Se observa la barra de filtros y no el body: el shell es overflow-hidden con
|
||||
// altura fija, así que el body nunca cambia de tamaño y un observador sobre él
|
||||
// no volvería a dispararse. Lo que sí reflowea es ese bloque (el filtro de
|
||||
// empleados pasa a dos filas al llegar la lista), y eso mueve el `top` del
|
||||
// calendario, que es justo lo que hay que recalcular.
|
||||
const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(compute) : null;
|
||||
if (chromeRef.current) ro?.observe(chromeRef.current);
|
||||
window.addEventListener("resize", compute);
|
||||
window.addEventListener("orientationchange", compute);
|
||||
return () => {
|
||||
ro?.disconnect();
|
||||
window.removeEventListener("resize", compute);
|
||||
window.removeEventListener("orientationchange", compute);
|
||||
};
|
||||
// employeesData y moveError cambian el alto del chrome; bp cambia la toolbar.
|
||||
}, [employeesData, moveError, bp]);
|
||||
|
||||
const events = useMemo(() => {
|
||||
return (data?.appointments ?? []).map((a) => {
|
||||
const empColor = a.employee?.color ?? "#3b66ff";
|
||||
@@ -148,6 +185,14 @@ export function CalendarPage() {
|
||||
|
||||
const onToday = () => calRef.current?.getApi().today();
|
||||
|
||||
// La grilla empieza a las 08:00, así que en pantallas cortas la hora actual
|
||||
// puede quedar fuera de vista al abrir. Arrancamos una hora antes de "ahora",
|
||||
// acotado al rango visible de la grilla.
|
||||
const scrollTime = useMemo(() => {
|
||||
const h = Math.min(20, Math.max(8, new Date().getHours() - 1));
|
||||
return `${String(h).padStart(2, "0")}:00:00`;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<PageHeader
|
||||
@@ -193,7 +238,7 @@ export function CalendarPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 px-5 pb-3 pt-4 sm:px-7">
|
||||
<div ref={chromeRef} className="flex shrink-0 flex-wrap items-center gap-2 px-5 pb-3 pt-3 sm:gap-3 sm:px-7 sm:pt-4">
|
||||
{isOwner && (
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 sm:flex-none">
|
||||
<Filter className="h-4 w-4 shrink-0 text-slate-400" />
|
||||
@@ -211,12 +256,14 @@ export function CalendarPage() {
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-white p-1">
|
||||
{/* Una sola fila con scroll lateral en móvil: envueltos en dos filas los
|
||||
4 chips se llevaban ~150px de alto que necesita la grilla. */}
|
||||
<div className="scrollbar-none flex max-w-full items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 sm:flex-wrap sm:overflow-visible">
|
||||
{STATUS_FILTERS.map((s) => (
|
||||
<button
|
||||
key={s.value}
|
||||
onClick={() => setStatusFilter(s.value)}
|
||||
className={`rounded-lg px-2.5 py-1.5 text-xs font-semibold transition-colors ${
|
||||
className={`tap-target shrink-0 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors ${
|
||||
statusFilter === s.value ? "bg-brand-500 text-white" : "text-slate-600 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
@@ -226,24 +273,42 @@ export function CalendarPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 pb-6 sm:px-7">
|
||||
<div className="card flex h-full min-h-0 flex-col overflow-auto p-3 sm:p-4">
|
||||
{/* min-h-0 permite que el calendario se encoja dentro del flex; min-h en el
|
||||
card evita que se aplaste en landscape de teléfono (440px de alto), donde
|
||||
es mejor que la página scrollee que comprimir la grilla. */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4 sm:px-7 sm:pb-6">
|
||||
{/* p-1.5 en móvil: el padding interno del card es ancho que le robábamos a
|
||||
la grilla (antes p-3), y aquí no cuesta consistencia visual. */}
|
||||
<div className="card flex h-full min-h-[420px] flex-col overflow-y-auto p-1.5 sm:p-4">
|
||||
{isLoading && !data && (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Spinner className="h-6 w-6 text-brand-500" />
|
||||
</div>
|
||||
)}
|
||||
{/* min-h aquí y no solo en el card: si aparece el aviso de "sin citas",
|
||||
no debe robarle altura a la grilla hasta dejarla inservible. */}
|
||||
<div ref={calWrapRef} className="min-h-[360px] flex-1 sm:min-h-[420px]">
|
||||
<FullCalendar
|
||||
ref={calRef}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
|
||||
locale={esLocale}
|
||||
initialView={isMobile ? "timeGridDay" : "timeGridWeek"}
|
||||
/* En tablet, 3 días en vez de 7: en un iPad portrait (820px) la semana
|
||||
completa con varios especialistas a la misma hora parte cada evento
|
||||
en columnas de ~30px y el texto queda en "A..", "Fe...". Con 3 días
|
||||
cada columna ronda los 250px y se lee. Semana sigue a un toque. */
|
||||
initialView={isMobile ? "timeGridDay" : isTablet ? "timeGridThreeDay" : "timeGridWeek"}
|
||||
headerToolbar={
|
||||
isMobile
|
||||
? { left: "prev,next", center: "title", right: "timeGridDay,listWeek" }
|
||||
? // "today" va en la barra superior en lugar de un footerToolbar
|
||||
// propio: esa fila extra costaba ~90px de grilla. El CSS móvil
|
||||
// pone el título en su propia línea, así que los tres grupos
|
||||
// caben en una sola fila por debajo.
|
||||
{ left: "prev,next today", center: "title", right: "timeGridDay,listWeek" }
|
||||
: isTablet
|
||||
? { left: "prev,next today", center: "title", right: "timeGridThreeDay,timeGridWeek,timeGridDay,listWeek" }
|
||||
: { left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek" }
|
||||
}
|
||||
footerToolbar={isMobile ? { center: "today" } : false}
|
||||
footerToolbar={false}
|
||||
buttonText={{
|
||||
today: "Hoy",
|
||||
month: "Mes",
|
||||
@@ -259,20 +324,32 @@ export function CalendarPage() {
|
||||
noEventsContent: "Sin citas esta semana",
|
||||
},
|
||||
timeGridDay: { buttonText: "Día" },
|
||||
timeGridThreeDay: {
|
||||
type: "timeGrid",
|
||||
duration: { days: 3 },
|
||||
buttonText: "3 días",
|
||||
},
|
||||
}}
|
||||
height={isMobile ? "auto" : "auto"}
|
||||
contentHeight={isMobile ? 560 : 680}
|
||||
/* Antes: contentHeight fijo (560/680px). Con .fc-timegrid-slot a 2.4rem
|
||||
la grilla de 08:00-21:00 mide ~1000px, así que el calendario crecía
|
||||
a 1.4× la pantalla del iPhone 12 y arrastraba la página. Ahora ocupa
|
||||
exactamente su contenedor y scrollea dentro. */
|
||||
height={calHeight ?? "100%"}
|
||||
expandRows
|
||||
stickyHeaderDates
|
||||
firstDay={1}
|
||||
slotMinTime="08:00:00"
|
||||
slotMaxTime="21:00:00"
|
||||
slotDuration="00:30:00"
|
||||
slotLabelInterval="01:00:00"
|
||||
slotLabelFormat={{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
}}
|
||||
/* En teléfono el eje horario se lleva ancho que necesitan las
|
||||
columnas: "8 a.m." en vez de "08:00 a. m.". */
|
||||
slotLabelFormat={
|
||||
isMobile
|
||||
? { hour: "numeric", hour12: true }
|
||||
: { hour: "2-digit", minute: "2-digit", hour12: true }
|
||||
}
|
||||
scrollTime={scrollTime}
|
||||
nowIndicator
|
||||
allDaySlot={false}
|
||||
selectable
|
||||
@@ -283,7 +360,7 @@ export function CalendarPage() {
|
||||
eventStartEditable
|
||||
slotEventOverlap={false}
|
||||
eventMinHeight={28}
|
||||
dayMaxEvents={isMobile ? 2 : 3}
|
||||
dayMaxEvents={isMobile ? 2 : isTablet ? 3 : 4}
|
||||
eventTimeFormat={{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
@@ -297,15 +374,11 @@ export function CalendarPage() {
|
||||
datesSet={() => refetch()}
|
||||
eventContent={(arg) => <EventContent arg={arg} />}
|
||||
/>
|
||||
{!isLoading && events.length === 0 && (
|
||||
<div className="mt-2">
|
||||
<EmptyState
|
||||
icon={CalendarDays}
|
||||
title="Sin citas en este rango"
|
||||
description="Selecciona un horario en el calendario o crea una nueva cita."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Sin EmptyState debajo de la grilla: con la altura del calendario ya
|
||||
fijada, ese bloque no cabía en el card y se solapaba con las horas.
|
||||
El vacío ya se comunica por la propia grilla y, en la vista Lista,
|
||||
por noEventsContent — más el botón "Nueva cita" de la cabecera. */}
|
||||
</div>
|
||||
<button onClick={onToday} className="sr-only">Hoy</button>
|
||||
</div>
|
||||
|
||||
@@ -106,7 +106,7 @@ export function DashboardPage() {
|
||||
key={r.value}
|
||||
onClick={() => setRange(r.value)}
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors",
|
||||
"tap-target rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors",
|
||||
range === r.value ? "bg-brand-500 text-white" : "text-slate-600 hover:bg-slate-100"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -88,7 +88,7 @@ export function EmployeesPage() {
|
||||
setEditing(e);
|
||||
setCreating(false);
|
||||
}}
|
||||
className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand-600"
|
||||
className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand-600"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
@@ -96,7 +96,7 @@ export function EmployeesPage() {
|
||||
onClick={() => {
|
||||
if (confirm(`¿Eliminar a ${e.name}?`)) removeMut.mutate(e.id);
|
||||
}}
|
||||
className="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600"
|
||||
className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { LandingNav } from "../components/landing/LandingNav";
|
||||
import { HeroSection } from "../components/landing/HeroSection";
|
||||
import { CostSection } from "../components/landing/CostSection";
|
||||
import { ShiftSection } from "../components/landing/ShiftSection";
|
||||
import { ProductSection } from "../components/landing/ProductSection";
|
||||
import { ProofSection } from "../components/landing/ProofSection";
|
||||
import { ObjectionsSection } from "../components/landing/ObjectionsSection";
|
||||
import { ClosingSection } from "../components/landing/ClosingSection";
|
||||
|
||||
/**
|
||||
* Orquestador de la landing. Solo compone: toda la lógica y el copy viven en las
|
||||
* secciones, que no reciben props ni comparten estado. Export default porque
|
||||
* `React.lazy` en App.tsx lo exige.
|
||||
*
|
||||
* Orden del funnel: problema → costo → mecanismo → prueba → objeción → cierre.
|
||||
* `LandingNav` es chrome fijo, no cuenta como sección.
|
||||
*/
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="landing">
|
||||
<LandingNav />
|
||||
<HeroSection />
|
||||
<CostSection />
|
||||
<ShiftSection />
|
||||
<ProductSection />
|
||||
<ProofSection />
|
||||
<ObjectionsSection />
|
||||
<ClosingSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+203
-102
@@ -1,21 +1,63 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Sparkles, ArrowRight, Mail, Lock, AlertCircle, Wand2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { AlertCircle, ArrowLeft, ArrowRight, Lock, Mail, Wand2 } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useAuth } from "../lib/auth";
|
||||
import { api } from "../lib/api";
|
||||
import { Spinner } from "../components/ui";
|
||||
import { InstallAppPrompt } from "../components/InstallAppPrompt";
|
||||
import { revealStagger, revealUp } from "../lib/motion";
|
||||
import { useReducedMotion } from "../lib/useReducedMotion";
|
||||
import { BrandMark } from "../components/BrandMark";
|
||||
|
||||
const DEMO = import.meta.env.DEV || import.meta.env.VITE_DEMO_UI === "1";
|
||||
|
||||
type DemoUser = { email: string; name: string; role: string; avatar_color: string };
|
||||
|
||||
/**
|
||||
* Qué ve cada quien. Está escrito en el idioma del salón y no en el del sistema:
|
||||
* quien entra a probar no sabe qué es un rol ni un tenant, pero sí sabe
|
||||
* perfectamente quién hace qué en su negocio.
|
||||
*
|
||||
* Los rótulos no asumen género. No es un tecnicismo de estilo: la cuenta demo de
|
||||
* empleado incluye a Carolina y a Diego, así que «tus muchachas» dejaba fuera a una
|
||||
* de las dos tarjetas que la propia pantalla muestra debajo.
|
||||
*/
|
||||
const GRUPOS = [
|
||||
{
|
||||
role: "owner",
|
||||
titulo: "Como quien manda",
|
||||
detalle: "Ves todo: la agenda, las cuentas del día, tu gente y tus clientas.",
|
||||
// Azul primario: es el camino principal, y comparte color con el CTA y la marca.
|
||||
color: "var(--ld-azul)",
|
||||
limite: 1,
|
||||
},
|
||||
{
|
||||
role: "employee",
|
||||
titulo: "Como alguien de tu equipo",
|
||||
detalle: "Ve nomás su día y sus propias cuentas. Nada que configurar.",
|
||||
color: "var(--ld-naranja)",
|
||||
limite: 2,
|
||||
},
|
||||
{
|
||||
role: "admin",
|
||||
titulo: "Como quien lleva varios salones",
|
||||
detalle: "Da de alta negocios y los ve todos juntos.",
|
||||
color: "var(--ld-purpura)",
|
||||
limite: 1,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function LoginPage() {
|
||||
const { login, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const reduced = useReducedMotion();
|
||||
const [email, setEmail] = useState(DEMO ? "[email protected]" : "");
|
||||
const [password, setPassword] = useState(DEMO ? "demo1234" : "");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [demoUsers, setDemoUsers] = useState<{ email: string; name: string; role: string; avatar_color: string }[]>([]);
|
||||
const [pendiente, setPendiente] = useState<string | null>(null);
|
||||
const [demoUsers, setDemoUsers] = useState<DemoUser[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) navigate("/", { replace: true });
|
||||
@@ -23,9 +65,21 @@ export function LoginPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (!DEMO) return;
|
||||
api.auth.demoUsers().then((r) => setDemoUsers(r.users)).catch(() => {});
|
||||
api.auth
|
||||
.demoUsers()
|
||||
.then((r) => setDemoUsers(r.users))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const grupos = useMemo(
|
||||
() =>
|
||||
GRUPOS.map((g) => ({
|
||||
...g,
|
||||
cuentas: demoUsers.filter((u) => u.role === g.role).slice(0, g.limite),
|
||||
})).filter((g) => g.cuentas.length > 0),
|
||||
[demoUsers]
|
||||
);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
@@ -40,80 +94,150 @@ export function LoginPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Demo-only quick login. Dead-code-eliminated from the prod bundle (DEMO is a
|
||||
// build-time constant), which is why the demo password lives only inside this branch.
|
||||
// Acceso de un clic, solo demo. `DEMO` es una constante de build, así que esta rama
|
||||
// entera —y con ella la contraseña— se elimina del bundle de producción por
|
||||
// dead-code elimination. Por eso la contraseña vive aquí dentro y no arriba.
|
||||
const quickLogin = DEMO
|
||||
? async (mail: string) => {
|
||||
setEmail(mail);
|
||||
setPassword("demo1234");
|
||||
setError(null);
|
||||
setPendiente(mail);
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(mail, "demo1234");
|
||||
navigate("/", { replace: true });
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setError(err.message || "No pudimos iniciar sesión");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setPendiente(null);
|
||||
}
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="grid min-h-screen lg:grid-cols-2">
|
||||
{/* Left: brand panel */}
|
||||
<div className="relative hidden flex-col justify-between overflow-hidden bg-gradient-to-br from-brand-700 via-brand-600 to-brand-800 p-10 text-white lg:flex">
|
||||
<div className="absolute -right-24 -top-24 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
|
||||
<div className="absolute -bottom-32 -left-20 h-96 w-96 rounded-full bg-accent-500/30 blur-3xl" />
|
||||
<div className="relative z-10 flex items-center gap-2.5">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15 backdrop-blur">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-lg font-extrabold tracking-tight">AgendaMax</span>
|
||||
</div>
|
||||
<div className="landing relative min-h-screen-safe overflow-hidden">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
// Los mismos lavados del panel: brand-50 → orange-50 → el lienzo de la app.
|
||||
// Entrar al producto desde aquí no debe sentirse como cambiar de sitio.
|
||||
style={{ background: "linear-gradient(160deg, #eef4ff 0%, #fff7ed 55%, #f6f7fb 100%)" }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-md">
|
||||
<h1 className="text-4xl font-extrabold leading-tight tracking-tight">
|
||||
La gestión visual de tu negocio, en un solo lugar.
|
||||
</h1>
|
||||
<p className="mt-4 text-brand-100">
|
||||
Calendario de citas con arrastrar y soltar, control de empleados, tickets e ingresos en tiempo real.
|
||||
Diseñado para dueños y equipos.
|
||||
</p>
|
||||
<ul className="mt-8 space-y-3 text-sm">
|
||||
{[
|
||||
"Agenda citas en segundos y arrástralas cuando quieras",
|
||||
"Tablero con tus ingresos, mejores empleados y clientes top",
|
||||
"Gestiona servicios, empleados y clientes desde un panel",
|
||||
].map((t) => (
|
||||
<li key={t} className="flex items-start gap-3">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-300" />
|
||||
<span className="text-brand-50">{t}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* `ld-gutter` en lugar de `safe-x px-5`: ver el comentario de la clase en
|
||||
index.css — combinar las dos dejaba el padding lateral en 0. */}
|
||||
<div className="safe-top ld-gutter relative mx-auto flex w-full max-w-5xl flex-col pb-12 pt-8 sm:pt-10">
|
||||
<Link
|
||||
to="/"
|
||||
className="tap-target inline-flex w-fit items-center gap-2 text-[0.92rem] font-bold"
|
||||
style={{ color: "var(--ld-muted)" }}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Volver
|
||||
</Link>
|
||||
|
||||
<div className="relative z-10 text-xs text-brand-200">
|
||||
© {new Date().getFullYear()} AgendaMax · Demo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: form */}
|
||||
<div className="flex items-center justify-center bg-[#f6f7fb] px-5 py-10">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="mb-7 text-center lg:hidden">
|
||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-white">
|
||||
<Sparkles className="h-6 w-6" />
|
||||
<motion.div
|
||||
className="mt-9 grid grid-cols-1 items-start gap-10 lg:mt-12 lg:grid-cols-[1.05fr_1fr] lg:gap-14"
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
variants={revealStagger(reduced)}
|
||||
>
|
||||
{/* ---- Columna izquierda: entrar de un clic ---- */}
|
||||
<motion.div variants={revealUp(reduced)}>
|
||||
<div className="flex items-center gap-2.5 text-[1.05rem] font-extrabold tracking-tight">
|
||||
<BrandMark className="h-9 w-9" />
|
||||
AgendaMax
|
||||
</div>
|
||||
<h1 className="text-xl font-extrabold">AgendaMax</h1>
|
||||
</div>
|
||||
|
||||
<div className="card p-6 shadow-card">
|
||||
<h2 className="text-lg font-extrabold text-slate-900">Bienvenido de nuevo</h2>
|
||||
<p className="mt-1 text-sm text-slate-500">Inicia sesión para acceder a tu panel.</p>
|
||||
<h1 className="ld-title mt-8 text-[clamp(1.75rem,4vw,2.6rem)]">
|
||||
Entra sin llenar nada.
|
||||
</h1>
|
||||
<p className="ld-lead mt-4 max-w-md" style={{ color: "var(--ld-muted)" }}>
|
||||
Escoge con qué ojos quieres verlo. Cada opción abre el mismo salón, pero desde el
|
||||
lugar de una persona distinta.
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} className="mt-5 space-y-4">
|
||||
{DEMO && (
|
||||
<div className="mt-8 grid grid-cols-1 gap-6">
|
||||
{grupos.map((g) => (
|
||||
<div key={g.role} className="grid grid-cols-1 gap-2.5">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span
|
||||
className="mt-1 h-5 w-1.5 shrink-0 rounded-full"
|
||||
style={{ background: g.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div>
|
||||
<div className="text-[0.95rem] font-extrabold">{g.titulo}</div>
|
||||
<div className="text-[0.85rem]" style={{ color: "var(--ld-muted)" }}>
|
||||
{g.detalle}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2 pl-4">
|
||||
{g.cuentas.map((u) => (
|
||||
<button
|
||||
key={u.email}
|
||||
type="button"
|
||||
data-magic-login
|
||||
data-role={u.role}
|
||||
onClick={() => quickLogin?.(u.email)}
|
||||
disabled={loading}
|
||||
className="group flex min-h-[58px] w-full items-center gap-3 rounded-2xl bg-white/85 px-4 py-2.5 text-left ring-1 ring-black/[0.05] transition-all hover:bg-white hover:shadow-[0_14px_32px_-14px_rgba(27,21,51,0.28)] disabled:opacity-60"
|
||||
>
|
||||
<span
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
|
||||
style={{ background: u.avatar_color }}
|
||||
>
|
||||
{u.name
|
||||
.split(" ")
|
||||
.map((p) => p[0])
|
||||
.slice(0, 2)
|
||||
.join("")}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-[0.95rem] font-extrabold">
|
||||
{u.name}
|
||||
</span>
|
||||
<span
|
||||
className="block truncate text-[0.78rem]"
|
||||
style={{ color: "var(--ld-muted)" }}
|
||||
>
|
||||
{u.email}
|
||||
</span>
|
||||
</span>
|
||||
{pendiente === u.email ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Wand2
|
||||
className="h-4 w-4 shrink-0 opacity-30 transition-opacity group-hover:opacity-100"
|
||||
style={{ color: g.color }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* ---- Columna derecha: formulario manual ----
|
||||
Visible sin interacción a propósito: visual-audit, responsive-audit y
|
||||
pwa-e2e rellenan estos campos justo después del goto. Colapsarlo tras
|
||||
un toggle rompería los tres. */}
|
||||
<motion.div
|
||||
className="w-full rounded-3xl bg-white/85 p-6 ring-1 ring-black/[0.05] backdrop-blur-sm sm:p-7"
|
||||
variants={revealUp(reduced)}
|
||||
>
|
||||
<h2 className="text-lg font-extrabold">Ya tengo mi cuenta</h2>
|
||||
<p className="mt-1 text-[0.9rem]" style={{ color: "var(--ld-muted)" }}>
|
||||
Entra con tu correo y tu contraseña.
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} className="mt-6 grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label className="label">Correo</label>
|
||||
<div className="relative">
|
||||
@@ -123,7 +247,7 @@ export function LoginPage() {
|
||||
className="input pl-9"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="tucorreo@negocio.com"
|
||||
placeholder="tucorreo@salon.com"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
@@ -146,63 +270,40 @@ export function LoginPage() {
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-rose-50 px-3 py-2 text-sm font-medium text-rose-700">
|
||||
<div className="flex items-center gap-2 rounded-xl bg-rose-50 px-3 py-2.5 text-sm font-semibold text-rose-700">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" className="btn btn-primary w-full" disabled={loading}>
|
||||
{loading ? <Spinner /> : <>Entrar <ArrowRight className="h-4 w-4" /></>}
|
||||
<button type="submit" className="ld-cta w-full" disabled={loading}>
|
||||
{loading && !pendiente ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
Entrar <ArrowRight className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mx-auto mt-4 max-w-sm">
|
||||
<div className="mt-5">
|
||||
<InstallAppPrompt />
|
||||
</div>
|
||||
|
||||
{DEMO && (
|
||||
<>
|
||||
<div className="mt-5 flex items-center gap-2 text-xs font-medium text-slate-400">
|
||||
<span className="h-px flex-1 bg-slate-200" />
|
||||
cuentas demo
|
||||
<span className="h-px flex-1 bg-slate-200" />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-1.5">
|
||||
{demoUsers.slice(0, 4).map((u) => (
|
||||
<button
|
||||
key={u.email}
|
||||
onClick={() => quickLogin?.(u.email)}
|
||||
disabled={loading}
|
||||
className="group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2 text-left transition-colors hover:border-brand-300 hover:bg-brand-50"
|
||||
>
|
||||
<div
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full text-[11px] font-bold text-white"
|
||||
style={{ background: u.avatar_color }}
|
||||
>
|
||||
{u.name.split(" ").map((p) => p[0]).slice(0, 2).join("")}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-bold text-slate-800">{u.name}</div>
|
||||
<div className="truncate text-[11px] text-slate-500">
|
||||
{u.role === "owner" ? "Dueño" : "Empleado"} · {u.email}
|
||||
</div>
|
||||
</div>
|
||||
<Wand2 className="h-4 w-4 text-slate-300 transition-colors group-hover:text-brand-500" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<p
|
||||
className="mt-5 text-center text-[0.82rem] font-semibold"
|
||||
style={{ color: "var(--ld-muted)" }}
|
||||
>
|
||||
Salón de práctica · todas las cuentas usan{" "}
|
||||
<code className="font-mono font-bold" style={{ color: "var(--ld-tinta)" }}>
|
||||
demo1234
|
||||
</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{DEMO && (
|
||||
<p className="mt-4 text-center text-xs text-slate-400">
|
||||
Demo · cualquier cuenta usa la contraseña <code className="font-mono font-semibold text-slate-600">demo1234</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -110,10 +110,10 @@ export function NotificationsPage() {
|
||||
</div>
|
||||
{n.status === "pending" && (
|
||||
<div className="flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button onClick={() => act(n.id, "send")} className="rounded-lg p-1.5 text-slate-400 hover:bg-emerald-50 hover:text-emerald-600" title="Enviar ahora">
|
||||
<button onClick={() => act(n.id, "send")} className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-emerald-50 hover:text-emerald-600" title="Enviar ahora">
|
||||
<Send className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button onClick={() => act(n.id, "cancel")} className="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600" title="Cancelar">
|
||||
<button onClick={() => act(n.id, "cancel")} className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600" title="Cancelar">
|
||||
<XCircle className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -92,7 +92,7 @@ export function ServicesPage() {
|
||||
setEditing(s);
|
||||
setCreating(false);
|
||||
}}
|
||||
className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand-600"
|
||||
className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand-600"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
@@ -100,7 +100,7 @@ export function ServicesPage() {
|
||||
onClick={() => {
|
||||
if (confirm(`¿Eliminar "${s.name}"?`)) removeMut.mutate(s.id);
|
||||
}}
|
||||
className="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600"
|
||||
className="icon-btn rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user