function MainComponent() { const handleScroll = (event)=>{ const character = document.getElementById('character'); character.style.transform = `translate(-50%, -50%) translateY(${-event.target.scrollTop}px)`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row h-screen bg-[url('../path/to/background-image.jpg')] bg-cover bg-center", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full md:w-[25%] h-[100vh] bg-[#f5f2e4] z-10", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "PICKUP"), /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/pickup-image.jpg", alt: "pickup content image", className: "w-full p-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mt-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "MOVIE"), /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/movie-image.jpg", alt: "movie content image", className: "w-full p-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[50%] overflow-y-scroll bg-[#dff3ff] z-20 relative mx-auto my-0", onScroll: handleScroll, style: { height: "100vh" }, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center p-4 relative", style: { minHeight: "200vh" }, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2", id: "character", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/character-image.png", alt: "center column character image", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 w-full md:w-[25%] h-[100vh] bg-[#e1f7ec] z-10", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "MENU"), /*#__PURE__*/ React.createElement("ul", { className: "text-xl space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "STORY"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "CHARACTER"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "SKILL"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "EVENT")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, ` #character { transition: transform 0.5s ease; } .overflow-y-scroll::-webkit-scrollbar { display: none; } .overflow-y-scroll { -ms-overflow-style: none; scrollbar-width: none; } `)); }