function ColorfulBusAnimation({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "w-[400px] h-[300px] rounded-lg shadow-lg animate-spin-slow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ColorfulBusAnimationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ColorfulBusAnimation, { src: "./bus-animated.gif", alt: "Animated bus for kids", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 19, columnNumber: 1 }, __self: this }, ` @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 30s linear infinite; } `); function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f0f8ff] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#ff69b4] mb-4 animate-bounce", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Welcome to the Kids Animated Video"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center mb-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "rounded-lg shadow-lg", width: "800", controls: true, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "./path-to-your-video.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), "Your browser does not support the video tag.")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ColorfulBusAnimation, { src: "./bus-animated.gif", alt: "Animated bus for kids singing wheels on the bus go round and round", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, ` @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } .animate-bounce { animation: bounce 0.5s infinite alternate; } `)); }