{"id":11,"date":"2026-06-14T18:39:38","date_gmt":"2026-06-14T18:39:38","guid":{"rendered":"https:\/\/demo.alovio.org\/wp\/live-demos\/"},"modified":"2026-07-07T07:16:01","modified_gmt":"2026-07-07T07:16:01","slug":"live-demos","status":"publish","type":"page","link":"https:\/\/demo.alovio.org\/wp\/","title":{"rendered":"Live demos"},"content":{"rendered":"<div class=\"alc-launch\">\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');\n  .alc-launch{ --coal:#0c0a09; --panel:#15100e; --line:#2c2420; --ash:#a8a29e; --ink:#fafaf9; --f1:#f97316; --f2:#fbbf24;\n    background:var(--coal); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif;\n    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:54px 22px 72px; }\n  .alc-launch *{ box-sizing:border-box; }\n  .alc-wrap{ max-width:1040px; margin:0 auto; }\n  .alc-kicker{ font:600 .78rem\/1 'JetBrains Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--f1); margin-bottom:14px; }\n  .alc-launch h1{ font-size:clamp(2rem,5vw,3rem); font-weight:700; letter-spacing:-.5px; margin:0 0 12px; color:var(--ink); }\n  .alc-launch h1 .fl{ background:linear-gradient(120deg,var(--f1),var(--f2)); -webkit-background-clip:text; background-clip:text; color:transparent; }\n  .alc-lede{ color:var(--ash); font-size:1.05rem; max-width:60ch; margin:0 0 36px; }\n  .alc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }\n  @media(max-width:880px){ .alc-grid{ grid-template-columns:repeat(2,1fr); } }\n  @media(max-width:560px){ .alc-grid{ grid-template-columns:1fr; } }\n  .alc-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:22px 20px 20px; overflow:hidden;\n    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; min-height:176px; display:flex; flex-direction:column; }\n  .alc-card:hover{ transform:translateY(-4px); border-color:#5a3a1e; box-shadow:0 18px 38px -20px rgba(249,115,22,.55); }\n  .alc-card__tag{ font:600 .68rem\/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--f2); margin-bottom:11px; }\n  .alc-card h3{ font-size:1.22rem; font-weight:700; margin:0 0 7px; color:var(--ink); }\n  .alc-card p{ color:var(--ash); font-size:.92rem; margin:0; flex:1; }\n  .alc-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; opacity:0; transform:translateY(6px); transition:opacity .16s ease,transform .16s ease; }\n  .alc-card:hover .alc-actions{ opacity:1; transform:none; }\n  @media(hover:none){ .alc-actions{ opacity:1; transform:none; } }\n  .alc-actions a{ flex:1 1 0; min-width:0; text-align:center; text-decoration:none; font-weight:600; font-size:.85rem; padding:9px 8px; border-radius:9px; white-space:nowrap; }\n  .alc-actions .u{ background-image:linear-gradient(135deg,var(--f1),var(--f2)); color:#fff; }\n  .alc-actions .a{ background:transparent; color:var(--ink); border:1px solid var(--line); }\n  .alc-actions .a:hover{ border-color:var(--f1); color:var(--f2); }\n  .alc-foot{ margin-top:34px; color:#57514d; font-size:.85rem; }\n  .alc-card--new{ border-color:#5a3a1e; box-shadow:0 0 0 1px rgba(249,115,22,.25) inset; }\n  .alc-badge{ position:absolute; top:14px; right:14px; font:600 .6rem\/1 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase;\n    color:var(--coal); background-image:linear-gradient(135deg,var(--f1),var(--f2)); padding:5px 8px; border-radius:6px; }\n<\/style>\n<div class=\"alc-wrap\">\n<div class=\"alc-kicker\">\/\/ alovio for wordpress<\/div>\n<h1>One builder, <span class=\"fl\">seven calculators.<\/span><\/h1>\n<p class=\"alc-lede\">Every calculator below was built with the <b>Alovio Calculator<\/b> \u2014 same builder, different industries. Open any as a <b>user<\/b> (the live quote form) or jump into the <b>admin<\/b> (the formula &amp; field builder) to see how it&#8217;s made. New in 2.0: the <b>Painting Quote<\/b> uses <b>repeatable line-item rows<\/b> \u2014 add a room and the estimate itemizes each one.<\/p>\n<div class=\"alc-grid\">\n<div class=\"alc-card alc-card--new\">\n      <span class=\"alc-badge\">New \u00b7 2.0<\/span><\/p>\n<div class=\"alc-card__tag\">Home services<\/div>\n<h3>Painting Quote<\/h3>\n<p>Add a row per room \u2014 area, finish and coats \u2014 and the estimate itemizes every line. The repeater in action.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/painting\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Home services<\/div>\n<h3>Cleaning Price<\/h3>\n<p>Per-m\u00b2 pricing with service levels and extras \u2014 plus a conditional note that appears only for express jobs.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/calculator\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Construction<\/div>\n<h3>Construction Cost<\/h3>\n<p>Area-based build estimate across finish levels \u2014 the classic &#8220;what will it cost&#8221; lead magnet.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/construction\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Agency<\/div>\n<h3>Web Design Estimate<\/h3>\n<p>Project type, page count and add-on services \u2014 a B2B project estimate with lead capture.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/web-design\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Beauty<\/div>\n<h3>Salon Pricing<\/h3>\n<p>Treatment and hair length \u2014 instant salon pricing customers can play with before booking.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/salon\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Energy<\/div>\n<h3>Solar Panel Quote<\/h3>\n<p>System size, panel tier and roof type \u2014 a modern quote form for a high-ticket purchase.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/solar\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">Events<\/div>\n<h3>Catering Quote<\/h3>\n<p>Guests, menu tier and staffing \u2014 per-head pricing that updates live as the event takes shape.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/catering\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"alc-foot\">Sandbox \u2014 explore freely, everything resets hourly.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\/\/ alovio for wordpress One builder, seven calculators. Every calculator below was built with the Alovio Calculator \u2014 same builder, different industries. Open any as a user (the live quote form) or jump into the admin (the formula &amp; field builder) to see how it&#8217;s made. New in 2.0: the Painting Quote uses repeatable line-item [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":3,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}