function MainComponent() { const services = [ { name: "Complete Relaxation Massage", description: "A full body relaxation massage to de-stress and unwind.", provider: { name: "Ahmed Mahmoud", photo: "/images/provider-ahmed.jpg" }, rating: 4.5, price: "$200", image: "/images/service-relaxation.jpg" }, { name: "Therapeutic Massage", description: "Tailored therapy to address specific muscle groups.", provider: { name: "Suha Ali", photo: "/images/provider-suha.jpg" }, rating: 4.8, price: "$300", image: "/images/service-therapeutic.jpg" }, { name: "Hot Stone Massage", description: "Warm stone therapy for deep muscle relaxation.", provider: { name: "Omar Fouad", photo: "/images/provider-omar.jpg" }, rating: 4.2, price: "$350", image: "/images/service-hotstone.jpg" } ]; const categories = [ "Relaxation", "Therapeutic", "Hot Stone" ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-center bg-[#F0F4F8] min-h-screen p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/logo.png", alt: "Massage Application Logo", className: "mx-auto w-32 h-32", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-3", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Massage App"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search here...", name: "search", className: "border p-2 rounded w-full max-w-md", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-6 overflow-auto whitespace-nowrap", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-[#A5D6A7] text-white px-6 py-2 rounded font-medium", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { style: { scrollSnapType: 'x mandatory' }, className: "flex overflow-auto mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { scrollSnapAlign: 'start' }, className: "flex-none w-full md:w-1/2 lg:w-1/3 h-64 bg-[#FFCC80] m-2 rounded-lg p-4 flex justify-center items-center text-white font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Featured Offer 1"), /*#__PURE__*/ React.createElement("div", { style: { scrollSnapAlign: 'start' }, className: "flex-none w-full md:w-1/2 lg:w-1/3 h-64 bg-[#80CBC4] m-2 rounded-lg p-4 flex justify-center items-center text-white font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Featured Offer 2"), /*#__PURE__*/ React.createElement("div", { style: { scrollSnapAlign: 'start' }, className: "flex-none w-full md:w-1/2 lg:w-1/3 h-64 bg-[#CE93D8] m-2 rounded-lg p-4 flex justify-center items-center text-white font-semibold", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Featured Offer 3")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, services.map((service, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-6 rounded-lg shadow-md mb-6 text-[#616161]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: service.image, alt: `Image of ${service.name}`, className: "h-40 w-full object-cover rounded-md mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, service.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: service.provider.photo, alt: `${service.provider.name}'s Photo`, className: "h-10 w-10 rounded-full mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, service.provider.name)), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "⭐", service.rating), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, service.price), /*#__PURE__*/ React.createElement("button", { className: "bg-[#81C784] hover:bg-[#66BB6A] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Add to Cart")))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 w-full bg-white border-t p-2 flex justify-around text-[#607D8B]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home text-2xl", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar-check-o text-2xl", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-user text-2xl", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }))); }