;(function () {
/* EquitiPlusModal — centered pitch card for the Equiti+ subscription.
Triggered by the Hero's "Learn more" button on the home tab.
Form factor: a centered rounded rectangle with margin on every side
so the home page is visible all the way around. NOT a bottom sheet
— every edge of the modal is exposed to the screen behind it.
Animation: per the supplied transitions.dev recipe (scaled 2× for
a slower, more deliberate feel):
- Open : scale 0.96 → 1, opacity 0 → 1, 500ms ease.
- Close : scale 1 → 0.96, opacity 1 → 0, 300ms ease.
- Easing: cubic-bezier(0.22, 1, 0.36, 1).
The "Try now" CTA is a stub — fires a toast confirming the action
and closes the sheet. */
/* Bespoke modal transition — slow + smooth, identical tempo on the way
in and the way out. 800ms with cubic-bezier(0.4, 0, 0.2, 1) reads
as a deliberate, premium reveal rather than a snappy popup. */
const OPEN_MS = 800;
const CLOSE_MS = 800;
const EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
/* Tiny check-circle icon used per-perk on the left of each row. */
const CheckCircle = ({ size = 20, color = '#00AFAB' }) => (
);
/* X glyph for the close button. */
const Close = ({ size = 18, color = '#fff' }) => (
);
/* Glowing teal "+" — restored to the original text glyph + layered
text-shadow halo (cleaner type-feel than the SVG variant). Wrapped in
a flex-centered box matched to the wordmark's height so the glyph
sits dead-centre on the wordmark's vertical axis. lineHeight matches
fontSize so the character glyph occupies the centre of its em-square
instead of sitting on the (lower) baseline. */
const GlowPlus = () => (
+
);
const PERKS = [
{ title: 'Voice-to-action capabilities', detail: 'Place trades, set alerts, and check positions hands-free.' },
{ title: 'Monthly cashback', detail: 'A percentage of trading commissions back to you each month.' },
{ title: 'Exclusive market dashboard', detail: 'Premium charts, signals, and pre-market data unavailable on the free tier.' },
{ title: 'Free physical gold delivery', detail: 'Take ownership of vaulted gold. Shipped to your door at no charge.' },
{ title: 'Discounted wealth fee', detail: 'Reduced advisory fee on managed portfolios.' },
{ title: 'Lower equities commission', detail: 'Tighter spreads and reduced per-trade commissions on shares.' },
];
const PerkRow = ({ title, detail, isLast }) => (
{title}
{detail}
);
const EquitiPlusModal = ({ visible, onClose }) => {
const [mounted, setMounted] = React.useState(false);
const [shown, setShown] = React.useState(false);
/* Active transition duration depends on direction — the OPEN tempo
is more deliberate than the CLOSE tempo (per the spec). */
const [duration, setDuration] = React.useState(OPEN_MS);
React.useEffect(() => {
if (visible) {
setMounted(true);
setDuration(OPEN_MS);
/* Double rAF — wait for the browser to actually paint the
shown=false state BEFORE flipping to shown=true, otherwise
React 18's automatic batching collapses both renders into
one and the CSS transition has no starting frame to
interpolate from (so the open animation appears to skip
entirely). The first rAF lands AFTER the mount paint; the
second rAF lands the next frame, by which point the start
state is committed to the layer and the transition can
actually run. */
let raf2;
const raf1 = requestAnimationFrame(() => {
raf2 = requestAnimationFrame(() => setShown(true));
});
return () => {
cancelAnimationFrame(raf1);
if (raf2) cancelAnimationFrame(raf2);
};
} else if (mounted) {
setDuration(CLOSE_MS);
setShown(false);
const t = setTimeout(() => setMounted(false), CLOSE_MS);
return () => clearTimeout(t);
}
}, [visible]);
if (!mounted) return null;
const Wordmark = window.EquitiWordmark;
const handleTry = () => {
onClose();
if (window.showToast) window.showToast('Equiti+ trial started · 7 days free', 'success');
};
return (
e.stopPropagation()}
style={{
width: '100%',
maxHeight: '100%',
backgroundColor: '#fff',
borderRadius: '24px',
display: 'flex',
flexDirection: 'column',
boxShadow: '0px 30px 60px rgba(14,20,32,0.35)',
overflow: 'hidden',
/* transitions.dev modal recipe — scale 0.96 ↔ 1 + opacity. */
transformOrigin: 'center',
transform: shown ? 'scale(1)' : 'scale(0.96)',
opacity: shown ? 1 : 0,
transition: `transform ${duration}ms ${EASE}, opacity ${duration}ms ${EASE}`,
willChange: 'transform, opacity',
}}
>
{/* Hero strip — gradient anchored on the navy from the
"Learn more" button (#0E1420) crossing into teal. Three-stop
run keeps the navy on the upper-left where the wordmark
starts, transitions through dark teal, and lands on the app
teal at the lower-right. Close X top-right. */}
{/* Close button — top-right of the hero strip. */}
{/* Equiti wordmark (white) + glowing teal plus — the
headline is now this lockup, replacing 'Trade smarter.'
Both children are sized to 40 visual height so flex
align-items:center pins them on the same vertical axis. */}
{Wordmark ? : (
equiti
)}
One subscription unlocks every premium tier across the Equiti suite.
{/* Scrollable body — the perks list. Subtle teal-tinted
atmosphere instead of flat white: a soft radial glow at the
top-centre fades into a near-white linear gradient. Adds
visual continuity with the teal hero strip above without
competing for attention. */}