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
@@ -0,0 +1,109 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { inView, revealStagger, revealUp } from "../../lib/motion";
|
||||
import { useReducedMotion } from "../../lib/useReducedMotion";
|
||||
import { BrandMark } from "../BrandMark";
|
||||
|
||||
// Las ocho muestras del abanico, ya en fila: `PIE_COLORS` del panel, mismo orden.
|
||||
const TINTES = [
|
||||
"#3b66ff",
|
||||
"#f17616",
|
||||
"#10b981",
|
||||
"#a855f7",
|
||||
"#ec4899",
|
||||
"#14b8a6",
|
||||
"#f59e0b",
|
||||
"#6366f1",
|
||||
];
|
||||
|
||||
export function ClosingSection() {
|
||||
const reduced = useReducedMotion();
|
||||
|
||||
return (
|
||||
// El degradado va en la sección misma y no en un hijo con `-z-10`: ahí quedaba
|
||||
// detrás del fondo opaco de `.landing` y no se veía nada.
|
||||
<section
|
||||
data-ld-section
|
||||
className="relative overflow-hidden"
|
||||
// Lavados del propio panel: orange-50 → brand-50. Nada inventado.
|
||||
style={{ background: "linear-gradient(170deg, #fff7ed 0%, #eef4ff 60%, #f6f7fb 100%)" }}
|
||||
>
|
||||
<motion.div
|
||||
className="ld-wrap ld-section text-center"
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={inView}
|
||||
variants={revealStagger(reduced)}
|
||||
>
|
||||
{/* Cinta de tintes: las ocho muestras del hero, ya en fila. */}
|
||||
<motion.div
|
||||
className="mx-auto mb-10 flex w-fit gap-1.5"
|
||||
variants={revealUp(reduced, 14)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{TINTES.map((c, i) => (
|
||||
<motion.span
|
||||
key={c}
|
||||
className="h-11 w-4 rounded-full sm:h-14 sm:w-5"
|
||||
style={{ background: c }}
|
||||
animate={reduced ? undefined : { scaleY: [1, 0.78, 1] }}
|
||||
transition={{
|
||||
duration: 2.6,
|
||||
repeat: Infinity,
|
||||
delay: i * 0.11,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.h2 className="ld-display mx-auto max-w-3xl" variants={revealUp(reduced, 28)}>
|
||||
Deja de <span className="ld-gradient-text">adivinar</span>.
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="ld-lead mx-auto mt-7 max-w-lg"
|
||||
style={{ color: "var(--ld-muted)" }}
|
||||
variants={revealUp(reduced)}
|
||||
>
|
||||
Ábrelo con una cuenta que ya está lista y mira tu salón como se ve cuando alguien te
|
||||
lleva la cuenta.
|
||||
</motion.p>
|
||||
|
||||
<motion.div className="mt-11" variants={revealUp(reduced)}>
|
||||
<Link data-ld-closing-cta to="/login" className="ld-cta">
|
||||
Entrar y probarlo
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
className="mt-6 text-[0.9rem] font-semibold"
|
||||
style={{ color: "var(--ld-muted)" }}
|
||||
variants={revealUp(reduced, 8)}
|
||||
>
|
||||
No pide tarjeta. No pide registro.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<footer
|
||||
className="ld-wrap flex flex-col items-center justify-between gap-4 border-t px-5 py-8 text-[0.82rem] font-semibold sm:flex-row"
|
||||
style={{ borderColor: "var(--ld-hairline)", color: "var(--ld-muted)" }}
|
||||
>
|
||||
<div className="flex items-center gap-2" style={{ color: "var(--ld-tinta)" }}>
|
||||
<BrandMark className="h-6 w-6" />
|
||||
<span className="font-extrabold">AgendaMax</span>
|
||||
</div>
|
||||
<span>© {new Date().getFullYear()} AgendaMax · Salón de práctica</span>
|
||||
{/* `inline-flex` no es decorativo: `.tap-target` solo fija min-height, y en un
|
||||
enlace inline la altura mínima no aplica. */}
|
||||
<Link
|
||||
to="/login"
|
||||
className="tap-target inline-flex items-center underline-offset-4 hover:underline"
|
||||
>
|
||||
Entrar
|
||||
</Link>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user