function MainComponent() { const products = [ { id: 1, name: 'Summer Dress', price: '39.99', image: 'images/summer-dress.jpg', category: 'clothes' }, { id: 2, name: 'Elegant Hat', price: '24.99', image: 'images/elegant-hat.jpg', category: 'accessories' }, { id: 3, name: 'Floral Scarf', price: '19.99', image: 'images/floral-scarf.jpg', category: 'accessories' } ]; const productCards = products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "flex flex-col items-center bg-white rounded-lg p-4 m-2 shadow-md", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name}`, className: "w-1/3 h-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg text-[#121212] mt-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 mt-1", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "$", product.price), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F8F8F8] text-gray-600 font-semibold py-2 px-4 rounded mt-3 hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "Add to Cart"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5F5] flex justify-center items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-5", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl text-center text-[#121212] mb-10", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Clothing & Accessories"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, productCards)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, ` body { background-color: #F5F5F5; font-family: 'Crimson Text', serif; } `)); }