function WitchCatIllustrationGallery() { return /*#__PURE__*/ React.createElement(WhimsicalWitchShowcase, { imageUrl: "./bright-witch-apprentice-and-cat.jpg", imageAlt: "Brightly illustrated witch apprentice with her cat in a Japanese anime style", title: "Magical Journey of a Witch Apprentice", description: "Dive into the mystical world of a witch apprentice and her feline friend. Experience enchantments and adventures in the finest expression of Japanese anime art.", buttonLink: "#gallery", buttonText: "Discover Adventures", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function WitchCatIllustrationGalleryStory() { const galleryImages = [ './gallery/mystical-forest.jpg', './gallery/enchanted-lake.jpg', './gallery/witches-gathering.jpg', './gallery/magic-scrolls.jpg' ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-10", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WitchCatIllustrationGallery, { __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "gallery", className: "flex justify-center gap-5 mt-8 flex-wrap", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, galleryImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Stylish anime-style illustration ${index + 1}`, className: "w-[250px] h-[250px] rounded-lg border-2 border-[#FFD700] transition-transform duration-500 ease-in-out hover:scale-110", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })))); } function WhimsicalWitchShowcase({ imageUrl, imageAlt, title, description, buttonLink, buttonText }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFF6E0] p-10 rounded-lg shadow-xl flex flex-col md:flex-row items-center gap-10 border border-[#FFD700]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: imageAlt, className: "w-[350px] h-[350px] rounded-full border-4 border-[#FFD700]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#333333] text-3xl mb-5 font-crimson-text", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666] mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("a", { href: buttonLink, className: "text-[#333333] bg-[#FFD700] py-3 px-6 rounded hover:bg-[#FCC419] transition-colors duration-300", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, buttonText))); } function WhimsicalWitchShowcaseStory() { const imageUrl = 'path/to/whimsical-witch-image.jpg'; const imageAlt = 'A whimsical witch and her cat'; const title = 'The Enchanted Evening'; const description = 'Join us on a journey through the mystical woods...'; const buttonLink = '#'; const buttonText = 'Discover More'; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WhimsicalWitchShowcase, { imageUrl: imageUrl, imageAlt: imageAlt, title: title, description: description, buttonLink: buttonLink, buttonText: buttonText, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('./witch-cat-landscape.jpg')] bg-cover bg-center flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WitchCatIllustrationGallery, { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { id: "gallery", className: "mt-10 grid grid-cols-1 md:grid-cols-3 gap-5", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./gallery/mystical-forest.jpg", alt: "Stylish anime-style illustration of a mystical forest", className: "w-full h-auto rounded-lg hover:scale-110 transition-transform duration-300 animate-pulse", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./gallery/enchanted-lake.jpg", alt: "Stylish anime-style illustration of an enchanted lake", className: "w-full h-auto rounded-lg hover:scale-110 transition-transform duration-300 animate-pulse", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./gallery/witches-gathering.jpg", alt: "Stylish anime-style illustration of witches gathering", className: "w-full h-auto rounded-lg hover:scale-110 transition-transform duration-300 animate-pulse", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./gallery/magic-scrolls.jpg", alt: "Stylish anime-style illustration of magic scrolls", className: "w-full h-auto rounded-lg hover:scale-110 transition-transform duration-300 animate-pulse", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } img.animate-pulse { animation: pulse 2s infinite; } `)); }