function MainComponent({ page }) { const navLinks = [ "Home", "Services", "Contact", "About" ]; const socialMediaIcons = [ "fa-facebook", "fa-twitter", "fa-linkedin", "fa-instagram" ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, navLinks.map((link)=>/*#__PURE__*/ React.createElement("li", { key: link, className: "hover:text-pink-400 cursor-pointer", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, link)))), page === "home" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-cover bg-center h-[400px]", style: { backgroundImage: "url('/path/to/hero.jpg')" }, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Catchy Tagline Here"))), /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Latest News"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "News Item 1"), /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "News Item 2"), /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "News Item 3")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this })))), page === "services" && /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-md text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cogs text-3xl mb-4 text-pink-400", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Service 1"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Details about service 1.")), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-md text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush text-3xl mb-4 text-pink-400", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Service 2"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Details about service 2.")), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded-md text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-3xl mb-4 text-pink-400", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Service 3"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Details about service 3.")))), page === "contact" && /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Name", className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Message", className: "w-full p-2 border border-gray-300 rounded-md", rows: "4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-pink-400 text-white rounded-md", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Send Message")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "123 Street, City, State"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Email: contact@company.com"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Phone: (123) 456-7890"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345092924!2d144.95373531550438!3d-37.81620974202129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf5774d8eaadb5f18!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1584766673421!5m2!1sen!2sau", width: "100%", height: "200", frameBorder: "0", allowFullScreen: "", "aria-hidden": "false", tabIndex: "0", title: "company location", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-100 p-8", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "© 2023 Company Name"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#privacy", className: "hover:text-pink-400", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Privacy Policy"), " | ", /*#__PURE__*/ React.createElement("a", { href: "#terms", className: "hover:text-pink-400", __source: { fileName: "", lineNumber: 86, columnNumber: 87 }, __self: this }, "Terms of Service"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, socialMediaIcons.map((icon)=>/*#__PURE__*/ React.createElement("i", { key: icon, className: `fab ${icon} text-2xl hover:text-pink-400 cursor-pointer`, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this })))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { page: "home", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "services", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { page: "contact", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this })); }