function MainComponent() { const [timeLeft, setTimeLeft] = React.useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }); React.useEffect(()=>{ const endDate = new Date('October 7, 2024 23:11:11 EST').getTime(); const timer = setInterval(()=>{ const now = new Date().getTime(); const distance = endDate - now; if (distance < 0) { clearInterval(timer); setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); } else { setTimeLeft({ days: Math.floor(distance / (1000 * 60 * 60 * 24)), hours: Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)), minutes: Math.floor(distance % (1000 * 60 * 60) / (1000 * 60)), seconds: Math.floor(distance % (1000 * 60) / 1000) }); } }, 1000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4ff] min-h-screen p-8 font-varel-round font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#4070f4] mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "Choose Your Plan"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Limited Time Offer Ends In:"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, Object.entries(timeLeft).map(([unit, value])=>/*#__PURE__*/ React.createElement("div", { key: unit, className: "text-center", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#4070f4]", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, value), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, unit)))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f85a5a] text-white font-bold py-2 px-4 rounded-full hover:bg-[#f63d3d] transition duration-300 w-full", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Get Limited Offer Now!")), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Pay-as-you-go"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Perfect for occasional users"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#4070f4]", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "$0.50"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "/topic")), /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#4070f4] text-xl font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 39 }, __self: this }, "$5.00"), " minimum commitment"), /*#__PURE__*/ React.createElement("ul", { className: "mb-6 space-y-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 47 }, __self: this }), "Only pay for the topics you participate in"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 57, columnNumber: 47 }, __self: this }), "No monthly commitment"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 58, columnNumber: 47 }, __self: this }), "Standard support")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4070f4] text-white font-bold py-2 px-4 rounded-full hover:bg-[#3060e0] transition duration-300 w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Start Posting Now")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 relative border-2 border-[#f85a5a]", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-[#f85a5a] text-white px-2 py-1 text-sm rounded-bl-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Popular!"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Monthly Subscription"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Best value for power users"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#4070f4]", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "$3.98"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("ul", { className: "mb-6 space-y-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 74, columnNumber: 47 }, __self: this }), "Unlimited access to all topics"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 75, columnNumber: 47 }, __self: this }), "Advanced analytics dashboard"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 76, columnNumber: 47 }, __self: this }), "Priority 24/7 customer support"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 47 }, __self: this }), "Ad-free experience"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 47 }, __self: this }), "Custom profile themes"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 79, columnNumber: 47 }, __self: this }), "Exclusive member events")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f85a5a] text-white font-bold py-2 px-4 rounded-full hover:bg-[#f63d3d] transition duration-300 w-full", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Subscribe Now")))); }