{/* Phone shell around the portrait screenshot */}
{/* Dynamic island */}
);
}
// ── Feature mockup (Anticipation tabs) ─────────────────────────
function FeatureMockup({ id }) {
if (id === 'budgets') return ;
const map = {
projection: SCREENSHOTS.dashboard,
pointage: SCREENSHOTS.pointer,
multi: SCREENSHOTS.mescomptes,
recurrences: SCREENSHOTS.recurrences,
import: SCREENSHOTS.parametre,
};
const src = map[id] || SCREENSHOTS.dashboard;
return ;
}
// ── Accordion showcase — exact Apple mechanism ───────────────────
//
// How Apple keeps the section height stable:
// • The grid uses align-items: stretch — both columns are the same height
// • The RIGHT column has a fixed height (the image frame) → that sets the row height
// • The LEFT column gets that same height and has overflow:hidden → accordion
// can animate freely inside without ever making the section taller
//
// Text animation: grid-template-rows 0fr→1fr (smoother than max-height)
// Image animation: pure opacity crossfade, zero movement, fully independent
const SC_ITEMS = [
{
key: 'dashboard',
label: 'Tableau de bord',
desc: 'Solde consolidé, projection 60 jours et budgets du mois sur un seul écran. Toujours disponible, même sans connexion.',
},
{
key: 'operations',
label: 'Opérations',
desc: 'Toutes vos opérations catégorisées, filtrables, recherchables. Importées depuis vos relevés CSV en quelques secondes.',
},
{
key: 'pointer',
label: 'Pointage',
desc: 'Rapprochez vos opérations avec votre relevé bancaire. BudGi calcule l\'écart en temps réel — zéro si tout est en ordre.',
},
{
key: 'mescomptes',
label: 'Mes comptes',
desc: 'Courant, livret, carte, joint — tous consolidés dans une vue unique. Les virements internes ne polluent pas vos analyses.',
},
];
// The image frame height drives the section height.
// Left column is constrained to the same height via stretch.
const IMG_H = 'clamp(300px, 36vw, 500px)';
function ScreenshotsShowcase() {
const [activeIdx, setActiveIdx] = React.useState(0);
return (
{/* ══ LEFT : title + accordion ══════════════════════════════
overflow:hidden is the lock — the accordion animates freely
inside but cannot push the section taller than the image. */}
{/* Title row — fixed height, never changes */}
{/* Description — grid-template-rows trick (Apple's actual technique).
Outer div: rows 0fr→1fr drives the height animation smoothly.
Inner div: overflow:hidden clips during animation.
Opacity is independent — fades after height opens,
fades before height closes. */}
{item.desc}
);
})}
{/* ══ RIGHT : image frame ══════════════════════════════════
Fixed height → drives the entire section height.
Images crossfade with opacity only — zero movement. */}
)}