function MainComponent() { const handleContactSubmit = async (event)=>{ event.preventDefault(); // Form submission logic here }; const pulseStyle = { animation: 'pulse 1s infinite' }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffffff] shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "container mx-auto px-4 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "MyWebsite"), /*#__PURE__*/ React.createElement("div", { className: "space-x-8 font-roboto hidden md:flex", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "🏠 Home"), /*#__PURE__*/ React.createElement("a", { href: "#about", className: "text-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, "👤 About"), /*#__PURE__*/ React.createElement("a", { href: "#services", className: "text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "💼 Services"), /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "📞 Contact")), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "home", className: "container mx-auto px-4 py-16 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-[#121212]", style: pulseStyle, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Welcome to MyWebsite"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4 text-[#121212]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "💼 A place where we provide all the services you need.")), /*#__PURE__*/ React.createElement("section", { id: "about", className: "bg-[#ffffff] py-16", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-[#121212] text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4 text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "🌟 We are a company that's committed to excellence..."))), /*#__PURE__*/ React.createElement("section", { id: "services", className: "py-16", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-[#121212] text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-4 mt-4 justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 lg:w-1/3 px-4 py-2", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, "Web Development"), /*#__PURE__*/ React.createElement("img", { src: "images/web-development.png", alt: "Preview of web development service", className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2 text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, "We build robust websites that serve your needs."))), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 lg:w-1/3 px-4 py-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, "SEO Optimization"), /*#__PURE__*/ React.createElement("img", { src: "images/seo-optimization.png", alt: "Preview of SEO optimization service", className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2 text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }, "Improve your website's visibility on search engines."))), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 lg:w-1/3 px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 shadow-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, "Digital Marketing"), /*#__PURE__*/ React.createElement("img", { src: "images/digital-marketing.png", alt: "Preview of digital marketing service", className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2 text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, "Grow your business with our marketing strategies.")))))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "bg-[#ffffff] py-16", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl text-[#121212] text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleContactSubmit, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "text", placeholder: "👤 Full Name", name: "fullName", required: true, __source: { fileName: "", lineNumber: 72, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", type: "email", placeholder: "📧 Email", name: "email", required: true, __source: { fileName: "", lineNumber: 76, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", placeholder: "💬 Your message", name: "message", rows: "5", required: true, __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#3498DB] hover:bg-[#2E86C1] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", type: "submit", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "📤 Send Message")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#121212]", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "© 2023 MyWebsite. All rights reserved."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } `)); }