function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); const [historyVisible, setHistoryVisible] = React.useState(false); const fetchImage = React.useCallback(async ()=>{ const response = await fetch('/integrations/stable-diffusion/?prompt=Man+mewing&batch_size=1', { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); }, []); const toggleHistory = ()=>{ setHistoryVisible((prev)=>!prev); }; React.useEffect(()=>{ fetchImage(); }, [ fetchImage ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#E6E2D3] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-4 px-6 bg-[#DFD3C3] shadow-md", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "The Mewing Guide")), /*#__PURE__*/ React.createElement("main", { className: "mt-8 px-6 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4 font-semibold font-roboto text-[#555555]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "What is Mewing?"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#555555] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Mewing is a technique that involves placing the tongue on the roof of the mouth, which aligns the maxilla and mandible naturally with the body’s posture."), imageUrl && /*#__PURE__*/ React.createElement("img", { className: "max-w-md w-full h-auto mb-6 rounded-lg", src: imageUrl, alt: "Man demonstrating correct tongue posture, also known as mewing", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 bg-[#C4BBAF] text-white font-roboto rounded-md shadow-lg relative overflow-hidden", onClick: toggleHistory, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Learn More")), historyVisible && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-6 bg-[#F0EDE5] rounded-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#555555] mb-3", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "History of Mewing"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#555555]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "The concept of Mewing was pioneered by Dr. John Mew and later advanced by his son Dr. Mike Mew. It's based on the idea that proper tongue posture can influence the shape and alignment of the jaw and facial structure over time, potentially improving one's appearance and breathing patterns."))), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-6 mt-8 bg-[#DFD3C3]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#555555]", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Discover the benefits of mewing today."), /*#__PURE__*/ React.createElement("div", { className: "flex mt-3", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-brands fa-facebook-f text-2xl text-[#4267B2] mx-2 cursor-pointer", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-brands fa-twitter text-2xl text-[#1DA1F2] mx-2 cursor-pointer", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa-brands fa-instagram text-2xl text-[#C13584] mx-2 cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }))))); }