function MainComponent() { const onZoomToElement = ()=>{ const element = document.getElementById('target-element'); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-500 text-white p-4 text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold font-roboto text-2xl", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Profile Header")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/avatar.jpg", alt: "Profile Avatar", className: "w-32 h-32 rounded-full mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Username"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full py-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onZoomToElement, className: "bg-blue-500 text-white p-2 rounded font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Zoom to Element")), /*#__PURE__*/ React.createElement("div", { id: "target-element", className: "h-[200px] w-full bg-red-500 text-white flex items-center justify-center", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Target Element")), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-gray-800 text-white p-4 text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Profile Footer"))); }