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
+12
-7
@@ -3,6 +3,9 @@ import { chromium } from "playwright";
|
||||
|
||||
const BASE = process.env.PWA_BASE_URL || "http://localhost:3000";
|
||||
const baseUrl = BASE.endsWith("/") ? BASE : `${BASE}/`;
|
||||
// `/` sirve la landing pública, que no monta InstallAppPrompt (vive en el login y
|
||||
// dentro del panel). Todos los contextos que prueban el prompt aterrizan aquí.
|
||||
const loginUrl = new URL("login", baseUrl).href;
|
||||
const OWNER_EMAIL = process.env.PWA_OWNER_EMAIL || "[email protected]";
|
||||
const ADMIN_EMAIL = process.env.PWA_ADMIN_EMAIL || "[email protected]";
|
||||
const PWA_PASSWORD = process.env.PWA_PASSWORD || "demo1234";
|
||||
@@ -184,7 +187,7 @@ async function main() {
|
||||
chromiumPage.on("request", (request) => {
|
||||
if (new URL(request.url()).pathname === "/api/health") apiRequests.push(request);
|
||||
});
|
||||
await chromiumPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await chromiumPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await waitForServiceWorker(chromiumPage);
|
||||
const action = await assertInstallAction(chromiumPage, true, "login");
|
||||
await action.click();
|
||||
@@ -197,7 +200,7 @@ async function main() {
|
||||
dismissalContext.setDefaultNavigationTimeout(UI_TIMEOUT_MS);
|
||||
await dismissalContext.addInitScript(() => { window.__installPromptCalls = 0; });
|
||||
const dismissalPage = await dismissalContext.newPage();
|
||||
await dismissalPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await dismissalPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await dispatchDismissedInstallPrompt(dismissalPage);
|
||||
const dismissalAction = await assertInstallAction(dismissalPage, true, "dismissal");
|
||||
await dismissalAction.click();
|
||||
@@ -227,7 +230,7 @@ async function main() {
|
||||
|
||||
const businessPage = await chromiumContext.newPage();
|
||||
await businessPage.setViewportSize({ width: 375, height: 720 });
|
||||
await businessPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await businessPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await login(businessPage, OWNER_EMAIL, /\/dashboard/);
|
||||
await dispatchInstallPrompt(businessPage);
|
||||
const businessAction = await assertInstallAction(businessPage, true, "business shell");
|
||||
@@ -247,7 +250,7 @@ async function main() {
|
||||
Object.defineProperty(Navigator.prototype, "standalone", { configurable: true, get: () => false });
|
||||
});
|
||||
const iosPage = await iosContext.newPage();
|
||||
await iosPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await iosPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
const iosAction = await assertInstallAction(iosPage, true, "iOS");
|
||||
await iosAction.click();
|
||||
await assertVisibleText(iosPage, "Compartir");
|
||||
@@ -259,7 +262,7 @@ async function main() {
|
||||
adminContext.setDefaultNavigationTimeout(UI_TIMEOUT_MS);
|
||||
await adminContext.addInitScript(() => { window.__installPromptCalls = 0; });
|
||||
const adminPage = await adminContext.newPage();
|
||||
await adminPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await adminPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await login(adminPage, ADMIN_EMAIL, /\/admin/);
|
||||
await dispatchInstallPrompt(adminPage);
|
||||
const adminAction = await assertInstallAction(adminPage, true, "admin shell");
|
||||
@@ -277,7 +280,9 @@ async function main() {
|
||||
: originalMatchMedia(query);
|
||||
});
|
||||
const standalonePage = await standaloneContext.newPage();
|
||||
await standalonePage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
// Sobre la landing la ausencia del prompt no probaría nada: hay que mirarla
|
||||
// donde el prompt sí debería estar.
|
||||
await standalonePage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await assertInstallAction(standalonePage, false, "standalone");
|
||||
|
||||
const unsupportedContext = await browser.newContext();
|
||||
@@ -285,7 +290,7 @@ async function main() {
|
||||
unsupportedContext.setDefaultTimeout(UI_TIMEOUT_MS);
|
||||
unsupportedContext.setDefaultNavigationTimeout(UI_TIMEOUT_MS);
|
||||
const unsupportedPage = await unsupportedContext.newPage();
|
||||
await unsupportedPage.goto(baseUrl, { waitUntil: "networkidle" });
|
||||
await unsupportedPage.goto(loginUrl, { waitUntil: "networkidle" });
|
||||
await assertInstallAction(unsupportedPage, false, "unsupported");
|
||||
|
||||
const swSource = (await assertEndpoint("/sw.js")).body;
|
||||
|
||||
Reference in New Issue
Block a user