function MainComponent() { const steps = [ { title: "Sign Up", description: "Create an account to get started", icon: "fas fa-user-plus" }, { title: "Create Profile", description: "Fill in your profile details", icon: "fas fa-id-card" }, { title: "Join Events", description: "Participate in community events", icon: "fas fa-calendar-check" } ]; const [theme, setTheme] = React.useState("light"); const toggleTheme = ()=>{ setTheme(theme === "light" ? "dark" : "light"); }; const bgColor = theme === "light" ? "bg-[#fdf2e9]" : "bg-[#1a202c]"; const textColor = theme === "light" ? "text-[#4A4A4A]" : "text-white"; const buttonColor = theme === "light" ? "bg-[#f3d1b8] text-[#7b4b29]" : "bg-[#4A4A4A] text-[#fdf2e9]"; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col min-h-screen font-roboto ${bgColor} ${textColor}`, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "cat.jpg", alt: "Cat in a basket", className: "w-full h-[300px] lg:h-auto lg:w-1/2 object-cover", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2 p-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "italic text-lg mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Purrfect Companions Await"), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl lg:text-5xl font-bold mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Join Our Cat Community!"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-6", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Become a part of Kathy’s Home and enjoy exclusive updates, events, and more."), /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `px-6 py-3 rounded-full ${buttonColor}`, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Toggle Theme"))), /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Steps to Join:"), steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${step.icon} text-2xl mr-4`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, step.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, step.description))))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 mt-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center space-x-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg font-medium", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Events"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg font-medium", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg font-medium", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Contact")))); }