function MainComponent() { const [hoverData, setHoverData] = React.useState({ x: 0, y: 0, show: false, users: 0 }); const handleMouseMove = (e, users)=>{ const svgRect = e.target.getBoundingClientRect(); const x = e.clientX - svgRect.left; const y = e.clientY - svgRect.top; setHoverData({ x, y, show: true, users }); }; const handleMouseLeave = ()=>{ setHoverData({ ...hoverData, show: false }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#f0f8ff] flex flex-col md:flex-row p-6", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 w-full flex justify-center items-center relative", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "600", height: "400", className: "relative", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M10 350 Q150 200 290 230 T570 50", stroke: "#9370DB", fill: "transparent", strokeWidth: "2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "10", cy: "350", r: "5", fill: "#9370DB", onMouseMove: (e)=>handleMouseMove(e, 100), onMouseLeave: handleMouseLeave, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "290", cy: "230", r: "5", fill: "#9370DB", onMouseMove: (e)=>handleMouseMove(e, 200), onMouseLeave: handleMouseLeave, __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "570", cy: "50", r: "5", fill: "#9370DB", onMouseMove: (e)=>handleMouseMove(e, 300), onMouseLeave: handleMouseLeave, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), hoverData.show && /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white p-2 border border-gray-300", style: { left: hoverData.x + 20, top: hoverData.y + 20 }, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Users: ", hoverData.users))), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 w-full flex flex-col justify-center p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[28px] font-caveat mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Steady User Growth"), /*#__PURE__*/ React.createElement("p", { className: "text-[18px] font-crimson-text", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "The number of users for Furniture.ai has been steadily increasing since its launch.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, ` svg:hover path { stroke-width: 3; } svg circle:hover { r: 8; } `)); }