function MainComponent() { const [scrollPosition, setScrollPosition] = React.useState(0); const handleScroll = ()=>{ const position = window.pageYOffset; setScrollPosition(position); }; React.useEffect(()=>{ window.addEventListener('scroll', handleScroll); return ()=>{ window.removeEventListener('scroll', handleScroll); }; }, []); const springImage = '/images/spring.jpg'; const summerImage = '/images/summer.jpg'; const fallImage = '/images/fall.jpg'; const winterImage = '/images/winter.jpg'; return /*#__PURE__*/ React.createElement("div", { className: "relative h-[200vh] overflow-y-auto bg-[#3171A6] font-rubik", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/rice.jpg", alt: "Close-up of rice grains", className: "w-full h-[200%] object-cover object-bottom", style: { transform: `translateY(${scrollPosition * 0.8}px)`, animation: 'backgroundScroll 60s linear infinite' }, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { transform: `translateY(${scrollPosition * 0.4}px)`, opacity: `${1 - scrollPosition / 500}`, fontSize: `${scrollPosition < 300 ? 150 - scrollPosition / 2 : 50}px` }, className: "absolute inset-0 z-10 flex items-start justify-center pt-20 transition-all duration-500", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#ffffff] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "俺の米")), /*#__PURE__*/ React.createElement("div", { style: { transform: `translateY(${scrollPosition * 0.4}px)` }, className: "fixed inset-0 z-20", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-full", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: springImage, alt: "Cherry blossoms in spring", className: "w-full h-1/4 object-cover", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: summerImage, alt: "Lush green fields in summer", className: "w-full h-1/4 object-cover", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: fallImage, alt: "Golden fields in fall", className: "w-full h-1/4 object-cover", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: winterImage, alt: "Snowy fields in winter", className: "w-full h-1/4 object-cover", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` @keyframes backgroundScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } `)); }