function MainComponent() { const [pricingData, setPricingData] = React.useState([]); React.useEffect(()=>{ async function fetchData() { try { let response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: JSON.stringify([ 'For individuals just getting started.', 'For professionals that need more power.', 'For enterprises that need scalability.' ]), target: 'en' }) }); let data = await response.json(); setPricingData(data.data.translations.map((translation)=>translation.translatedText)); } catch (error) { console.log('Translation error:', error); } } fetchData(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-white", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "flex-grow py-12 px-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-3xl font-inter font-bold text-gray-900 mb-6 text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Modern Pricing Page"), /*#__PURE__*/ React.createElement("h2", { className: "font-inter font-bold text-xl text-gray-900 mb-10 text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Simple, transparent pricing for everyone."), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter font-semibold text-md mb-4 text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Starter Plan"), /*#__PURE__*/ React.createElement("img", { src: "starter-image.png", alt: "Starter plan representative image", className: "mx-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-4xl font-bold my-4 text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "$19", /*#__PURE__*/ React.createElement("sub", { className: "text-base", __source: { fileName: "", lineNumber: 41, columnNumber: 84 }, __self: this }, "/mo")), /*#__PURE__*/ React.createElement("p", { className: "font-inter mb-8 text-gray-500", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, pricingData[0]), /*#__PURE__*/ React.createElement("ul", { className: "list-inside list-disc pl-0 text-left", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-inter text-[#2849F4]", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "1 Project"), /*#__PURE__*/ React.createElement("li", { className: "font-inter text-gray-300", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "Custom domains")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-[#2849F4] border border-[#2849F4] font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Get Started")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter font-semibold text-md mb-4 text-center", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Pro Plan"), /*#__PURE__*/ React.createElement("img", { src: "pro-image.png", alt: "Pro plan representative image", className: "mx-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-4xl font-bold my-4 text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "$59", /*#__PURE__*/ React.createElement("sub", { className: "text-base", __source: { fileName: "", lineNumber: 56, columnNumber: 84 }, __self: this }, "/mo")), /*#__PURE__*/ React.createElement("p", { className: "font-inter mb-8 text-gray-500", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, pricingData[1]), /*#__PURE__*/ React.createElement("ul", { className: "list-inside list-disc pl-0 text-left", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-inter text-[#2849F4]", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "10 Projects"), /*#__PURE__*/ React.createElement("li", { className: "font-inter text-[#2849F4]", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Custom domains")), /*#__PURE__*/ React.createElement("button", { className: "w-full text-[#2849F4] border border-[#2849F4] font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Get Pro")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-inter font-semibold text-md mb-4 text-center", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Business Plan"), /*#__PURE__*/ React.createElement("img", { src: "business-image.png", alt: "Business plan representative image", className: "mx-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-inter text-4xl font-bold my-4 text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "$149", /*#__PURE__*/ React.createElement("sub", { className: "text-base", __source: { fileName: "", lineNumber: 71, columnNumber: 85 }, __self: this }, "/mo")), /*#__PURE__*/ React.createElement("p", { className: "font-inter mb-8 text-gray-500", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, pricingData[2]), /*#__PURE__*/ React.createElement("ul", { className: "list-inside list-disc pl-0 text-left", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-inter text-[#2849F4]", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "Unlimited Projects"), /*#__PURE__*/ React.createElement("li", { className: "font-inter text-[#2849F4]", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Custom domains")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#2849F4] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Contact Sales")))))); }