function MainComponent() { const [growthStage, setGrowthStage] = React.useState("seedling"); const handleClick = (stage)=>{ setGrowthStage(stage); }; const growthText = { seedling: "Discover the basics of a new skill.", sapling: "Develop your understanding and start applying your knowledge.", mightyOak: "Solidify your expertise and master your field." }; let displayImage; let altText; let headerText; if (growthStage === "seedling") { displayImage = "./seedling.jpg"; altText = "A tiny seedling in fertile soil"; headerText = "The Seedling"; } else if (growthStage === "sapling") { displayImage = "./sapling.jpg"; altText = "A young sapling just starting to grow"; headerText = "The Sapling"; } else if (growthStage === "mightyOak") { displayImage = "./mature-tree.jpg"; altText = "A fully grown tree with a sturdy trunk and lush leaves"; headerText = "The Mighty Oak"; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-6 bg-gradient-to-tr from-green-300 to-blue-600", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-4xl font-bold text-white sm:text-5xl font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "Welcome to Our Garden"), /*#__PURE__*/ React.createElement("p", { className: "mb-12 text-lg text-center text-white sm:text-xl font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Join us in nurturing your knowledge and watch your capabilities grow with every visit."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-6", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "focus:outline-none", onClick: ()=>handleClick("seedling"), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[300px] p-4 bg-white border border-gray-200 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./seedling.jpg", alt: "A tiny seedling in fertile soil", className: "w-full h-[200px] rounded-t-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "The Seedling"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Discover the basics of a new skill.")))), /*#__PURE__*/ React.createElement("button", { className: "focus:outline-none", onClick: ()=>handleClick("sapling"), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[300px] p-4 bg-white border border-gray-200 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./sapling.jpg", alt: "A young sapling just starting to grow", className: "w-full h-[200px] rounded-t-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "The Sapling"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Develop your understanding and start applying your knowledge.")))), /*#__PURE__*/ React.createElement("button", { className: "focus:outline-none", onClick: ()=>handleClick("mightyOak"), __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[300px] p-4 bg-white border border-gray-200 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./mature-tree.jpg", alt: "A fully grown tree with a sturdy trunk and lush leaves", className: "w-full h-[200px] rounded-t-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "The Mighty Oak"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Solidify your expertise and master your field."))))), /*#__PURE__*/ React.createElement("div", { className: "mt-16", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: displayImage, alt: altText, className: "w-full sm:w-[400px] h-[250px] rounded-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, headerText), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, growthText[growthStage]))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` /* Add page growth animation styles here */ `)); }