function MainComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#1A1A1A] text-[#FFFFFF] shadow-md border-b-[1px] border-[#333333] h-[60px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("input", { name: "search", type: "text", placeholder: "Search...", className: "bg-[#2A2A2A] text-[#CCCCCC] p-2 rounded-md w-[300px]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-xl", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-xl", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#333333] text-[#FFFFFF] px-4 py-2 rounded-md hover:bg-[#444444]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Upload"))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[240px] bg-[#2A2A2A] text-[#CCCCCC] h-screen border-r-[1px] border-[#444444] p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "space-y-6", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "Channels"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "Live"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "My List"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "History"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 bg-[#121212] text-[#FFFFFF] p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[70%]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pb-[56.25%]", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "absolute inset-0 w-full h-full", src: "https://www.youtube.com/embed/dQw4w9WgXcQ", frameBorder: "0", allowFullScreen: true, title: "Example video", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Video Title"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "This is a description of the video."), /*#__PURE__*/ React.createElement("section", { className: "mt-4 border-t-[1px] border-[#444444] pt-4", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar.png", alt: "User Avatar", className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, "Comment text"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "hover:bg-[#333333] px-2 py-1", __source: { fileName: "", lineNumber: 46, columnNumber: 23 }, __self: this }, "Like"), /*#__PURE__*/ React.createElement("button", { className: "hover:bg-[#333333] px-2 py-1", __source: { fileName: "", lineNumber: 47, columnNumber: 23 }, __self: this }, "Dislike"), /*#__PURE__*/ React.createElement("button", { className: "hover:bg-[#333333] px-2 py-1", __source: { fileName: "", lineNumber: 48, columnNumber: 23 }, __self: this }, "Reply")))))), /*#__PURE__*/ React.createElement("aside", { className: "w-[30%] pl-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Recommended Videos"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex space-x-4 hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/video-thumbnail.png", alt: "Video Thumbnail", className: "w-24 h-16", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 21 }, __self: this }, "Video Title"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, "Channel Name"))), /*#__PURE__*/ React.createElement("li", { className: "flex space-x-4 hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/video-thumbnail.png", alt: "Video Thumbnail", className: "w-24 h-16", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, "Video Title"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, "Channel Name")))))))), /*#__PURE__*/ React.createElement("footer", { className: "flex justify-around items-center p-4 bg-[#1A1A1A] text-[#777777] border-t-[1px] border-[#333333] h-[60px]", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Terms of Service"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#FFFFFF]", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, ` header { animation: fadeInTop 0.5s ease-in-out; } aside { animation: slideInLeft 0.5s ease-in-out; } main, footer { animation: fadeInBottom 0.5s ease-in-out; } @keyframes fadeInTop { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInBottom { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this })); }