function MainComponent() { const services = [ { id: 'haircuts', title: 'Stylish Haircuts', description: 'Our professional stylists provide you with cutting-edge haircut styles that fit your personality.', image: 'haircut.jpg', alt: 'A client receiving a stylish haircut' }, { id: 'spatreatments', title: 'Luxury Spa Treatments', description: 'Rejuvenate your skin with our exclusive spa treatments, designed for maximum relaxation.', image: 'spa-treatment.jpg', alt: 'A serene spa treatment experience' }, { id: 'naildesigns', title: 'Chic Nail Designs', description: 'Express yourself with our custom nail designs and manicure services.', image: 'nails.jpg', alt: 'Elegant nail designs on display' }, { id: 'makeup', title: 'Professional Makeup', description: 'Get the perfect look for any occasion with our professional makeup services.', image: 'makeup.jpg', alt: 'A makeup artist applying makeup to a client' } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-pink-50 flex flex-col", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-pink-600 flex justify-center items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-crimson-text text-white", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Beauty Salon")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-1 flex-wrap justify-center p-5 lg:p-20 mt-10 gap-10", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, services.map(({ id, title, description, image, alt })=>/*#__PURE__*/ React.createElement("section", { key: id, className: "max-w-sm flex flex-col items-center text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold font-crimson-text text-pink-800 mb-5", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, title.toUpperCase() === 'THREADING' ? /*#__PURE__*/ React.createElement("span", { className: "text-pink-800", __source: { fileName: "", lineNumber: 43, columnNumber: 54 }, __self: this }, "THREADING") : title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-pink-700 mb-5", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, description), /*#__PURE__*/ React.createElement("img", { src: `./images/${image}`, alt: alt, className: "w-72 h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-5 bg-pink-600 mt-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Contact Us: 123-456-7890"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "@2023 Beauty Salon, All rights reserved.")))); }