function MainComponent() { const productData = [ { id: 1, name: "Vintage Shirt", description: "Vintage and colorful shirt perfect for every season.", price: "¥5,000", image: "./vintage-shirt1.jpg", alt: "A colorful vintage shirt perfect for every season" }, { id: 2, name: "Vintage Dress", description: "Elegant and timeless piece for a classy look.", price: "¥8,000", image: "./vintage-dress1.jpg", alt: "An elegant and timeless vintage dress for a classy look" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F5F5] min-h-screen p-4 flex flex-col items-center relative", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full top-0 left-0 p-4 bg-transparent flex justify-center mb-8 z-20", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-[80px] md:text-[120px] text-center text-[#000]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "ROCK END")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-end absolute top-8 right-4 z-20", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "hover:text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:text-gray-700", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "Contact"))))), /*#__PURE__*/ React.createElement("main", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full max-w-6xl pt-32", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, productData.map((product)=>/*#__PURE__*/ React.createElement("div", { className: "p-2", key: product.id, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: product.alt, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg text-[#FF4500]", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 bg-[#FF4500] text-white rounded hover:bg-[#E63946] transition duration-300", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Add to Cart 🛒"))))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full flex justify-between items-center px-4 py-2 z-10 absolute bottom-0", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-4xl text-[#E4405F]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-4xl text-[#1DA1F2]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }))))); }