/* DESIGN BLAST SEO ROI CALCULATOR */
.db-roi {
--db-blue: #1261a0;
--db-dark: #111827;
--db-muted: #6b7280;
--db-border: #e5e7eb;
--db-light: #f7f9fc;max-width: 1100px;
margin: 0 auto;
font-family: inherit;
color: var(--db-dark);
}.db-roi * {
box-sizing: border-box;
}.db-roi-header {
text-align: center;
margin-bottom: 40px;
}.db-roi-header h2 {
margin: 0 0 10px;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
font-weight: 700;
}.db-roi-header p {
margin: 0 auto;
max-width: 650px;
color: var(--db-muted);
font-size: 17px;
line-height: 1.6;
}/* MAIN LAYOUT */
.db-roi-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}/* INPUT PANEL */
.db-roi-inputs {
border: 1px solid var(--db-border);
border-radius: 20px;
padding: 30px;
background: #fff;
}.db-roi-field {
margin-bottom: 30px;
}.db-roi-field:last-child {
margin-bottom: 0;
}.db-roi-label-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-bottom: 14px;
}.db-roi-label {
font-size: 15px;
font-weight: 600;
}.db-roi-value {
font-size: 16px;
font-weight: 700;
color: var(--db-blue);
white-space: nowrap;
}/* SLIDER */
.db-roi-slider {
width: 100%;
height: 6px;
appearance: none;
-webkit-appearance: none;
border-radius: 20px;
background: linear-gradient(
to right,
var(--db-blue) 0%,
var(--db-blue) var(--progress),
#e5e7eb var(--progress),
#e5e7eb 100%
);
outline: none;
cursor: pointer;
}.db-roi-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--db-blue);
border: 4px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
cursor: grab;
}.db-roi-slider::-webkit-slider-thumb:active {
cursor: grabbing;
}.db-roi-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--db-blue);
border: 4px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
cursor: grab;
}.db-roi-range {
display: flex;
justify-content: space-between;
margin-top: 9px;
color: #9ca3af;
font-size: 11px;
}/* RESULTS */
.db-roi-results {
border-radius: 20px;
padding: 30px;
background: var(--db-dark);
color: #fff;
}.db-roi-results-title {
margin: 0 0 24px;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .65;
}.db-roi-main-result {
padding-bottom: 25px;
border-bottom: 1px solid rgba(255,255,255,.12);
margin-bottom: 25px;
}.db-roi-main-label {
font-size: 14px;
opacity: .7;
margin-bottom: 6px;
}.db-roi-main-number {
font-size: clamp(36px, 5vw, 58px);
line-height: 1;
font-weight: 750;
color: #fff;
}.db-roi-main-number span {
font-size: 22px;
opacity: .7;
}.db-roi-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}.db-roi-card {
padding: 18px;
border-radius: 13px;
background: rgba(255,255,255,.07);
}.db-roi-card-label {
font-size: 12px;
opacity: .6;
margin-bottom: 7px;
}.db-roi-card-value {
font-size: 22px;
font-weight: 700;
}.db-roi-note {
margin-top: 25px;
font-size: 12px;
line-height: 1.6;
opacity: .5;
}/* CTA */
.db-roi-cta {
margin-top: 24px;
padding: 25px;
border: 1px solid var(--db-border);
border-radius: 20px;
text-align: center;
background: var(--db-light);
}.db-roi-cta h3 {
margin: 0 0 7px;
font-size: 20px;
}.db-roi-cta p {
margin: 0 0 17px;
color: var(--db-muted);
font-size: 14px;
}.db-roi-cta a {
display: inline-block;
padding: 13px 24px;
background: var(--db-blue);
color: #fff;
text-decoration: none;
border-radius: 9px;
font-weight: 600;
font-size: 14px;
}/* MOBILE */
@media (max-width: 768px) {.db-roi-layout {
grid-template-columns: 1fr;
}.db-roi-inputs,
.db-roi-results {
padding: 22px;
border-radius: 16px;
}.db-roi-result-grid {
grid-template-columns: 1fr 1fr;
}.db-roi-field {
margin-bottom: 27px;
}
}@media (max-width: 420px) {.db-roi-result-grid {
grid-template-columns: 1fr;
}.db-roi-label-row {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
}
Your Potential SEO Results
Estimated Additional Revenue
₹12,50,000
Current Monthly Leads
100
Expected Monthly Leads
150
Estimates are based on the information entered and are not a
guarantee of SEO performance. Actual results depend on search demand,
rankings, competition, conversion rates and other factors.
Want to know your actual SEO potential?
Get a free SEO assessment from Design Blast and discover where
your website can grow.
Get My Free SEO Assessment
(function () {const root = document.querySelector(".db-roi");if (!root || root.dataset.loaded) return;root.dataset.loaded = "true";const traffic = root.querySelector("#traffic");
const conversion = root.querySelector("#conversion");
const value = root.querySelector("#value");
const growth = root.querySelector("#growth");
const investment = root.querySelector("#investment");const trafficValue = root.querySelector("#trafficValue");
const conversionValue = root.querySelector("#conversionValue");
const customerValue = root.querySelector("#customerValue");
const growthValue = root.querySelector("#growthValue");
const investmentValue = root.querySelector("#investmentValue");const currentLeads = root.querySelector("#currentLeads");
const expectedLeads = root.querySelector("#expectedLeads");
const additionalLeads = root.querySelector("#additionalLeads");
const revenue = root.querySelector("#revenue");
const roi = root.querySelector("#roi");const numberFormat = new Intl.NumberFormat("en-IN", {
maximumFractionDigits: 1
});const moneyFormat = new Intl.NumberFormat("en-IN", {
style: "currency",
currency: "INR",
maximumFractionDigits: 0
});function updateSlider(slider) {const min = Number(slider.min);
const max = Number(slider.max);
const value = Number(slider.value);const progress =
((value - min) / (max - min)) * 100;slider.style.setProperty(
"--progress",
progress + "%"
);}function calculate() {const monthlyTraffic =
Number(traffic.value);const conversionRate =
Number(conversion.value) / 100;const customerValueAmount =
Number(value.value);const trafficGrowth =
Number(growth.value) / 100;const seoInvestment =
Number(investment.value);/* CURRENT LEADS */const current =
monthlyTraffic * conversionRate;/* EXPECTED TRAFFIC */const futureTraffic =
monthlyTraffic *
(1 + trafficGrowth);/* EXPECTED LEADS */const futureLeads =
futureTraffic * conversionRate;/* ADDITIONAL LEADS */const extraLeads =
futureLeads - current;/* ADDITIONAL REVENUE */const extraRevenue =
extraLeads *
customerValueAmount;/* ROI */let calculatedROI = 0;if (seoInvestment > 0) {calculatedROI =
(
(extraRevenue - seoInvestment)
/ seoInvestment
) * 100;}/* UPDATE LABELS */trafficValue.textContent =
numberFormat.format(monthlyTraffic);conversionValue.textContent =
Number(conversion.value).toFixed(1) + "%";customerValue.textContent =
moneyFormat.format(customerValueAmount);growthValue.textContent =
Number(growth.value) + "%";investmentValue.textContent =
moneyFormat.format(seoInvestment);/* UPDATE RESULTS */currentLeads.textContent =
numberFormat.format(current);expectedLeads.textContent =
numberFormat.format(futureLeads);additionalLeads.textContent =
"+" + numberFormat.format(extraLeads);revenue.textContent =
moneyFormat.format(extraRevenue);roi.textContent =
numberFormat.format(calculatedROI) + "%";/* UPDATE SLIDER VISUALS */updateSlider(traffic);
updateSlider(conversion);
updateSlider(value);
updateSlider(growth);
updateSlider(investment);}[
traffic,
conversion,
value,
growth,
investment
].forEach(function (slider) {slider.addEventListener(
"input",
calculate
);});calculate();})();
