function MainComponent() { const collections = [ { id: 1, img: 'diamond1.png', completion: 70 }, { id: 2, img: 'diamond2.png', completion: 50 }, { id: 3, img: 'diamond3.png', completion: 90 } ]; const transactions = [ { id: 1, description: "Bought Diamond 1", amount: "2 ETH" }, { id: 2, description: "Sold Diamond 2", amount: "3 ETH" } ]; const users = [ { id: 1, name: 'Alice', score: 1500 }, { id: 2, name: 'Bob', score: 1200 }, { id: 3, name: 'Charlie', score: 1100 } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f0f0f0] min-h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#20232A] p-4 text-white text-center shadow-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "NFT Marketplace")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#fff] shadow-lg rounded-lg my-4 text-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Exclusive NFT Market of Fancy Color Diamonds"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Buy and sell unique fancy color diamond NFTs. Explore the collections and find rare opportunities.")), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] p-4 bg-[#ffffff] shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Collection"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Opportunities"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "New Deals"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Transaction History"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] p-4 mb-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Top Users"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, users.map((user)=>/*#__PURE__*/ React.createElement("li", { key: user.id, className: "mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, user.name, " - ", user.score, " points")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] p-4 mb-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Collections"), /*#__PURE__*/ React.createElement("div", { className: "slideshow w-full h-[200px]", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, collections.map((collection)=>/*#__PURE__*/ React.createElement("div", { key: collection.id, className: "bg-[#fff] shadow-lg p-4 w-[300px] mx-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: collection.img, alt: `Fancy color diamond ${collection.id}`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-200 rounded-full mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-green-500 rounded-full", style: { width: `${collection.completion}%` }, __source: { fileName: "", lineNumber: 59, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] p-4 mb-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Recent Transactions"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, transactions.map((transaction)=>/*#__PURE__*/ React.createElement("li", { key: transaction.id, className: "mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, transaction.description, " - ", transaction.amount)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] p-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Top Diamond Collections"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, "Top Participated Collections"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, collections.map((collection)=>/*#__PURE__*/ React.createElement("li", { key: collection.id, className: "mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 23 }, __self: this }, collection.img.split(".")[0])))), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, "Recent Transaction Collections"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, transactions.map((transaction)=>/*#__PURE__*/ React.createElement("li", { key: transaction.id, className: "mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 23 }, __self: this }, transaction.description.split(" ")[1]))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, ` @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } .slideshow { display: flex; overflow: hidden; animation: slide 10s infinite; } `)); }