function MainComponent() { const [chatOpen, setChatOpen] = React.useState(false); const toggleChat = ()=>{ setChatOpen(!chatOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f1f5f9] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 px-10 bg-[#ffffff] shadow-md fixed top-0 z-10 flex justify-between items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#0f172a]", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Clov"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-[#475569] hover:text-[#0f172a] cursor-pointer", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "WHY"), /*#__PURE__*/ React.createElement("li", { className: "text-[#475569] hover:text-[#0f172a] cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "HOUSE"), /*#__PURE__*/ React.createElement("li", { className: "text-[#475569] hover:text-[#0f172a] cursor-pointer", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "SNACK"), /*#__PURE__*/ React.createElement("li", { className: "text-[#475569] hover:text-[#0f172a] cursor-pointer", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "GOOD CHARITY"))), /*#__PURE__*/ React.createElement("button", { className: "text-[#f97316] text-2xl hover:text-[#ea580c]", onClick: toggleChat, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comments", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "w-full flex flex-col items-center pt-24", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/hero-cat.jpg", alt: "A cat lounging on a couch with another cat in the background", className: "w-full h-[768px] object-cover", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-6xl font-bold text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "The house for Cats"), /*#__PURE__*/ React.createElement("button", { className: "mt-5 py-2 px-8 bg-[#22c55e] text-white rounded-full hover:bg-[#15803d] transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Explore")))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-10 left-1/2 transform -translate-x-1/2 flex items-center bg-white p-4 rounded-full shadow-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#475569] text-sm mr-3", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "C a s"), /*#__PURE__*/ React.createElement("img", { src: "/floating-cta-icon.jpg", alt: "Adorable cat icon", className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("section", { className: "w-full mt-36 px-10", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-10", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-xl overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/feature-cat-1.jpg", alt: "Two calm cats sitting together", className: "w-full h-auto object-cover", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-4xl font-bold text-[#0f172a] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "The The ouse for Cats"), /*#__PURE__*/ React.createElement("p", { className: "text-[#64748b]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, '"The house leverage of arch was attentive of your Suhlusdfly, consalidang top of accounting soft able outdistance crossive Jun the footerest of for said omnipotentialise partikos lebooplasm."')))), chatOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 right-0 m-4 w-[300px] h-[400px] bg-white rounded-lg shadow-lg flex flex-col", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#ececec] text-[#333] font-semibold border-b border-[#ddd]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Chat with us!", /*#__PURE__*/ React.createElement("button", { className: "float-right text-lg", onClick: toggleChat, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#ddd] p-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", placeholder: "Type your message here...", className: "w-full p-2 rounded-lg border border-[#ddd]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` @media (max-width: 768px) { header ul { flex-direction: column; align-items: center; padding: 0; } header li { padding: 2px 0; } .hero-image { height: 400px; } } `)); }