// 3D-style SVG illustrations for Flowcare treatments // CSS 3D transforms + layered SVG gradients for convincing depth without Three.js overhead. // Base 3D container — tilts on hover, with ambient float function Scene3D({ children, tilt = 8, float = true, className = '', style = {} }) { const ref = React.useRef(null); const [t, setT] = React.useState({ x: 0, y: 0 }); const onMove = (e) => { const r = ref.current.getBoundingClientRect(); const dx = (e.clientX - r.left - r.width/2) / (r.width/2); const dy = (e.clientY - r.top - r.height/2) / (r.height/2); setT({ x: -dy * tilt, y: dx * tilt }); }; const onLeave = () => setT({ x: 0, y: 0 }); return (
{children}
); } /* ───── Treatment 3D illustrations ──────────────────────── */ // 1. Varicose Veins — glowing twisted vein in a leg silhouette function IllVaricose({ size = 220 }) { return ( {/* leg shape */} {/* twisted vein */} {/* nodes */} ); } // 2. Uterine Fibroid — uterus with nodule function IllFibroid({ size = 220 }) { return ( {/* uterus body */} {/* fallopian tubes */} {/* fibroid nodule */} {/* highlight on uterus */} ); } // 3. Varicocele — scrotal veins function IllVaricocele({ size = 220 }) { return ( {/* tangled veins */} ); } // 4. DVT — blood clot in vein function IllDVT({ size = 220 }) { return ( {/* tube (cross-section of vein) */} {/* blood flow particles */} {/* clot */} ); } // 5. Trigeminal Neuralgia — facial nerve function IllTrigem({ size = 220 }) { return ( {/* face profile */} {/* eye */} {/* lightning pain lines */} {/* nerve branches */} ); } // 6. Peripheral Artery — blocked artery with plaque function IllPAD({ size = 220 }) { return ( {/* artery tube */} {/* plaque */} {/* stent (solution) */} ); } /* ───── Big interactive Varicose Veins 3D demo ──────────── */ function VaricoseDemoScene({ stage, showLaser }) { // stage 0: diseased | 1: laser inserted | 2: treated return (
{/* ambient bg */} {/* leg shape */} {/* knee hint */} {/* ankle */} {/* BEFORE: twisted varicose veins */} {/* bulging nodes */} ◀ BULGING TWISTED ▶ ◀ POOLING BLOOD {/* DURING: catheter + laser */} {/* straightened vein outline */} {/* catheter */} {/* laser glow at tip */} {showLaser && ( <> )} CATHETER INSERTED (local anesthesia) {showLaser && <> LASER ACTIVE · 1470 nm SEALING VEIN → } {showLaser && ( <> )} {/* AFTER: healthy straight vein */} {/* flow particles */} RESTORED FLOW ✓ VEIN SEALED ◀ NO PAIN
); } function VaricoseDemo() { const [stage, setStage] = React.useState(0); const [showLaser, setShowLaser] = React.useState(false); const [auto, setAuto] = React.useState(true); React.useEffect(() => { if (!auto) return; const seq = [ { s: 0, l: false, t: 3200 }, { s: 1, l: false, t: 1500 }, { s: 1, l: true, t: 2800 }, { s: 2, l: false, t: 3200 }, ]; let i = 0; const tick = () => { const step = seq[i]; setStage(step.s); setShowLaser(step.l); i = (i + 1) % seq.length; return setTimeout(tick, step.t); }; let id = tick(); return () => clearTimeout(id); }, [auto]); const go = (s) => { setAuto(false); setStage(s); setShowLaser(s === 1); }; const labels = [ { k: 'Before', sub: 'Diseased varicose vein', hi: 'बीमार नस' }, { k: 'Procedure', sub: 'Laser catheter + ablation', hi: 'लेज़र प्रक्रिया' }, { k: 'After', sub: 'Sealed vein, restored flow', hi: 'उपचारित' }, ]; return (
▶ INTERACTIVE · LIVE 3D DEMO

See how we fix varicose veins वैरिकोज वेन्स का इलाज कैसे होता है

{labels.map((l, i) => ( ))}
{stage === 0 ? '01' : stage === 1 ? '02' : '03'} / 03
{labels[stage].k}
{labels[stage].hi}
{labels[stage].sub}
{stage === 0 && <>
SymptomsHeaviness, pain, swelling
VisibleTwisted blue/purple veins
Risk if untreatedUlcers, bleeding, clots
} {stage === 1 && <>
ProcedureEVLA · 1470 nm laser
Duration~45 minutes
AnesthesiaLocal only
IncisionsSingle pinhole
} {stage === 2 && <>
RecoveryBack to work in 24h
Success rate98.4%
ScarsNone visible
}
{!auto && ( )}
Diseased vein
Laser ablation
Healthy flow
); } /* ───── Big interactive Fibroid 3D demo (UAE) ──────────── */ function FibroidDemoScene({ stage, showParticles, shrunk }) { // stage 0: diseased (large fibroid) | 1: catheter in artery | 2: embolization particles | 3: shrunken return (
{/* Uterus body */} {/* fallopian tubes & ovaries */} {/* cervix */} {/* highlight */} {/* BEFORE: large fibroid */} {/* secondary smaller fibroid */} ◀ FIBROID · 5.2 cm 2.2 cm ▶ HEAVY BLEEDING · PAIN {/* pulse halo around fibroid */} {/* STAGE 1: catheter navigating */} {/* feeding arteries */} {/* catheter */} {/* catheter tip */} FEMORAL ARTERY ACCESS 1.2mm pinhole · local anesthesia ◀ CATHETER TIP Fluoroscopy guided {/* contrast dye flow */} {/* STAGE 2: embolization particles releasing */} {/* particles swarming */} {showParticles && ( {Array.from({ length: 14 }).map((_, i) => { const angle = (i / 14) * Math.PI * 2; const r = 18 + (i % 3) * 6; return ( ); })} {/* particles on secondary */} {Array.from({ length: 8 }).map((_, i) => { const angle = (i / 8) * Math.PI * 2; return ( ); })} )} {/* pulse rings */} PVA MICROSPHERES RELEASING 300–500μm · blocking blood supply ▼ ARTERY BLOCKED {/* STAGE 3: shrunken fibroid */} {/* shrunken primary */} {/* shrunken secondary */} {/* healthy uterus glow */} {/* shrink arrows */} FIBROID ↓ 60% · 2.1 cm SYMPTOMS RESOLVED ✓ FERTILITY PRESERVED {/* restored flow particles */}
); } function FibroidDemo() { const [stage, setStage] = React.useState(0); const [showParticles, setShowParticles] = React.useState(false); const [auto, setAuto] = React.useState(true); React.useEffect(() => { if (!auto) return; const seq = [ { s: 0, p: false, t: 3200 }, { s: 1, p: false, t: 3000 }, { s: 2, p: true, t: 3400 }, { s: 3, p: false, t: 3200 }, ]; let i = 0; const tick = () => { const step = seq[i]; setStage(step.s); setShowParticles(step.p); i = (i + 1) % seq.length; return setTimeout(tick, step.t); }; let id = tick(); return () => clearTimeout(id); }, [auto]); const go = (s) => { setAuto(false); setStage(s); setShowParticles(s === 2); }; const labels = [ { k: 'Before', sub: 'Symptomatic fibroid in uterus', hi: 'बच्चेदानी में गांठ' }, { k: 'Access', sub: 'Catheter into uterine artery', hi: 'कैथेटर प्रवेश' }, { k: 'Embolization',sub: 'Microspheres block blood flow', hi: 'रक्त प्रवाह बंद' }, { k: 'After', sub: 'Fibroid shrinks · uterus intact', hi: 'गांठ सिकुड़ गई' }, ]; return (
▶ INTERACTIVE · LIVE 3D DEMO

How we shrink fibroids — without surgery बच्चेदानी की गांठ का इलाज

{labels.map((l, i) => ( ))}
{String(stage + 1).padStart(2, '0')} / 04
{labels[stage].k}
{labels[stage].hi}
{labels[stage].sub}
{stage === 0 && <>
SymptomsHeavy bleeding, pelvic pain
Size5.2 cm intramural + satellite
ImpactAnemia, fertility issues
} {stage === 1 && <>
ProcedureUAE · Uterine Artery Embolization
AccessFemoral artery · 1.2mm
GuidanceLive fluoroscopy
AnesthesiaConscious sedation
} {stage === 2 && <>
EmbolicPVA microspheres · 300–500μm
MechanismOccludes feeding arteries
Duration~60 minutes total
} {stage === 3 && <>
Shrinkage40–60% in 3–6 months
UterusPreserved · no hysterectomy
RecoveryDischarge in 24h
Success rate94%
}
{!auto && ( )}
Fibroid tissue
Embolic microspheres
Healthy flow restored
); } /* ───── End Fibroid demo ─────────────────────────────── */ Object.assign(window, { Scene3D, IllVaricose, IllFibroid, IllVaricocele, IllDVT, IllTrigem, IllPAD, VaricoseDemo, FibroidDemo, });