function MainComponent() { const opportunities = [ { id: 1, title: "Camp Host - Summer 2024", organization: "National Park Service", location: "Chickasaw National Recreation Area, Oklahoma", type: "Position", dates: "5/1/2024 - 9/30/2024", imageUrl: "./camp-host-summer.jpg", infoUrl: "https://www.volunteer.gov/s/volunteer-opportunity/a093d0000013TLwAAM/camp-host-summer-2024" } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, opportunities.map((opportunity)=>/*#__PURE__*/ React.createElement("div", { key: opportunity.id, className: "bg-white border border-[#305c30] rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: opportunity.imageUrl, alt: `Image of ${opportunity.organization} - ${opportunity.title}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-xl font-semibold mb-2 font-roboto text-[#305c30]", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, opportunity.organization), /*#__PURE__*/ React.createElement("a", { href: opportunity.infoUrl, className: "text-lg block mb-2 font-roboto hover:underline font-bold text-[#305c30]", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, opportunity.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center font-roboto text-[#666] mb-1", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-map-marker text-[#305c30]", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, opportunity.location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center font-roboto text-[#666] mb-1", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-briefcase text-[#305c30]", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, opportunity.type)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center font-roboto text-[#666] mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar text-[#305c30]", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, opportunity.dates)), /*#__PURE__*/ React.createElement("a", { href: opportunity.infoUrl, className: "w-full py-2 text-white bg-[#305c30] hover:bg-[#284728] rounded font-roboto transition-colors duration-300 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "More Info"))))); }