function MainComponent() { const navigationItems = [ { name: 'Home', href: '#home', icon: 'fa-home' }, { name: 'FAQs', href: '#faqs', icon: 'fa-question-circle' }, { name: 'Settings', href: '#settings', icon: 'fa-cog' } ]; const toolBoxes = [ { name: 'Stopwatch', icon: 'fa-stopwatch', description: 'Track time effectively' }, { name: 'Calculator', icon: 'fa-calculator', description: 'Crunch numbers quickly' }, { name: 'Digital Clock', icon: 'fa-clock', description: 'Check the current time' }, { name: 'Quotes', icon: 'fa-quote-right', description: 'Inspirational sayings' }, { name: 'Image Search', icon: 'fa-image', description: 'Find images easily' }, { name: 'Dictionary Search', icon: 'fa-book', description: 'Look up word meanings' }, { name: 'BMI Calculator', icon: 'fa-weight', description: 'Calculate your BMI' }, { name: 'Basic Calculator', icon: 'fa-calculator', description: 'Simple calculations' }, { name: 'Age Calculator', icon: 'fa-hourglass-half', description: 'Determine your age' }, { name: 'To-Do List', icon: 'fa-list-ul', description: 'Stay on top of tasks' }, { name: 'Note Making', icon: 'fa-pencil-alt', description: 'Jot down important notes' } ]; const navigationLinks = navigationItems.map((item)=>/*#__PURE__*/ React.createElement("a", { href: item.href, key: item.name, className: "flex items-center text-white hover:text-[#FBBF24] px-3 py-2 rounded-md text-sm font-medium", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} mr-2`, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), item.name)); const toolBoxItems = toolBoxes.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.name, className: "w-full px-4 py-6 mx-auto bg-[#F9FAFB] rounded-xl shadow-md flex flex-col items-center space-y-4 hover:shadow-xl transition duration-300", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tool.icon} text-4xl text-[#3B82F6]`, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-[#111827]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, tool.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#6B7280] text-base font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, tool.description)))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1F2937] p-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, navigationLinks))), /*#__PURE__*/ React.createElement("main", { className: "py-10 pb-20", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, toolBoxItems))); }