function MainComponent() { const navigationItems = [ { name: 'Dashboard', icon: 'fa fa-tachometer-alt', link: '#dashboard' }, { name: 'Transactions', icon: 'fa fa-handshake', link: '#transactions' }, { name: 'Accounts', icon: 'fa fa-piggy-bank', link: '#accounts' }, { name: 'Security', icon: 'fa fa-shield-alt', link: '#security' }, { name: 'Support', icon: 'fa fa-headset', link: '#support' } ]; const navigation = navigationItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: item.link, key: item.name, className: "flex items-center p-4 hover:bg-[#D6E4FF] transition-colors duration-300 ease-in-out font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.icon} text-[#007eb6] text-lg mr-3`, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, item.name))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#fffef0] shadow w-full", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-4 flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo-modern-traditional.png", alt: "Modern Traditional Fintech Logo", className: "h-12", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#005792] text-2xl font-semibold ml-3", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "FinTech Legacy")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-2 items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, navigation)), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center justify-between", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo-modern-traditional.png", alt: "Mobile Modern Traditional Fintech Logo", className: "h-10", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars text-lg text-[#005792]", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } main { animation: slideIn 0.5s ease-in-out; } nav a:hover { background-color: #ebf5ff; } `)); }