function MainComponent() { const [businessDescription, setBusinessDescription] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [strategy, setStrategy] = React.useState(null); const handleInputChange = (event)=>{ setBusinessDescription(event.target.value); }; const generateStrategy = ()=>{ setIsLoading(true); setTimeout(()=>{ setStrategy([ { title: "Snippet 1", content: "Content for snippet 1" }, { title: "Snippet 2", content: "Content for snippet 2" } ]); setIsLoading(false); }, 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 min-h-screen flex flex-col items-center font-sans", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] w-full py-16 flex flex-col items-center text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl mb-8", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Business Strategy Generator"), /*#__PURE__*/ React.createElement("input", { name: "businessDescription", type: "text", placeholder: "Enter your business description", className: "w-[400px] px-4 py-2 rounded text-black", value: businessDescription, onChange: handleInputChange, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-6 py-2 bg-green-500 rounded", onClick: generateStrategy, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Generate Strategy")), /*#__PURE__*/ React.createElement("div", { className: "w-full text-center py-16", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Key Benefits"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-6xl mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Save Time")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-6xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Get Validated")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-6xl mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Get Zeit")))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-full h-[300px]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cat-animation w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), strategy && /*#__PURE__*/ React.createElement("div", { className: "w-full p-8", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-8 text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Generated Strategy Snippets"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, strategy.map((snippet, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#f0f0f0] p-4 rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, snippet.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, snippet.content))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` @keyframes catRoll { 0% { transform: translateY(0); } 50% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .cat-animation { animation: catRoll 2s infinite; background-image: url('/path-to-cat-image.jpg'); background-size: cover; } `)); }