function MainComponent() { const subscriptionPlans = [ { name: "Free Plan", price: "$0", features: [ "10 Users", "2GB Storage", "Email Support" ] }, { name: "Pro Plan", price: "$15", features: [ "20 Users", "10GB Storage", "Priority Email Support" ] }, { name: "Enterprise Plan", price: "$29", features: [ "100 Users", "Unlimited Storage", "Phone & Email Support" ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F7FAFC] min-h-screen pt-12 md:pt-20 pb-6 px-2 md:px-0", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#1A202C]", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Pricing Plans")), /*#__PURE__*/ React.createElement("main", { className: "mt-16 sm:mt-24", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3 max-w-xl m-auto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, subscriptionPlans.map((plan, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-8 bg-white sm:p-10 sm:pb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#2D3748] mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, plan.name), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex items-baseline text-6xl leading-none font-extrabold", __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this }, plan.price))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col justify-between p-6 bg-gray-50 sm:p-10", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, plan.features.map((feature, featureIndex)=>/*#__PURE__*/ React.createElement("li", { key: featureIndex, className: "flex items-center text-sm font-medium", __source: { fileName: "", lineNumber: 27, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 23 }, __self: this }), feature))), /*#__PURE__*/ React.createElement("button", { className: `mt-8 block w-full py-2 rounded-lg text-sm font-semibold text-center text-white transition-colors ${plan.name === "Pro Plan" ? 'bg-[#3182CE]' : plan.name === "Enterprise Plan" ? 'bg-[#38A169]' : 'bg-[#CBD5E0] hover:bg-[#A0AEC0]'}`, __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, plan.name === "Free Plan" ? 'Current Plan' : 'Choose Plan')))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } `)); }