Skip to content

Commit

Permalink
Publish 1 from staging into origin/main
Browse files Browse the repository at this point in the history
  • Loading branch information
@cecilia-marques
cecilia-marques authored and decobot committed Nov 5, 2024
1 parent 4b54623 commit 5c20721
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions .deco/blocks/pages-Pricing%2520Calculator%25202025-684542.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
{
"__resolveType": "website/sections/Rendering/Lazy.tsx",
"section": {
"__resolveType": "site/sections/WebdrawWrapper.tsx",
"content": "<!DOCTYPE html> <html lang=\"en\"> <head> <!-- <meta charset=\"UTF-8\"> --> <!-- <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> --> <script src=\"https://cdn.tailwindcss.com\"></script> <link href=\"https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\"> <link href=\"https://fonts.googleapis.com/css2?family=Argent+Pixel+CF&display=swap\" rel=\"stylesheet\"> <style> body { background-color: #070D0D; color: #ffffff; } .custom-select { appearance: none; background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\"); background-repeat: no-repeat; background-position: right 0.7rem top 50%; background-size: 1.5rem auto; } </style> </head> <!-- <body class=\"min-h-screen flex items-center justify-center\"> --> <body class=\"!container mx-auto px-4 max-w-2xl mt-16 w-full px-5 md:px-0 pt-16 text-white pb-24 font-serif\"> <div class=\"container mx-auto p-8 bg-[#070D0D] rounded-lg shadow-xl max-w-4xl\"> <h1 class=\"text-3xl font-bold mt-16 mb-12 text-center text-green-400\" style=\"font-family: 'Argent Pixel CF'\">Deco.cx Pricing Calculator</h1> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\"> <div> <h2 class=\"text-xl font-semibold mb-4\">Configuration</h2> <div class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Currency</label> <div class=\"flex gap-4\"> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"currency\" value=\"BRL\" checked class=\"mr-2 accent-[#02F67C]\"> <span>BRL</span> </label> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"currency\" value=\"USD\" class=\"mr-2 accent-[#02F67C]\"> <span>USD</span> </label> </div> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-[#02F67C] text-lg\" style=\"font-family: 'Argent Pixel CF'\">Plan</label> <p class=\"text-gray-400 text-sm mt-1\">Don't know which one is for you? Check features below.</p> <div class=\"flex gap-4\"> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"plan\" value=\"pro\" checked class=\"mr-2 accent-[#02F67C]\"> <span>Pro</span> </label> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"plan\" value=\"enterprise\" class=\"mr-2 accent-[#02F67C]\"> <span>Enterprise</span> </label> </div> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Number of Builder Seats <span class=\"text-xs text-gray-400\">- full access to create and develop</span></label> <input type=\"number\" id=\"seats\" min=\"1\" value=\"1\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div id=\"enterpriseSeats\" class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Number of Editor Seats <span class=\"text-xs text-gray-400\">- edit content and analyze data</span></label> <input type=\"number\" id=\"editorSeats\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-[#02F67C] text-lg\" style=\"font-family: 'Argent Pixel CF'\">Infrastructure</label> <div class=\"flex gap-4\"> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"infrastructure\" value=\"selfHosting\" checked class=\"mr-2 accent-[#02F67C]\"> <span>Self Hosting</span> </label> <label class=\"flex items-center p-6 pt-4 border border-[#162121] rounded-lg hover:border-[#063922]\"> <input type=\"radio\" name=\"infrastructure\" value=\"decoCloud\" class=\"mr-2 accent-[#02F67C]\"> <span>Deco Cloud</span> </label> </div> <!-- <p class=\"text-gray-400 text-sm mt-1\">Choose between 100% managed infra or self-host projects</p> --> <p class=\"text-gray-400 text-sm mt-1\">Choose between 100% managed infra or self-host projects</p> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Expected Monthly Pageviews</label> <input type=\"number\" id=\"pageviews\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Support Plan</label> <select id=\"support\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] custom-select text-sm\"> <option value=\"free\">Free</option> <option value=\"premium\">Premium</option> <option value=\"enterprise\">Enterprise</option> </select> </div> </div> <div class=\"mb-4\"> <label class=\"block mb-3 text-[#02F67C] text-lg\" style=\"font-family: 'Argent Pixel CF'\">Estimated Costs</label> <div id=\"enterpriseSeats\" class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Seats Cost:</label> <input type=\"number\" id=\"editorSeats\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div id=\"enterpriseSeats\" class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Infrastructure Cost:</label> <input type=\"number\" id=\"editorSeats\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div id=\"enterpriseSeats\" class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Support Cost:</label> <input type=\"number\" id=\"editorSeats\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> <div id=\"enterpriseSeats\" class=\"mb-4\"> <label class=\"block mb-3 text-sm\">Total Monthly Cost:</label> <input type=\"number\" id=\"editorSeats\" min=\"0\" value=\"0\" class=\"w-full bg-transparent text-white py-2 px-3 rounded border border-[#303D3D] text-sm\"> </div> </div> <!-- <div> <h2 class=\"text-xl font-semibold mb-4\">Estimated Costs</h2> <div class=\"bg-gray-800 p-4 rounded\"> <div class=\"mb-4\"> <span class=\"font-semibold\">Seats Cost:</span> <span id=\"seatsCost\" class=\"float-right\"></span> </div> <div class=\"mb-4\"> <span class=\"font-semibold\">Infrastructure Cost:</span> <span id=\"infrastructureCost\" class=\"float-right\"></span> </div> <div class=\"mb-4\"> <span class=\"font-semibold\">Support Cost:</span> <span id=\"supportCost\" class=\"float-right\"></span> </div> <div class=\"border-t border-gray-600 pt-4 mt-4\"> <span class=\"font-semibold text-lg\">Total Monthly Cost:</span> <span id=\"totalCost\" class=\"float-right font-semibold text-lg text-[#02F67C]\"></span> </div> </div> --> <div> <h2 class=\"text-xl font-semibold mb-4\">Estimated Costs</h2> <div class=\"bg-gray-800 p-4 rounded\"> <label class=\"block mb-3 text-sm\"> <span class=\"font-semibold\">Seats Cost:</span> <span id=\"seatsCost\" class=\"float-right\"></span> </label> <label class=\"block mb-3 text-sm\"> <span class=\"font-semibold\">Infrastructure Cost:</span> <span id=\"infrastructureCost\" class=\"float-right\"></span> </label> <label class=\"block mb-3 text-sm\"> <span class=\"font-semibold\">Support Cost:</span> <span id=\"supportCost\" class=\"float-right\"></span> </label> <label class=\"block mb-3 text-sm\"> <span class=\"font-semibold text-lg\">Total Monthly Cost:</span> <span id=\"totalCost\" class=\"float-right font-semibold text-lg text-[#02F67C]\"></span> </label> </div> </div> <h3 class=\"text-lg font-semibold mt-8 mb-4\">Scenario-Based Costs</h3> <div class=\"bg-gray-800 p-4 rounded\"> <div class=\"mb-4\"> <span class=\"font-semibold\">Efficient:</span> <span id=\"efficientCost\" class=\"float-right\"></span> </div> <div class=\"mb-4\"> <span class=\"font-semibold\">Unoptimized:</span> <span id=\"unoptimizedCost\" class=\"float-right\"></span> </div> <div class=\"mb-4\"> <span class=\"font-semibold\">Overloaded:</span> <span id=\"overloadedCost\" class=\"float-right\"></span> </div> </div> </div> </div> </div> <script> const currency = document.getElementsByName('currency'); const plan = document.getElementsByName('plan'); const seats = document.getElementById('seats'); const editorSeats = document.getElementById('editorSeats'); const enterpriseSeats = document.getElementById('enterpriseSeats'); const infrastructure = document.getElementsByName('infrastructure'); const pageviews = document.getElementById('pageviews'); const support = document.getElementById('support'); const seatsCost = document.getElementById('seatsCost'); const infrastructureCost = document.getElementById('infrastructureCost'); const supportCost = document.getElementById('supportCost'); const totalCost = document.getElementById('totalCost'); const efficientCost = document.getElementById('efficientCost'); const unoptimizedCost = document.getElementById('unoptimizedCost'); const overloadedCost = document.getElementById('overloadedCost'); const prices = { USD: { pro: { builder: 9 }, enterprise: { builder: 99, editor: 49 }, selfHosting: { requests: 0.0000008, bandwidth: 0.1 }, decoCloud: { requests: 0.000001, bandwidth: 1 }, support: { premium: 1000, enterprise: 2000 } }, BRL: { pro: { builder: 45 }, enterprise: { builder: 500, editor: 250 }, selfHosting: { requests: 0.000004, bandwidth: 0.5 }, decoCloud: { requests: 0.00004, bandwidth: 5 }, support: { premium: 5000, enterprise: 10000 } } }; function formatCurrency(amount, currencyCode) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount); } function calculateCosts() { const currencyCode = Array.from(currency).find(radio => radio.checked).value; const planType = Array.from(plan).find(radio => radio.checked).value; const numSeats = parseInt(seats.value); const numEditorSeats = parseInt(editorSeats.value); const infra = Array.from(infrastructure).find(radio => radio.checked).value; const views = parseInt(pageviews.value); const supportPlan = support.value; let totalSeatsCost = 0; if (planType === 'pro') { totalSeatsCost = numSeats * prices[currencyCode].pro.builder; } else { totalSeatsCost = (numSeats * prices[currencyCode].enterprise.builder) + (numEditorSeats * prices[currencyCode].enterprise.editor); } const infraCost = calculateInfrastructureCost(currencyCode, infra, views); const supportCostValue = supportPlan === 'free' ? 0 : prices[currencyCode].support[supportPlan]; const total = totalSeatsCost + infraCost + supportCostValue; seatsCost.textContent = formatCurrency(totalSeatsCost, currencyCode); infrastructureCost.textContent = formatCurrency(infraCost, currencyCode); supportCost.textContent = formatCurrency(supportCostValue, currencyCode); totalCost.textContent = formatCurrency(total, currencyCode); calculateScenarioCosts(currencyCode, infra, views); } function calculateInfrastructureCost(currencyCode, infra, views) { const requestsPerView = 10; const bandwidthPerView = 0.002; const monthlyRequests = views * requestsPerView; const monthlyBandwidth = views * bandwidthPerView; const requestCost = monthlyRequests * prices[currencyCode][infra].requests; const bandwidthCost = monthlyBandwidth * prices[currencyCode][infra].bandwidth; return requestCost + bandwidthCost; } function calculateScenarioCosts(currencyCode, infra, views) { const scenarios = { efficient: { requests: 7, bandwidth: 0.001 }, unoptimized: { requests: 10, bandwidth: 0.002 }, overloaded: { requests: 15, bandwidth: 0.003 } }; for (const [scenario, values] of Object.entries(scenarios)) { const monthlyRequests = views * values.requests; const monthlyBandwidth = views * values.bandwidth; const requestCost = monthlyRequests * prices[currencyCode][infra].requests; const bandwidthCost = monthlyBandwidth * prices[currencyCode][infra].bandwidth; const totalCost = requestCost + bandwidthCost; document.getElementById(`${scenario}Cost`).textContent = formatCurrency(totalCost, currencyCode); } } function updateUI() { const isEnterprise = plan.value === 'enterprise'; enterpriseSeats.style.display = isEnterprise ? 'block' : 'none'; seats.previousElementSibling.textContent = isEnterprise ? 'Number of Builder Seats' : 'Number of Seats'; calculateCosts(); } [...currency, ...plan, ...infrastructure, seats, editorSeats, pageviews, support].forEach(el => { el.addEventListener('change', updateUI); el.addEventListener('input', updateUI); }); updateUI(); </script> </body> </html>"
"__resolveType": "site/sections/Home/TextSection.tsx",
"description": "<p></p><p></p><p>Coming soon </p>"
}
},
{
Expand Down

0 comments on commit 5c20721

Please sign in to comment.