function MainComponent() { const [artWorks, setArtWorks] = React.useState([ { id: 1, title: 'Digital Sunset', price: '0.5 ETH', imageUrl: './assets/art1.jpg' }, { id: 2, title: 'Virtual Landscape', price: '1.2 ETH', imageUrl: './assets/art2.jpg' }, { id: 3, title: 'Abstract Motion', price: '0.8 ETH', imageUrl: './assets/art3.jpg' } ]); const [videoMessages, setVideoMessages] = React.useState([ { id: 1, title: 'Happy Birthday', price: '0.3 ETH', imageUrl: './assets/video1.jpg' }, { id: 2, title: 'Personalized Greeting', price: '0.4 ETH', imageUrl: './assets/video2.jpg' }, { id: 3, title: 'Custom Animation', price: '0.7 ETH', imageUrl: './assets/video3.jpg' } ]); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto pt-10 pb-20 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto px-6", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Digital Art for Sale"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-8 md:grid-cols-3 mb-20", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, artWorks.map((art)=>/*#__PURE__*/ React.createElement("div", { key: art.id, className: "bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: art.imageUrl, alt: `Digital art titled ${art.title}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-3", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, art.title), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, art.price), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 text-white bg-[#007bff] rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "Purchase"))))), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Video Messages for Sale"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-8 md:grid-cols-3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, videoMessages.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.imageUrl, alt: `Video message titled ${video.title}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-3", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, video.price), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 text-white bg-[#28a745] rounded hover:bg-[#218838]", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Purchase"))))))); }