function BotoxBookingSite({ imageUrl, imageAlt, onSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f0f0f0] rounded-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: imageAlt, className: "w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: onSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700 font-medium", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "mt-1 w-full p-2 border rounded-md", required: true, __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-gray-700 font-medium", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", className: "mt-1 w-full p-2 border rounded-md", required: true, __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-gray-700 font-medium", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Phone"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", id: "phone", className: "mt-1 w-full p-2 border rounded-md", required: true, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#007bff] text-white font-medium rounded-md", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Book Appointment"))); } function BotoxBookingSiteStory() { const handleSubmit = (e)=>{ e.preventDefault(); console.log('Form submitted'); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BotoxBookingSite, { imageUrl: "./images/botox-injection.jpg", imageAlt: "Botox injection", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleSubmit = (e)=>{ e.preventDefault(); console.log('Form submitted', Object.fromEntries(new FormData(e.target))); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#e6e1fa] p-6", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center py-4 border-b border-white", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white font-crimson-text", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Lavender Clinic"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4 font-roboto text-white", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer hover:text-[#9a8c98]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer hover:text-[#9a8c98]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer hover:text-[#9a8c98]", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Services"), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer hover:text-[#9a8c98]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("main", { className: "mt-6", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6 p-4 text-center bg-[#d6d3f5] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-white", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Welcome to Lavender Clinic"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-white font-light font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Your beauty and wellness, our priority. Experience the best in aesthetic treatments.")), /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow-md hover:bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#4a4e69]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Facial Treatments"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-[#4a4e69] font-light font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Rejuvenate your skin with our range of facial treatments for glowing skin."), /*#__PURE__*/ React.createElement("img", { src: "./images/facial-treatment.jpg", alt: "Facial Treatment at Lavender Clinic", className: "mt-4 w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow-md hover:bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#4a4e69]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Body Treatments"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-[#4a4e69] font-light font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Relax and unwind with our luxurious body treatments."), /*#__PURE__*/ React.createElement("img", { src: "./images/body-treatment.jpg", alt: "Body Treatment at Lavender Clinic", className: "mt-4 w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white rounded-lg shadow-md hover:bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#4a4e69]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Wellness Programs"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-[#4a4e69] font-light font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Holistic wellness programs designed especially for you."), /*#__PURE__*/ React.createElement("img", { src: "./images/wellness-program.jpg", alt: "Wellness Program at Lavender Clinic", className: "mt-4 w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "mt-8 p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#4a4e69] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Book an Appointment"), /*#__PURE__*/ React.createElement(BotoxBookingSite, { imageUrl: "./images/botox-injection.jpg", imageAlt: "Botox injection", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { className: "mt-8 p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#4a4e69] mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 p-4 text-center text-white font-roboto border-t border-white", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "© 2023 Lavender Clinic. All rights reserved."))); }