frontend/src/components/Onboarding.tsx

import { useEffect, useState } from 'react'
export default function Onboarding(){const [show,setShow]=useState(false);useEffect(()=>{if(localStorage.getItem('first_time')==='1'){setShow(true)}},[]); if(!show) return null; return (<div className="fixed inset-0 z-40"><div className="absolute inset-0 bg-black/40"/><div className="absolute left-64 top-24 p-3 rounded-xl border border-slate-600 bg-slate-800">Tap here to open Chat</div><div className="absolute left-56 top-20 w-12 h-12 rounded-full bg-amber-200 shadow animate-pulse"/><button onClick={()=>{localStorage.removeItem('first_time'); setShow(false)}} className="absolute bottom-6 right-6 px-3 py-2 rounded-xl border border-slate-600 bg-slate-800">Skip</button></div>)}