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:
co-authored by
Claude Opus 5
parent
0b466f33f3
commit
4c19244df9
@@ -0,0 +1,45 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import { useReducedMotion } from "../../lib/useReducedMotion";
|
||||
import { BrandMark } from "../BrandMark";
|
||||
|
||||
/**
|
||||
* Nav flotante. Arranca casi transparente sobre el hero y se condensa al bajar:
|
||||
* fondo y desenfoque suben juntos, que es lo que evita el salto brusco de un
|
||||
* `position: fixed` con fondo sólido desde el primer píxel.
|
||||
*/
|
||||
export function LandingNav() {
|
||||
const reduced = useReducedMotion();
|
||||
const { scrollY } = useScroll();
|
||||
const fondo = useTransform(scrollY, [0, 140], ["rgba(255,251,247,0)", "rgba(255,251,247,0.86)"]);
|
||||
const desenfoque = useTransform(scrollY, [0, 140], ["blur(0px)", "blur(16px)"]);
|
||||
const borde = useTransform(scrollY, [0, 140], ["rgba(27,21,51,0)", "rgba(27,21,51,0.1)"]);
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
className="safe-top fixed inset-x-0 top-0 z-50 border-b"
|
||||
style={
|
||||
reduced
|
||||
? { background: "rgba(255,251,247,0.92)", borderColor: "rgba(27,21,51,0.1)" }
|
||||
: { background: fondo, backdropFilter: desenfoque, borderColor: borde }
|
||||
}
|
||||
>
|
||||
<nav className="ld-wrap flex items-center justify-between gap-4 px-5 py-3">
|
||||
<Link
|
||||
to="/"
|
||||
className="tap-target flex items-center gap-2.5 text-[1.05rem] font-extrabold tracking-tight"
|
||||
>
|
||||
<BrandMark className="h-8 w-8" />
|
||||
AgendaMax
|
||||
</Link>
|
||||
<Link
|
||||
to="/login"
|
||||
className="ld-cta"
|
||||
style={{ minHeight: 46, paddingInline: "1.35rem", fontSize: "0.9rem" }}
|
||||
>
|
||||
Entrar
|
||||
</Link>
|
||||
</nav>
|
||||
</motion.header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user