function MainComponent() { const [showContactModal, setShowContactModal] = useState(false); const [products] = useState([ { id: 1, name: "Premium Wireless Headphones", price: 129.99, image: "/headphones.jpg", rating: 4.5 }, { id: 2, name: "Smart Fitness Watch", price: 199.99, image: "/smartwatch.jpg", rating: 4.8 }, { id: 3, name: "Laptop Backpack", price: 49.99, image: "/backpack.jpg", rating: 4.3 }, { id: 4, name: "Wireless Gaming Mouse", price: 79.99, image: "/mouse.jpg", rating: 4.6 } ]); const ContactModal = ()=>{ if (!showContactModal) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 max-w-md w-full", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-[#2874f0]", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "support@flipshop.com")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-[#2874f0]", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "+91 9847249227")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#2874f0]", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "123 Shopping Street", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }), "New York, NY 10001")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-[#2874f0]", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Monday - Friday: 9:00 AM - 6:00 PM EST"))))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2874f0] py-4 px-6 shadow-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "FlipShop logo showing a shopping cart icon", className: "w-12 h-12", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "FlipShop"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-white italic font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Shop smarter"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 mx-12", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search for products, brands and more", className: "w-full py-2 px-4 rounded-lg font-roboto", name: "search", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white flex items-center font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }), "Cart"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#2874f0] px-8 py-1 rounded font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Login")))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto py-8 px-4", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name} product image`, className: "w-full h-[200px] object-contain mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium text-lg mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-green-500 text-white px-2 py-1 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 133, columnNumber: 19 }, __self: this }, product.rating, " ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-xs", __source: { fileName: "", lineNumber: 134, columnNumber: 38 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto font-bold text-xl", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "$", product.price), /*#__PURE__*/ React.createElement("button", { className: "bg-[#2874f0] text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "Add to Cart"))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#172337] text-white py-8 mt-12", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { onClick: ()=>setShowContactModal(true), className: "cursor-pointer hover:text-gray-300", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "Careers"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "Help"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, "Payments"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, "Shipping"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, "Returns"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "Consumer Policy"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 font-roboto", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "Terms of Use"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "Security"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, "Privacy"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, "Social"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.youtube.com/@Shahid_craft", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube text-2xl hover:text-red-600", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/sh4_x_id", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl hover:text-pink-600", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex items-center space-x-2", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-gray-300", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "mailto:flipshop.in@outlook.com", className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, "flipshop.in@outlook.com")))))), /*#__PURE__*/ React.createElement(ContactModal, { __source: { fileName: "", lineNumber: 214, columnNumber: 7 }, __self: this })); }