function MainComponent() { const [profileOpen, setProfileOpen] = React.useState(false); const [loggedIn, setLoggedIn] = React.useState(true); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { 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: "flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-red-500 text-2xl font-bold", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Airbnb")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "destination", type: "text", className: "border p-2 w-1/3", placeholder: "Destination", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "dates", type: "text", className: "border p-2 w-1/3", placeholder: "Check-in - Check-out", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "guests", type: "text", className: "border p-2 w-1/3", placeholder: "Guests", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-2 px-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-800", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Become a Host"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-800", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Help"), loggedIn ? /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/profile-pic.jpg", alt: "User profile", className: "w-8 h-8 rounded-full cursor-pointer", onClick: ()=>setProfileOpen(!profileOpen), __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }), profileOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white border rounded shadow-lg py-1", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-gray-800", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, "Trips"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-gray-800", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Messages"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-gray-800", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, "Wishlists"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-gray-800", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, "Account"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-gray-800", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, "Log Out"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-800", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-800", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Sign Up")))), /*#__PURE__*/ React.createElement("section", { className: "relative h-[500px]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/background-image.jpg", alt: "Popular destination", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "destination", type: "text", className: "border p-2 m-2", placeholder: "Destination", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "dates", type: "text", className: "border p-2 m-2", placeholder: "Check-in - Check-out", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "guests", type: "text", className: "border p-2 m-2", placeholder: "Guests", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-2 px-4 m-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("section", { className: "p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Explore Nearby"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/destination1.jpg", alt: "Destination 1", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Destination 1 - 2 hours drive")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/destination2.jpg", alt: "Destination 2", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Destination 2 - 3 hours drive")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/destination3.jpg", alt: "Destination 3", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Destination 3 - 1.5 hours drive")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/destination4.jpg", alt: "Destination 4", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Destination 4 - 4 hours drive")))), /*#__PURE__*/ React.createElement("section", { className: "p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Live Anywhere"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll space-x-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block flex-none w-[300px]", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/type1.jpg", alt: "Unique stays", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Unique stays")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block flex-none w-[300px]", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/type2.jpg", alt: "Entire homes", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Entire homes")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block flex-none w-[300px]", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/type3.jpg", alt: "Pet-friendly", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Pet-friendly"))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-100 p-4", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "How Airbnb works"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Newsroom"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Investors")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Community"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Diversity & Belonging"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Against Discrimination"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Accessibility")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Host"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Host your home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Host an Online Experience"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Host an Experience")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Help Center"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Trust & Safety"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block mb-1 text-gray-700", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Cancellation options"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "language", className: "border p-2 mr-2", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, "Spanish")), /*#__PURE__*/ React.createElement("select", { name: "currency", className: "border p-2", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "usd", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "USD"), /*#__PURE__*/ React.createElement("option", { value: "eur", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "EUR"))), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-700", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 144, columnNumber: 51 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-700", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 145, columnNumber: 51 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-700", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 146, columnNumber: 51 }, __self: this })))))); }