// Landing page sections for WealthLens. const LandingHero = () => { const [triggered, setTriggered] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setTriggered(true), 200); return () => clearTimeout(t); }, []); const missed = useCountUp(7600, 1400, triggered); const compounded = useCountUp(110098, 1800, triggered); const tenYr = useCountUp(110098, 1800, triggered); void tenYr; return (
Built for South African investors

You're leaving money{' '} on the table.
Here's how much.

Finvue connects your accounts — bank, investments, property, crypto — and shows you exactly where you're losing money.

Try the demo → See how it works
● Read-only access ● Bank-grade encryption ● SA-built
{/* The hook card */}
Money you're losing each year
Example · demo user
R {formatZAR(missed)}
10 yr compounded
R {formatZAR(compounded)}
Sources
Low-yield cash · Duplicate ETF exposure · Forgotten RA fees
See where it's coming from → Updated 22 Apr 2026
); }; const ProofStrip = () => { const items = ['JSE', 'NYSE', 'LSE', 'Binance', 'Luno', 'Standard Bank', 'FNB', 'Absa', 'Easy Equities', '10X', 'Allan Gray']; return (
Track assets across 8 000+ platforms
{items.map(i => {i})}
); }; // Allocation donut matching real platform segments const AllocationDonut = ({size = 140}) => ( {/* Property 46% */} {/* Retirement 22% */} {/* Banking 11% */} {/* Investments 8% */} {/* Vehicle 7% */} {/* Crypto 6% */} ); // Product preview — matches actual platform dashboard layout const ProductPreview = () => (
The product

One view of everything{' '} you own.

From JSE equities to that flat in Parkhurst, crypto, and every cash account between. Everything reconciled nightly. Nothing leaves finvue.

{/* Header bar */}
Good afternoon, Jeremy.
Friday, 24 April 2026
NET WORTH R 1 142 601
{/* Net worth hero — dominant, stacked */}
Net worth
R 1 142 600,69
−R 102,93 · −0,01% today Assets R 1 157 600,69 · Liabilities R 15 000,00
{/* Missed returns — consequence, below net worth */}
Your current arrangement costs you annually
−R 7 600
That's R 110 098 over 10 years at 8%
See where it's coming from →
{/* Chart + allocation */}
Net worth history
Daily snapshots
{['1W','1M','3M','6M','1Y'].map((t,i)=>( {t} ))}
Allocation
Property 46%
Retirement 22%
Banking 11%
Investments 8%
Vehicle 7%
Crypto 6%
); // Insights section — four categories of insight const Insights = () => { const leaks = [ { cat:'Opportunity', eye:'01 · Low-yield cash', amount:'R 7 380', ten:'R 106 920', amountLabel:'Annual cost', desc:'R 128 000 sitting in a cheque account earning 2.1% — a notice deposit at 8.25% closes the gap.', bar:65, amountColor:'var(--wl-loss)', }, { cat:'Tax', eye:'02 · Unused TFSA allowance', amount:'R 1 080', ten:'—', amountLabel:'Annual tax saving', desc:'R 36 000 TFSA allowance unused with 10 months left in the tax year.', bar:25, amountColor:'var(--wl-gain)', }, { cat:'Allocation', eye:'03 · ZAR concentration', amount:'Monitor', ten:'—', amountLabel:'Flagged as', desc:'92% of assets are ZAR-denominated — rand has depreciated against major currencies.', bar:0, amountColor:'var(--wl-warn)', }, ]; return (
Insights

A few places money{' '} quietly leaks.

Insights span opportunities, tax savings, and allocation warnings — not just cash drag. We show you the long-term impact, so you can decide if it's worth fixing.

{/* Insight rows */}
{/* header */}
Type · Insight
What's happening
Impact
10 yr compounded
{leaks.map((l, i) => (
{l.cat}
{l.eye.split(' · ')[1]}
{l.desc}
{l.bar > 0 && (
)}
{l.amountLabel}
{l.amount}
{l.ten}
))}
{/* Compounding visual */}
How it compounds
An R 7 380 leak today grows to R 106 920 at 8% over ten years.

Every opportunity carries a compounded cost — see what it grows to over 1 to 10 years, so you can weigh whether it's worth fixing today.

); }; const CompoundChart = () => { const [ref, seen] = useInView(0.3); // Bars 1..10 yrs; compounded R 7600 at 8% const years = Array.from({length:10}, (_, i) => { const v = 7600 * ((Math.pow(1.08, i+1) - 1) / 0.08); return Math.round(v); }); const max = years[years.length - 1]; return (
{years.map((v, i) => { const h = (v / max) * 100; const isLast = i === years.length - 1; return (
{v >= 1000 ? `${Math.round(v/1000)}k` : v}
Y{i+1}
); })}
); }; // Trust section const Trust = () => { const pillars = [ { title:'Read-only, always', body:'Finvue connects to your accounts through regulated aggregators. We can see balances and transactions. We cannot move money, and we never will.' }, { title:'Bank-grade encryption', body:'AES-256 at rest, TLS 1.3 in transit. Credentials live at the aggregator, not with us. You can revoke any connection from inside the app in one click.' }, { title:'Analyst, not advisor', body:'We don\'t recommend products, make predictions, or earn commissions from what you hold. We show the math. The decision is always yours.' }, ]; return (
Trust

We don't hold your money.
We don't sell it either.

{pillars.map(p => (
{p.title}

{p.body}

))}
Disclosure Finvue is an information tool, not a financial services provider under FAIS. We do not offer advice, intermediate products, or earn revenue from recommendations.
); }; const TESTIMONIALS = [ { quote: "I actually had no idea how many better alternatives existed for my money — or how much I was leaving on the table. Can't wait for the full version.", city: "Cape Town", }, { quote: "You never know you need something until you try it. Finvue genuinely opened my eyes to things I didn't know I was missing. Phase 2 can't come fast enough.", city: "Johannesburg", }, { quote: "I'm not a finance person, but this was surprisingly easy to follow. My only frustration is that the full version isn't live yet.", city: "Cape Town", }, ]; const Testimonial = () => { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const touchRef = React.useRef({x: 0, active: false}); React.useEffect(() => { if (paused) return; const t = setInterval(() => setIdx(i => (i + 1) % TESTIMONIALS.length), 4500); return () => clearInterval(t); }, [paused]); const go = (i) => setIdx((i + TESTIMONIALS.length) % TESTIMONIALS.length); const onTouchStart = (e) => { touchRef.current = {x: e.touches[0].clientX, active: true}; }; const onTouchEnd = (e) => { if (!touchRef.current.active) return; const dx = e.changedTouches[0].clientX - touchRef.current.x; if (Math.abs(dx) > 40) go(idx + (dx < 0 ? 1 : -1)); touchRef.current.active = false; }; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} >
From beta users
{/* Conveyor */}
{TESTIMONIALS.map((t, i) => (
"{t.quote}"
— Early beta tester, {t.city}
))}
{/* Dots */}
{TESTIMONIALS.map((_, i) => (
); }; const FinalCTA = () => (
Your turn

How much are{' '} you
losing each year?

Connect one account. See your number.

Launch the app ↗
No signup · No card · Sample data
); Object.assign(window, { LandingHero, ProofStrip, ProductPreview, Insights, Trust, Testimonial, FinalCTA, });