function MainComponent() { const featuredProducts = [ { id: 1, imgSrc: '/images/featured1.jpg', name: 'Classic Watch', price: '250.00' }, { id: 2, imgSrc: '/images/featured2.jpg', name: 'Leather Bag', price: '350.00' }, { id: 3, imgSrc: '/images/featured3.jpg', name: 'Modern Sunglasses', price: '150.00' }, { id: 4, imgSrc: '/images/featured4.jpg', name: 'Stylish Jacket', price: '499.99' } ]; const categories = [ { id: 1, name: 'Watches', imgSrc: '/images/category-watch.jpg' }, { id: 2, name: 'Bags', imgSrc: '/images/category-bags.jpg' }, { id: 3, name: 'Sunglasses', imgSrc: '/images/category-sunglasses.jpg' }, { id: 4, name: 'Jackets', imgSrc: '/images/category-jackets.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-wrap justify-between items-center bg-[#010101] p-4 md:p-6 text-white", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl md:text-4xl font-bold", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Shopify Store"), /*#__PURE__*/ React.createElement("nav", { className: "w-full md:w-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-wrap justify-between md:space-x-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "block px-2 py-1 hover:underline", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#featured", className: "block px-2 py-1 hover:underline", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Featured")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#categories", className: "block px-2 py-1 hover:underline", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Categories")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "block px-2 py-1 hover:underline", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Contact"))))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "home", className: "flex flex-col items-center justify-center h-[400px] md:h-[600px] bg-cover bg-center bg-no-repeat", style: { backgroundImage: "url('/images/home-bg.jpg')" }, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-5xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "New Season Arrivals"), /*#__PURE__*/ React.createElement("p", { className: "mb-6 text-center text-white max-w-md", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Check out all the trends, including our exclusive Shopify jackets, new additions, and classic pieces that will add style to your wardrobe this season."), /*#__PURE__*/ React.createElement("a", { href: "#featured", className: "px-6 py-3 bg-white text-black rounded-full font-medium hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Shop Now")), /*#__PURE__*/ React.createElement("section", { id: "featured", className: "my-8 px-4 md:px-0", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-4xl font-bold text-center my-6", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Featured Products"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, featuredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "flex flex-col items-center text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[200px] md:w-[300px] h-[200px] md:h-[300px] object-cover mb-4", src: product.imgSrc, alt: `Featured product: ${product.name}`, __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "$", product.price))))), /*#__PURE__*/ React.createElement("section", { id: "categories", className: "my-8 px-4 md:px-0", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-4xl font-bold text-center my-6", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Shop by Category"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("div", { key: category.id, className: "group overflow-hidden", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[200px] md:h-[300px] object-cover group-hover:scale-110 transition-transform duration-300", src: category.imgSrc, alt: `Category: ${category.name}`, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-lg mt-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, category.name))))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "my-8 px-4 md:px-0", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-4xl font-bold text-center my-6", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Get in Touch"), /*#__PURE__*/ React.createElement("form", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "w-full p-3 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "w-full p-3 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", rows: "4", className: "w-full p-3 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-black text-white p-3 rounded-md hover:bg-gray-800 transition-colors", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Submit")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#010101] p-4 md:p-6 text-white text-center", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "© 2023 Shopify Store. All Rights Reserved."))); }