function MainComponent() { const menuItems = [ "Home", "About Us", "Services", "Events", "Contact", "Donations" ]; const MenuItem = ({ text })=>/*#__PURE__*/ React.createElement("li", { className: "px-3 py-1 text-gray-800 font-sans cursor-pointer hover:text-blue-600", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-[#fafafa] min-h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-full text-center py-4 shadow-md bg-white", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement(MenuItem, { key: index, text: item, __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("header", { className: "flex flex-col items-center justify-center h-[350px] bg-cover bg-no-repeat bg-center", style: { backgroundImage: "url('path/to/your/serene-landscape.jpg')" }, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-75 p-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-sans text-gray-800", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Welcome to Our Church"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-4xl font-serif mt-2 text-blue-400", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Where Peace meets Divinity"))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "my-12", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-sans mb-8 text-gray-800", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Upcoming Events"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/your/community-event.jpg", alt: "Community gathering at church", className: "w-full md:w-1/3 h-auto object-cover", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/your/church-landscape.jpg", alt: "Serene church garden", className: "w-full md:w-1/3 h-auto object-cover", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "path/to/your/spiritual-symbol.jpg", alt: "Minimalist cross symbol", className: "w-full md:w-1/3 h-auto object-cover", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "my-12", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-sans mb-8 text-gray-800", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Join Our Community"), /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white shadow-lg p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-serif", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Step into serenity and join us in our quest for peace and spiritual growth."), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 mt-4 font-sans bg-blue-400 text-white hover:bg-blue-500 transition duration-300", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Contact Us")))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 bg-gray-200 text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-serif text-gray-800", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "© ", new Date().getFullYear(), " Our Church. Embracing Serenity Together.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` body { overscroll-behavior: none; } header::after { content: ''; display: block; position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); } @media (max-width: 768px) { header { height: 250px; } } `)); }