AgendaPro DevandClaude Opus 5
4c19244df9
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]>
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { EASE_EXPO, inView } from "../../../lib/motion";
|
|
import { useReducedMotion } from "../../../lib/useReducedMotion";
|
|
|
|
// Serie fija: doce meses con tendencia al alza y ruido creíble. Determinista a
|
|
// propósito, para que el audit visual capture siempre la misma gráfica.
|
|
const SERIE = [38, 44, 41, 52, 58, 54, 66, 71, 68, 79, 86, 94];
|
|
const W = 520;
|
|
const H = 200;
|
|
const PAD = 12;
|
|
|
|
const MAX = Math.max(...SERIE);
|
|
const MIN = Math.min(...SERIE);
|
|
|
|
function yDe(v: number): number {
|
|
return H - PAD - ((v - MIN) / (MAX - MIN)) * (H - PAD * 2);
|
|
}
|
|
|
|
function pathFrom(serie: number[]): string {
|
|
const dx = (W - PAD * 2) / (serie.length - 1);
|
|
return serie
|
|
.map((v, i) => `${i === 0 ? "M" : "L"}${(PAD + i * dx).toFixed(1)} ${yDe(v).toFixed(1)}`)
|
|
.join(" ");
|
|
}
|
|
|
|
/** Línea de ingresos que se traza sola. El "antes/después" no se explica: se ve. */
|
|
export function RevenueLineVisual({ className = "" }: { className?: string }) {
|
|
const reduced = useReducedMotion();
|
|
const d = pathFrom(SERIE);
|
|
const area = `${d} L${W - PAD} ${H - PAD} L${PAD} ${H - PAD} Z`;
|
|
|
|
return (
|
|
<svg
|
|
viewBox={`0 0 ${W} ${H}`}
|
|
className={`w-full ${className}`}
|
|
role="img"
|
|
aria-label="Ingresos mensuales en tendencia ascendente"
|
|
>
|
|
<defs>
|
|
<linearGradient id="ld-rev-fill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#3b66ff" stopOpacity="0.35" />
|
|
<stop offset="100%" stopColor="#3b66ff" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* Rejilla base: tres guías en #eef0f4, el mismo `CartesianGrid` que usa la
|
|
gráfica de ingresos del panel. Dan escala sin competir. */}
|
|
{[0.25, 0.5, 0.75].map((f) => (
|
|
<line
|
|
key={f}
|
|
x1={PAD}
|
|
x2={W - PAD}
|
|
y1={PAD + f * (H - PAD * 2)}
|
|
y2={PAD + f * (H - PAD * 2)}
|
|
stroke="#eef0f4"
|
|
strokeWidth="1"
|
|
/>
|
|
))}
|
|
|
|
<motion.path
|
|
d={area}
|
|
fill="url(#ld-rev-fill)"
|
|
initial={{ opacity: reduced ? 1 : 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={inView}
|
|
transition={{ duration: 0.9, delay: reduced ? 0 : 0.5, ease: EASE_EXPO }}
|
|
/>
|
|
<motion.path
|
|
d={d}
|
|
fill="none"
|
|
stroke="#3b66ff"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
initial={{ pathLength: reduced ? 1 : 0 }}
|
|
whileInView={{ pathLength: 1 }}
|
|
viewport={inView}
|
|
transition={{ duration: reduced ? 0 : 1.4, ease: EASE_EXPO }}
|
|
/>
|
|
{/* Punto final: la marca del "hoy". Aterriza cuando la línea termina. */}
|
|
<motion.circle
|
|
cx={W - PAD}
|
|
cy={yDe(SERIE[SERIE.length - 1])}
|
|
r="5"
|
|
fill="#3b66ff"
|
|
initial={{ scale: reduced ? 1 : 0 }}
|
|
whileInView={{ scale: 1 }}
|
|
viewport={inView}
|
|
transition={{ duration: 0.5, delay: reduced ? 0 : 1.3, ease: EASE_EXPO }}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|