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]>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { inView, revealStagger, revealUp } from "../../lib/motion";
|
|
import { useReducedMotion } from "../../lib/useReducedMotion";
|
|
|
|
/**
|
|
* Las tres frases que una dueña dice de verdad cuando le enseñas un sistema. Están
|
|
* en su registro, no en el nuestro: «no le sé a la tecnología», no «tengo baja
|
|
* alfabetización digital». La respuesta también: corta y sin tecnicismos.
|
|
*/
|
|
const OBJECIONES = [
|
|
{
|
|
color: "var(--ld-rosa)",
|
|
dice: "No le sé a la tecnología.",
|
|
responde:
|
|
"Si contestas WhatsApp, ya sabes usarlo. Se toca y se arrastra, nada más. No hay que instalar ni configurar nada, y no hay curso que tomar.",
|
|
},
|
|
{
|
|
color: "var(--ld-naranja)",
|
|
dice: "Mi gente no lo va a usar.",
|
|
responde:
|
|
"Cada quien ve nomás su día y sus propias cuentas. No administran nada. Es menos trabajo que preguntarte a ti a qué hora entran.",
|
|
},
|
|
{
|
|
color: "var(--ld-purpura)",
|
|
dice: "Mi libreta me funciona bien.",
|
|
responde:
|
|
"Tu libreta te dice la hora de la cita, y eso lo hace bien. Lo que no te dice es que doña Carmen lleva cuatro meses sin venir, ni cuál de tus servicios estás regalando.",
|
|
},
|
|
];
|
|
|
|
export function ObjectionsSection() {
|
|
const reduced = useReducedMotion();
|
|
|
|
return (
|
|
<section data-ld-section className="landing-papel ld-section">
|
|
<div className="ld-wrap">
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={inView}
|
|
variants={revealStagger(reduced)}
|
|
>
|
|
<motion.p
|
|
className="ld-eyebrow mb-5"
|
|
style={{ color: "var(--ld-muted)" }}
|
|
variants={revealUp(reduced, 12)}
|
|
>
|
|
Lo que estás pensando
|
|
</motion.p>
|
|
<motion.h2 className="ld-title max-w-2xl" variants={revealUp(reduced, 24)}>
|
|
Tres motivos para no hacerlo. Y por qué ninguno aguanta.
|
|
</motion.h2>
|
|
</motion.div>
|
|
|
|
<div className="mt-14 grid grid-cols-1 gap-4">
|
|
{OBJECIONES.map((o, i) => (
|
|
<motion.div
|
|
key={o.dice}
|
|
className="grid grid-cols-1 items-start gap-4 rounded-3xl bg-white p-7 ring-1 ring-black/[0.05] sm:grid-cols-[1fr_1.45fr] sm:gap-10 sm:p-9"
|
|
initial={{ opacity: reduced ? 1 : 0, y: reduced ? 0 : 22 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={inView}
|
|
transition={{ duration: 0.65, delay: reduced ? 0 : i * 0.1 }}
|
|
>
|
|
<p
|
|
className="text-2xl font-extrabold italic leading-snug sm:text-[1.75rem]"
|
|
style={{ fontFamily: "Fraunces, Georgia, serif", color: o.color }}
|
|
>
|
|
«{o.dice}»
|
|
</p>
|
|
<p className="ld-body" style={{ color: "var(--ld-muted)" }}>
|
|
{o.responde}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|