function MainComponent() { const [showDropdown, setShowDropdown] = React.useState(false); const toggleDropdown = ()=>{ setShowDropdown(!showDropdown); }; return /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-300 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white p-4 flex justify-between items-center border-b-4 border-gray-700", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/logo.png", alt: "Snack Store Logo", className: "h-10 mr-4", __source: { fileName: "", lineNumber: 12, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 13, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 14, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "relative", onMouseEnter: toggleDropdown, onMouseLeave: toggleDropdown, __source: { fileName: "", lineNumber: 15, columnNumber: 29 }, __self: this }, "Fast Food", showDropdown && /*#__PURE__*/ React.createElement("ul", { className: "absolute left-0 mt-1 bg-white text-black rounded shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 37 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 19, columnNumber: 41 }, __self: this }, "Fast Delivery"), /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 20, columnNumber: 41 }, __self: this }, "Pick Up"), /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200", __source: { fileName: "", lineNumber: 21, columnNumber: 41 }, __self: this }, "Dine"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 29 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 29 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 27, columnNumber: 29 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 29 }, __self: this }, "Menu")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full bg-gray-700 hover:bg-gray-600 mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search text-xl", __source: { fileName: "", lineNumber: 34, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full bg-gray-700 hover:bg-gray-600", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user text-xl", __source: { fileName: "", lineNumber: 37, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full bg-gray-700 hover:bg-gray-600 ml-2", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart text-xl", __source: { fileName: "", lineNumber: 40, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 bg-[#EDD2F3]", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-[#4E0E69] text-2xl italic", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Fastest Delivery and Easy Pick Up"), /*#__PURE__*/ React.createElement("img", { src: "/images/eating.jpg", alt: "Person Eating Fast Food", className: "h-32 mx-auto my-2 rounded-full border-4 border-purple-300", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-10 bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Explore Our Snacks"), /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap justify-center gap-6", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] p-4 bg-white shadow-lg rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/snack-1.jpg", alt: "Chocolate bar", className: "w-full h-64 object-cover rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 font-roboto text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 25 }, __self: this }, "Chocolate Bar"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 25 }, __self: this }, "$2.99"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 57, columnNumber: 25 }, __self: this }, "Add to Cart")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] p-4 bg-white shadow-lg rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/snack-2.jpg", alt: "Packet of chips", className: "w-full h-64 object-cover rounded-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 font-roboto text-xl", __source: { fileName: "", lineNumber: 61, columnNumber: 25 }, __self: this }, "Packet of Chips"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 25 }, __self: this }, "$1.49"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 63, columnNumber: 25 }, __self: this }, "Add to Cart")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] p-4 bg-white shadow-lg rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/snack-3.jpg", alt: "Box of cookies", className: "w-full h-64 object-cover rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 font-roboto text-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this }, "Box of Cookies"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 25 }, __self: this }, "$3.50"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 69, columnNumber: 25 }, __self: this }, "Add to Cart")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] p-4 bg-white shadow-lg rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/fastfood-1.jpg", alt: "Hamburger", className: "w-full h-64 object-cover rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 font-roboto text-xl", __source: { fileName: "", lineNumber: 73, columnNumber: 25 }, __self: this }, "Hamburger"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 25 }, __self: this }, "$4.99"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 75, columnNumber: 25 }, __self: this }, "Add to Cart")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] p-4 bg-white shadow-lg rounded-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/fastfood-2.jpg", alt: "Pizza slice", className: "w-full h-64 object-cover rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 font-roboto text-xl", __source: { fileName: "", lineNumber: 79, columnNumber: 25 }, __self: this }, "Pizza Slice"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 25 }, __self: this }, "$3.99"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 81, columnNumber: 25 }, __self: this }, "Add to Cart"))), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 text-black px-4 py-2 mt-5 rounded flex items-center hover:bg-gray-300", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "See All ", /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 85, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full py-4 flex justify-around text-2xl text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-gray-300 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }, "Fast Delivery"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-gray-300 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, "Pick Up"), /*#__PURE__*/ React.createElement("button", { className: "p-4 bg-gray-300 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "Dine"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white p-4 border-t-4 border-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/logo.png", alt: "Footer Logo for Snack Store", className: "h-10", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 29 }, __self: this }, "Information"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 99, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 100, columnNumber: 33 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 101, columnNumber: 33 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 102, columnNumber: 33 }, __self: this }, "Terms of Service"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 29 }, __self: this }, "Helpful Links"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 107, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 108, columnNumber: 33 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 109, columnNumber: 33 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 110, columnNumber: 33 }, __self: this }, "FAQs"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 29 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 115, columnNumber: 29 }, __self: this }, "example@example.com"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 116, columnNumber: 29 }, __self: this }, "+123 456 7890"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com", className: "p-2 mx-1 text-xl", __source: { fileName: "", lineNumber: 120, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-instagram", __source: { fileName: "", lineNumber: 121, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.facebook.com", className: "p-2 mx-1 text-xl", __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-facebook-f", __source: { fileName: "", lineNumber: 124, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.whatsapp.com", className: "p-2 mx-1 text-xl", __source: { fileName: "", lineNumber: 126, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-whatsapp", __source: { fileName: "", lineNumber: 127, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com", className: "p-2 mx-1 text-xl", __source: { fileName: "", lineNumber: 129, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-x", __source: { fileName: "", lineNumber: 130, columnNumber: 29 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, ` header nav ul li:hover > ul { display: block; } `)); }