// landing-features.jsx — product mockup cards for the alternating feature blocks. // ── Reusable card chrome ─────────────────────────────────────────────────── function FCard({ children, style = {} }) { return (
{children}
); } function AmountChip({ icon = 'cal', color = 'lavender', children }) { const glyph = { cal: <>, cash: <>, bolt: , }[icon]; return ( {glyph} {children} ); } // ── richer shared atoms ───────────────────────────────────────────────────── const SOFT = { lime: C.limeSoft, lavender: C.lavenderSoft, cyan: C.cyanSoft, pink: C.pinkSoft }; function CardHead({ title, right }) { return (
{title}
{right}
); } function DateChip({ children, tone = 'soft' }) { const dark = tone === 'dark'; return ( {children} ); } // A · Cada plan tiene su pote — colourful pote tiles with context function MockPotesGrid() { const items = [ { n: 'Japón', c: 'lime', p: 0.49, now: '980', goal: '2.000', date: '1 oct' }, { n: 'Festival', c: 'pink', p: 0.70, now: '210', goal: '300', date: '14 jul' }, { n: 'Regalo', c: 'cyan', p: 0.35, now: '52', goal: '150', date: '3 dic' }, { n: 'Emergencia', c: 'lavender', p: 0.58, now: '870', goal: '1.500', date: 'Abierto' }, ]; return ( 4 activos} />
{items.map((it, i) => (
{it.n} {Math.round(it.p * 100)}%
${it.now} / ${it.goal}
{it.date}
))}
); } // B · Poti te marca el ritmo — planning surface with allocation rows function MockPoti() { const rows = [ { n: 'Japón', c: 'lime', amt: 75, w: '100%' }, { n: 'Emergencia', c: 'lavender', amt: 60, w: '80%' }, { n: 'Curso', c: 'cyan', amt: 50, w: '66%' }, { n: 'Festival', c: 'pink', amt: 60, w: '80%' }, ]; return ( $245 / $300} />
Poti propone
Reparto tu esfuerzo entre 4 potes este mes.
{rows.map(r => (
{r.n}
${r.amt}
))}
Editable cuando quieras Aplicar reparto
); } // C · El progreso se ve — hero orb + recent contributions timeline function MockProgress() { const bars = [ { m: 'Feb', h: 30 }, { m: 'Mar', h: 46 }, { m: 'Abr', h: 38 }, { m: 'May', h: 62 }, { m: 'Jun', h: 78, on: true }, ]; return (
JAPÓN
$1.640
de $2.000
A ritmo
Aportes +$320 este trimestre
{bars.map(b => (
{b.m}
))}
✦ ¡Vas genial!
); } function Milestone({ label, value, sub }) { return (
{label}
{value}
{sub}
); } // D · Planes compartidos — combined pote + members + activity function MockShared() { const members = [ { n: 'Samu', c: 'lime', amt: '$320', w: '52%' }, { n: 'Lía', c: 'pink', amt: '$280', w: '46%' }, { n: 'Marc', c: 'cyan', amt: '$210', w: '34%' }, ]; return (
Viaje a Lisboa
$810 de $1.350
{members.map((m, i) => ( {m.n[0]} ))}
3 personas
+ Invitar
{members.map(m => (
{m.n[0]}
{m.n}
{m.amt}
))}
L Lía añadió $40 hace 2 h
); } // Three-step "Cómo funciona" mini visuals function StepVisual({ kind }) { const { t } = useT(); const L = t.mock; if (kind === 'crear') { return (
{L.nuevo}
); } if (kind === 'ritmo') { return (
$130{L.mes}
); } return (
+$80
); } // ════════════════════════════════════════════════════════════════════════════ // BENTO FEATURE SYSTEM — app UI floats directly on coloured tiles (no nested card) // ════════════════════════════════════════════════════════════════════════════ function BentoTile({ cls = '', bg, dark, eyebrow, title, body, children }) { const muted = dark ? 'rgba(255,255,255,0.62)' : C.textMuted; return (
{eyebrow}

{title}

{body}

{children}
); } function Float({ l, r, t, b, rot = 0, z = 1, children }) { return
{children}
; } function TagOrb({ name, color, p, size }) { return (
{name}
); } function DotPill({ color, label, amt, dark }) { return ( {label} {amt} ); } function StatusChip({ children, tone = 'lime' }) { return ( {children} ); } // A · lavender — cluster of named pote orbs floating on the tile function VisualPotes() { const { t } = useT(); const m = t.mock; return ( <> {m.due} ); } // B · dark — Poti orb + speech bubble + allocation pills function VisualPoti() { const { t } = useT(); const m = t.mock; const sp = m.splitMsg.split('*'); return ( <>
{m.potiProposes}
{sp[0]}{sp[1]}{sp[2]}
 ); } // C · lime soft — big orb + clean stat (no card) + celebration function VisualProgress() { const { t } = useT(); const m = t.mock; const bars = [38, 52, 44, 70, 88]; return ( <>
{m.gJapan}
$1.640
{m.of} $2.000
{m.onTrack}
 ✦ {m.goingGreat}
{bars.map((h, i) => )}
); } // D · cyan soft — combined pote + avatars + member pills + activity function VisualShared() { const { t } = useT(); const m = t.mock; const members = [{ n: 'Samu', c: 'lime' }, { n: 'Lía', c: 'pink' }, { n: 'Marc', c: 'cyan' }]; return ( <>
{m.trip}
$810 {m.of} $1.350
{members.map((m, i) => ( {m.n[0]} ))} +
L Lía {m.added} $40 ); } Object.assign(window, { FCard, AmountChip, CardHead, DateChip, MockPotesGrid, MockPoti, MockProgress, Milestone, MockShared, StepVisual, BentoTile, Float, TagOrb, DotPill, StatusChip, VisualPotes, VisualPoti, VisualProgress, VisualShared });