function Navbar({ onLoginToggle }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white p-4 flex justify-between items-center fixed w-full top-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "ReadBeta"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onLoginToggle, className: "hover:underline", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Login/Signup"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Marketplace"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Account"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Submit"), /*#__PURE__*/ React.createElement("button", { className: "hover:underline", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "Review"))); } function NavbarStory() { const toggleLogin = ()=>alert("Login form opened"); return /*#__PURE__*/ React.createElement("div", { className: "h-[2000px]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navbar, { onLoginToggle: toggleLogin, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function Footer({ tosAndPrivacyItems, socialLinks }) { return /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white font-roboto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, socialLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "hover:underline", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, link.label)))))); } function FooterStory() { const tosAndPrivacyItems = [ "Terms of Service", "Privacy Policy" ]; const socialLinks = [ { href: "#", label: "Facebook" }, { href: "#", label: "Twitter" }, { href: "#", label: "Instagram" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { tosAndPrivacyItems: tosAndPrivacyItems, socialLinks: socialLinks, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function SearchFilter({ placeholder, buttonText }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-md mx-auto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: placeholder, className: "w-full border-b-2 border-gray-400 py-2 focus:outline-none focus:border-blue-500", name: "search", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute right-0 top-0 mt-2 mr-2 bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, buttonText)); } function SearchFilterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchFilter, { placeholder: "Search for authors...", buttonText: "Search", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SearchFilter, { placeholder: "Search for books...", buttonText: "Go", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function BookSubmissionPopup({ isVisible, onClose }) { return isVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg w-[400px] relative", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "absolute top-2 right-2 text-gray-500", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Submit Your Book"), /*#__PURE__*/ React.createElement("input", { name: "title", type: "text", placeholder: "Book Title", className: "mb-4 p-2 border rounded w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "author", type: "text", placeholder: "Author Name", className: "mb-4 p-2 border rounded w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Brief Description", className: "mb-4 p-2 border rounded w-full h-[100px]", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Submit")))); } function BookSubmissionPopupStory() { const [isPopupVisible, setIsPopupVisible] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPopupVisible(true), className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Open Book Submission"), /*#__PURE__*/ React.createElement(BookSubmissionPopup, { isVisible: isPopupVisible, onClose: ()=>setIsPopupVisible(false), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [isContactFormOpen, setIsContactFormOpen] = React.useState(false); const [isSearchFilterOpen, setIsSearchFilterOpen] = React.useState(false); const [isBookSubmissionPopupOpen, setIsBookSubmissionPopupOpen] = React.useState(false); const handleReadWriteClick = (action)=>{ if (!isLoggedIn) { alert('Please log in to proceed.'); } else { if (action === 'read') setIsSearchFilterOpen(true); if (action === 'write') setIsBookSubmissionPopupOpen(true); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-inter text-[#333333]", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("section", { className: "hero bg-cover bg-center h-[400px] relative", style: { backgroundImage: "url('/images/hero-books.jpg')" }, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-center items-center text-white", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Read Beta, Beta Read"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleReadWriteClick('read'), className: "px-4 py-2 bg-[#4CAF50] text-white rounded-md", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Read"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleReadWriteClick('write'), className: "px-4 py-2 bg-[#4CAF50] text-white rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Write")))), /*#__PURE__*/ React.createElement("section", { className: "featured-authors p-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Featured Authors"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/author1.jpg", alt: "Featured Author 1 picture", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Author 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "A brief description about Author 1.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/author2.jpg", alt: "Featured Author 2 picture", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Author 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "A brief description about Author 2.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/author3.jpg", alt: "Featured Author 3 picture", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Author 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "A brief description about Author 3.")))), /*#__PURE__*/ React.createElement("section", { className: "featured-books p-8 bg-gray-100", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Featured Books"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/book1.jpg", alt: "Featured Book 1 cover", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Book 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Genre: Fiction"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Synopsis: A short synopsis of Book 1.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/book2.jpg", alt: "Featured Book 2 cover", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Book 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Genre: Mystery"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Synopsis: A short synopsis of Book 2.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/book3.jpg", alt: "Featured Book 3 cover", className: "w-full h-[200px] object-cover mb-2 rounded-md", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Book 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Genre: Sci-Fi"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Synopsis: A short synopsis of Book 3.")))), /*#__PURE__*/ React.createElement("section", { className: "how-it-works p-8", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "How It Works"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-around items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4 md:mb-0", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "1️⃣"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Sign up and create a profile")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4 md:mb-0", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "2️⃣"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Find or submit manuscripts")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "3️⃣"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Read and review")))), /*#__PURE__*/ React.createElement(Footer, { tosAndPrivacyItems: [ "Terms of Service", "Privacy Policy" ], socialLinks: [ { href: "#", label: "Facebook" }, { href: "#", label: "Twitter" }, { href: "#", label: "Instagram" } ], __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BookSubmissionPopup, { isVisible: isBookSubmissionPopupOpen, onClose: ()=>setIsBookSubmissionPopupOpen(false), __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SearchFilter, { isOpen: isSearchFilterOpen, onClose: ()=>setIsSearchFilterOpen(false), placeholder: "Search authors, manuscripts, beta readers...", buttonText: "Search", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, ` .link:hover { text-decoration: underline; color: #3e8e41; } button { transition: background-color 0.3s ease, color 0.3s ease; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } `)); }