function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Sarah's Facilitation Pack, 2024"), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-[#5a67d8] text-white text-sm font-semibold rounded-md shadow-md hover:bg-[#434190] transition-colors duration-300", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Add Collection")), /*#__PURE__*/ React.createElement("main", { className: "mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white rounded-lg overflow-hidden shadow-lg p-4 h-[320px] relative", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 p-4 flex flex-col", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-[#333] font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "Thinking Routines"), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "🎨 Card Template:"), /*#__PURE__*/ React.createElement("div", { className: "border border-dashed border-gray-300 rounded p-6 h-full", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, "Template Design Here")))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#48bb78] text-white py-2 px-4 rounded text-sm font-semibold hover:bg-[#38a169] transition-colors duration-300", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Title")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } header, main, section, button { animation-name: fadeIn; animation-duration: 0.5s; animation-fill-mode: both; } `)); }