function MainComponent() { const [funds, setFunds] = React.useState(25420.50); const [stocks, setStocks] = React.useState([ { id: 1, name: 'Apple Inc.', price: 135.67, image: 'apple-stock.jpg' }, { id: 2, name: 'Tesla Inc.', price: 680.44, image: 'tesla-stock.jpg' }, { id: 3, name: 'Amazon.com Inc.', price: 3204.40, image: 'amazon-stock.jpg' } ]); const [playing, setPlaying] = React.useState(false); const handleDeposit = ()=>{ const depositAmount = 1000; setFunds(funds + depositAmount); }; const handlePlayPause = ()=>{ setPlaying(!playing); }; const videoStyle = { animation: playing ? 'spin 5s linear infinite' : 'none' }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1b1b2f] font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#4ecca3] p-4 shadow-md", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-white font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "QuantumWealth"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, "Community")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, "Learn")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "Profile")))), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle fa-2x", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap md:flex-nowrap md:justify-between", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] bg-white p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Balance"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl mb-8 text-gray-800", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "$", funds.toLocaleString('en-US', { maximumFractionDigits: 2 })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDeposit, className: "w-full bg-[#4ecca3] hover:bg-[#3baa91] text-white py-2 rounded-md transition duration-300", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Deposit Funds")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayPause, className: "bg-[#ff4757] hover:bg-[#e84118] text-white py-2 px-4 rounded-md transition duration-300", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, playing ? 'Pause 🎵' : 'Play 🎵'))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:flex-1 md:ml-4 bg-white mt-4 md:mt-0 p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Trending Stocks"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, stocks.map((stock)=>/*#__PURE__*/ React.createElement("div", { key: stock.id, className: "grid grid-cols-2 gap-4 mb-4 items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./${stock.image}`, alt: `${stock.name} stock thumbnail`, className: "w-20 h-20 rounded-full object-cover", style: videoStyle, __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "col-span-1", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, stock.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, "$", stock.price)))))), /*#__PURE__*/ React.createElement("div", { className: "w-full p-5 mt-4 rounded-lg shadow-md bg-white", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-700 mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Community Feed"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "💡 Share investment insights and follow others!"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#4ecca3] hover:bg-[#3baa91] text-white py-2 rounded-md transition duration-300", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Join the Conversation"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }