function MainComponent() { const handleGetStarted = ()=>{ alert("Get Started with SplitPay!"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f4f4f2] flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#333333] text-white py-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "SplitPay"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#00aaff] cursor-pointer", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#00aaff] cursor-pointer", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#00aaff] cursor-pointer", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("li", { className: "hover:text-[#00aaff] cursor-pointer", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "Contact"))))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center w-full flex-grow", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex flex-col items-center text-center w-full p-6 md:p-12 bg-[#ffffff] shadow-md mt-8 max-w-[800px]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-[#333333] mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Easily split payments"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#666666] mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Share expenses with friends and family effortlessly. Simplify your payment process using SplitPay."), /*#__PURE__*/ React.createElement("button", { onClick: handleGetStarted, className: "px-8 py-4 bg-[#00aaff] text-white text-lg rounded-full hover:bg-[#008ecc]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Get Started")), /*#__PURE__*/ React.createElement("section", { className: "flex flex-col md:flex-row items-center justify-around text-center w-full p-6 md:p-12 mt-12", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px] mb-8 md:mb-0", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-friends text-[#00aaff] text-6xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#333333] mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Add friends and family to your group for easy bill splitting.")), /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px] mb-8 md:mb-0", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-credit-card text-[#00aaff] text-6xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#333333] mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Pay"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Split payments directly to your credit card hassle-free.")), /*#__PURE__*/ React.createElement("div", { className: "max-w-[300px]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-[#00aaff] text-6xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#333333] mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Track"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Keep track of all your transactions and spending patterns.")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#333333] text-white py-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto flex justify-center px-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "© 2023 SplitPay. All rights reserved.")))); }